5.4.0

Restructure
New Journal entries
Colour tabs update with wind

assets/css/ui.css

@@ -1110,7 +1110,9 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 3px;
-  margin-top: 0.5rem;
+  /* Was 0.5rem — the recents now follow the tool row, so they need a clearer
+     break above them. */
+  margin-top: 1.25rem;
 }
 /* header.css sets align-items: center for the same tablet breakpoint, but
    since ui.css is @imported after header.css in sunscope.css it wins at
@@ -1381,9 +1383,15 @@
   }
 
   .utci-app {
-    padding: 52px 10px 32px;
+    /* No top padding — the header is in the flow at the very top of the page.
+       Was 52px, reserving space for the nav back when it was absolutely
+       positioned over it. Narrowing --app-pad re-aims the header's and the
+       event note's full-bleed at the same time. */
+    --app-pad: 10px;
+    padding: 0 var(--app-pad) 32px;
   }
 
+
   .utci-header {
     grid-template-columns: 1fr;         /* stack the 3 header columns */
     text-align: center;
@@ -1393,9 +1401,7 @@
     align-items: center;
   }
 
-  .utci-current-loc,
-  .utci-loc-coords,
-  .utci-fetch-time {
+  .utci-current-loc {
     text-align: center;
   }
 
@@ -1446,10 +1452,6 @@
     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 {
@@ -1524,6 +1526,15 @@
   max-width: 300px;
 }
 
+/* "Last update" closes the panel out — a hairline above it keeps it apart
+   from the contribution rows it follows. */
+.insight-panel--why .utci-fetch-time {
+  text-align: right;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid #ede4cc;
+}
+
 /* Solar model selector inside the Why it feels like panel */
 .insight-env-footer {
   display: flex;
@@ -1627,10 +1638,13 @@
 }
 
 /* Week rows carry a score bar, so they are a two-line grid rather than the
-   single flex line the glance rows use: day and window on top, bar beneath. */
+   single flex line the glance rows use: day and window on top, bar beneath.
+   Day and window read as one sentence - "Sun 30 : all day" - so they sit
+   together at the left rather than being pushed to opposite edges, where the
+   gap between them made two short phrases look like two columns of data. */
 .insight-panel--week .insight-row {
   display: grid;
-  grid-template-columns: 20px 1fr auto;
+  grid-template-columns: 20px auto minmax(0, 1fr);
   grid-template-areas:
     "icon  label value"
     "icon  score score";
@@ -1639,8 +1653,42 @@
   align-items: center;
 }
 .insight-panel--week .insight-icon  { grid-area: icon; }
-.insight-panel--week .insight-label { grid-area: label; }
-.insight-panel--week .insight-value { grid-area: value; }
+.insight-panel--week .insight-label { grid-area: label; flex: none; }
+.insight-panel--week .insight-value {
+  grid-area: value;
+  text-align: left;
+  flex-shrink: 1;
+  min-width: 0;
+}
+/* The separator is drawn, not written into the string, so the value stays a
+   plain window ("all day") everywhere else it is used. */
+.insight-panel--week .insight-value::before {
+  content: ': ';
+  color: #8a8375;
+  font-weight: 400;
+}
+
+/* The washout row - no day qualified, so there is no day name and no score,
+   just a sentence. Forcing it through the day-and-window layout squeezed that
+   sentence into the narrow value column and stranded the colon on a line of
+   its own, so it gets the full width and drops the separator. Specificity is
+   raised past the rail rules below deliberately: this row stacks at every
+   width. */
+.insight-panel--week .insight-row.insight-row--week-note {
+  grid-template-columns: 20px minmax(0, 1fr);
+  grid-template-areas:
+    "icon label"
+    "icon value";
+  align-items: start;
+  row-gap: 2px;
+}
+.insight-panel--week .insight-row--week-note .insight-icon { padding-top: 2px; }
+.insight-panel--week .insight-row--week-note .insight-value {
+  font-family: Manrope, sans-serif;
+  font-weight: 500;
+  white-space: normal;
+}
+.insight-panel--week .insight-row--week-note .insight-value::before { content: none; }
 
 /* How good the day is out of 100 — the bar does the comparing, the number
    settles close calls. */
@@ -1765,6 +1813,7 @@
   margin: -6px 0 10px;
 }
 
+
 .insight-thermal-cat {
   display: inline-block;
   padding: 2px 7px;
@@ -1930,14 +1979,20 @@
     row-gap: 1px;
     align-items: start;
   }
-  /* The rail is only 240px wide, so the window drops under the day name and
-     the score bar takes a third line rather than sharing one. */
+  /* The rail is only 240px wide, but "Sun 30 : all day" still fits on one
+     line, so the week rows keep day and window together and give the score
+     bar the second line - unlike the glance rows, which stack. */
   .insight-panel--week .insight-row {
+    grid-template-columns: 20px auto minmax(0, 1fr);
     grid-template-areas:
-      "icon label"
-      "icon value"
-      "icon score";
+      "icon label value"
+      "icon score score";
     row-gap: 3px;
+    align-items: center;
+  }
+  .insight-panel--week .insight-label,
+  .insight-panel--week .insight-value {
+    font-size: 14px;
   }
   .insight-panel--glance .insight-icon,
   .insight-panel--week .insight-icon {