Standardize responsive breakpoints (Refs #130)

src/lib/ui/styles/tokens.css

@@ -127,6 +127,14 @@
     --space-16: 64px;
     --space-24: 96px;
 
+    /* Responsive widths — use these literal pixel values in @media queries;
+       CSS custom properties cannot be used in media conditions. The style
+       checker reads this scale. See docs/development/ui-patterns.md. */
+    --breakpoint-xs: 360px; /* Extra-small screen adjustments. */
+    --breakpoint-sm: 640px; /* Compact controls, cards and page summaries. */
+    --breakpoint-md: 960px; /* Sidebar switches to the navigation drawer. */
+    --breakpoint-lg: 1100px; /* Dense, multi-column layouts reflow. */
+
     /* Radii — three steps + pill. Softer than the old 4/8/12. */
     --radius-sm: 6px;
     --radius-md: 10px;

src/routes/+layout.svelte

@@ -115,11 +115,12 @@
 
     onMount(() => {
         const stopTimeZone = startTimeZonePreference();
-        const desktop = window.matchMedia('(min-width: 961px)');
+        // Keep this identical to the sidebar's CSS query, including fractional widths.
+        const mobileNavigation = window.matchMedia('(max-width: 960px)');
         const closeDrawer = () => {
-            if (desktop.matches) drawerOpen = false;
+            if (!mobileNavigation.matches) drawerOpen = false;
         };
-        desktop.addEventListener('change', closeDrawer);
+        mobileNavigation.addEventListener('change', closeDrawer);
 
         const shortcuts = Object.fromEntries(
             visibleNavigation(data.user?.role ?? 'viewer')
@@ -181,7 +182,7 @@
         window.addEventListener('keydown', onKey);
         return () => {
             stopTimeZone();
-            desktop.removeEventListener('change', closeDrawer);
+            mobileNavigation.removeEventListener('change', closeDrawer);
             window.removeEventListener('keydown', onKey);
             if (armTimer) clearTimeout(armTimer);
         };
@@ -705,7 +706,7 @@
             margin-left: 0;
         }
     }
-    @media (max-width: 720px) {
+    @media (max-width: 640px) {
         .app-header {
             padding-inline: var(--space-2);
             gap: var(--space-1);

src/routes/+page.svelte

@@ -1019,7 +1019,7 @@
         overflow: hidden;
         clip-path: inset(50%);
     }
-    @media (max-width: 1000px) {
+    @media (max-width: 1100px) {
         .attention-row {
             grid-template-columns: minmax(0, 1fr) auto;
         }
@@ -1027,7 +1027,7 @@
             grid-column: 1;
         }
     }
-    @media (max-width: 600px) {
+    @media (max-width: 640px) {
         .page {
             gap: var(--space-3);
         }