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));

todo/TODO_2026-06-20_pre-launch.md

@@ -1098,3 +1098,21 @@ has a persisted cache; channel/search now render optimistically from
       dedupe-by-root + canAccess in `buildRenderableChannelVideos` handle
       precedence/gating. Logic extracted to a helper so channelProfile.js stayed
       under its size cap. Tests + mutation-verified.
+
+### 40. Dead @media queries: `var()` in media conditions is invalid (BUG, broad)
+Found 2026-06-25 while fixing the profile-modal mobile grid. Many media queries use
+`@media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset)))`.
+CSS custom properties are NOT allowed inside `@media` conditions — Chromium/Brave
+drop the ENTIRE block, so all those rules are DEAD (confirmed via matchMedia: the
+`var()` form returns false where it should match; the literal `calc(... - 0.02px)`
+works). The `--breakpoint-edge-offset` token was introduced to satisfy the
+design-token lint (no raw measurements), but it silently broke every media query
+that used it.
+- [ ] Audit all `var(--breakpoint-edge-offset)` (and any other `var()`) inside
+      `@media` conditions in `css/tailwind.source.css` and replace with a valid
+      literal-resolving form (e.g. `@media (max-width: theme("screens.lg"))`, which
+      compiles to a literal). The profile-modal nav grid (#7) already uses this.
+- [ ] Decide whether the token-lint should EXEMPT @media conditions (so the offset
+      token can stay) or whether to drop the offset pattern entirely.
+- [ ] Re-verify the responsive rules that were silently dead (e.g. the profile-modal
+      menu/pane-hide block, and the line ~1398/1433 player/modal rules).