Polish the mobile nav dropdown; rename Day to Day Detail (#121)

- Compact the mobile menu: narrower panel (208px), tighter rows, and the nav
  list now stretches to the panel width and left-aligns (it was centering because
  the base .view-nav align-self:center overrode the panel's stretch).
- Stylish separation between entries: an inset hairline between each nav item,
  suppressed around the active pill so nothing crosses it.
- Rename the "Day" view to "Day Detail" across the app nav, and add it to the
  climate/city page nav (base.html.j2), which was missing it.

static/calendar.html

@@ -39,7 +39,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar" class="active">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>

static/compare.html

@@ -40,7 +40,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare" class="active">Compare</a>
         <a href="climate">Climate</a>
       </nav>

static/day.html

@@ -40,7 +40,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day" class="active">Day</a>
+        <a href="day" data-view="day" class="active">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>

static/index.html

@@ -43,7 +43,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map" class="active">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>

static/legend.html

@@ -39,7 +39,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>

static/style.css

@@ -1340,10 +1340,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
      never runs off-screen (this also fixes the SEO/city pages, whose only panel
      item is the nav). Contents stack nav → °F/°C → account top-to-bottom. */
   .nav-panel {
-    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
+    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
     position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
-    margin: 0; padding: 10px; width: max-content; min-width: 224px;
+    margin: 0; padding: 8px; width: min(208px, calc(100vw - 32px));
-    max-width: calc(100vw - 28px);
     background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
   }
@@ -1351,17 +1350,29 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   /* Reset the desktop cluster order — the dropdown wants plain DOM order. */
   .nav-panel > .unit-toggle, .nav-panel > .acct, .nav-panel > .view-nav { order: 0; }
 
-  /* Nav links: a full-width vertical list, hairline-separated from the controls
+  /* Nav links: a compact, left-aligned list with an inset hairline between each
-     below (the :not(:last-child) keeps SEO pages — nav only — divider-free). */
+     entry (suppressed around the active pill so nothing crosses it). The whole
+     group is hairline-separated from the controls below — the :not(:last-child)
+     keeps SEO pages, which have nav only, divider-free. */
   .view-nav {
-    display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
+    display: flex; flex-direction: column; align-items: stretch; align-self: stretch;
+    gap: 0; margin: 0; width: auto;
     background: transparent; border: 0; border-radius: 0; padding: 0;
   }
   .nav-panel > .view-nav:not(:last-child) {
-    padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border);
+    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
   }
-  .view-nav a { min-height: 44px; padding: 11px 12px; justify-content: flex-start; border-radius: 9px; }
+  .nav-panel .view-nav a {
-  .view-nav a + a::before { display: none; }
+    min-height: 40px; padding: 8px 12px; justify-content: flex-start;
+    border-radius: 8px; position: relative;
+  }
+  .nav-panel .view-nav a + a::before { display: none; }
+  .nav-panel .view-nav a:not(:last-child)::after {
+    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
+    height: 1px; background: var(--border);
+  }
+  .nav-panel .view-nav a.active::after,
+  .nav-panel .view-nav a:has(+ a.active)::after { display: none; }
 
   /* °F/°C toggle: full-width segmented control inside the dropdown. */
   .nav-panel > .unit-toggle { margin: 0; width: 100%; align-self: stretch; }

static/subscriptions.html

@@ -37,7 +37,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>