Remove stale 5-button grid nav rules that broke the 6-tab horizontal layout

The real reason the mobile nav still wrapped into a tall stack: deeper
in style.css (lines ~3260, ~3876, ~3950, ~3978) the original mobile
design used `display: grid` with explicit grid-column overrides for the
4th/5th nav buttons. Those rules sit AFTER the @media block I added at
line 244, so same-specificity source-order made them win — flipping
the nav back from flex to a 3-column grid that no longer fits 6 items.

Removed/neutered those legacy grid rules (designed for the old 5-tab
nav) and added `display: flex !important` plus `grid-template-columns:
none !important` to the new @media block so any future grid rule can't
sneak back in. Result: on screens ≤720px the nav is a single flex row
with horizontal scroll, no matter the source order.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

css/style.css

@@ -238,17 +238,17 @@ body {
 }
 
 /* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
-   on a single row instead of breaking into a tall stack. !important is
+   on a single row instead of breaking into a tall stack. */
-   used defensively here — any cached older CSS or future style overrides
-   shouldn't be able to bring back the wrapped layout on phones. */
 @media (max-width: 720px) {
     .main-nav {
+        display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scroll-snap-type: x proximity;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
+        grid-template-columns: none !important;
         gap: 4px !important;
         padding: 6px !important;
     }
@@ -263,6 +263,7 @@ body {
         scroll-snap-align: start;
         padding: 10px 14px !important;
         font-size: 0.88rem !important;
+        grid-column: auto !important;
     }
 }
 
@@ -3257,34 +3258,13 @@ select {
         transform: translateX(16px);
     }
 
-    /* Navigation - grid layout for mobile */
+    /* Mobile navigation tweaks — horizontal-scroll layout is defined at the
+       top of this file (@media max-width: 720px). Here we only adjust the
+       outer margin for the smaller breakpoint. */
     .main-nav {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px;
-        padding: 6px;
         margin-bottom: 12px;
     }
 
-    .nav-btn {
-        padding: 10px 6px;
-        font-size: 0.75rem;
-        text-align: center;
-        min-width: 0;
-        flex: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* Make settings button span 2 columns for 5 items grid */
-    .nav-btn:nth-child(4) {
-        grid-column: 1 / 2;
-    }
-    .nav-btn:nth-child(5) {
-        grid-column: 2 / 4;
-    }
-
     .panel {
         padding: 12px;
         border-radius: var(--radius-md);
@@ -3873,20 +3853,9 @@ select {
         font-size: 1rem;
     }
 
-    .main-nav {
+    /* Mobile nav layout is defined in the top-level @media (max-width: 720px)
-        grid-template-columns: repeat(2, 1fr);
+       — horizontal scroll with nowrap. We don't need to redefine it for
-        gap: 4px;
+       480px; everything inherits. */
-    }
-
-    /* Adjust nav buttons for 2-column grid */
-    .nav-btn:nth-child(5) {
-        grid-column: 1 / 3;
-    }
-
-    .nav-btn {
-        padding: 10px 4px;
-        font-size: 0.7rem;
-    }
 
     .panel {
         padding: 10px;
@@ -3947,9 +3916,11 @@ select {
         font-size: 0.9rem;
     }
 
+    /* Keep nav button text readable even on tiny phones, but smaller than
+       720px breakpoint. */
     .nav-btn {
-        font-size: 0.65rem;
+        font-size: 0.78rem !important;
-        padding: 8px 2px;
+        padding: 9px 11px !important;
     }
 
     .panel {
@@ -4005,14 +3976,7 @@ select {
 
 /* Landscape phones */
 @media (max-width: 768px) and (orientation: landscape) {
-    .main-nav {
+    /* Navigation uses the horizontal-scroll layout from the 720px block. */
-        grid-template-columns: repeat(5, 1fr);
-    }
-
-    .nav-btn:nth-child(4),
-    .nav-btn:nth-child(5) {
-        grid-column: auto;
-    }
 
     .floating-action-bar {
         bottom: 6px;