2.2

Add new quick summary panels and update layout to make space for them

assets/css/header.css

@@ -6,17 +6,41 @@
 
 .utci-header {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;  /* title | dial | search */
-  gap: 32px;
+  grid-template-columns: 1fr auto 1fr;  /* left | dial | why */
+  grid-template-areas:
+    "hleft dial hright"
+    ".     env  .";
+  column-gap: 32px;
+  row-gap: 6px;
   align-items: center;
   padding-bottom: 6px;
   margin-bottom: 6px;
 }
 
+/* Side columns occupy only the dial's row, so they vertically centre against
+   the dial itself; the environment selector drops to its own row beneath. */
+.header-left  { grid-area: hleft; }
+.scope-col    { grid-area: dial; }
+.scope-env-bar { grid-area: env; }
+.header-right { grid-area: hright; }
+
+/* Left column — wordmark, tagline, search and location stacked together */
+.header-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.header-left .utci-search-wrap {
+  margin-top: 18px;
+}
+
+/* Right column — now hosts the "Why it feels like this" panel,
+   sitting close to the dial it explains. */
 .header-right {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: flex-start;
   justify-content: center;
 }
 
@@ -61,7 +85,7 @@
   margin-top: 8px;
   margin-bottom: 0;
   color: #1e1208;
-  text-align: right;
+  text-align: left;
 }
 
 /* The lat/lon below the location */
@@ -91,6 +115,16 @@
   gap: 8px;
 }
 
+/* The environment selector sits just below the dial, centred under it.
+   Kept out of .scope-col so the dial alone defines that column's height
+   and stays vertically centred against the side columns. */
+.scope-env-bar {
+  display: flex;
+  justify-content: center;
+  margin-top: 2px;
+  margin-bottom: 4px;
+}
+
 .scope-env-row {
   display: flex;
   flex-direction: column;
@@ -261,11 +295,20 @@
 @media (max-width: 640px) {
   .utci-header {
     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;
   }
 
+  /* Clear the desktop area placement so children stack in DOM order */
+  .header-left,
+  .scope-col,
+  .scope-env-bar,
+  .header-right {
+    grid-area: auto;
+  }
+
   .header-right {
     align-items: flex-start;      /* left-align location on mobile */
   }