fix(mobile): 44px touch targets for room rows + space rail (M6)

Mobile-audit batch 6. Bump the primary always-visible tap targets to a 44px
touch area on phones, via mobile-gated CSS only (desktop/tablet >750px keep the
denser sizing).

- NavItemBase (room/nav list row): minHeight 36 -> 44 at <=750px.
- SidebarItem (space-rail button): minWidth/minHeight -> 44 at <=750px (was 42).

The room lists are virtualized with ref=virtualizer.measureElement on every row,
so rows are measured to their actual height — the taller mobile rows can't
overlap/clip. Verified desktop-unchanged and virtualizer-safe by two review
passes. (A blanket app-wide size=300 button sweep was intentionally NOT done:
most such buttons are hover-gated and never appear on mobile; the primary
tap targets above are the high-value fixes.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/nav/styles.css.ts

@@ -53,6 +53,11 @@ const NavItemBase = style({
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),
+  '@media': {
+    // The room/nav row is the app's primary tap target; give it a 44px touch
+    // area on phones (desktop stays the denser 36px).
+    '(max-width: 750px)': { minHeight: toRem(44) },
+  },
 
   selectors: {
     '&:hover, &:focus-visible': {

src/app/components/sidebar/Sidebar.css.ts

@@ -81,6 +81,10 @@ export const SidebarItem = recipe({
       justifyContent: 'center',
       position: 'relative',
       transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+      '@media': {
+        // Space-rail buttons to a 44px touch target on phones (2px larger).
+        '(max-width: 750px)': { minWidth: toRem(44), minHeight: toRem(44) },
+      },
 
       selectors: {
         '&:hover': {