2.7.6

Style tidy

assets/about.css

@@ -42,7 +42,7 @@ header a {
   padding-bottom: 2px;
   transition: color 0.2s, border-color 0.2s;
 }
-header a:hover { color: #c8922a; border-bottom-color: rgba(200,146,42,0.5); }
+header a:hover { color: #1e1208; border-bottom-color: #1e1208; text-decoration: none; }
 header a.active { color: #c8922a; }
 
 /* Desktop: nav-links renders inline as part of header flex row */

assets/css/base.css

@@ -112,8 +112,8 @@ body {
 }
 
 .utci-topnav a:hover {
-  color: #c8922a;                       /* brass on hover */
-  border-bottom-color: #c8922a80;       /* faint underline */
+  color: #1e1208;
+  border-bottom-color: #1e1208;
 }
 
 /* Desktop: nav-links renders inline as part of nav flex row */

assets/css/header.css

@@ -426,8 +426,8 @@
     grid-template-columns: 1fr;   /* single column — stack title, dial, search */
     grid-template-areas: none;    /* flow in DOM order: left, dial, selector, why */
     gap: 20px;
-    padding-bottom: 24px;
-    margin-bottom: 24px;
+    padding-bottom: 15px;
+    margin-bottom: 0px;
   }
 
   /* Clear the desktop area placement so children stack in DOM order */

assets/css/table.css

@@ -12,6 +12,8 @@
 .utci-day-tabs-wrap {
   position: relative;
   margin-top: 12px;
+  margin-bottom: 15px;
+  border: 1px solid #c9b08a;
 }
 
 /* Edge fade gradients — only show when there's content to scroll to. */
@@ -595,6 +597,17 @@
   .utci-thead-sticky {
     top: 72px;
   }
+
+  /* Shrink the day-tab labels on phones so more days stay readable
+     within the viewport before the tab strip needs to scroll. */
+  .utci-day-tab {
+    font-size: 9px;
+    padding: 10px 12px;
+  }
+
+  .utci-day-date {
+    font-size: 12px;
+  }
 }
 
 /* The shifted track inside the sticky header — JS sets transform:translate3d

assets/css/ui.css

@@ -1075,13 +1075,13 @@
   }
 
   .scope-ring {
-    width: 250px;
-    height: 250px;
+    width: 225px;
+    height: 225px;
     margin: 0 auto;
   }
 
   .scope-env-row {
-    width: 250px;
+    width: 225px;          /* kept in step with the dial width above */
   }
 
   /* Halve the hourly-table cell padding on mobile so more columns fit
@@ -1102,17 +1102,23 @@
 }
 
 /* At ≤640px the top nav becomes position:fixed (72px tall, see base.css),
-   so the app needs 96px of top padding to clear it. This must come AFTER the
+   so the app needs top padding to clear it. This must come AFTER the
    max-width:800px rule above — which sets padding-top:52px for the tablet
    range where the nav is NOT fixed — so it wins the cascade on true mobile. */
 @media (max-width: 640px) {
   .utci-app {
-    padding-top: 96px;
+    padding-top: 80px;
   }
 
   .utci-fetch-time {
     text-align: center;   /* override the default left-align on mobile */
   }
+
+  /* Hide the export panel on phones — no room for it, and the export
+     actions aren't useful at this size. */
+  .export-panel {
+    display: none;
+  }
 }
 
 

assets/js/components/DayTabs.js

@@ -349,17 +349,6 @@ export function DayTabs({
                 filter: isActive ? 'saturate(1.1) brightness(1.04)' : 'none',
               }}
             >
-              <span style=${{
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: isActive ? '8px' : '7px',
-                background: band.bg,
-                borderTop: '1px solid #c9b08a',
-                borderRadius: '0 0 2px 2px',
-                transition: 'height 0.1s',
-              }} aria-hidden="true"></span>
               ${locked && html`
                 <span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.75 }}>🔒</span>`}
               ${dayName}
@@ -584,36 +573,6 @@ export function DayTabs({
           </div>`;
       })()}
 
-      ${(() => {
-        const band      = confidenceBand(selectedDay);
-        const isOutlook = selectedDay >= 7;
-        return html`
-          <div style=${{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '10px',
-            margin: '0 0 14px',
-            padding: '6px 10px',
-            background: band.tint,
-            borderLeft: `3px solid ${band.edge}`,
-            borderBottom: `1px solid ${band.edge}`,
-            borderRadius: '0 4px 4px 0',
-            fontSize: '12px',
-            color: '#3a2a18',
-            fontFamily: 'Manrope, sans-serif',
-            fontWeight: 600,
-            flexWrap: 'wrap',
-          }}>
-            <span style=${{ letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700 }}>
-              Day ${selectedDay + 1} of 14 · Forecast clarity: ${band.label}
-            </span>
-            ${isOutlook && html`
-              <span style=${{ opacity: 0.7, fontStyle: 'italic' }}>
-                forecast skill is reduced — treat hourly detail as trend, not precision
-              </span>`}
-          </div>`;
-      })()}
-
 
     </${Fragment}>`;
 }