Redesign main app: slim top bar, dynamic sky hero, nowcast, scrub chart, unified palette

- One slate/blue palette across the app, dashboard, account/login pages (data colours
  stay orange = warm, blue = cool on the dashboard)
- Slim sticky top bar with location chip, gear (settings) and ? (learn); 4-tab nav
  (Now, Station, Map, Alerts) with a thumb-reach bottom bar on phones
- Hero sky gradient by condition/time with rain, storm, snow and star effects
  (respects reduced motion); keeps the searched city and badges when temps come from your station
- One-line summary, 'Next 2 hours' bars and rain countdown from 15-minute precipitation,
  rain/cold-aware 'Bring' chips; yesterday + 'vs usual' context from the station
- Scrubbable hourly chart (temp, rain chance, wind), 7-day range bars, AQI gauge,
  details tiles instead of drawers, taller radar with location marker + alert polygons
- Skeleton loading instead of a full-screen spinner, sticky section headers, safe areas
- Server: minutely_15 precipitation, public /api/station/summary

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/public/app-ui.css

@@ -0,0 +1,209 @@
+/* Main app redesign layer: slim top bar, dynamic sky hero, nowcast, scrub chart, tiles, skeletons */
+:root {
+  --sky-text: #ffffff;
+  --blue-grad: linear-gradient(160deg, #2563eb 0%, #3b82f6 55%, #93c5fd 100%);
+  --topbar-h: 58px;
+}
+html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
+body { overscroll-behavior-y: none; }
+button, a, summary { touch-action: manipulation; }
+
+/* ── Layout ── */
+.app { max-width: 980px; padding: 0 1rem 4rem; }
+@media (min-width: 900px) { .app { padding: 0 1.5rem 4rem; } }
+
+/* ── Slim top bar ── */
+.topbar {
+  position: sticky; top: 0; z-index: 200;
+  display: flex; align-items: center; gap: 0.75rem;
+  margin: 0 -1rem 1rem; padding: calc(0.55rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.55rem calc(1rem + env(safe-area-inset-left, 0px));
+  min-height: var(--topbar-h);
+  background: color-mix(in srgb, var(--paper) 86%, transparent);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
+}
+@media (min-width: 900px) { .topbar { margin: 0 -1.5rem 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
+.brand { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; flex-shrink: 0; }
+.brand-mark { color: var(--accent); font-size: 1.3rem; line-height: 1; }
+.topbar .tabs { border: none; border-radius: 999px; background: var(--paper-dark); padding: 3px; gap: 2px; margin: 0 auto; overflow: visible; }
+.topbar .tab { border: none; border-radius: 999px; min-height: 36px; padding: 0 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-light); position: relative; }
+.topbar .tab:hover { color: var(--ink); }
+.topbar .tab.active { background: var(--accent); color: #fff; }
+.topbar-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; min-width: 0; }
+.tabs + .topbar-actions { margin-left: 0; }
+.loc-chip {
+  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; max-width: 46vw; padding: 0 0.85rem;
+  border: 1px solid var(--border); border-radius: 999px; background: var(--paper-dark); color: var(--ink);
+  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
+}
+.loc-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.loc-chip-ico { font-size: 1.1rem; line-height: 1; color: var(--accent); }
+.icon-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0;
+  border: 1px solid var(--border); border-radius: 50%; background: var(--paper-dark); color: var(--ink-light);
+  font: inherit; font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
+}
+.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
+.icon-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+@media (max-width: 640px) {
+  .app { padding: 0 0.9rem max(5.5rem, calc(5rem + env(safe-area-inset-bottom, 0px))); }
+  .topbar { margin: 0 -0.9rem 0.8rem; }
+  .brand-name { display: none; }
+  .topbar .tabs { display: none; }
+  .loc-chip { flex: 1; max-width: none; justify-content: flex-start; }
+  .icon-btn[href="/dashboard"] { display: none; } /* reachable from Settings */
+}
+
+/* ── Bottom nav (4 tabs) in the shared palette ── */
+.bottom-nav { background: color-mix(in srgb, var(--paper-dark) 94%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
+.bottom-tab { color: var(--ink-light); border-right: none; min-height: 58px; position: relative; }
+.bottom-tab.active { color: var(--accent); background: transparent; }
+.bottom-tab.active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
+.bottom-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+
+/* ── Location header ── */
+.loc-header { background: transparent; border: none; padding: 0.1rem 0.15rem; margin-bottom: 0.6rem; }
+.loc-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
+.loc-sub, .loc-time { font-size: 0.78rem; color: var(--ink-light); }
+
+/* ── Shared card surface ── */
+.ui-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.4rem; }
+.ui-card .section-head { margin-bottom: 0.7rem; }
+
+/* ── Dynamic sky hero ── */
+.hero {
+  position: relative; overflow: hidden; isolation: isolate; color: var(--sky-text);
+  background: var(--blue-grad); border: none; border-radius: 22px; padding: 1.6rem 1.3rem; margin-bottom: 0.9rem;
+  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18); transition: background .6s ease;
+  --card-sub: rgba(255,255,255,0.82); --card-ink: #fff;
+}
+.hero[data-sky="clear-day"]   { background: linear-gradient(160deg, #1d4ed8 0%, #3b82f6 55%, #bae6fd 100%); }
+.hero[data-sky="clear-night"] { background: linear-gradient(160deg, #0b1330 0%, #1e2a5a 60%, #3b2f6b 100%); box-shadow: 0 10px 30px rgba(11,19,48,.5); }
+.hero[data-sky="cloudy-day"]  { background: linear-gradient(160deg, #475569 0%, #64748b 55%, #94a3b8 100%); box-shadow: 0 10px 30px rgba(71,85,105,.25); }
+.hero[data-sky="cloudy-night"]{ background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%); }
+.hero[data-sky="rain"]        { background: linear-gradient(160deg, #1e293b 0%, #334155 55%, #475569 100%); }
+.hero[data-sky="storm"]       { background: linear-gradient(160deg, #1a1033 0%, #2f2a55 55%, #45406b 100%); }
+.hero[data-sky="snow"]        { background: linear-gradient(160deg, #64748b 0%, #94a3b8 55%, #cbd5e1 100%); }
+.hero[data-sky="fog"]         { background: linear-gradient(160deg, #64748b 0%, #94a3b8 60%, #cbd5e1 100%); }
+.sky-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
+.hero-temp { font-family: 'Barlow Condensed', var(--serif); font-weight: 800; font-size: clamp(5rem, 18vw, 7.5rem); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
+.hero-temp .deg { font-size: 0.4em; opacity: .75; }
+.hero .feels, .hero .hero-sub, .hero .hero-desc, .hilo-label { color: var(--sky-text); opacity: .92; }
+.hero-desc { font-weight: 700; font-size: 1rem; }
+.hero-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
+.hero-hilo { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; color: #fff; }
+.hilo-divider { background: rgba(255,255,255,.3); }
+.hero-share-btn { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); min-height: 36px; border-radius: 999px; }
+.hero-share-btn:hover { background: rgba(255,255,255,.25); }
+.hero-share-status { color: #fff; }
+.station-badge { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
+.hero-context { margin-top: 0.45rem; font-size: 0.8rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.18); border-radius: 999px; padding: 0.25rem 0.8rem; display: inline-block; }
+@media (max-width: 640px) {
+  .hero { grid-template-columns: 1fr auto; grid-template-areas: "center right" "left left"; padding: 1.2rem 1rem; gap: 0.7rem; }
+  .hero-center { grid-area: center; text-align: left; }
+  .hero-right { grid-area: right; }
+  .hero-left { grid-area: left; flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
+  .hero-icon { font-size: 2.2rem; }
+  .hero-hilo { flex-direction: column; }
+  .hilo-divider { width: 70%; height: 1px; }
+}
+
+/* ── Summary ── */
+.summary-line { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0 0.15rem 1.1rem; letter-spacing: -0.005em; }
+.summary-line small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-light); margin-top: 0.15rem; }
+.summary-line:empty { display: none; }
+
+/* ── Nowcast ── */
+.nowcast-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 70px; margin-bottom: 0.35rem; }
+.nc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; min-width: 0; }
+.nc-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--cool) 28%, var(--paper-darker)); min-height: 5px; transition: height .4s ease; }
+.nc-bar.wet { background: linear-gradient(180deg, #60a5fa, #2563eb); }
+.nc-bar.heavy { background: linear-gradient(180deg, #818cf8, #4338ca); }
+.nc-time { font-size: 0.62rem; color: var(--ink-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.nowcast-bars + .nowcast-bars { margin-top: 0; }
+.bring-row { display: flex; align-items: flex-start; gap: 0.7rem; padding-top: 0.8rem; margin-top: 0.7rem; border-top: 1px solid var(--border); }
+.bring-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); padding-top: 0.45rem; flex-shrink: 0; }
+.bring-row .recs-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
+.bring-row .rec-item { flex-direction: row; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--paper-darker); border: 1px solid var(--border); }
+.bring-row .rec-icon { font-size: 1.05rem; }
+.bring-row .rec-label { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
+
+/* ── Sticky section headings (iPhone friendly) ── */
+.sticky-head { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) - 6px); z-index: 20; padding: 0.45rem 0.15rem; margin: 0 0 0.5rem;
+  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
+.section-label { font-size: 0.78rem; letter-spacing: 0.12em; }
+.link-btn { min-height: 36px; font-style: normal; color: var(--accent); }
+
+/* ── Hourly scrub chart ── */
+.hourly-card { padding: 0.8rem 0.9rem 0.6rem; margin-bottom: 0.7rem; }
+.hc-readout { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; font-size: 0.82rem; min-height: 1.6rem; font-variant-numeric: tabular-nums; color: var(--ink-light); }
+.hc-readout b { color: var(--ink); font-size: 1.15rem; }
+.hc-readout .hc-t { font-weight: 700; color: var(--ink); min-width: 4.5rem; }
+.hc-readout .hc-rain { color: #3b82f6; font-weight: 600; }
+.hc-readout .hc-wind { color: var(--cool); font-weight: 600; }
+.hourly-chart { width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; }
+.hourly-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
+.hourly-scroll { border-radius: 14px; margin-bottom: 1.6rem; }
+.hour-cell { background: var(--card-bg); }
+.hour-cell.now { background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); }
+
+/* ── Radar ── */
+.radar-embed-wrap { border-radius: 16px; margin-bottom: 1.6rem; border: 1px solid var(--border); }
+.radar-map { height: 380px; }
+@media (max-width: 640px) { .radar-map { height: 320px; } }
+.radar-loc-marker { display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateY(-4px); pointer-events: none; }
+.radar-loc-pin { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25), 0 2px 6px rgba(0,0,0,.5); animation: pin-pulse 2.4s ease-out infinite; }
+.radar-loc-label { background: rgba(7,12,20,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
+@keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55), 0 2px 6px rgba(0,0,0,.5); } 70%,100% { box-shadow: 0 0 0 14px rgba(37,99,235,0), 0 2px 6px rgba(0,0,0,.5); } }
+
+/* ── 7-day range bars ── */
+.daily-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card-bg); margin-bottom: 1.6rem; }
+.day-row { grid-template-columns: 5.2rem 2rem 3rem 2.2rem 1fr 2.2rem; gap: 0.5rem; padding: 0.7rem 1rem; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
+.day-row:last-child { border-bottom: none; }
+.day-row.today { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.day-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.day-icon { font-size: 1.4rem; text-align: center; }
+.day-pop { font-size: 0.74rem; font-weight: 600; color: #3b82f6; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.pop-drop { font-size: 0.7rem; margin-right: 1px; }
+.day-lo-t, .day-hi-t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; text-align: right; }
+.day-lo-t { color: var(--ink-light); font-weight: 600; }
+.day-range { position: relative; height: 7px; border-radius: 99px; background: var(--paper-darker); }
+.day-range-bar { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #38bdf8, #fbbf24 60%, #fb923c); }
+@media (max-width: 640px) { .day-row { grid-template-columns: 3.7rem 1.8rem 2.6rem 2rem 1fr 2rem; gap: 0.35rem; padding: 0.65rem 0.8rem; } }
+
+/* ── Detail tiles ── */
+.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.65rem; margin-bottom: 1.6rem; }
+.detail-grid .stat-card { border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); padding: 0.9rem 1rem; min-width: 0; }
+.detail-grid .aqi-card, .detail-grid .sun-tile { grid-column: span 2; }
+@media (max-width: 420px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
+.sun-tile .sun-timeline-wrap { margin-top: 0.4rem; }
+.aqi-cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--paper-darker); vertical-align: middle; margin-left: 0.3rem; }
+.aqi-track { position: relative; height: 8px; border-radius: 99px; margin: 0.45rem 0 0.35rem; background: linear-gradient(90deg, #22c55e 0%, #eab308 20%, #f97316 40%, #ef4444 60%, #a855f7 80%, #7f1d1d 100%); }
+.aqi-marker { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: left .5s ease; }
+
+/* ── Skeleton loading (replaces the full-screen spinner) ── */
+.loading { display: block; min-height: 0; padding: 0; }
+.loading.hidden { display: none; }
+body:not([data-tab="conditions"]) #loading { display: none; }
+.sk { border-radius: 16px; background: linear-gradient(90deg, var(--paper-dark) 25%, var(--paper-darker) 50%, var(--paper-dark) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s infinite linear; }
+.sk-hero { height: 190px; border-radius: 22px; margin-bottom: 0.9rem; }
+.sk-line { height: 24px; width: 70%; margin-bottom: 1.1rem; border-radius: 8px; }
+.sk-card { height: 120px; margin-bottom: 1.2rem; }
+.sk-card.tall { height: 200px; }
+.sk-rows { display: grid; gap: 8px; }
+.sk-row { height: 44px; border-radius: 12px; }
+@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+@media (prefers-reduced-motion: reduce) { .sk, .radar-loc-pin, .nc-bar { animation: none; transition: none; } }
+
+/* ── Page chrome ── */
+.tab-panel { animation: panel-in .25s cubic-bezier(.2,0,0,1); }
+@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
+.footer-note { color: var(--ink-light); }
+.settings-wrap .icon-btn { display: none; }
+
+/* High / low block: one tidy line each */
+.hero-hilo { display: flex; align-items: center; gap: 0.2rem; padding: 0.55rem 0.8rem; }
+.hilo-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; font-size: 1.35rem; font-weight: 800; line-height: 1.1; text-align: center; min-width: 3.6rem; }
+.hilo-arrow { display: inline; font-size: 0.8em; opacity: .85; margin-right: 1px; }
+.hilo-label { flex-basis: 100%; font-size: 0.62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
+@media (max-width: 640px) { .hero-hilo { flex-direction: column; gap: 0.35rem; } .hilo-divider { width: 70%; height: 1px; } }

app/public/app-ui.js

@@ -0,0 +1,403 @@
+/* Main app redesign layer — builds on globals from app.js (state, wmo, tempDisplay, radarEmbed, …).
+   app.js calls AppUI.onWeather / onAir / onStation after rendering. */
+(() => {
+'use strict';
+
+const $ = (id) => document.getElementById(id);
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : null);
+const us = () => state.units === 'us';
+const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// ── Tab tracking (drives skeleton visibility, top-bar state) ─────────────────
+function currentTabName() {
+  return document.querySelector('.tab.active, .bottom-tab.active')?.dataset.tab || 'conditions';
+}
+document.body.dataset.tab = currentTabName();
+const baseActivate = window.activateTab;
+if (typeof baseActivate === 'function') {
+  window.activateTab = function (name) {
+    baseActivate(name);
+    document.body.dataset.tab = name;
+    window.scrollTo({ top: 0 });
+    if (name === 'conditions' && window.AppUI) setTimeout(window.AppUI.refreshFx, 30);
+  };
+}
+
+// ── Top bar: location chip opens search ──────────────────────────────────────
+$('tb-search')?.addEventListener('click', () => {
+  window.activateTab('settings');
+  setTimeout(() => {
+    const input = $('search-input');
+    if (input) { input.scrollIntoView({ block: 'center', behavior: 'smooth' }); input.focus({ preventScroll: true }); }
+  }, 120);
+});
+function syncTopbarLocation() {
+  const name = $('loc-name')?.textContent?.trim();
+  if ($('tb-loc')) $('tb-loc').textContent = name || 'Location';
+}
+
+// ── Sky: gradient + precipitation / star effects ─────────────────────────────
+function skyFor(code, isDay, stationRaining) {
+  if (stationRaining) return 'rain';
+  if (code >= 95) return 'storm';
+  if ([71, 73, 75, 77, 85, 86].includes(code)) return 'snow';
+  if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return 'rain';
+  if ([45, 48].includes(code)) return 'fog';
+  if (code === 2 || code === 3) return isDay ? 'cloudy-day' : 'cloudy-night';
+  return isDay ? 'clear-day' : 'clear-night';
+}
+
+const fx = { raf: 0, kind: null, parts: [], w: 0, h: 0, flash: 0 };
+function fxResize(canvas) {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  fx.w = canvas.clientWidth; fx.h = canvas.clientHeight;
+  canvas.width = fx.w * dpr; canvas.height = fx.h * dpr;
+  canvas.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+function fxSeed(kind) {
+  const n = kind === 'storm' ? 130 : kind === 'rain' ? 85 : kind === 'snow' ? 70 : kind === 'clear-night' ? 55 : 0;
+  fx.parts = Array.from({ length: n }, () => ({
+    x: Math.random() * fx.w, y: Math.random() * fx.h,
+    v: kind === 'snow' ? 0.4 + Math.random() * 0.9 : kind === 'clear-night' ? 0 : 6 + Math.random() * 7,
+    r: kind === 'snow' ? 1 + Math.random() * 2.2 : kind === 'clear-night' ? 0.4 + Math.random() * 1.2 : 0.8 + Math.random() * 0.8,
+    p: Math.random() * Math.PI * 2,
+  }));
+}
+function fxFrame(t) {
+  const canvas = $('sky-fx');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, fx.w, fx.h);
+  const kind = fx.kind;
+  if (kind === 'rain' || kind === 'storm') {
+    ctx.strokeStyle = 'rgba(200,220,255,0.55)'; ctx.lineWidth = 1.1; ctx.lineCap = 'round';
+    ctx.beginPath();
+    for (const p of fx.parts) {
+      ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - 2.2, p.y + p.v * 1.6);
+      p.y += p.v; p.x -= 0.55;
+      if (p.y > fx.h) { p.y = -10; p.x = Math.random() * (fx.w + 20); }
+    }
+    ctx.stroke();
+    if (kind === 'storm') {
+      if (fx.flash <= 0 && Math.random() < 0.004) fx.flash = 1;
+      if (fx.flash > 0) { ctx.fillStyle = `rgba(255,255,255,${(fx.flash * 0.28).toFixed(3)})`; ctx.fillRect(0, 0, fx.w, fx.h); fx.flash -= 0.07; }
+    }
+  } else if (kind === 'snow') {
+    ctx.fillStyle = 'rgba(255,255,255,0.85)';
+    for (const p of fx.parts) {
+      ctx.beginPath(); ctx.arc(p.x + Math.sin(t / 900 + p.p) * 6, p.y, p.r, 0, Math.PI * 2); ctx.fill();
+      p.y += p.v; if (p.y > fx.h + 4) { p.y = -4; p.x = Math.random() * fx.w; }
+    }
+  } else if (kind === 'clear-night') {
+    for (const p of fx.parts) {
+      ctx.fillStyle = `rgba(255,255,255,${(0.35 + 0.55 * Math.abs(Math.sin(t / 1400 + p.p))).toFixed(2)})`;
+      ctx.beginPath(); ctx.arc(p.x, p.y * 0.8, p.r, 0, Math.PI * 2); ctx.fill();
+    }
+  }
+  if (!REDUCED && !document.hidden) fx.raf = requestAnimationFrame(fxFrame);
+}
+function setSky(kind) {
+  const hero = $('hero'), canvas = $('sky-fx');
+  if (!hero || !canvas) return;
+  hero.dataset.sky = kind;
+  cancelAnimationFrame(fx.raf);
+  fx.kind = kind;
+  fxResize(canvas);
+  fxSeed(kind);
+  if (fx.parts.length) fxFrame(performance.now());
+  else canvas.getContext('2d').clearRect(0, 0, fx.w, fx.h);
+}
+window.addEventListener('resize', () => { const c = $('sky-fx'); if (c && fx.kind) { fxResize(c); fxSeed(fx.kind); } });
+document.addEventListener('visibilitychange', () => { if (!document.hidden && fx.parts.length && !REDUCED) { cancelAnimationFrame(fx.raf); fxFrame(performance.now()); } });
+
+// ── Nowcast: next 2 hours from 15-minute precipitation ───────────────────────
+function nowcastSlots(data) {
+  const m = data.minutely_15;
+  const now = Date.now();
+  if (m?.time?.length && m.precipitation) {
+    let i = m.time.findIndex((t) => new Date(t).getTime() + 15 * 60000 > now);
+    if (i < 0) i = 0;
+    const slots = [];
+    for (let k = i; k < m.time.length; k++) slots.push({ t: new Date(m.time[k]).getTime(), v: m.precipitation[k] || 0 });
+    if (slots.length >= 4) return { slots, source: '15min' };
+  }
+  // Fallback: hourly rain chance spread over 15-minute slots
+  const h = data.hourly;
+  let si = h.time.findIndex((t) => new Date(t).getTime() >= now - 3600000);
+  if (si < 0) si = 0;
+  const slots = [];
+  for (let k = si; k < Math.min(si + 6, h.time.length); k++) {
+    const t0 = new Date(h.time[k]).getTime();
+    const pp = (h.precipitation_probability?.[k] || 0) / 100;
+    const mm = h.rain?.[k] || 0;
+    for (let q = 0; q < 4; q++) slots.push({ t: t0 + q * 900000, v: pp >= 0.5 ? Math.max(mm / 4, us() ? 0.006 : 0.15) : 0, pp });
+  }
+  return { slots: slots.filter((s) => s.t + 900000 > now), source: 'hourly' };
+}
+const WET = () => (us() ? 0.004 : 0.1);
+const HEAVY = () => (us() ? 0.04 : 1.0);
+const mins = (ms) => Math.max(0, Math.round(ms / 60000));
+function human(m) { return m >= 90 ? `${Math.round(m / 6) / 10}h`.replace('.0h', 'h') : `${m} min`; }
+
+function rainOutlook(slots) {
+  const now = Date.now();
+  const wet = (s) => s.v >= WET();
+  const first = slots[0];
+  if (!slots.length) return { text: '', short: '' };
+  if (first && wet(first)) {
+    const dry = slots.findIndex((s) => !wet(s));
+    if (dry < 0) return { text: 'Rain continuing for the next few hours', short: 'Rain continuing', kind: 'raining' };
+    const end = mins(slots[dry].t - now);
+    return { text: `Rain ending in about ${human(end)}`, short: `Rain ends ~${human(end)}`, kind: 'raining' };
+  }
+  const idx = slots.findIndex(wet);
+  if (idx < 0) return { text: `No rain expected in the next ${Math.round((slots[slots.length - 1].t + 900000 - now) / 3600000)} hours`, short: 'Dry ahead', kind: 'dry' };
+  const start = mins(slots[idx].t - now);
+  let len = 0; for (let k = idx; k < slots.length && wet(slots[k]); k++) len += 15;
+  const reachesEnd = idx + len / 15 >= slots.length;
+  const dur = reachesEnd ? `${human(len)}+` : `about ${human(len)}`;
+  const when = start <= 5 ? 'Rain starting now' : `Rain starting in ${human(start)}`;
+  return { text: `${when}, lasting ${dur}`, short: start <= 5 ? 'Rain now' : `Rain in ${human(start)}`, kind: 'soon', start };
+}
+
+function renderNowcast(data) {
+  const host = $('nowcast-bars');
+  if (!host) return { text: '', short: '' };
+  const { slots, source } = nowcastSlots(data);
+  const next8 = slots.slice(0, 8);
+  const scale = Math.max(HEAVY() * 1.5, ...next8.map((s) => s.v));
+  host.innerHTML = next8.map((s, i) => {
+    const hPct = s.v >= WET() ? Math.max(14, Math.min(100, (s.v / scale) * 100)) : 7;
+    const cls = s.v >= HEAVY() ? 'heavy' : s.v >= WET() ? 'wet' : '';
+    const label = i === 0 ? 'Now' : i % 2 === 0 ? new Date(s.t).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(' ', '').toLowerCase() : '';
+    const unit = us() ? 'in' : 'mm';
+    return `<div class="nc-col" title="${new Date(s.t).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}: ${s.v >= WET() ? s.v.toFixed(us() ? 2 : 1) + ' ' + unit : 'dry'}"><div class="nc-bar ${cls}" style="height:${hPct}%"></div><div class="nc-time">${label}</div></div>`;
+  }).join('');
+  const outlook = rainOutlook(slots);
+  $('nowcast-note').textContent = source === '15min' ? outlook.short : `${outlook.short} · hourly est.`;
+  return outlook;
+}
+
+// ── "Bring" chips react to the rain outlook and the coming cold ──────────────
+function enrichBring(data, outlook) {
+  const grid = $('recommendations');
+  if (!grid) return;
+  const have = (label) => [...grid.querySelectorAll('.rec-label')].some((e) => e.textContent.toLowerCase().includes(label));
+  const add = (icon, label) => grid.insertAdjacentHTML('afterbegin', `<div class="rec-item"><span class="rec-icon">${icon}</span><span class="rec-label">${label}</span></div>`);
+  const h = data.hourly;
+  let si = h.time.findIndex((t) => new Date(t).getTime() >= Date.now());
+  if (si < 0) si = 0;
+  const next12 = h.temperature_2m.slice(si, si + 12);
+  const coldF = (t) => (us() ? t : t * 9 / 5 + 32);
+  if (next12.length && coldF(Math.min(...next12)) <= 50 && !have('jacket') && !have('coat')) add('🧥', 'Jacket');
+  if ((outlook?.kind === 'soon' || outlook?.kind === 'raining') && !have('umbrella')) add('☂️', 'Umbrella');
+}
+
+// ── Summary line ─────────────────────────────────────────────────────────────
+function renderSummary(data, outlook) {
+  const el = $('summary-line');
+  if (!el) return;
+  const c = data.current, d = data.daily;
+  const w = wmo(c.weather_code);
+  const hi = tempDisplay(d.temperature_2m_max[0]), lo = tempDisplay(d.temperature_2m_min[0]);
+  const parts = [];
+  if (outlook?.kind === 'soon' || outlook?.kind === 'raining') parts.push(`${outlook.text}.`);
+  else parts.push(`${w.desc} now, high ${hi}°, low ${lo}°.`);
+  const wind = c.wind_speed_10m;
+  const windy = (us() ? wind >= 18 : wind >= 29);
+  const subs = [];
+  if (outlook?.kind === 'soon' || outlook?.kind === 'raining') subs.push(`${w.desc} · high ${hi}°, low ${lo}°`);
+  if (windy) subs.push(`Breezy: ${speedDisplay(wind)} ${speedUnit()}${c.wind_gusts_10m ? `, gusts ${speedDisplay(c.wind_gusts_10m)}` : ''}`);
+  const nAlerts = state.currentAlerts?.features?.length || 0;
+  if (nAlerts) subs.push(`⚠ ${nAlerts} active alert${nAlerts > 1 ? 's' : ''} — see Alerts`);
+  el.innerHTML = `${parts.join(' ')}${subs.length ? `<small>${subs.join(' · ')}</small>` : ''}`;
+}
+
+// ── Hourly scrub chart (SVG, no dependencies) ────────────────────────────────
+function renderHourlyChart(data) {
+  const host = $('hourly-chart'), readout = $('hc-readout');
+  if (!host) return;
+  const h = data.hourly;
+  let start = h.time.findIndex((t) => new Date(t).getTime() >= Date.now() - 1800000);
+  if (start < 0) start = 0;
+  const n = Math.min(state.hourlyExtended ? 48 : 24, h.time.length - start);
+  const idx = Array.from({ length: n }, (_, i) => start + i);
+  const feels = state.hourlyFeelsLike;
+  const temp = idx.map((i) => (feels ? h.apparent_temperature?.[i] ?? h.temperature_2m[i] : h.temperature_2m[i]));
+  const pop = idx.map((i) => h.precipitation_probability?.[i] ?? 0);
+  const wind = idx.map((i) => h.wind_speed_10m?.[i] ?? 0);
+  const times = idx.map((i) => new Date(h.time[i]));
+
+  const W = 640, H = 200, L = 34, R = 12, T = 14, B = 26;
+  const pw = W - L - R, ph = H - T - B;
+  const tMin = Math.floor(Math.min(...temp) - 2), tMax = Math.ceil(Math.max(...temp) + 2);
+  const wMax = Math.max(15, ...wind);
+  const x = (i) => L + (n === 1 ? 0 : (i / (n - 1)) * pw);
+  const yT = (v) => T + (1 - (v - tMin) / (tMax - tMin)) * ph;
+  const yW = (v) => T + (1 - v / wMax) * ph;
+  const barW = Math.max(3, pw / n - 3);
+
+  const bars = pop.map((p, i) => p > 0 ? `<rect x="${(x(i) - barW / 2).toFixed(1)}" y="${(T + ph - (p / 100) * ph * 0.55).toFixed(1)}" width="${barW.toFixed(1)}" height="${((p / 100) * ph * 0.55).toFixed(1)}" rx="2" fill="#3b82f6" opacity="${(0.25 + p / 160).toFixed(2)}"/>` : '').join('');
+  const line = (arr, yf) => arr.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${yf(v).toFixed(1)}`).join('');
+  const tLine = line(temp, yT);
+  const area = `${tLine}L${x(n - 1).toFixed(1)},${T + ph}L${x(0).toFixed(1)},${T + ph}Z`;
+
+  // x-axis labels + midnight dividers
+  let xl = '';
+  const step = n > 30 ? 6 : 3;
+  times.forEach((t, i) => {
+    const mid = t.getHours() === 0;
+    if (mid && i > 0) xl += `<line x1="${x(i).toFixed(1)}" x2="${x(i).toFixed(1)}" y1="${T}" y2="${T + ph}" stroke="currentColor" opacity=".25" stroke-dasharray="3 4"/><text x="${(x(i) + 4).toFixed(1)}" y="${T + 10}" font-size="10" font-weight="700" fill="currentColor" opacity=".6">${times[i].toLocaleDateString([], { weekday: 'short' })}</text>`;
+    if (i % step === 0) xl += `<text x="${x(i).toFixed(1)}" y="${H - 8}" font-size="10" text-anchor="middle" fill="currentColor" opacity=".6">${i === 0 ? 'Now' : t.toLocaleTimeString([], { hour: 'numeric' }).replace(' ', '').toLowerCase()}</text>`;
+  });
+  // y-axis (temperature)
+  let yl = '';
+  for (let k = 0; k <= 3; k++) {
+    const v = tMin + ((tMax - tMin) * k) / 3, yy = yT(v);
+    yl += `<line x1="${L}" x2="${W - R}" y1="${yy.toFixed(1)}" y2="${yy.toFixed(1)}" stroke="currentColor" opacity=".1"/><text x="${L - 6}" y="${(yy + 3).toFixed(1)}" font-size="10" text-anchor="end" fill="currentColor" opacity=".6">${tempDisplay(v)}°</text>`;
+  }
+
+  host.innerHTML = `<svg viewBox="0 0 ${W} ${H}" role="img" style="color:var(--ink-light)">
+    <defs><linearGradient id="hcg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fb923c" stop-opacity=".35"/><stop offset="1" stop-color="#fb923c" stop-opacity="0"/></linearGradient></defs>
+    ${yl}${bars}
+    <path d="${line(wind, yW)}" fill="none" stroke="#38bdf8" stroke-width="1.6" stroke-dasharray="4 3" opacity=".85"/>
+    <path d="${area}" fill="url(#hcg)"/>
+    <path d="${tLine}" fill="none" stroke="#fb923c" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/>
+    ${xl}
+    <g id="hc-cursor" style="display:none">
+      <line id="hc-line" y1="${T}" y2="${T + ph}" stroke="currentColor" opacity=".55"/>
+      <circle id="hc-dot" r="5" fill="#fb923c" stroke="#fff" stroke-width="2"/>
+    </g></svg>`;
+
+  const svg = host.querySelector('svg');
+  const fmtT = (d) => d.toLocaleDateString([], { weekday: 'short' }) + ' ' + d.toLocaleTimeString([], { hour: 'numeric' });
+  const show = (i) => {
+    const code = h.weather_code?.[idx[i]];
+    readout.innerHTML = `<span class="hc-t">${i === 0 ? 'Now' : fmtT(times[i])}</span><span>${code != null ? wmo(code).icon : ''} <b>${tempDisplay(temp[i])}°</b></span><span class="hc-rain">💧 ${pop[i]}%</span><span class="hc-wind">💨 ${speedDisplay(wind[i])} ${speedUnit()}</span>`;
+    const cur = svg.querySelector('#hc-cursor');
+    cur.style.display = '';
+    svg.querySelector('#hc-line').setAttribute('x1', x(i)); svg.querySelector('#hc-line').setAttribute('x2', x(i));
+    svg.querySelector('#hc-dot').setAttribute('cx', x(i)); svg.querySelector('#hc-dot').setAttribute('cy', yT(temp[i]));
+  };
+  const move = (ev) => {
+    const r = svg.getBoundingClientRect();
+    const vx = ((ev.clientX - r.left) / r.width) * W;
+    show(Math.max(0, Math.min(n - 1, Math.round(((vx - L) / pw) * (n - 1)))));
+  };
+  svg.addEventListener('pointermove', move);
+  svg.addEventListener('pointerdown', move);
+  const reset = () => { svg.querySelector('#hc-cursor').style.display = 'none'; show(0); svg.querySelector('#hc-cursor').style.display = 'none'; };
+  svg.addEventListener('pointerleave', reset);
+  svg.addEventListener('pointercancel', reset);
+  show(0); svg.querySelector('#hc-cursor').style.display = 'none';
+}
+
+// ── Air quality gauge + UV category ──────────────────────────────────────────
+function aqiInfo(v) {
+  if (v == null) return ['', '#94a3b8'];
+  if (v <= 50) return ['Good', '#22c55e'];
+  if (v <= 100) return ['Moderate', '#eab308'];
+  if (v <= 150) return ['Sensitive', '#f97316'];
+  if (v <= 200) return ['Unhealthy', '#ef4444'];
+  if (v <= 300) return ['Very unhealthy', '#a855f7'];
+  return ['Hazardous', '#991b1b'];
+}
+function uvCategory(uv) {
+  if (uv == null) return '';
+  return uv < 3 ? 'Low' : uv < 6 ? 'Moderate' : uv < 8 ? 'High' : uv < 11 ? 'Very high' : 'Extreme';
+}
+function renderAqi(air) {
+  const v = num(air?.current?.us_aqi);
+  const [label, color] = aqiInfo(v);
+  const cat = $('aqi-cat'), marker = $('aqi-marker');
+  if (cat) { cat.textContent = label; cat.style.color = color; }
+  if (marker) marker.style.left = v == null ? '0%' : `${Math.min(100, (v / 300) * 100).toFixed(1)}%`;
+}
+
+// ── Station context (yesterday / normal) ─────────────────────────────────────
+let summaryCache = { at: 0, data: null };
+async function loadStationSummary() {
+  if (summaryCache.data && Date.now() - summaryCache.at < 5 * 60000) return summaryCache.data;
+  try {
+    const r = await fetch('/api/station/summary');
+    if (!r.ok) return null;
+    summaryCache = { at: Date.now(), data: await r.json() };
+    return summaryCache.data;
+  } catch { return null; }
+}
+async function renderStationContext() {
+  const el = $('hero-context');
+  if (!el) return;
+  const s = await loadStationSummary();
+  const y = s?.yesterday;
+  if (!y || y.hi == null || y.lo == null) { el.classList.add('hidden'); return; }
+  const conv = (f) => (us() ? Math.round(f) : Math.round((f - 32) * 5 / 9));
+  let text = `Yesterday ${conv(y.hi)}° / ${conv(y.lo)}°`;
+  const todayHi = state.currentWeather?.daily?.temperature_2m_max?.[0];
+  if (s.normal?.hi != null && todayHi != null) {
+    const normHi = us() ? s.normal.hi : (s.normal.hi - 32) * 5 / 9;
+    const diff = Math.round(todayHi - normHi);
+    if (Math.abs(diff) >= 1) text += ` · ${Math.abs(diff)}° ${diff > 0 ? 'warmer' : 'cooler'} than usual today`;
+    else text += ' · about normal for today';
+  }
+  el.textContent = text;
+  el.classList.remove('hidden');
+}
+
+// ── Radar: location marker with rain countdown + alert polygons ──────────────
+let radarMarker = null, radarMarkerEl = null;
+function updateRadar(city, outlook) {
+  const map = typeof radarEmbed !== 'undefined' ? radarEmbed?.map : null;
+  if (!map || typeof maplibregl === 'undefined' || city?.latitude == null) return;
+  const label = outlook?.kind === 'soon' || outlook?.kind === 'raining' ? `📍 ${outlook.short}` : `📍 ${city.name || 'You'}`;
+  if (!radarMarker) {
+    radarMarkerEl = document.createElement('div');
+    radarMarkerEl.className = 'radar-loc-marker';
+    radarMarkerEl.innerHTML = '<div class="radar-loc-label"></div><div class="radar-loc-pin"></div>';
+    radarMarker = new maplibregl.Marker({ element: radarMarkerEl, anchor: 'bottom' }).setLngLat([city.longitude, city.latitude]).addTo(map);
+  } else radarMarker.setLngLat([city.longitude, city.latitude]);
+  radarMarkerEl.querySelector('.radar-loc-label').textContent = label;
+
+  const feats = (state.currentAlerts?.features || []).filter((f) => f.geometry);
+  const apply = () => {
+    try {
+      const fc = { type: 'FeatureCollection', features: feats };
+      if (map.getSource('ui-alerts')) { map.getSource('ui-alerts').setData(fc); return; }
+      if (!feats.length) return;
+      map.addSource('ui-alerts', { type: 'geojson', data: fc });
+      map.addLayer({ id: 'ui-alerts-fill', type: 'fill', source: 'ui-alerts', paint: { 'fill-color': '#ef4444', 'fill-opacity': 0.14 } });
+      map.addLayer({ id: 'ui-alerts-line', type: 'line', source: 'ui-alerts', paint: { 'line-color': '#ef4444', 'line-width': 2, 'line-dasharray': [2, 1] } });
+    } catch { /* style swapped mid-update; next refresh retries */ }
+  };
+  if (map.isStyleLoaded()) apply(); else map.once('idle', apply);
+}
+
+// ── Public hooks ─────────────────────────────────────────────────────────────
+let lastOutlook = null;
+window.AppUI = {
+  onWeather(data, city) {
+    syncTopbarLocation();
+    const peek = $('wind-drawer-peek'); if (peek) peek.textContent = peek.textContent.replace(/^[\s·]+/, '');
+    const c = data.current;
+    const d = state.ambientDevice?.lastData;
+    const stationFresh = !!(d?.dateutc && Date.now() - d.dateutc < 15 * 60000 && state.ambientUseStation);
+    if (!stationFresh) { $('station-badge')?.classList.add('hidden'); $('hero-context')?.classList.add('hidden'); }
+    setSky(skyFor(c.weather_code, !!c.is_day, stationFresh && d.rainratein > 0));
+    $('uv-cat').textContent = uvCategory(data.daily?.uv_index_max?.[0]);
+    lastOutlook = renderNowcast(data);
+    enrichBring(data, lastOutlook);
+    if ((lastOutlook?.kind === 'soon' || lastOutlook?.kind === 'raining') && $('cur-precip')) $('cur-precip').textContent = lastOutlook.short;
+    renderSummary(data, lastOutlook);
+    renderHourlyChart(data);
+    updateRadar(city, lastOutlook);
+    if (state.currentAir) renderAqi(state.currentAir);
+    if (stationFresh) renderStationContext();
+  },
+  onAir(air) { renderAqi(air); },
+  refreshFx() { const c = $('sky-fx'); if (c && fx.kind) { cancelAnimationFrame(fx.raf); fxResize(c); fxSeed(fx.kind); if (fx.parts.length) fxFrame(performance.now()); } },
+  onStation() { syncTopbarLocation(); renderStationContext(); },
+};
+
+syncTopbarLocation();
+new MutationObserver(syncTopbarLocation).observe($('loc-name') || document.body, { childList: true, characterData: true, subtree: true });
+})();

app/public/app.js

@@ -746,7 +746,7 @@ function renderSavedCities() {
 // ── Tab switching ─────────────────────────────────────────────────────────────
 
 function activateTab(tabName) {
-  document.querySelectorAll('.tab, .bottom-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab, .bottom-tab, .icon-btn[data-tab]').forEach(t => t.classList.remove('active'));
   document.querySelectorAll('.tab-panel').forEach(p => hide(p));
   document.querySelectorAll(`[data-tab="${tabName}"]`).forEach(t => t.classList.add('active'));
   show(document.getElementById('tab-' + tabName));
@@ -768,7 +768,7 @@ function activateTab(tabName) {
     refreshSavedCityWeather();
   }
 }
-document.querySelectorAll('.tab, .bottom-tab').forEach(btn => {
+document.querySelectorAll('.tab, .bottom-tab, .icon-btn[data-tab]').forEach(btn => {
   btn.addEventListener('click', () => activateTab(btn.dataset.tab));
 });
 
@@ -1609,6 +1609,8 @@ function renderWeather(data, city) {
 
   // Apply station overlay if we have fresh station data
   if (state.ambientDevice) applyStationOverlay(state.ambientDevice);
+
+  if (window.AppUI) window.AppUI.onWeather(data, city);
 }
 
 function renderDailyForecast(daily) {
@@ -1619,16 +1621,22 @@ function renderDailyForecast(daily) {
   const maxDays = state.showExtendedForecast ? Math.min(16, totalDays) : Math.min(7, totalDays);
 
   list.innerHTML = '';
+  const hiAll = daily.temperature_2m_max.slice(0, maxDays), loAll = daily.temperature_2m_min.slice(0, maxDays);
+  const wkMin = Math.min(...loAll), wkMax = Math.max(...hiAll), span = Math.max(wkMax - wkMin, 1);
   for (let i = 0; i < maxDays; i++) {
     const dw = wmo(daily.weather_code[i]);
+    const lo = daily.temperature_2m_min[i], hi = daily.temperature_2m_max[i];
+    const left = ((lo - wkMin) / span) * 100, width = Math.max(((hi - lo) / span) * 100, 6);
+    const pop = daily.precipitation_probability_max[i];
     const row = document.createElement('div');
     row.className = 'day-row' + (i === 0 ? ' today' : '');
     row.innerHTML = `
       <div class="day-name">${formatDayShort(daily.time[i])}</div>
-      <div class="day-icon">${dw.icon}</div>
-      <div class="day-desc">${dw.desc}</div>
-      <div class="day-temps">${tempDisplay(daily.temperature_2m_max[i])}°<span class="day-lo"> / ${tempDisplay(daily.temperature_2m_min[i])}°</span></div>
-      <div class="day-meta">${daily.precipitation_probability_max[i] > 0 ? daily.precipitation_probability_max[i] + '% rain<br>' : ''}${speedDisplay(daily.wind_speed_10m_max[i])} ${speedUnit()}</div>
+      <div class="day-icon" title="${dw.desc}">${dw.icon}</div>
+      <div class="day-pop">${pop > 0 ? `<span class="pop-drop">💧</span>${pop}%` : ''}</div>
+      <div class="day-lo-t">${tempDisplay(lo)}°</div>
+      <div class="day-range" title="${dw.desc} · wind ${speedDisplay(daily.wind_speed_10m_max[i])} ${speedUnit()}"><span class="day-range-bar" style="left:${left.toFixed(1)}%;width:${width.toFixed(1)}%"></span></div>
+      <div class="day-hi-t">${tempDisplay(hi)}°</div>
     `;
     list.appendChild(row);
   }
@@ -1661,6 +1669,7 @@ function renderAirQuality(data) {
   if (panelAqi) panelAqi.textContent = cur.us_aqi ?? '--';
 
   setMapOverlayReadouts({ aqi: cur.us_aqi ?? '--' });
+  if (window.AppUI) window.AppUI.onAir(data);
 }
 
 function normalizeSeverity(severity) {
@@ -2658,7 +2667,7 @@ syncOfflineState();
 
 // ── Swipe gestures for tab switching ──────────────────────────────────────────
 (function initSwipe() {
-  const TABS = ['conditions', 'station', 'unified-map', 'alerts', 'learn', 'settings'];
+  const TABS = ['conditions', 'station', 'unified-map', 'alerts'];
   let touchX = 0;
   let touchY = 0;
   let blocked = false;
@@ -3085,16 +3094,13 @@ function applyStationOverlay(device) {
     peekEl.textContent = `· ${fS(data.windspeedmph)} ${speedUnit()} ${compassDir(data.winddir || 0)} · ${data.humidity ?? '--'}% humidity`;
   }
 
-  // Replace location name with station name
-  const stationName = device.info?.name || device.macAddress || 'My Station';
-  const locNameEl = document.getElementById('loc-name');
-  const locSubEl = document.getElementById('loc-sub');
-  if (locNameEl) locNameEl.textContent = stationName;
-  if (locSubEl) locSubEl.textContent = 'Ambient Weather Station';
-
-  // Hide the hero badge (redundant — location header now identifies the station)
+  // Keep the searched location's name; mark that temperatures now come from your own station
+  const stationName = (state.stationName || device.info?.name || 'My Station');
   const badge = document.getElementById('station-badge');
-  if (badge) hide(badge);
+  const badgeName = document.getElementById('station-badge-name');
+  if (badgeName) badgeName.textContent = `Your station · ${stationName}`;
+  if (badge) show(badge);
+  if (window.AppUI) window.AppUI.onStation(device, data);
 }
 
 function renderAmbientStation(device) {

app/public/dashboard-account.html

@@ -3,18 +3,18 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-<meta name="theme-color" content="#191510">
+<meta name="theme-color" content="#070c14">
 <link rel="manifest" href="/dashboard.webmanifest">
 <title>Account</title>
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --ink-light: #5f5649; --paper: #f5f2ec; --paper-dark: #ece7db; --paper-darker: #ddd6c7;
-  --border: #b9ae9b; --accent: #c25a2a; --cool: #2a6b8a; --ok: #2f8a4a;
+  --ink: #0d1b2a; --ink-light: #5a7089; --paper: #edf2f7; --paper-dark: #ffffff; --paper-darker: #e3eaf2;
+  --border: #ccd6e2; --accent: #2563eb; --cool: #0e7490; --ok: #2f8a4a;
   --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --ink: #ece7dc; --ink-light: #beb399; --paper: #191510; --paper-dark: #201c16; --paper-darker: #2b2620; --border: #3a342a; --accent: #e07848; --cool: #5ab0d8; --ok: #5cc27a; }
+  :root { --ink: #dce6f0; --ink-light: #8aa2b8; --paper: #070c14; --paper-dark: #0d1720; --paper-darker: #101c29; --border: #22405c; --accent: #60a5fa; --cool: #38bdf8; --ok: #5cc27a; }
 }
 html { -webkit-text-size-adjust: 100%; }
 html, body { min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 15px; }

app/public/dashboard-login.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-<meta name="theme-color" content="#191510">
+<meta name="theme-color" content="#070c14">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="Station">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -13,11 +13,11 @@
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --paper: #f5f2ec; --paper-dark: #ece7db;
-  --border: #b9ae9b; --accent: #c25a2a; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
+  --ink: #0d1b2a; --paper: #edf2f7; --paper-dark: #ffffff;
+  --border: #ccd6e2; --accent: #2563eb; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --ink: #ece7dc; --paper: #191510; --paper-dark: #201c16; --border: #3a342a; --accent: #e07848; }
+  :root { --ink: #dce6f0; --paper: #070c14; --paper-dark: #0d1720; --border: #22405c; --accent: #60a5fa; }
 }
 html, body { min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--paper); color: var(--ink); font-family: var(--mono); display: flex; align-items: center; justify-content: center; }
 .card { background: var(--paper-dark); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; width: min(380px, 94vw); }

app/public/dashboard-recover.html

@@ -7,11 +7,11 @@
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --paper: #f5f2ec; --paper-dark: #ece7db;
-  --border: #b9ae9b; --accent: #c25a2a; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
+  --ink: #0d1b2a; --paper: #edf2f7; --paper-dark: #ffffff;
+  --border: #ccd6e2; --accent: #2563eb; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --ink: #ece7dc; --paper: #191510; --paper-dark: #201c16; --border: #3a342a; --accent: #e07848; }
+  :root { --ink: #dce6f0; --paper: #070c14; --paper-dark: #0d1720; --border: #22405c; --accent: #60a5fa; }
 }
 html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); display: flex; align-items: center; justify-content: center; }
 .card { background: var(--paper-dark); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; width: min(400px, 94vw); }

app/public/dashboard-settings.html

@@ -7,16 +7,16 @@
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --ink-mid: #3d3730; --ink-light: #5f5649;
-  --paper: #f5f2ec; --paper-dark: #ece7db; --paper-darker: #ddd6c7;
-  --border: #b9ae9b; --accent: #c25a2a; --cool: #2a6b8a;
+  --ink: #0d1b2a; --ink-mid: #2b3f55; --ink-light: #5a7089;
+  --paper: #edf2f7; --paper-dark: #ffffff; --paper-darker: #e3eaf2;
+  --border: #ccd6e2; --accent: #2563eb; --cool: #0e7490;
   --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --ink: #ece7dc; --ink-mid: #d2c8b1; --ink-light: #beb399;
-    --paper: #191510; --paper-dark: #201c16; --paper-darker: #2b2620;
-    --border: #3a342a; --accent: #e07848; --cool: #5ab0d8;
+    --ink: #dce6f0; --ink-mid: #b7c6d6; --ink-light: #8aa2b8;
+    --paper: #070c14; --paper-dark: #0d1720; --paper-darker: #101c29;
+    --border: #22405c; --accent: #60a5fa; --cool: #38bdf8;
   }
 }
 html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 15px; }

app/public/dashboard-setup.html

@@ -7,11 +7,11 @@
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --paper: #f5f2ec; --paper-dark: #ece7db;
-  --border: #b9ae9b; --accent: #c25a2a; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
+  --ink: #0d1b2a; --paper: #edf2f7; --paper-dark: #ffffff;
+  --border: #ccd6e2; --accent: #2563eb; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --ink: #ece7dc; --paper: #191510; --paper-dark: #201c16; --border: #3a342a; --accent: #e07848; }
+  :root { --ink: #dce6f0; --paper: #070c14; --paper-dark: #0d1720; --border: #22405c; --accent: #60a5fa; }
 }
 html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); display: flex; align-items: center; justify-content: center; }
 .card { background: var(--paper-dark); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; width: min(380px, 94vw); }

app/public/dashboard-ui.css

@@ -108,3 +108,10 @@ canvas.sparkline { max-width: 100%; }
 .settings-panel.always-open > summary { cursor: default; pointer-events: none; }
 .settings-panel.always-open > summary::before { display: none; }
 .settings-panel.always-open { margin-top: 1rem !important; }
+
+/* ── Unified slate/blue chrome (data colours stay orange = warm, blue = cool) ── */
+.tab.active, .range-btn.active, .always-open { --chrome: var(--ui); }
+.tab.active, .range-btn.active { background: var(--ui) !important; border-color: var(--ui) !important; color: #fff; }
+.tab:hover, .logout:hover { border-color: var(--ui); color: var(--ui); }
+.chart-reset:hover { border-color: var(--ui); }
+a { color: var(--ui); }

app/public/dashboard.html

@@ -3,8 +3,8 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-<meta name="theme-color" content="#f5f2ec" media="(prefers-color-scheme: light)">
-<meta name="theme-color" content="#191510" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#edf2f7" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#070c14" media="(prefers-color-scheme: dark)">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="Station">
@@ -19,16 +19,16 @@
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
-  --ink: #1a1a1a; --ink-mid: #3d3730; --ink-light: #5f5649;
-  --paper: #f5f2ec; --paper-dark: #ece7db; --paper-darker: #ddd6c7;
-  --border: #b9ae9b; --accent: #c25a2a; --cool: #2a6b8a;
-  --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', sans-serif;
+  --ink: #0d1b2a; --ink-mid: #2b3f55; --ink-light: #5a7089;
+  --paper: #edf2f7; --paper-dark: #ffffff; --paper-darker: #e3eaf2;
+  --border: #ccd6e2; --accent: #c25a2a; --cool: #2a6b8a;
+  --ui: #2563eb; --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', sans-serif;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --ink: #ece7dc; --ink-mid: #d2c8b1; --ink-light: #beb399;
-    --paper: #191510; --paper-dark: #201c16; --paper-darker: #2b2620;
-    --border: #3a342a; --accent: #e07848; --cool: #5ab0d8;
+    --ink: #dce6f0; --ink-mid: #b7c6d6; --ink-light: #8aa2b8;
+    --paper: #070c14; --paper-dark: #0d1720; --paper-darker: #101c29;
+    --border: #22405c; --accent: #fb923c; --cool: #38bdf8; --ui: #60a5fa;
   }
 }
 html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 15px; }

app/public/dashboard.webmanifest

@@ -5,8 +5,8 @@
   "start_url": "/dashboard",
   "scope": "/dashboard",
   "display": "standalone",
-  "background_color": "#191510",
-  "theme_color": "#191510",
+  "background_color": "#070c14",
+  "theme_color": "#070c14",
   "orientation": "any",
   "categories": ["weather", "utilities"],
   "icons": [

app/public/index.html

@@ -6,8 +6,8 @@
 <title>NeCloud Weather</title>
 <link rel="manifest" href="/manifest.json">
 <link rel="apple-touch-icon" href="/icons/icon.svg">
-<meta name="theme-color" content="#f5f2ec" media="(prefers-color-scheme: light)">
-<meta name="theme-color" content="#191510" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#edf2f7" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#070c14" media="(prefers-color-scheme: dark)">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="NeCloud Weather">
@@ -18,37 +18,36 @@
 <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="station-live.css">
+<link rel="stylesheet" href="app-ui.css">
 </head>
 <body>
 <div id="offline-banner" class="offline-banner hidden">No internet connection — showing cached data</div>
 <div id="ptr-indicator" class="ptr-indicator hidden">↓ Refreshing…</div>
 <div class="app">
 
-  <header class="masthead">
-    <h1>NeCloud Weather</h1>
-    <nav class="tabs">
-      <button class="tab active" data-tab="conditions">Conditions</button>
+  <header class="topbar">
+    <a class="brand" href="/" aria-label="NeCloud Weather home"><span class="brand-mark">☁︎</span><span class="brand-name">NeCloud</span></a>
+    <nav class="tabs" aria-label="Sections">
+      <button class="tab active" data-tab="conditions">Now</button>
       <button class="tab" data-tab="station">Station</button>
       <button class="tab" data-tab="unified-map">Map</button>
       <button class="tab" data-tab="alerts">Alerts<span class="alert-badge hidden" id="alert-badge-nav"></span></button>
-      <button class="tab" data-tab="learn">Learn</button>
-      <button class="tab" data-tab="settings">Settings</button>
-    </nav>
-    <span class="tagline">Open-Meteo · RainViewer</span>
-    <nav class="station-links">
-      <a href="/dashboard" class="station-link">Dashboard</a>
     </nav>
+    <div class="topbar-actions">
+      <button class="loc-chip" id="tb-search" type="button" aria-label="Change location"><span class="loc-chip-ico">⌕</span><span id="tb-loc">Location</span></button>
+      <a class="icon-btn" href="/dashboard" title="Station dashboard" aria-label="Station dashboard">▤</a>
+      <button class="icon-btn" data-tab="learn" type="button" title="Learn" aria-label="Learn">?</button>
+      <button class="icon-btn" data-tab="settings" type="button" title="Settings" aria-label="Settings">⚙</button>
+    </div>
   </header>
 
-  <!-- Loading -->
-  <div id="loading" class="loading hidden">
-    <div class="loading-container">
-      <div class="loading-icon">🌤️</div>
-      <div class="loading-text">Fetching weather data…</div>
-      <div class="loading-dots">
-        <span></span><span></span><span></span>
-      </div>
-    </div>
+  <!-- Loading: skeleton of the Now tab -->
+  <div id="loading" class="loading hidden" aria-busy="true" aria-label="Loading weather">
+    <div class="sk sk-hero"></div>
+    <div class="sk sk-line"></div>
+    <div class="sk sk-card"></div>
+    <div class="sk sk-card tall"></div>
+    <div class="sk-rows"><div class="sk sk-row"></div><div class="sk sk-row"></div><div class="sk sk-row"></div></div>
   </div>
 
   <!-- ── TAB: CONDITIONS ── -->
@@ -66,8 +65,9 @@
         </div>
       </div>
 
-      <!-- ── HERO ── -->
-      <div class="hero">
+      <!-- ── HERO (dynamic sky) ── -->
+      <div class="hero" id="hero">
+        <canvas id="sky-fx" class="sky-fx" aria-hidden="true"></canvas>
         <div class="hero-left">
           <div id="cur-icon" class="hero-icon"></div>
           <div id="cur-desc" class="hero-desc"></div>
@@ -77,6 +77,7 @@
         <div class="hero-center">
           <div class="hero-temp"><span id="cur-temp">--</span><span class="deg">°F</span></div>
           <div class="feels" id="feels-line">Feels like <span id="cur-feels">--</span>°F</div>
+          <div class="hero-context hidden" id="hero-context"></div>
           <button id="share-hero-btn" class="hero-share-btn" type="button">Share hero card</button>
           <p id="share-hero-status" class="hero-share-status hidden"></p>
         </div>
@@ -97,107 +98,40 @@
         </div>
       </div>
 
-      <!-- ── SUN & MOON TIMELINE ── -->
-      <div class="sun-section">
-        <div class="sun-timeline-wrap">
-          <div class="sun-endpoint">
-            <span class="sun-ep-icon">🌅</span>
-            <span id="sunrise-val" class="sun-ep-time">--</span>
-          </div>
-          <div class="sun-track-wrap">
-            <div class="sun-track">
-              <div class="sun-progress" id="sun-progress"></div>
-              <div class="sun-dot" id="sun-dot">☀️</div>
-            </div>
-          </div>
-          <div class="sun-endpoint">
-            <span class="sun-ep-icon">🌇</span>
-            <span id="sunset-val" class="sun-ep-time">--</span>
-          </div>
+      <!-- ── ONE-LINE SUMMARY ── -->
+      <div class="summary-line" id="summary-line"></div>
+
+      <!-- ── NEXT 2 HOURS + WHAT TO BRING ── -->
+      <section class="ui-card nowcast" id="nowcast">
+        <div class="section-head">
+          <span class="section-label">Next 2 hours</span>
+          <span class="section-note" id="nowcast-note"></span>
         </div>
-        <div class="moon-row">
-          <span class="moon-emoji">🌙</span>
-          <span id="moon-phase-val">--</span>
-          <span class="daylight-info" id="daylight-info">--</span>
+        <div class="nowcast-bars" id="nowcast-bars"></div>
+        <div class="bring-row">
+          <span class="bring-label">Bring</span>
+          <div id="recommendations" class="recs-grid"></div>
         </div>
+      </section>
+
+      <!-- ── HOURLY ── -->
+      <div class="section-head sticky-head">
+        <span class="section-label">Hourly Forecast</span>
+        <span class="section-note">
+          <button id="hourly-feels-toggle" class="link-btn">Feels-like</button>
+          <button id="hourly-extend-btn" class="link-btn">48h</button>
+        </span>
+      </div>
+      <div class="ui-card hourly-card">
+        <div class="hc-readout" id="hc-readout"></div>
+        <div id="hourly-chart" class="hourly-chart" aria-label="Hourly temperature, rain chance and wind chart"></div>
+      </div>
+      <div id="hourly-scroll" class="hourly-scroll">
+        <div id="hourly-track" class="hourly-track"></div>
       </div>
 
-      <!-- ── WIND & ATMOSPHERE (collapsed by default on mobile) ── -->
-      <details class="details-drawer wind-drawer" id="wind-drawer">
-        <summary class="drawer-summary">
-          Wind &amp; Atmosphere
-          <span class="wind-drawer-peek" id="wind-drawer-peek"></span>
-          <span class="drawer-chevron">›</span>
-        </summary>
-        <div class="drawer-body">
-          <div class="card-group drawer-card-group">
-            <div class="stat-card">
-              <div class="stat-label">Wind</div>
-              <div class="stat-val"><span id="cur-wind">--</span> <span class="stat-unit wind-unit">mph</span></div>
-              <div class="stat-sub" id="cur-wind-dir">--</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Gusts</div>
-              <div class="stat-val"><span id="cur-gust">--</span> <span class="stat-unit gust-unit">mph</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Humidity</div>
-              <div class="stat-val"><span id="cur-hum">--</span><span class="stat-unit">%</span></div>
-              <div class="stat-sub" id="hum-feel"></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Dewpoint</div>
-              <div class="stat-val"><span id="cur-dew">--</span>°</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Pressure</div>
-              <div class="stat-val"><span id="cur-pres">--</span> <span class="stat-unit">hPa</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Visibility</div>
-              <div class="stat-val"><span id="cur-vis">--</span> <span class="stat-unit vis-unit">mi</span></div>
-            </div>
-          </div>
-        </div>
-      </details>
-
-      <!-- ── MORE DETAILS DRAWER ── -->
-      <details class="details-drawer">
-        <summary class="drawer-summary">More Details <span class="drawer-chevron">›</span></summary>
-        <div class="drawer-body">
-          <div class="card-group drawer-card-group">
-            <div class="stat-card">
-              <div class="stat-label">UV Index</div>
-              <div class="stat-val"><span id="cur-uv">--</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Cloud Cover</div>
-              <div class="stat-val"><span id="cur-cloud">--</span><span class="stat-unit">%</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">US AQI</div>
-              <div class="stat-val"><span id="aqi-us">--</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">PM2.5</div>
-              <div class="stat-val"><span id="pm25">--</span></div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-label">Pollen</div>
-              <div class="stat-val"><span id="pollen">--</span></div>
-            </div>
-          </div>
-        </div>
-      </details>
-
-      <!-- ── WHAT TO BRING ── -->
-      <div class="section-head" style="margin-top:1.5rem">
-        <span class="section-label">What to Bring</span>
-      </div>
-      <div id="recommendations" class="recs-grid"></div>
-
-      <!-- Embedded radar panel -->
-      <div class="section-head">
+      <!-- ── RADAR ── -->
+      <div class="section-head sticky-head">
         <span class="section-label">Radar</span>
         <span class="section-note">
           <button class="link-btn" id="open-map-tab">Open map →</button>
@@ -214,26 +148,71 @@
         </div>
       </div>
 
-      <!-- Hourly -->
-      <div class="section-head" style="margin-top:1.5rem">
-        <span class="section-label">Hourly Forecast</span>
-        <span class="section-note">
-          <button id="hourly-feels-toggle" class="link-btn">Feels-like</button>
-          <button id="hourly-extend-btn" class="link-btn">48h</button>
-        </span>
-      </div>
-      <div id="hourly-scroll" class="hourly-scroll">
-        <div id="hourly-track" class="hourly-track"></div>
-      </div>
-      <div id="precip-chart-wrap" class="precip-chart-wrap"></div>
-
-      <!-- 7-day -->
-      <div class="section-head">
+      <!-- ── 7-DAY ── -->
+      <div class="section-head sticky-head">
         <span id="daily-forecast-label" class="section-label">7-Day Forecast</span>
         <button id="daily-toggle-btn" class="link-btn" type="button">Show 16-day</button>
       </div>
       <div id="daily-list" class="daily-list"></div>
 
+      <!-- ── DETAILS TILES ── -->
+      <div class="section-head sticky-head">
+        <span class="section-label">Details</span>
+        <span class="section-note" id="wind-drawer-peek"></span>
+      </div>
+      <div class="detail-grid">
+        <div class="stat-card">
+          <div class="stat-label">Wind</div>
+          <div class="stat-val"><span id="cur-wind">--</span> <span class="stat-unit wind-unit">mph</span></div>
+          <div class="stat-sub" id="cur-wind-dir">--</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Gusts</div>
+          <div class="stat-val"><span id="cur-gust">--</span> <span class="stat-unit gust-unit">mph</span></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Humidity</div>
+          <div class="stat-val"><span id="cur-hum">--</span><span class="stat-unit">%</span></div>
+          <div class="stat-sub" id="hum-feel"></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Dewpoint</div>
+          <div class="stat-val"><span id="cur-dew">--</span>°</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Pressure</div>
+          <div class="stat-val"><span id="cur-pres">--</span> <span class="stat-unit">hPa</span></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Visibility</div>
+          <div class="stat-val"><span id="cur-vis">--</span> <span class="stat-unit vis-unit">mi</span></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">UV Index</div>
+          <div class="stat-val"><span id="cur-uv">--</span></div>
+          <div class="stat-sub" id="uv-cat"></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Cloud Cover</div>
+          <div class="stat-val"><span id="cur-cloud">--</span><span class="stat-unit">%</span></div>
+        </div>
+        <div class="stat-card aqi-card">
+          <div class="stat-label">Air Quality (US AQI)</div>
+          <div class="stat-val"><span id="aqi-us">--</span> <span class="aqi-cat" id="aqi-cat"></span></div>
+          <div class="aqi-track"><span class="aqi-marker" id="aqi-marker"></span></div>
+          <div class="stat-sub">PM2.5 <span id="pm25">--</span> · Pollen <span id="pollen">--</span></div>
+        </div>
+        <div class="stat-card sun-tile">
+          <div class="stat-label">Sun &amp; Moon</div>
+          <div class="sun-timeline-wrap">
+            <div class="sun-endpoint"><span class="sun-ep-icon">🌅</span><span id="sunrise-val" class="sun-ep-time">--</span></div>
+            <div class="sun-track-wrap"><div class="sun-track"><div class="sun-progress" id="sun-progress"></div><div class="sun-dot" id="sun-dot">☀️</div></div></div>
+            <div class="sun-endpoint"><span class="sun-ep-icon">🌇</span><span id="sunset-val" class="sun-ep-time">--</span></div>
+          </div>
+          <div class="moon-row"><span class="moon-emoji">🌙</span><span id="moon-phase-val">--</span><span class="daylight-info" id="daylight-info">--</span></div>
+        </div>
+      </div>
+
       <details class="details-drawer discussion-drawer" id="discussion-drawer">
         <summary class="drawer-summary">
           Forecaster's Discussion
@@ -1296,19 +1275,12 @@
     <span class="bottom-label">Alerts</span>
     <span class="alert-badge hidden" id="alert-badge-bottom"></span>
   </button>
-  <button class="bottom-tab" data-tab="learn" type="button">
-    <span class="bottom-icon">📘</span>
-    <span class="bottom-label">Learn</span>
-  </button>
-  <button class="bottom-tab" data-tab="settings" type="button">
-    <span class="bottom-icon">⚙️</span>
-    <span class="bottom-label">Settings</span>
-  </button>
 </nav>
 
 <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
 <script src="app.js"></script>
 <script src="station-live.js"></script>
+<script src="app-ui.js"></script>
 <script>
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js');

app/public/manifest.json

@@ -6,8 +6,8 @@
   "scope": "/",
   "display": "standalone",
   "display_override": ["window-controls-overlay", "standalone"],
-  "background_color": "#191510",
-  "theme_color": "#191510",
+  "background_color": "#070c14",
+  "theme_color": "#070c14",
   "orientation": "portrait-primary",
   "categories": ["weather", "utilities"],
   "icons": [

app/public/style.css

@@ -1,15 +1,15 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --ink: #1a1a1a;
-  --ink-mid: #3d3730;
-  --ink-light: #5f5649;
-  --paper: #f5f2ec;
-  --paper-dark: #ece7db;
-  --paper-darker: #ddd6c7;
-  --border: #b9ae9b;
-  --accent: #c25a2a;
-  --cool: #2a6b8a;
+  --ink: #0d1b2a;
+  --ink-mid: #2b3f55;
+  --ink-light: #5a7089;
+  --paper: #edf2f7;
+  --paper-dark: #ffffff;
+  --paper-darker: #e3eaf2;
+  --border: #ccd6e2;
+  --accent: #2563eb;
+  --cool: #0e7490;
   --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', 'Segoe UI', sans-serif;
   --serif: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', 'Segoe UI', sans-serif;
   --card-bg: var(--paper-dark);
@@ -25,28 +25,28 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --ink: #ece7dc;
-    --ink-mid: #d2c8b1;
-    --ink-light: #beb399;
-    --paper: #191510;
-    --paper-dark: #201c16;
-    --paper-darker: #2b2620;
-    --border: #3a342a;
-    --accent: #e07848;
-    --cool: #5ab0d8;
+    --ink: #dce6f0;
+    --ink-mid: #b7c6d6;
+    --ink-light: #8aa2b8;
+    --paper: #070c14;
+    --paper-dark: #0d1720;
+    --paper-darker: #101c29;
+    --border: #22405c;
+    --accent: #60a5fa;
+    --cool: #38bdf8;
   }
 }
 
 :root[data-theme="dark"] {
-  --ink: #ece7dc;
-  --ink-mid: #d2c8b1;
-  --ink-light: #beb399;
-  --paper: #191510;
-  --paper-dark: #201c16;
-  --paper-darker: #2b2620;
-  --border: #3a342a;
-  --accent: #e07848;
-  --cool: #5ab0d8;
+  --ink: #dce6f0;
+  --ink-mid: #b7c6d6;
+  --ink-light: #8aa2b8;
+  --paper: #070c14;
+  --paper-dark: #0d1720;
+  --paper-darker: #101c29;
+  --border: #22405c;
+  --accent: #60a5fa;
+  --cool: #38bdf8;
 }
 
 html, body {
@@ -366,7 +366,7 @@ a:hover { text-decoration: underline; }
 .map-location-dot {
   width: 12px;
   height: 12px;
-  background: #e07848;
+  background: #60a5fa;
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 1px 4px rgba(0,0,0,0.5);

app/public/sw.js

@@ -4,7 +4,7 @@ self.addEventListener('message', event => {
   if (event.data === 'skipWaiting') self.skipWaiting();
 });
 
-const CACHE = 'weather-v8';
+const CACHE = 'weather-v9';
 
 // App shell cached on install for offline resilience.
 const PRECACHE = [
@@ -13,6 +13,8 @@ const PRECACHE = [
   '/style.css',
   '/station-live.css',
   '/station-live.js',
+  '/app-ui.css',
+  '/app-ui.js',
   '/manifest.json',
   '/icons/icon.svg'
 ];

app/server.js

@@ -706,6 +706,8 @@ app.get('/api/weather', async (req, res) => {
         'precipitation_sum','precipitation_probability_max',
         'wind_speed_10m_max','sunrise','sunset','uv_index_max'
       ].join(','),
+      minutely_15: 'precipitation',
+      forecast_minutely_15: 24,
       forecast_days: 16,
       wind_speed_unit: useMetric ? 'kmh' : 'mph',
       temperature_unit: useMetric ? 'celsius' : 'fahrenheit',
@@ -1574,6 +1576,30 @@ app.get('/api/station/records', requireDashboardAuth, (_req, res) => {
   res.json(deriveRecords());
 });
 
+// Public, minimal station context for the weather app (no raw readings): yesterday / today
+// extremes and the station's own average high/low for this date from earlier years.
+app.get('/api/station/summary', (_req, res) => {
+  const days = recordsStore.days;
+  const fmtDay = (ts) => new Intl.DateTimeFormat('en-CA', { timeZone: stationTzFallback }).format(new Date(ts));
+  const todayKey = fmtDay(Date.now());
+  const yKey = fmtDay(Date.now() - 86400000);
+  const pick = (k) => {
+    const d = days[k];
+    return d ? { day: k, hi: d.hi?.[0] ?? null, lo: d.lo?.[0] ?? null, rain: d.rain ?? null, gust: d.gust?.[0] ?? null } : null;
+  };
+  // Normals: same calendar date ±3 days in earlier years (needs a prior year of data)
+  const [ty, tm, td] = todayKey.split('-').map(Number);
+  const his = [], los = [];
+  for (const [k, d] of Object.entries(days)) {
+    const [y, m, dd] = k.split('-').map(Number);
+    if (y >= ty) continue;
+    const diff = Math.abs(Date.UTC(2001, m - 1, dd) - Date.UTC(2001, tm - 1, td)) / 86400000;
+    if (Math.min(diff, 365 - diff) <= 3) { if (d.hi) his.push(d.hi[0]); if (d.lo) los.push(d.lo[0]); }
+  }
+  const avg = (a) => (a.length >= 3 ? +(a.reduce((x, y) => x + y, 0) / a.length).toFixed(1) : null);
+  res.json({ today: pick(todayKey), yesterday: pick(yKey), normal: { hi: avg(his), lo: avg(los), samples: his.length }, daysRecorded: Object.keys(days).length });
+});
+
 // Per-day summaries (extremes, average temp, rain, wind-direction histogram) for charts/insights
 app.get('/api/station/daily', requireDashboardAuth, (req, res) => {
   const limit = Math.min(Math.max(parseInt(req.query.days) || 0, 0), 5000);