From c50436474c44dafa24a5443633713920aaf98d5f Mon Sep 17 00:00:00 2001
From: Dawson <71105828+DawsonCodes@users.noreply.github.com>
Date: Sat, 6 Jun 2026 23:35:34 +0000
Subject: [PATCH 1/3] Add seasonal palette system, time-of-day ambient
 intensity, and atmosphere/tab/scroll polish

- Seasonal palette (Auto/Winter/Spring/Summer/Fall/Custom) with location-aware Auto
  and a read-only Auto badge; reuses the constrained hue slider for Custom
- Subtle day/evening/night ambient intensity under Auto via data-daypart
- Refined per-season atmosphere (spring sway, summer firefly pulse) tuned for light/dark
- Settings-tab underline + panel entrance animation; smoother/subtler hourly scrolling
  with optional desktop arrows; clearer seasonal empty state
- Bump in-app version and package.json to 1.0.0-beta.4
---
 css/base.css       |   1 +
 css/components.css | 131 +++++++++++++++++++++++++++++++++++++++++----
 css/tokens.css     |  33 +++++++++---
 index.html         |  28 ++++++++--
 js/main.js         |  69 ++++++++++++++++++++----
 js/palette.js      |  62 +++++++++++++++++++++
 js/storage.js      |   3 +-
 js/ui.js           |  33 +++++++++++-
 package.json       |   2 +-
 9 files changed, 328 insertions(+), 34 deletions(-)
 create mode 100644 js/palette.js

diff --git a/css/base.css b/css/base.css
index 104dd8a..812afb9 100644
--- a/css/base.css
+++ b/css/base.css
@@ -32,6 +32,7 @@ body {
   background:
     radial-gradient(circle at 12% -10%, var(--bg-glow-1), transparent 45%),
     radial-gradient(circle at 90% 0%, var(--bg-glow-2), transparent 45%),
+    radial-gradient(circle at 50% 120%, hsl(30 90% 60% / var(--evening-warm, 0)), transparent 55%),
     var(--bg);
   background-attachment: fixed;
   line-height: 1.5;
diff --git a/css/components.css b/css/components.css
index 91775c8..619d054 100644
--- a/css/components.css
+++ b/css/components.css
@@ -720,12 +720,56 @@ input[type="range"]::-moz-range-thumb {
 }
 
 /* --- Hourly timeline --- */
+.timeline-row {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  min-width: 0;
+}
+
+/* Optional desktop-only scroll arrows; hidden on touch/small screens. */
+.timeline-arrow {
+  display: none;
+  flex: 0 0 auto;
+  width: 28px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.timeline-arrow:hover {
+  background: var(--surface-3);
+}
+
 .timeline {
   display: flex;
   gap: 6px;
   overflow-x: auto;
   padding-bottom: 6px;
+  min-width: 0;
+  scroll-behavior: smooth;
+  /* Subtle, unobtrusive scrollbar. */
   scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+
+.timeline::-webkit-scrollbar {
+  height: 6px;
+}
+
+.timeline::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.timeline::-webkit-scrollbar-thumb {
+  background: var(--surface-3);
+  border-radius: 999px;
 }
 
 .t-hour {
@@ -765,7 +809,14 @@ input[type="range"]::-moz-range-thumb {
   text-align: center;
   color: var(--muted);
   font-size: 0.9rem;
-  padding: 12px 0;
+  padding: 16px 0;
+}
+
+.empty-icon {
+  display: block;
+  font-size: 1.9rem;
+  margin-bottom: 8px;
+  opacity: 0.8;
 }
 
 /* --- Skeleton --- */
@@ -937,6 +988,7 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .settings-tab {
+  position: relative;
   appearance: none;
   border: none;
   background: none;
@@ -945,13 +997,31 @@ input[type="range"]::-moz-range-thumb {
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
   white-space: nowrap;
+  transition: color 0.16s ease;
+}
+
+/* Smoothly-animated active-tab underline (scales in; zeroed under reduced motion). */
+.settings-tab::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--accent-strong);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.16s ease;
 }
 
 .settings-tab[aria-selected="true"] {
   color: var(--accent-strong);
-  border-bottom-color: var(--accent-strong);
+}
+
+.settings-tab[aria-selected="true"]::after {
+  transform: scaleX(1);
 }
 
 .settings-tab:hover {
@@ -962,6 +1032,16 @@ input[type="range"]::-moz-range-thumb {
   padding-top: 6px;
 }
 
+/* Restrained fade + slight upward slide of a newly selected tab panel. */
+.settings-panel-tab.tab-anim {
+  animation: tab-in 0.16s ease both;
+}
+
+@keyframes tab-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
 .settings-group {
   border: none;
   padding: 14px 0 0;
@@ -1153,7 +1233,8 @@ input[type="range"]::-moz-range-thumb {
   top: -6vh;
   font-size: calc(15px * var(--s, 1));
   line-height: 1;
-  opacity: var(--o, 0.3);
+  /* Particle brightness dims subtly in the evening/night under the Auto palette. */
+  opacity: calc(var(--o, 0.3) * var(--atm-bright, 1));
   will-change: transform;
   animation: atm-fall var(--dur, 12s) linear var(--delay, 0s) infinite;
 }
@@ -1162,20 +1243,27 @@ input[type="range"]::-moz-range-thumb {
    Defaults below are tuned for dark backgrounds; the light-theme block re-tints
    for contrast. Per-theme opacity is nudged so effects stay tasteful on both. */
 .atmosphere[data-season="winter"] .atm-particle { color: #cfe0f5; }
-.atmosphere[data-season="spring"] .atm-particle { color: #f3c4d8; }
+
+/* Spring petals drift down with a gentle side-to-side sway. */
+.atmosphere[data-season="spring"] .atm-particle {
+  color: #f3c4d8;
+  animation-name: atm-sway-fall;
+}
+
+/* Fall leaves drift slowly and rotate (atm-fall already rotates a full turn). */
 .atmosphere[data-season="fall"] .atm-particle { font-size: calc(16px * var(--s, 1)); }
 
-/* Summer motes float upward with a soft warm glow. */
+/* Summer firefly-like motes float upward with a soft warm glow and brightness pulse. */
 .atmosphere[data-season="summer"] .atm-particle {
   color: #ffd98a;
   text-shadow: 0 0 6px rgba(255, 217, 138, 0.8);
-  animation-name: atm-rise;
+  animation-name: atm-firefly;
 }
 
 /* Light theme: darker tints + slightly lower opacity so particles read without
-   shouting against a bright surface. */
-:root[data-theme="light"] .atmosphere[data-season="winter"] .atm-particle { color: #6f9fd8; opacity: calc(var(--o, 0.3) * 0.8); }
-:root[data-theme="light"] .atmosphere[data-season="spring"] .atm-particle { color: #d27aa6; opacity: calc(var(--o, 0.3) * 0.8); }
+   shouting against a bright surface (still respecting the daypart brightness). */
+:root[data-theme="light"] .atmosphere[data-season="winter"] .atm-particle { color: #6f9fd8; opacity: calc(var(--o, 0.3) * 0.8 * var(--atm-bright, 1)); }
+:root[data-theme="light"] .atmosphere[data-season="spring"] .atm-particle { color: #d27aa6; opacity: calc(var(--o, 0.3) * 0.8 * var(--atm-bright, 1)); }
 :root[data-theme="light"] .atmosphere[data-season="summer"] .atm-particle { color: #e08a1e; text-shadow: none; }
 
 @keyframes atm-fall {
@@ -1190,6 +1278,25 @@ input[type="range"]::-moz-range-thumb {
   100% { transform: translate3d(var(--x, 0), -8vh, 0); opacity: 0; }
 }
 
+/* Spring: a gentle side-to-side sway while drifting down. */
+@keyframes atm-sway-fall {
+  0% { transform: translate3d(0, -6vh, 0) rotate(0deg); }
+  25% { transform: translate3d(16px, 27vh, 0) rotate(36deg); }
+  50% { transform: translate3d(-12px, 54vh, 0) rotate(-26deg); }
+  75% { transform: translate3d(14px, 81vh, 0) rotate(30deg); }
+  100% { transform: translate3d(0, 108vh, 0) rotate(0deg); }
+}
+
+/* Summer: rise slowly while pulsing brightness like a firefly. */
+@keyframes atm-firefly {
+  0% { transform: translate3d(0, 112vh, 0); opacity: 0; }
+  15% { opacity: calc(var(--o, 0.3) * var(--atm-bright, 1)); }
+  45% { opacity: calc(var(--o, 0.3) * var(--atm-bright, 1) * 0.4); }
+  65% { opacity: calc(var(--o, 0.3) * var(--atm-bright, 1)); }
+  85% { opacity: calc(var(--o, 0.3) * var(--atm-bright, 1) * 0.55); }
+  100% { transform: translate3d(var(--x, 0), -8vh, 0); opacity: 0; }
+}
+
 /* --- Motion polish for results / dropdown / toast --- */
 .result.reveal {
   animation: result-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
@@ -1268,6 +1375,10 @@ input[type="range"]::-moz-range-thumb {
     width: 118px;
     height: 118px;
   }
+  /* Hourly scroll arrows are a desktop-only affordance (touch users swipe). */
+  .timeline-arrow {
+    display: flex;
+  }
 }
 
 /* Wide workspace: factor breakdown beside the secondary weather details. */
diff --git a/css/tokens.css b/css/tokens.css
index 92cb6d9..62ccbd0 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -16,10 +16,16 @@
   --gap: 18px;
   --maxw: 1080px; /* roomier desktop workspace; collapses cleanly on mobile */
 
-  /* Accent hue (0..360). ~217 ≈ the original SnowSignal blue. */
+  /* Accent hue (0..360). ~217 ≈ the original SnowSignal blue. Driven by the
+     Seasonal palette (Auto/season presets) or the Custom hue slider. */
   --accent-h: 217;
 
-  /* fixed semantic colors — kept distinct from the accent */
+  /* Time-of-day ambient intensity (set via [data-daypart] only under Auto). */
+  --glow-mult: 1; /* ambient glow brightness multiplier */
+  --atm-bright: 1; /* atmosphere particle brightness multiplier */
+  --evening-warm: 0; /* alpha of a subtle warm evening wash */
+
+  /* fixed semantic colors — kept distinct from the accent and never hue-driven */
   --good: #16a34a;
   --warn: #f59e0b;
   --bad: #ef4444;
@@ -30,8 +36,8 @@
   --accent-strong: hsl(var(--accent-h) 85% 60%);
   --accent-ring: hsl(var(--accent-h) 85% 53% / 0.28);
   --bg: #eef4fb;
-  --bg-glow-1: hsl(var(--accent-h) 90% 65% / 0.22);
-  --bg-glow-2: hsl(var(--accent-h) 83% 53% / 0.16);
+  --bg-glow-1: hsl(var(--accent-h) 90% 65% / calc(0.22 * var(--glow-mult)));
+  --bg-glow-2: hsl(var(--accent-h) 83% 53% / calc(0.16 * var(--glow-mult)));
   --surface: #ffffff;
   --surface-2: #f1f5f9;
   --surface-3: #e2e8f0;
@@ -47,6 +53,21 @@
   color-scheme: light;
 }
 
+/* Time-of-day ambient intensity. Applied only under the Auto seasonal palette
+   (main.js sets/removes data-daypart). Subtle by design — not separate themes. */
+:root[data-daypart="day"] {
+  --glow-mult: 1.12;
+}
+:root[data-daypart="evening"] {
+  --glow-mult: 0.9;
+  --atm-bright: 0.9;
+  --evening-warm: 0.06;
+}
+:root[data-daypart="night"] {
+  --glow-mult: 0.66;
+  --atm-bright: 0.7;
+}
+
 :root[data-theme="dark"] {
   color-scheme: dark;
   /* Slightly brighter accent so any hue stays legible on the dark surface. */
@@ -54,8 +75,8 @@
   --accent-strong: hsl(var(--accent-h) 85% 70%);
   --accent-ring: hsl(var(--accent-h) 85% 62% / 0.4);
   --bg: #0b1220;
-  --bg-glow-1: hsl(var(--accent-h) 85% 60% / 0.2);
-  --bg-glow-2: hsl(var(--accent-h) 80% 55% / 0.24);
+  --bg-glow-1: hsl(var(--accent-h) 85% 60% / calc(0.2 * var(--glow-mult)));
+  --bg-glow-2: hsl(var(--accent-h) 80% 55% / calc(0.24 * var(--glow-mult)));
   --surface: #131c2e;
   --surface-2: #1b2640;
   --surface-3: #243150;
diff --git a/index.html b/index.html
index 2fc7b9e..93ee59b 100644
--- a/index.html
+++ b/index.html
@@ -212,7 +212,11 @@ <h2 class="section-title">What’s driving this estimate</h2>
               <summary>Weather details</summary>
               <dl class="wd-grid" id="wd-grid"></dl>
               <h3 class="section-title wd-timeline-title">Hourly outlook</h3>
-              <div id="timeline" class="timeline" role="img" aria-label="Hourly snow and temperature forecast"></div>
+              <div class="timeline-row">
+                <button type="button" class="timeline-arrow" id="timeline-prev" aria-label="Scroll the hourly forecast earlier" tabindex="-1">‹</button>
+                <div id="timeline" class="timeline" role="img" aria-label="Hourly snow and temperature forecast"></div>
+                <button type="button" class="timeline-arrow" id="timeline-next" aria-label="Scroll the hourly forecast later" tabindex="-1">›</button>
+              </div>
             </details>
           </div>
         </div>
@@ -220,9 +224,10 @@ <h3 class="section-title wd-timeline-title">Hourly outlook</h3>
         <p class="cache-note" id="cache-note" hidden></p>
       </section>
 
-      <p class="empty-state" id="empty-state">
-        Search for a location above to see your snow day estimate.
-      </p>
+      <div class="empty-state" id="empty-state">
+        <span class="empty-icon" id="empty-icon" aria-hidden="true">❄️</span>
+        <p>Search a location to check tonight’s forecast.</p>
+      </div>
     </main>
 
     <!-- Schedule context: heuristic calendar reminders, separate from the calculator.
@@ -281,6 +286,19 @@ <h2 id="settings-title">Settings</h2>
             <p class="settings-badge" id="theme-system-badge" hidden></p>
           </fieldset>
 
+          <fieldset class="settings-group">
+            <legend>Seasonal palette</legend>
+            <div class="settings-pills" id="palette-options" role="radiogroup" aria-label="Seasonal palette">
+              <label class="pill"><input type="radio" name="palette" value="auto" /> <span>Auto</span></label>
+              <label class="pill"><input type="radio" name="palette" value="winter" /> <span>Winter</span></label>
+              <label class="pill"><input type="radio" name="palette" value="spring" /> <span>Spring</span></label>
+              <label class="pill"><input type="radio" name="palette" value="summer" /> <span>Summer</span></label>
+              <label class="pill"><input type="radio" name="palette" value="fall" /> <span>Fall</span></label>
+              <label class="pill"><input type="radio" name="palette" value="custom" /> <span>Custom</span></label>
+            </div>
+            <p class="settings-badge" id="palette-auto-badge" hidden></p>
+          </fieldset>
+
           <fieldset class="settings-group">
             <legend>Accent hue</legend>
             <div class="accent-row">
@@ -290,7 +308,7 @@ <h2 id="settings-title">Settings</h2>
                      aria-describedby="accent-help" />
               <button type="button" class="ghost-btn" id="accent-reset">Reset</button>
             </div>
-            <p class="hint" id="accent-help">Tunes the accent and ambient glow. Contrast and status colors stay fixed.</p>
+            <p class="hint" id="accent-help">Adjusting the hue switches Seasonal palette to Custom. Reset restores Auto. Contrast and status colors stay fixed.</p>
           </fieldset>
 
           <fieldset class="settings-group">
diff --git a/js/main.js b/js/main.js
index 455158b..6ae040b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -33,11 +33,12 @@ import {
   forecastTargetDate,
 } from "./calendarContext.js";
 import { applyAtmosphere } from "./atmosphere.js";
+import { resolvePaletteSeason, resolvePaletteHue, daypartFromHour } from "./palette.js";
 import * as ui from "./ui.js";
 
 const { $ } = ui;
 
-const APP_VERSION = "1.0.0-beta.3";
+const APP_VERSION = "1.0.0-beta.4";
 
 // The last user action, so the error-state Retry button can re-run it.
 let lastAction = null;
@@ -72,7 +73,6 @@ let activeSuggestion = -1;
 function applySettings() {
   ui.applyTheme(state.settings.theme);
   ui.applyMotion(state.settings.reducedMotion);
-  ui.applyAccent(state.settings.accentHue);
 
   // School context controls
   $("school-type").value = state.settings.schoolType;
@@ -85,14 +85,41 @@ function applySettings() {
 
   // Settings dialog controls
   setRadio("theme", state.settings.theme);
+  setRadio("palette", state.settings.seasonalPalette);
   setRadio("atmosphere", state.settings.atmosphere);
   setRadio("temp-unit", state.settings.tempUnit);
   setRadio("reduced-motion", state.settings.reducedMotion);
-  $("accent-hue").value = String(Number.isFinite(state.settings.accentHue) ? state.settings.accentHue : 217);
 
+  applyPaletteNow(); // resolves the accent hue, daypart, badge, slider, empty icon
   applyAtmosphereNow();
 }
 
+/**
+ * Resolve and apply the seasonal palette: accent hue (via the Custom slider or a
+ * season preset), the time-of-day ambient intensity (Auto only), the read-only
+ * Auto badge, the hue-slider reflection, and the empty-state seasonal icon.
+ */
+function applyPaletteNow() {
+  const palette = state.settings.seasonalPalette;
+  const lat = state.place ? state.place.latitude : null;
+  const now = locationNow(state.forecast); // browser clock until a forecast loads
+  const season = resolvePaletteSeason({ palette, lat, date: now });
+  const hue = resolvePaletteHue({ palette, accentHue: state.settings.accentHue, lat, date: now });
+
+  ui.applyAccent(hue);
+  $("accent-hue").value = String(Math.round(hue)); // reflect resolved hue on the slider
+
+  // Subtle time-of-day ambient intensity, only under the Auto palette.
+  const root = document.documentElement;
+  if (palette === "auto") root.setAttribute("data-daypart", daypartFromHour(now.getHours()));
+  else root.removeAttribute("data-daypart");
+
+  ui.updatePaletteBadge(palette, season);
+  // Decorative empty-state icon: use the resolved season, or the location/date
+  // season when on a Custom palette.
+  ui.setEmptyIcon(season || resolvePaletteSeason({ palette: "auto", lat, date: now }));
+}
+
 function setRadio(name, value) {
   const el = document.querySelector(`input[name="${name}"][value="${value}"]`);
   if (el) el.checked = true;
@@ -225,6 +252,7 @@ async function loadPlace(place) {
   $("location").value = formatPlaceLabel(place);
   ui.showSkeleton();
   applyAtmosphereNow(); // hemisphere may flip the auto season
+  applyPaletteNow(); // auto palette/season follows the new location
 
   const lat = place.latitude;
   const lon = place.longitude;
@@ -260,6 +288,7 @@ async function loadPlace(place) {
     state.alert = await alertsPromise;
 
     ui.renderAlertBanner(state.alert);
+    applyPaletteNow(); // daypart can now use the location's local time
     refreshScheduleContext(); // now that a location exists
     recompute({ entrance: true }); // fresh forecast → full entrance animation
 
@@ -565,18 +594,30 @@ function wireSettings() {
     })
   );
 
-  // Accent hue: live preview on input, persist on change.
+  // Seasonal palette pills.
+  document.querySelectorAll('input[name="palette"]').forEach((r) =>
+    r.addEventListener("change", () => {
+      if (r.checked) {
+        state.settings = saveSettings({ seasonalPalette: r.value });
+        applyPaletteNow(); // presentation only — no result re-render
+      }
+    })
+  );
+
+  // Accent hue: live preview on input; adjusting it switches the palette to Custom.
   $("accent-hue").addEventListener("input", () => ui.applyAccent(Number($("accent-hue").value)));
   $("accent-hue").addEventListener("change", () => {
     const hue = Number($("accent-hue").value);
-    state.settings = saveSettings({ accentHue: hue });
-    ui.applyAccent(hue);
+    state.settings = saveSettings({ seasonalPalette: "custom", accentHue: hue });
+    setRadio("palette", "custom");
+    applyPaletteNow();
   });
   $("accent-reset").addEventListener("click", () => {
-    state.settings = saveSettings({ accentHue: null });
-    $("accent-hue").value = "217";
-    ui.applyAccent(null);
-    ui.toast("Accent reset");
+    // Reset restores the Auto seasonal palette and the brand hue.
+    state.settings = saveSettings({ seasonalPalette: "auto", accentHue: null });
+    setRadio("palette", "auto");
+    applyPaletteNow();
+    ui.toast("Palette reset to Auto");
   });
 
   // Data actions (destructive → confirm, then toast).
@@ -703,6 +744,14 @@ function init() {
     else if (state.place) loadPlace(state.place);
   });
 
+  // Desktop-only hourly scroll arrows (touch users swipe; smooth via CSS).
+  const scrollTimelineBy = (dx) => {
+    const t = $("timeline");
+    if (t) t.scrollBy({ left: dx, behavior: "smooth" });
+  };
+  $("timeline-prev").addEventListener("click", () => scrollTimelineBy(-180));
+  $("timeline-next").addEventListener("click", () => scrollTimelineBy(180));
+
   // React to OS theme changes while on "system".
   if (window.matchMedia) {
     window
diff --git a/js/palette.js b/js/palette.js
new file mode 100644
index 0000000..c7f768d
--- /dev/null
+++ b/js/palette.js
@@ -0,0 +1,62 @@
+// palette.js
+// PURE seasonal-palette resolution. Maps the Seasonal palette preference to a
+// constrained accent hue (saturation/lightness stay locked in CSS) and a
+// time-of-day "daypart". Imports only the pure season helper, touches no DOM,
+// clock, or network — every input is passed in, so it runs in the browser and
+// under `node --test`.
+
+import { seasonFromLatitude } from "./calendarContext.js";
+
+// Restrained seasonal accent hues (degrees). Kept inside safe ranges; the fixed
+// saturation/lightness in tokens.css guarantees readable contrast for any of them.
+export const PALETTE_HUES = {
+  winter: 200, // icy blue / cyan
+  spring: 325, // soft pink / lavender
+  summer: 140, // fresh green
+  fall: 32, // amber / orange
+};
+
+// The neutral brand hue used for Custom with no chosen hue yet.
+export const DEFAULT_HUE = 217;
+
+const SEASONS = ["winter", "spring", "summer", "fall"];
+
+/**
+ * Resolve which season a palette renders. Explicit seasons pass through; "auto"
+ * follows the location's latitude + local date (southern hemisphere inverts via
+ * seasonFromLatitude); "custom" has no season.
+ * @returns {'winter'|'spring'|'summer'|'fall'|null}
+ */
+export function resolvePaletteSeason({ palette, lat, date } = {}) {
+  if (SEASONS.includes(palette)) return palette;
+  if (palette === "auto") return seasonFromLatitude(lat, date || new Date());
+  return null; // custom
+}
+
+/**
+ * Resolve the accent hue to apply for the current palette settings.
+ * @param {object} opts
+ * @param {string} opts.palette      auto|winter|spring|summer|fall|custom
+ * @param {number|null} opts.accentHue  the user's custom hue (used when Custom)
+ * @param {number|null} opts.lat
+ * @param {Date} [opts.date]
+ * @returns {number} hue 0..360
+ */
+export function resolvePaletteHue({ palette, accentHue, lat, date } = {}) {
+  if (palette === "custom") return Number.isFinite(accentHue) ? accentHue : DEFAULT_HUE;
+  const season = resolvePaletteSeason({ palette, lat, date });
+  return season ? PALETTE_HUES[season] : DEFAULT_HUE;
+}
+
+/**
+ * Coarse time-of-day bucket from an hour (0..23), used only to vary ambient
+ * intensity subtly under the Auto palette. Not a separate theme.
+ * @returns {'day'|'evening'|'night'}
+ */
+export function daypartFromHour(hour) {
+  const h = Number(hour);
+  if (!Number.isFinite(h)) return "day";
+  if (h >= 7 && h < 17) return "day";
+  if (h >= 17 && h < 21) return "evening";
+  return "night";
+}
diff --git a/js/storage.js b/js/storage.js
index 5ba81fc..7b97bdc 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -10,7 +10,8 @@ const DEFAULT_TTL_MS = 30 * 60 * 1000; // 30 minutes
 
 export const DEFAULT_SETTINGS = {
   theme: "system", // 'system' | 'light' | 'dark'
-  accentHue: null, // null = brand default; otherwise an integer hue 0..360
+  seasonalPalette: "auto", // 'auto' | 'winter' | 'spring' | 'summer' | 'fall' | 'custom'
+  accentHue: null, // null = brand default; otherwise an integer hue 0..360 (used when Custom)
   atmosphere: "auto", // 'auto' | 'winter' | 'spring' | 'summer' | 'fall' | 'off'
   tempUnit: "fahrenheit",
   reducedMotion: "system", // 'system' | 'on' | 'off'
diff --git a/js/ui.js b/js/ui.js
index 537d9d8..0c60a2f 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -48,6 +48,28 @@ export function applyAccent(hue) {
   else root.style.removeProperty("--accent-h");
 }
 
+const cap = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : "");
+
+/** Show the read-only "Auto palette: Season" badge only while the palette is Auto. */
+export function updatePaletteBadge(palette, season) {
+  const badge = $("palette-auto-badge");
+  if (!badge) return;
+  if (palette === "auto" && season) {
+    badge.textContent = `Auto palette: ${cap(season)}`;
+    show(badge);
+  } else {
+    hide(badge);
+  }
+}
+
+const SEASON_ICON = { winter: "❄️", spring: "🌸", summer: "☀️", fall: "🍂" };
+
+/** Set the restrained seasonal accent icon shown in the empty state. */
+export function setEmptyIcon(season) {
+  const el = $("empty-icon");
+  if (el) el.textContent = SEASON_ICON[season] || "❄️";
+}
+
 /** Resolve a theme preference to the concrete theme currently shown. */
 export function resolvedTheme() {
   return document.documentElement.getAttribute("data-theme") || "light";
@@ -488,7 +510,16 @@ export function activateTab(tabId, { focus = false } = {}) {
     tab.setAttribute("aria-selected", String(selected));
     tab.tabIndex = selected ? 0 : -1;
     const panel = $(tab.getAttribute("aria-controls"));
-    if (panel) panel.hidden = !selected;
+    if (panel) {
+      panel.hidden = !selected;
+      if (selected) {
+        // Restrained fade/slide-in of the newly shown panel (zeroed under reduced
+        // motion by the global motion rules). Re-trigger via reflow.
+        panel.classList.remove("tab-anim");
+        void panel.offsetWidth;
+        panel.classList.add("tab-anim");
+      }
+    }
     if (selected && focus) tab.focus();
   }
 }
diff --git a/package.json b/package.json
index 18c39b4..053f3aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "snowsignal",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "SnowSignal — a transparent, free, static snow-day and school-delay predictor powered by Open-Meteo.",
   "type": "module",
   "private": true,

From d3d87c96cf1c50bc2d14d820978280ccc83fdae1 Mon Sep 17 00:00:00 2001
From: Dawson <71105828+DawsonCodes@users.noreply.github.com>
Date: Sat, 6 Jun 2026 23:35:45 +0000
Subject: [PATCH 2/3] Document v1.0.0-beta.4 seasonal-polish beta

Update README, CHANGELOG, and ROADMAP for the seasonal palette, time-of-day
ambient intensity, atmosphere refinement, settings-tab motion, hourly-scroll,
and empty-state changes. Documented as a polish beta, not a stable release.
---
 CHANGELOG.md | 37 +++++++++++++++++++++++++++++++++++++
 README.md    | 32 ++++++++++++++++++--------------
 ROADMAP.md   |  9 ++++++++-
 3 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f65823e..c4f1159 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,43 @@
 All notable changes to SnowSignal are documented here. This project is in **public
 beta**; versions follow [semantic versioning](https://semver.org) with pre-release tags.
 
+## [1.0.0-beta.4] — 2026-06-06
+
+A focused **seasonal-polish beta** — the last planned visual-polish release for a while, and
+**not** a stable production release. No engine changes, no backend, no framework, no build step,
+no analytics/tracking, no new runtime dependencies. Stays fully static under GitHub Pages
+`/snowsignal/`, and all beta.2/beta.3 preferences, saved/recent locations, and share links keep
+working.
+
+### Added
+- **Seasonal palette** (Appearance → Seasonal palette): **Auto / Winter / Spring / Summer / Fall /
+  Custom**. Auto follows the selected location's latitude + local date (Southern Hemisphere
+  inverts; browser date as a fallback before a location is chosen) and shows a read-only
+  `Auto palette: <Season>` badge. Restrained seasonal accents — Winter icy blue/cyan, Spring soft
+  pink/lavender, Summer fresh green, Fall amber/orange — each with a matching ambient glow.
+  Persisted in `localStorage`. The existing constrained hue slider remains; **adjusting it switches
+  the palette to Custom**, and **Reset restores Auto**. Semantic warning/success/error colors stay
+  fixed and never follow the accent.
+- **Time-of-day ambient intensity** (Auto palette only): a subtle day/evening/night variation of
+  the ambient glow and particle brightness based on the location's local time (browser time as a
+  fallback) — brighter by day, softer/slightly warmer in the evening, deeper and dimmer at night.
+  Not separate themes.
+- **Optional desktop hourly scroll arrows** in Weather details (touch users still swipe).
+
+### Changed
+- **Atmosphere refinement** — varied winter snowflakes with slow layered drift, spring petals with
+  a gentle side-to-side sway, firefly-like summer motes with restrained brightness pulses, and
+  slowly rotating fall leaves. Low particle counts, `pointer-events: none`, no layout impact, and
+  fully disabled under reduced motion / Reduce animations; tuned for both Light and Dark.
+- **Settings-tab motion polish** — a restrained ~160ms fade + 4px upward slide of the newly
+  selected panel and a smoothly animated active-tab underline, with keyboard focus, tab semantics,
+  Arrow/Home/End navigation, focus trapping, Escape/X/click-outside close all preserved. Switching
+  tabs never replays result animations; effects are zeroed under reduced motion.
+- **Hourly forecast scrolling** — smooth horizontal scrolling, a subtler scrollbar, and no
+  horizontal page overflow.
+- **Empty state** — clearer prompt ("Search a location to check tonight's forecast.") with one
+  restrained seasonal icon; kept lightweight.
+
 ## [1.0.0-beta.3] — 2026-06-06
 
 Another focused **polish beta** — not a stable release. The transparent deterministic
diff --git a/README.md b/README.md
index c47fafd..e8a41a5 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ deploys to GitHub Pages as-is. The only third-party calls are Open-Meteo (weathe
 geocoding), the NWS alerts API (U.S. only), and BigDataCloud's free, keyless
 reverse-geocode endpoint for friendly "My location" labels.
 
-> **Status:** polish beta (`v1.0.0-beta.3`) — not a stable release. See
+> **Status:** seasonal-polish beta (`v1.0.0-beta.4`) — not a stable release. See
 > [Versioning](#versioning), [CHANGELOG.md](CHANGELOG.md), and [ROADMAP.md](ROADMAP.md).
 > The GitHub Pages URL is served from the `/snowsignal/` project subpath and all asset
 > paths are relative so the app keeps working there.
@@ -28,10 +28,15 @@ reverse-geocode endpoint for friendly "My location" labels.
 - 🛑 A **winter-weather plausibility gate**: with no meaningful winter hazard in the forecast window,
   the estimate resolves to **0%** with a clear explanation — sensitivity, warm-weather wind, or the
   calendar month can't create a phantom snow day, and unusual out-of-season storms still count
-- 🎨 **System / Light / Dark** themes (with a "System detected" badge) plus safe **accent-hue**
-  customization via a constrained hue slider
-- 🍃 **Seasonal atmosphere** — restrained, motion-respecting ambient effects (snow / petals / motes /
-  leaves) with an **Auto** mode that reads the location's hemisphere + date, tuned for light & dark
+- 🎨 **System / Light / Dark** themes (with a "System detected" badge) plus a **Seasonal palette**
+  (Auto / Winter / Spring / Summer / Fall / Custom). **Auto** follows the location's latitude + local
+  date (Southern Hemisphere inverts) and shows an `Auto palette: <Season>` badge; the constrained
+  **hue slider** still lets you go **Custom** (Reset restores Auto). Status colors stay fixed.
+- 🌗 **Time-of-day ambient intensity** under Auto — a subtle brighter-by-day / softer-evening /
+  deeper-night variation of the ambient glow and particle brightness (not separate themes)
+- 🍃 **Seasonal atmosphere** — restrained, motion-respecting ambient effects: varied drifting snow,
+  swaying spring petals, firefly-like summer motes, and rotating fall leaves — tuned for light & dark
+  and fully disabled under reduced motion
 - 📅 A separate **Schedule context** panel — clearly-labeled weekend / summer-break / winter-break
   heuristics, hidden until a result exists (dismissible, never authoritative)
 - 🗓️ A result **date & freshness header** (location-local date, forecast window, "Updated …" stamp) and
@@ -146,15 +151,14 @@ Notes:
 
 ## Versioning
 
-This is **`v1.0.0-beta.3`** — a **polish beta**, still not a stable release. `beta.1` was the
-first public beta of the rebuilt app; `beta.2` and `beta.3` keep the same transparent prediction
-engine. `beta.3` adds a winter-weather plausibility gate, a wider desktop workspace, a separate
-Schedule context panel, simplified System/Light/Dark themes with safe accent-hue customization, a
-wider tabbed Settings modal, fewer animation replays, result date/freshness labels, a collapsible
-Weather details panel, a device-local estimate counter, and friendlier loading/error states. Please
-keep treating predictions as estimates while the engine is tuned against real outcomes. Full notes
-are in [CHANGELOG.md](CHANGELOG.md); the road to a stable `v1.0.0` and beyond is in
-[ROADMAP.md](ROADMAP.md).
+This is **`v1.0.0-beta.4`** — a **seasonal-polish beta** (the last planned visual-polish release for
+a while), still not a stable release. `beta.1` was the first public beta of the rebuilt app;
+`beta.2`–`beta.4` keep the same transparent prediction engine. `beta.4` adds the Seasonal palette
+system with location-aware Auto and safe accent ranges, subtle time-of-day ambient intensity, refined
+per-season atmosphere, Settings-tab motion polish, smoother/subtler hourly-forecast scrolling, and a
+clearer seasonal empty state. Please keep treating predictions as estimates while the engine is tuned
+against real outcomes. Full notes are in [CHANGELOG.md](CHANGELOG.md); the road to a stable `v1.0.0`
+and beyond is in [ROADMAP.md](ROADMAP.md).
 
 ## Attribution
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 3e0f945..49e52ad 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -19,7 +19,7 @@ behavior with explicit share links, friendlier reverse-geocoded geolocation labe
 reworked grouped Settings dialog with data resets, and stronger input validation. See
 [CHANGELOG.md](CHANGELOG.md).
 
-## v1.0.0-beta.3 — current
+## v1.0.0-beta.3
 A further polish beta (not a stable release) on the same transparent engine: a winter-weather
 plausibility gate so benign weather resolves to 0%, a wider desktop workspace, a separate
 Schedule context panel, simplified System/Light/Dark themes with safe accent-hue customization,
@@ -27,6 +27,13 @@ a wider tabbed Settings modal, no unnecessary animation replays, result date/fre
 a collapsible Weather details panel, a device-local estimate counter, friendlier loading/error
 states, and open-source (MIT) documentation. See [CHANGELOG.md](CHANGELOG.md).
 
+## v1.0.0-beta.4 — current
+The last planned visual-polish beta (not a stable release) on the same engine: a Seasonal palette
+system (Auto/Winter/Spring/Summer/Fall/Custom) with location-aware Auto and a safe accent range,
+subtle time-of-day ambient intensity under Auto, refined per-season atmosphere, Settings-tab motion
+polish, smoother/subtler hourly-forecast scrolling with optional desktop arrows, and a clearer
+seasonal empty state. See [CHANGELOG.md](CHANGELOG.md).
+
 ## v1.0.0 — stable
 Promote to a stable release after bug fixes and real-world testing across a range
 of locations, devices, and storms.

From 9a5b4bb7c32a4836926806013f9c3a62e1cde3ca Mon Sep 17 00:00:00 2001
From: Dawson <71105828+DawsonCodes@users.noreply.github.com>
Date: Sat, 6 Jun 2026 23:35:45 +0000
Subject: [PATCH 3/3] Add beta.4 regression tests

Cover seasonal-palette resolution and persistence, Southern-Hemisphere inversion,
Custom-hue persistence, daypart bucketing, tab semantics, atmosphere/tab/scroll CSS
guards, semantic-color independence from the accent, beta.2/beta.3 share-link
restoration, and the beta.4 version stamp.
---
 tests/meta.test.js     |  2 +-
 tests/palette.test.js  | 51 +++++++++++++++++++++++++++++++++
 tests/storage.test.js  | 21 ++++++++++++++
 tests/styles.test.js   | 65 ++++++++++++++++++++++++++++++++++++++++++
 tests/ui.test.js       | 33 +++++++++++++++++----
 tests/urlState.test.js | 29 ++++++++++++++++++-
 6 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 tests/palette.test.js

diff --git a/tests/meta.test.js b/tests/meta.test.js
index cb1999f..619a421 100644
--- a/tests/meta.test.js
+++ b/tests/meta.test.js
@@ -8,7 +8,7 @@ import { dirname, join } from "node:path";
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const read = (p) => readFileSync(join(root, p), "utf8");
 
-const VERSION = "1.0.0-beta.3";
+const VERSION = "1.0.0-beta.4";
 
 test("a root MIT LICENSE file exists and GitHub can recognize it", () => {
   const license = read("LICENSE");
diff --git a/tests/palette.test.js b/tests/palette.test.js
new file mode 100644
index 0000000..955b42e
--- /dev/null
+++ b/tests/palette.test.js
@@ -0,0 +1,51 @@
+// Tests for the pure seasonal-palette resolver.
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import {
+  resolvePaletteSeason,
+  resolvePaletteHue,
+  daypartFromHour,
+  PALETTE_HUES,
+  DEFAULT_HUE,
+} from "../js/palette.js";
+
+const d = (s) => new Date(s);
+
+test("explicit seasons pass through regardless of date/location", () => {
+  for (const s of ["winter", "spring", "summer", "fall"]) {
+    assert.equal(resolvePaletteSeason({ palette: s, lat: 42, date: d("2026-07-15T12:00") }), s);
+    assert.equal(resolvePaletteHue({ palette: s }), PALETTE_HUES[s]);
+  }
+});
+
+test("custom has no season and uses the saved hue (brand default when unset)", () => {
+  assert.equal(resolvePaletteSeason({ palette: "custom", lat: 42, date: d("2026-01-01T12:00") }), null);
+  assert.equal(resolvePaletteHue({ palette: "custom", accentHue: 280 }), 280);
+  assert.equal(resolvePaletteHue({ palette: "custom", accentHue: null }), DEFAULT_HUE);
+});
+
+test("auto palette resolves season from the location's latitude and date", () => {
+  assert.equal(resolvePaletteSeason({ palette: "auto", lat: 42, date: d("2026-01-15T12:00") }), "winter");
+  assert.equal(resolvePaletteSeason({ palette: "auto", lat: 42, date: d("2026-07-15T12:00") }), "summer");
+  assert.equal(resolvePaletteHue({ palette: "auto", lat: 42, date: d("2026-07-15T12:00") }), PALETTE_HUES.summer);
+});
+
+test("auto palette inverts seasons in the Southern Hemisphere", () => {
+  assert.equal(resolvePaletteSeason({ palette: "auto", lat: -33, date: d("2026-01-15T12:00") }), "summer");
+  assert.equal(resolvePaletteSeason({ palette: "auto", lat: -33, date: d("2026-07-15T12:00") }), "winter");
+  assert.equal(resolvePaletteHue({ palette: "auto", lat: -33, date: d("2026-07-15T12:00") }), PALETTE_HUES.winter);
+});
+
+test("auto palette falls back to the date's season when latitude is unknown", () => {
+  // Unknown latitude → treated as northern hemisphere.
+  assert.equal(resolvePaletteSeason({ palette: "auto", lat: null, date: d("2026-12-20T12:00") }), "winter");
+});
+
+test("daypartFromHour buckets day / evening / night", () => {
+  assert.equal(daypartFromHour(9), "day");
+  assert.equal(daypartFromHour(13), "day");
+  assert.equal(daypartFromHour(18), "evening");
+  assert.equal(daypartFromHour(23), "night");
+  assert.equal(daypartFromHour(3), "night");
+  assert.equal(daypartFromHour("nope"), "day"); // safe fallback
+});
diff --git a/tests/storage.test.js b/tests/storage.test.js
index b993620..69031c0 100644
--- a/tests/storage.test.js
+++ b/tests/storage.test.js
@@ -60,6 +60,27 @@ test("accent hue persists and resets", () => {
   assert.equal(getSettings().accentHue, null);
 });
 
+test("seasonal palette defaults to auto and persists each mode", () => {
+  assert.equal(getSettings().seasonalPalette, "auto");
+  for (const mode of ["winter", "spring", "summer", "fall", "custom", "auto"]) {
+    saveSettings({ seasonalPalette: mode });
+    assert.equal(getSettings().seasonalPalette, mode);
+  }
+});
+
+test("manual hue adjustment is stored as Custom; reset restores Auto", () => {
+  // What main.js persists when the user drags the hue slider.
+  saveSettings({ seasonalPalette: "custom", accentHue: 290 });
+  let s = getSettings();
+  assert.equal(s.seasonalPalette, "custom");
+  assert.equal(s.accentHue, 290);
+  // What main.js persists on Reset.
+  saveSettings({ seasonalPalette: "auto", accentHue: null });
+  s = getSettings();
+  assert.equal(s.seasonalPalette, "auto");
+  assert.equal(s.accentHue, null);
+});
+
 test("local estimate counter increments and resets", () => {
   assert.equal(getEstimateCount(), 0);
   assert.equal(incrementEstimateCount(), 1);
diff --git a/tests/styles.test.js b/tests/styles.test.js
index 4e78ae6..d1a6aae 100644
--- a/tests/styles.test.js
+++ b/tests/styles.test.js
@@ -107,4 +107,69 @@ test("light and dark atmospheres are tuned separately", () => {
     /:root\[data-theme="light"\]\s+\.atmosphere\[data-season="winter"\]/,
     "light-theme winter particles are re-tinted for contrast"
   );
+  assert.match(
+    css,
+    /:root\[data-theme="light"\]\s+\.atmosphere\[data-season="summer"\]/,
+    "light-theme summer particles are re-tinted too"
+  );
+});
+
+test("refined seasonal atmospheres define their motion keyframes", () => {
+  const css = read("css/components.css");
+  assert.match(css, /@keyframes atm-sway-fall/, "spring sway keyframe");
+  assert.match(css, /@keyframes atm-firefly/, "summer firefly keyframe");
+  assert.match(css, /data-season="spring"[^}]*animation-name:\s*atm-sway-fall/, "spring uses the sway");
+  assert.match(css, /data-season="summer"[^}]*animation-name:\s*atm-firefly/, "summer uses the firefly");
+});
+
+test("seasonal palette control and Auto badge exist in the Appearance tab", () => {
+  const html = read("index.html");
+  assert.match(html, /name="palette"[^>]*value="auto"/, "Auto palette option");
+  assert.match(html, /name="palette"[^>]*value="custom"/, "Custom palette option");
+  assert.match(html, /id="palette-auto-badge"/, "the read-only Auto palette badge");
+});
+
+test("semantic status colors are fixed and NOT hue-driven", () => {
+  const tokens = read("css/tokens.css");
+  // Each is a literal hex, never hsl(var(--accent-h) ...).
+  assert.match(tokens, /--good:\s*#[0-9a-fA-F]{3,8}\s*;/);
+  assert.match(tokens, /--warn:\s*#[0-9a-fA-F]{3,8}\s*;/);
+  assert.match(tokens, /--bad:\s*#[0-9a-fA-F]{3,8}\s*;/);
+  assert.equal(/--(?:good|warn|bad):\s*hsl\(var\(--accent-h\)/.test(tokens), false, "status colors must not follow the accent hue");
+});
+
+test("time-of-day ambient intensity is defined via data-daypart", () => {
+  const tokens = read("css/tokens.css");
+  assert.match(tokens, /\[data-daypart="day"\]/);
+  assert.match(tokens, /\[data-daypart="evening"\]/);
+  assert.match(tokens, /\[data-daypart="night"\][^}]*--glow-mult/);
+  assert.match(tokens, /--glow-mult/, "ambient glow uses an intensity multiplier");
+});
+
+test("hourly timeline keeps subtle, smooth, overflow-safe scrolling", () => {
+  const css = read("css/components.css");
+  const rule = /\.timeline\s*\{[^}]*\}/.exec(css);
+  assert.ok(rule, "expected a .timeline rule");
+  assert.match(rule[0], /overflow-x:\s*auto/, "horizontal scrolling preserved");
+  assert.match(rule[0], /scroll-behavior:\s*smooth/, "smooth scrolling");
+  assert.match(rule[0], /scrollbar-width:\s*thin/, "subtle scrollbar");
+  assert.match(css, /\.timeline-arrow/, "optional desktop scroll arrows are styled");
+  // Arrows are desktop-only (declared display:none, revealed in a min-width query).
+  assert.match(css, /\.timeline-arrow\s*\{[^}]*display:\s*none/);
+});
+
+test("settings tabs animate the underline and panel without reduced-motion regressions", () => {
+  const css = read("css/components.css");
+  assert.match(css, /\.settings-tab::after/, "animated underline pseudo-element");
+  assert.match(css, /@keyframes tab-in/, "panel fade/slide keyframe");
+  assert.match(css, /\.settings-panel-tab\.tab-anim/, "panel entrance class");
+  // Reduced-motion handling must still be present so these are zeroed.
+  assert.match(css, /@media\s*\(prefers-reduced-motion: reduce\)/);
+  assert.match(css, /\[data-motion="reduce"\]/);
+});
+
+test("empty state has a restrained seasonal icon and a clearer prompt", () => {
+  const html = read("index.html");
+  assert.match(html, /id="empty-icon"/, "seasonal empty-state icon");
+  assert.match(html, /Search a location to check tonight’s forecast\./, "clearer prompt");
 });
diff --git a/tests/ui.test.js b/tests/ui.test.js
index f6b648f..b29f771 100644
--- a/tests/ui.test.js
+++ b/tests/ui.test.js
@@ -8,8 +8,10 @@ import assert from "node:assert/strict";
 function makeEl() {
   const classes = new Set();
   const qcache = {};
+  const attrs = {};
   const el = {
     children: [],
+    tabIndex: 0,
     style: new Proxy({}, { get: () => "", set: () => true }),
     classList: {
       add: (c) => classes.add(c),
@@ -31,10 +33,14 @@ function makeEl() {
     get offsetWidth() {
       return 0;
     },
-    setAttribute() {},
-    removeAttribute() {},
-    getAttribute() {
-      return null;
+    setAttribute(k, v) {
+      attrs[k] = String(v);
+    },
+    removeAttribute(k) {
+      delete attrs[k];
+    },
+    getAttribute(k) {
+      return k in attrs ? attrs[k] : null;
     },
     querySelector(sel) {
       return (qcache[sel] ||= makeEl());
@@ -66,7 +72,7 @@ globalThis.window = { matchMedia: () => ({ matches: false, addEventListener() {}
 globalThis.requestAnimationFrame = () => 0; // no-op: don't drive entrance timers
 globalThis.performance = { now: () => 0 };
 
-const { renderResult } = await import("../js/ui.js");
+const { renderResult, activateTab } = await import("../js/ui.js");
 
 const baseResult = {
   closurePct: 42,
@@ -105,6 +111,23 @@ test("a fresh forecast entrance replays the reveal animation", () => {
   assert.equal(card.classList.contains("reveal"), true, "entrance adds the reveal class");
 });
 
+test("activateTab updates tab semantics and reveals only the matching panel", () => {
+  const tabs = ["tab-appearance", "tab-weather", "tab-data", "tab-about"];
+  const panels = ["panel-appearance", "panel-weather", "panel-data", "panel-about"];
+  tabs.forEach((t, i) => document.getElementById(t).setAttribute("aria-controls", panels[i]));
+
+  activateTab("tab-weather");
+
+  assert.equal(document.getElementById("tab-weather").getAttribute("aria-selected"), "true");
+  assert.equal(document.getElementById("tab-appearance").getAttribute("aria-selected"), "false");
+  assert.equal(document.getElementById("tab-weather").tabIndex, 0, "selected tab is tabbable");
+  assert.equal(document.getElementById("tab-appearance").tabIndex, -1, "unselected tabs use roving tabindex");
+  assert.equal(document.getElementById("panel-weather").hidden, false, "matching panel shown");
+  assert.equal(document.getElementById("panel-appearance").hidden, true, "other panels hidden");
+  // The newly shown panel gets the restrained entrance animation class.
+  assert.equal(document.getElementById("panel-weather").classList.contains("tab-anim"), true);
+});
+
 test("the gate explanation is shown only when the estimate is gated", () => {
   renderResult({ ...baseResult, gated: true, gateReason: "No hazard." }, { ...baseMeta, entrance: false });
   const gate = document.getElementById("gate-note");
diff --git a/tests/urlState.test.js b/tests/urlState.test.js
index ea0b9b6..d90eead 100644
--- a/tests/urlState.test.js
+++ b/tests/urlState.test.js
@@ -2,7 +2,7 @@
 // includes scenario-defining fields. buildShareParams is pure (no DOM).
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { buildShareParams, SHARE_DEFAULTS } from "../js/urlState.js";
+import { buildShareParams, readUrlState, SHARE_DEFAULTS } from "../js/urlState.js";
 
 const parse = (qs) => new URLSearchParams(qs);
 
@@ -11,6 +11,33 @@ test("an all-defaults scenario with no location produces an empty query", () =>
   assert.equal(qs, "");
 });
 
+test("restores a beta.2 / beta.3 share link's parameters (unchanged schema)", () => {
+  // beta.2 and beta.3 produced the same param schema; readUrlState must still parse it.
+  const s = readUrlState(
+    "?loc=Detroit&lat=42.3314&lon=-83.0458&school=elementary&area=rural&sens=0.8&used=3&allowed=4&unit=celsius"
+  );
+  assert.equal(s.loc, "Detroit");
+  assert.equal(s.lat, 42.3314);
+  assert.equal(s.lon, -83.0458);
+  assert.equal(s.school, "elementary");
+  assert.equal(s.area, "rural");
+  assert.equal(s.sens, 0.8);
+  assert.equal(s.used, 3);
+  assert.equal(s.allowed, 4);
+  assert.equal(s.unit, "celsius");
+});
+
+test("a minimal location-only share link round-trips through build + read", () => {
+  const qs = buildShareParams({ loc: "Owosso", lat: 42.9978, lon: -84.1766 });
+  const s = readUrlState(`?${qs}`);
+  assert.equal(s.loc, "Owosso");
+  assert.equal(s.lat, 42.9978);
+  assert.equal(s.lon, -84.1766);
+  // Defaults are omitted from the link.
+  assert.equal(s.school, undefined);
+  assert.equal(s.unit, undefined);
+});
+
 test("default-valued context fields are omitted from the share URL", () => {
   const qs = buildShareParams({
     loc: "Owosso",