From adf0488df8d54a2a828803db80120dacb938001b Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Jun 2026 20:09:52 -0400
Subject: [PATCH] fix(css): replace var() in @media conditions with literal
 (#40)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS custom properties are invalid inside @media conditions — Chromium/Brave drop
the whole block — so every `@media (max-width: calc(theme("screens.lg") -
var(--breakpoint-edge-offset)))` was DEAD. The offset token was added to satisfy the
design-token lint, but `0.02px` is already exempt there, so the token was never
needed and silently broke the queries.

Swapped var(--breakpoint-edge-offset) → 0.02px in all 4 @media conditions (valid,
lint-clean, exclusive breakpoint preserved). Verified valid via matchMedia. This
re-activates 3 previously-dead mobile blocks that were intended but never worked:
full-screen modals on mobile, profile-modal menu/pane switching, and the video-card
tap-active state (plus the profile-nav app-grid).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 css/tailwind.source.css            |  8 ++++----
 todo/TODO_2026-06-20_pre-launch.md | 12 +++++++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 01c146f2..015e13c5 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -1395,7 +1395,7 @@
     overscroll-behavior: contain;
   }
 
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .bv-modal {
       align-items: stretch;
       justify-content: stretch;
@@ -3130,7 +3130,7 @@
     }
   }
 
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .profile-modal__layout[data-mobile-view="menu"]
       .profile-modal__pane-wrapper {
       display: none;
@@ -3148,7 +3148,7 @@
      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")) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .profile-modal__nav {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -6122,7 +6122,7 @@
   }
 
   /* Mobile Active State */
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .card[data-mobile-active="true"] {
       --video-card-lift-translate-y: var(--motion-video-card-hover-translate);
       --video-card-backdrop-opacity: 0.425;
diff --git a/todo/TODO_2026-06-20_pre-launch.md b/todo/TODO_2026-06-20_pre-launch.md
index cba04e73..783f6e9c 100644
--- a/todo/TODO_2026-06-20_pre-launch.md
+++ b/todo/TODO_2026-06-20_pre-launch.md
@@ -1099,7 +1099,7 @@ has a persisted cache; channel/search now render optimistically from
       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)
+### 40. Dead @media queries: `var()` in media conditions is invalid — FIXED 2026-06-25
 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
@@ -1116,3 +1116,13 @@ that used it.
       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).
+
+- [x] **FIXED 2026-06-25.** Replaced `var(--breakpoint-edge-offset)` with the literal
+      `0.02px` in all 4 `@media` conditions (`css/tailwind.source.css`). `0.02px` was
+      ALREADY exempt in the design-token lint, so the offset token was never needed —
+      using it just produced invalid, dead media queries. Verified valid via matchMedia.
+      This RE-ACTIVATES 3 previously-dead mobile blocks (intended behavior that had
+      silently never worked): full-screen modals on mobile, profile-modal menu/pane
+      switching, and the video-card tap-active state — plus the profile-nav app-grid.
+- [ ] **VERIFY live on a phone**: modals should now be full-screen; tapping a video
+      card shows the active lift/accent/marquee; profile modal tabs are the app-grid.