fix(mobile): profile-modal grid was in a dead @media block (var() in condition)

The profile-modal nav app-grid never applied because its @media condition used
`calc(theme("screens.lg") - var(--breakpoint-edge-offset))` — CSS custom
properties are invalid inside @media conditions, so Chromium/Brave drop the whole
block (confirmed via matchMedia). My earlier in-browser preview used !important,
which bypassed the media query and masked it.

Moved the grid rules into a valid `@media (max-width: theme("screens.lg"))` block
(theme() resolves to a literal at build time). Cascade verified without !important:
display:grid, 3 columns, flex-direction:column. Lint clean.

Filed #40: the same var()-in-@media pattern silently breaks many other responsive
rules (it was added to satisfy the token lint) — needs a broader audit.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

css/tailwind.source.css

@@ -3139,10 +3139,16 @@
     .profile-modal__layout[data-mobile-view="pane"] .profile-modal__menu {
       display: none;
     }
+  }
 
-    /* Mobile: the profile tab nav (full-width menu view) becomes an app-grid —
-       icon tiles with the title centered below each icon, instead of the desktop
-       vertical list. Desktop (>=lg) keeps its vertical nav, unchanged. */
+  /* Mobile: the profile tab nav (full-width menu view) becomes an app-grid — icon
+     tiles with the title centered below each icon, instead of the desktop vertical
+     list. Desktop (>=lg) keeps its vertical nav (the min-width:lg rule below wins
+     at the exact breakpoint via source order). NOTE: the @media condition must NOT
+     use a CSS `var()` — custom properties are invalid inside media conditions and
+     Chromium drops the whole block. `theme("screens.lg")` resolves to a literal at
+     build time, which is valid. */
+  @media (max-width: theme("screens.lg")) {
     .profile-modal__nav {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));