3.5.9

Updated pet calcs to be more accurate
Fixed some layout issues
Updated profile popup

assets/css/table.css

@@ -383,6 +383,17 @@
   cursor: help;
 }
 
+/* Hidden reference copy of the Activities tab (see ConfigPanel.js) — stays
+   in normal flow so its natural width sets the dropdown's fixed size, but
+   is never seen or reachable. */
+.profile-scroll-sizer {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.profile-scroll-sizer .profile-scroll { pointer-events: none; }
+
 /* Single scrollable row of profile cards */
 .profile-scroll {
   display: flex;
@@ -586,11 +597,9 @@
               visibility 0s linear 0s;
 }
 .profile-dropdown-body {
-  max-width: 900px;
-  margin: 0 auto;
   max-height: calc(100vh - 24px);
   overflow-y: auto;
-  padding: 12px 24px 16px;
+  padding: 16px;
 }
 .profile-dropdown-close {
   position: absolute;
@@ -618,6 +627,10 @@
     top: var(--profile-anchor-top, 0px);
     bottom: auto;
     max-height: calc(100vh - var(--profile-anchor-top, 0px) - 16px);
+    width: fit-content;
+    min-width: 380px;
+    max-width: min(880px, calc(100vw - 32px));
+    margin: 0 auto;
     border: 1.5px solid #c9b08a;
     border-radius: 12px;
     overflow: hidden; /* keeps the scrolling body inside the rounded corners */
@@ -663,7 +676,7 @@
   border: 2px solid #d4c0a0;
   border-radius: 9px;
   cursor: pointer;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.08);
   transition: filter 0.2s, border-color 0.2s, box-shadow 0.2s;
 }
 /* Remove alpha from the default fallback color and any potential inherited 
@@ -724,13 +737,18 @@
   letter-spacing: 0.04em;
   color: #9a6a1a;
   margin-left: 8px;
-  opacity: 0.7;
+  padding: 4px 10px;
-  transition: opacity 0.2s, transform 0.2s, color 0.2s;
+  background: rgba(200,146,42,0.12);
+  border: 1px solid rgba(200,146,42,0.35);
+  border-radius: 999px;
+  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
 }
 .active-profile-row:hover .active-profile-row-edit,
 .active-profile-row:focus-visible .active-profile-row-edit {
-  opacity: 1;
   color: #c8922a;
+  background: rgba(200,146,42,0.2);
+  border-color: #c8922a;
+  transform: translateY(-1px);
 }
 
 /* Border + text accent per thermal-model group, reusing the same colour
@@ -1108,9 +1126,12 @@
   z-index: 6; /* above sticky header (z-index 5) */
 }
 
-/* Left fade — warm cream fading to transparent rightward */
+/* Left fade — warm cream fading to transparent rightward.
+   Offset by the pinned Hour column's width (--hour-col-w, set by JS in
+   useTableScroll.js) so the fade sits over the first column that
+   actually scrolls, not over the Hour column itself. */
 .utci-table-wrap::before {
-  left: 0;
+  left: var(--hour-col-w, 0px);
   background: linear-gradient(to right, rgba(240,228,196,0.92) 0%, transparent 100%);
 }
 
@@ -1137,7 +1158,7 @@
   transition: opacity 0.2s ease;
   user-select: none;
 }
-.utci-table-wrap .utci-scroll-chevron.left  { left:  6px; }
+.utci-table-wrap .utci-scroll-chevron.left  { left: calc(var(--hour-col-w, 0px) + 6px); }
 .utci-table-wrap .utci-scroll-chevron.right { right: 6px; }
 
 .utci-table-wrap.scroll-fade-left  .utci-scroll-chevron.left  { opacity: 1; }
@@ -1255,6 +1276,34 @@
   text-align: left;
 }
 
+/* ── PINNED HOUR COLUMN ──────────────────────────────────────────────────
+   The Hour/time column stays put while the rest of the table scrolls
+   horizontally, mirroring the fixed label column on the day tabs strip.
+   The body scroller genuinely scrolls (overflow-x: auto) so a plain
+   sticky left:0 works there. The header track instead gets shifted by
+   JS via translate3d to mirror the body's scrollLeft - so its first
+   cells get an equal-and-opposite translate3d applied by JS (see
+   handleBodyScroll in useTableScroll.js) to cancel that shift and stay
+   visually pinned at the left edge. */
+.utci-table tbody td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: #fffcf2;
+}
+.utci-table tbody tr:hover td:first-child {
+  background: #fef8ea;
+}
+.utci-table tbody tr.is-now td:first-child {
+  background: #fff8e4;
+}
+
+.utci-table thead th:first-child {
+  position: relative;
+  z-index: 3;
+  will-change: transform;
+}
+
 /* The "°C" / "m/s" etc. unit underneath each heading */
 .utci-table th .col-unit {
   display: block;
@@ -1965,6 +2014,7 @@
   letter-spacing: 0.07em;
   color: #7a5c2a;
   flex-shrink: 0;
+  margin-left: 0;
 }
 
 .forecast-view-toggle {
@@ -1980,7 +2030,7 @@
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
-  padding: 6px 14px;
+  padding: 6px 8px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
@@ -2021,7 +2071,7 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: end;
-  padding: 0 14px;
+  padding: 0;
 }
 .fvt-toolbar-left {
   grid-column: 1;
@@ -2050,7 +2100,7 @@
     grid-template-columns: 1fr;
     justify-items: center;
     row-gap: 6px;
-    padding: 6px 10px 0;
+    padding: 6px 0 10px;
   }
   .fvt-toolbar-left {
     grid-column: 1;

assets/js/components/ConfigPanel.js

@@ -269,6 +269,24 @@ export function ConfigPanel({
                 >${label}</button>
               `)}
             </div>
+
+            <!-- Invisible, always-rendered copy of the Activities cards. It has no
+                 visual presence (height:0, hidden) but stays in normal flow so its
+                 natural width feeds the dropdown's fit-content sizing — this keeps
+                 the popup a constant width across all four tabs instead of
+                 resizing as the user switches tabs, using Activities (the widest
+                 tab) as that fixed reference size. -->
+            <div class="profile-scroll-sizer" aria-hidden="true">
+              <div class="profile-scroll">
+                ${activityOptions.map((opt) => html`
+                  <span key=${'sizer-' + opt.value} class="profile-btn" tabIndex="-1">
+                    <span class="profile-btn-scene"></span>
+                    <span class="profile-btn-label">${opt.name}</span>
+                  </span>
+                `)}
+              </div>
+            </div>
+
             <div class="profile-scroll-wrap" ref=${profileWrapRef}>
               <span class="profile-scroll-chevron left" aria-hidden="true">‹</span>
               <span class="profile-scroll-chevron right" aria-hidden="true">›</span>

assets/js/components/DayTabs.js

@@ -33,7 +33,7 @@
 
 import { h, Fragment } from '../../vendor/preact.js';
 import htm from '../../vendor/htm.js';
-import { confidenceBand, utciCategory, VEHICLE_SPEEDS, VEHICLE_TYPES, BUILDING_TYPES, FUR_COLORS } from '../utils.js';
+import { confidenceBand, utciCategory, petCategory, VEHICLE_SPEEDS, VEHICLE_TYPES, BUILDING_TYPES, FUR_COLORS } from '../utils.js';
 import { FREE_DAYS, UTCI_ENVIRONMENTS, deriveProfileMain, FILTER_PROFILES, variantIcons } from '../config.js';
 import { calcVehicleInteriorTempPass } from '../physics.js';
 import { CloudIcon, PrecipIcon, HouseIcon, CarIcon, FogIcon, IceIcon } from '../components.js';
@@ -134,7 +134,7 @@ export function DayTabs({
   // only need the derived main metric to compute the day-tab numbers and to
   // label the "what temps am I looking at" row below.
   const {
-    isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel,
+    isHomeOrOffice, isVehicleProfile, isPetsProfile, mainConfigKey, mainField, secondaryField, mainLabel,
     mainMetricLabel, mainMetricDesc, secondaryMetricLabel, secondaryMetricDesc,
   } = deriveProfileMain(activeProfile, outdoorsVariant);
 
@@ -302,12 +302,18 @@ export function DayTabs({
           //   • Otherwise rain wins, then cloud, then a clear "sunny"/cold colour.
           const mix     = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * Math.max(0, Math.min(1, t))));
           const hex2rgb = (hx) => { const n = parseInt(hx.replace('#', ''), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; };
-          const tBand   = dayHi !== null ? utciCategory(dayHi) : { bg: '#f8e554' };
+          const catFn   = isPetsProfile ? petCategory : utciCategory;
+          const tBand   = dayHi !== null ? catFn(dayHi) : { bg: '#f8e554' };
 
           const ccVals   = repRows.map(r => r.cc).filter(v => isFinite(v));
           const avgCloud = ccVals.length ? ccVals.reduce((s, v) => s + v, 0) / ccVals.length : 0;
 
-          const isHot    = dayHi !== null && dayHi >= 29;   // Hot band and above
+          // Hot/cold cutoffs below are calibrated against UTCI_BANDS; for the
+          // Pets profile (furSurfaceT, judged against the shifted PET_BANDS)
+          // the same cutoffs are re-projected onto the pet scale so the
+          // "hot hue" / "plain cold" branches kick in at the same relative
+          // point in each band, not the same absolute degree.
+          const isHot    = dayHi !== null && dayHi >= (isPetsProfile ? 35 : 29);   // Hot band and above
           const isDanger = tBand.solid === true;
 
           // Home/indoor/vehicle tabs show a modelled temperature, not the
@@ -321,7 +327,9 @@ export function DayTabs({
           } else if (isHot) {
             // Keep the heat hue; cloud only mutes it a touch (orange/red never
             // greens) and rain does not override heat.
-            const heatFactor = dayHi >= 39 ? 0.15 : dayHi >= 34 ? 0.30 : 0.45;
+            const heatFactor = isPetsProfile
+              ? (dayHi >= 49 ? 0.15 : dayHi >= 43 ? 0.30 : 0.45)
+              : (dayHi >= 39 ? 0.15 : dayHi >= 34 ? 0.30 : 0.45);
             const t = Math.max(0, Math.min(1, (avgCloud - 30) / 70)) * heatFactor;
             rgb = mix(hex2rgb(tBand.bg), [170, 162, 152], t);
           } else if (daySnow >= 0.1) {
@@ -333,7 +341,7 @@ export function DayTabs({
           } else if (avgCloud >= 30) {
             // Cloud: light → dark grey with cover (pure grey, no temperature hue).
             rgb = mix([205, 206, 208], [110, 115, 122], Math.max(0, Math.min(1, (avgCloud - 30) / 70)));
-          } else if (dayHi !== null && dayHi < 10) {
+          } else if (dayHi !== null && dayHi < (isPetsProfile ? 2 : 10)) {
             // Clear & cold: keep the cold temperature blue.
             rgb = hex2rgb(tBand.bg);
           } else {

assets/js/compute.js

@@ -199,7 +199,7 @@ export function buildHourlyRows({ forecast, airQuality, location, vehicleType, v
 
     // Fur surface temperature with thermal lag - Pets profile.
     const furAlbedo = (FUR_COLORS[furColor] || FUR_COLORS.brown).albedo;
-    const furTemps = calcFurSurfaceTempPass(TaArr, radArr, vaArr, elevArr, furAlbedo);
+    const furTemps = calcFurSurfaceTempPass(TaArr, radArr, vaArr, elevArr, furAlbedo, uvArr, cloudCatArr);
     hourlyRows.forEach((r, i) => { r.furSurfaceT = furTemps[i]; });
   }
 

assets/js/hooks/useAppState.js

@@ -630,7 +630,7 @@ export function useAppState() {
     tableCanScrollRight,
     handleBodyScroll,
   } = useTableScroll({
-    headTableRef, bodyTableRef, bodyScrollRef, headTrackRef,
+    headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
     forecast, visibleCols, selectedDay, skinType, vehicleType,
     indoorMode, indoorManaged, showDecimals, showUnits,
   });

assets/js/hooks/useTableScroll.js

@@ -29,6 +29,7 @@ export function useTableScroll({
   bodyTableRef,
   bodyScrollRef,
   headTrackRef,
+  tableWrapRef,
   forecast,
   visibleCols,
   selectedDay,
@@ -111,6 +112,15 @@ export function useTableScroll({
     const body  = bodyScrollRef.current;
     if (!track || !body) return;
     track.style.transform = `translate3d(${-body.scrollLeft}px, 0, 0)`;
+    // The Hour column's header cells (one per thead row) need to stay
+    // pinned to the left edge even though the track they live in is
+    // being shifted above - cancel that shift with an equal-and-opposite
+    // translate so they hold still while the rest of the header scrolls.
+    const headTable = headTableRef.current;
+    if (headTable) {
+      const pinnedCells = headTable.querySelectorAll('thead th:first-child');
+      pinnedCells.forEach(c => { c.style.transform = `translate3d(${body.scrollLeft}px, 0, 0)`; });
+    }
     updateTableScrollIndicators();
   };
 
@@ -198,6 +208,12 @@ export function useTableScroll({
       // column N in the body, no drift as you scroll right.
       headTable.style.width = `${totalWidth}px`;
       bodyTable.style.width = `${totalWidth}px`;
+      // Expose the pinned Hour column's width as a CSS var so the left
+      // scroll-fade indicator can start after it, over the first column
+      // that actually scrolls, rather than over the pinned column itself.
+      if (tableWrapRef && tableWrapRef.current) {
+        tableWrapRef.current.style.setProperty('--hour-col-w', `${finalW[0]}px`);
+      }
       // Re-apply current horizontal offset so column alignment survives.
       handleBodyScroll();
     };

assets/js/physics.js

@@ -620,11 +620,25 @@ export function calcShadeAirTemp(Ta, effectiveRad, va, elev, shade) {
 // A breed-specific multiplier (brachycephalic/senior) is deliberately not
 // modelled - this profile targets cats and small dogs as the reference animal.
 // -------------------------------------------------------------------------
-export function calcFurSurfaceTemp(Ta, globalRad, windSpeed, solElev, furAlbedo = 0.15) {
+export function calcFurSurfaceTemp(Ta, globalRad, windSpeed, solElev, furAlbedo = 0.15, uv, cloudCat) {
   if (globalRad == null || Ta == null) return null;
   const elevDeg = (solElev != null) ? Math.max(5, solElev) : 45;
   const angleCorrection = Math.sin(elevDeg * Math.PI / 180);
-  const absorbed = globalRad * (1 - furAlbedo) * angleCorrection;
+  // Same cloud/UV-clarity derating calcConcreteTemp() applies on top of the
+  // raw radiation figure - both models share the same input array
+  // (hourlyRows.effectiveRad), so without these fur was absorbing the full
+  // beam while concrete was further discounted for haze/cloud, making fur
+  // read hotter than pavement on anything but a clear sky (backwards from
+  // the "never bakes as hot as dead concrete" intent above).
+  const cloudTransmit = cloudCat === 'clear'     ? 1.00
+                      : cloudCat === 'wispy'     ? 0.92
+                      : cloudCat === 'scattered' ? 0.72
+                      : cloudCat === 'overcast'  ? 0.28
+                      : 1.00;
+  const uvClarity = (uv && uv > 0)
+    ? 0.85 + 0.15 * Math.min(1, uv / 8)
+    : 1.0;
+  const absorbed = globalRad * (1 - furAlbedo) * angleCorrection * cloudTransmit * uvClarity;
   // Lower convective coefficient than bare concrete (hc=10+4.5*sqrt(v)) -
   // trapped air in the coat insulates, running the surface hotter for a
   // given wind speed than pavement, but not as insulated as a thick double
@@ -639,13 +653,13 @@ export function calcFurSurfaceTemp(Ta, globalRad, windSpeed, solElev, furAlbedo
 
 export const LAG_HOURS_FUR = 0.4; // ~24 min - low thermal mass, animal moves in/out of sun
 
-export function calcFurSurfaceTempPass(TaArr, radArr, vaArr, elevArr, furAlbedo = 0.15) {
+export function calcFurSurfaceTempPass(TaArr, radArr, vaArr, elevArr, furAlbedo = 0.15, uvArr, cloudCatArr) {
   const n = TaArr.length;
   const result = new Array(n);
   const alpha = 1 - Math.exp(-1 / LAG_HOURS_FUR);
-  let Tf = calcFurSurfaceTemp(TaArr[0], radArr[0], vaArr[0], elevArr[0], furAlbedo) ?? TaArr[0];
+  let Tf = calcFurSurfaceTemp(TaArr[0], radArr[0], vaArr[0], elevArr[0], furAlbedo, uvArr?.[0], cloudCatArr?.[0]) ?? TaArr[0];
   for (let i = 0; i < n; i++) {
-    const target = calcFurSurfaceTemp(TaArr[i], radArr[i], vaArr[i], elevArr[i], furAlbedo) ?? TaArr[i];
+    const target = calcFurSurfaceTemp(TaArr[i], radArr[i], vaArr[i], elevArr[i], furAlbedo, uvArr?.[i], cloudCatArr?.[i]) ?? TaArr[i];
     Tf = Tf + alpha * (target - Tf);
     result[i] = Math.max(TaArr[i], Tf);
   }

data/tracking.json

@@ -173,14 +173,25 @@
         }
     },
     "2026-07-29": {
-        "visits": 32,
+        "visits": 44,
         "profiles": {
-            "vehicle": 9,
+            "vehicle": 16,
-            "home": 9,
+            "home": 13,
-            "basic": 7,
+            "basic": 12,
-            "showall": 1,
+            "showall": 5,
-            "pets": 3,
+            "pets": 9,
-            "alltemps": 2
+            "alltemps": 6,
+            "farming": 1
+        }
+    },
+    "2026-07-30": {
+        "visits": 6,
+        "profiles": {
+            "farming": 3,
+            "home": 4,
+            "basic": 2,
+            "vehicle": 4,
+            "pets": 1
         }
     }
 }