Beta3

New data columns for UV, soil and wind direction.
Add icons to some data
Better table formatting and responsiveness
Improved scope background variations

assets/sunscope.css

@@ -84,7 +84,11 @@ body {
   min-height: 100vh;
   padding: 52px 28px 32px;
   position: relative;
-  overflow-x: hidden;
+  /* overflow-x: clip (not hidden) — `clip` clips horizontal overflow
+     WITHOUT making this a scroll container, so `position: sticky` on
+     descendants (table <th>) can still stick relative to the viewport.
+     `hidden` would create a containing block that breaks sticky. */
+  overflow-x: clip;
 }
 
 /* Two big soft glows in the corners — pure decoration.
@@ -353,13 +357,83 @@ body {
     sunscope.js (the confidence bands). This file only handles spacing,
     typography, and the active-tab underline.                          */
 
+/* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
+.utci-day-tabs-wrap {
+  position: relative;
+  margin-bottom: 18px;
+}
+
+/* Edge fade gradients — only show when there's content to scroll to. */
+.utci-day-tabs-wrap::before,
+.utci-day-tabs-wrap::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 2px; /* leave the underline border visible */
+  width: 40px;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.utci-day-tabs-wrap::before {
+  left: 0;
+  background: linear-gradient(to right, #f5edd6 0%, rgba(245,237,214,0) 100%);
+}
+.utci-day-tabs-wrap::after {
+  right: 0;
+  background: linear-gradient(to left, #f5edd6 0%, rgba(245,237,214,0) 100%);
+}
+.utci-day-tabs-wrap.fade-left::before  { opacity: 1; }
+.utci-day-tabs-wrap.fade-right::after  { opacity: 1; }
+
+/* Chevron buttons — sit on top of the fades. */
+.utci-day-scroll {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid #d4c0a0;
+  background: #fffcf2;
+  color: #6b4f2a;
+  font-size: 20px;
+  font-family: Fraunces, serif;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0 2px 0;
+  box-shadow: 0 1px 4px rgba(80,55,20,0.12);
+  transition: opacity 0.2s, background 0.15s, transform 0.15s;
+}
+.utci-day-scroll:hover {
+  background: #fef3dc;
+}
+.utci-day-scroll.left  { left: -2px; }
+.utci-day-scroll.right { right: -2px; }
+.utci-day-scroll.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
 .utci-day-tabs {
   display: flex;
-  margin-bottom: 18px;
   border-bottom: 2px solid #d4c0a0;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;        /* Firefox */
+  -ms-overflow-style: none;     /* old Edge */
+}
+.utci-day-tabs::-webkit-scrollbar {
+  display: none;                /* Chrome/Safari */
 }
 
 .utci-day-tab {
+  flex-shrink: 0;
   padding: 12px 24px;
   cursor: pointer;
   font-family: JetBrains Mono, monospace;
@@ -452,18 +526,49 @@ body {
 /* ── 7. HOURLY TABLE ────────────────────────────────────────────────── */
 
 .utci-table-wrap {
-  overflow-x: auto;
+  /* No overflow on this wrapper — having any overflow here would make
+     the wrapper a scroll container, which would break sticky-to-viewport
+     on the .utci-thead-sticky strip inside.
+     The body scroller (.utci-tbody-scroll) owns the horizontal scrollbar. */
   border: 1.5px solid #c9b08a;
   background: #fffcf2;
 }
 
+/* ── STICKY HEADER STRIP ────────────────────────────────────────────────
+   Sits above the body and locks to the top of the viewport while the
+   page scrolls. Has overflow:hidden so the inner .utci-thead-track can
+   be translateX'd by JS to follow the body's scrollLeft. */
+.utci-thead-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  overflow: hidden;
+  background: #f0e4c4;
+  border-bottom: 2px solid #c9b08a;
+  box-shadow: 0 2px 5px rgba(74, 52, 32, 0.10);
+}
+
+/* The shifted track inside the sticky header — JS sets transform:translate3d
+   to keep its columns aligned with the body scroller's scrollLeft. */
+.utci-thead-track {
+  will-change: transform;
+}
+
+/* Body scroller — owns the horizontal scrollbar for the whole table. */
+.utci-tbody-scroll {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
 .utci-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
 }
 
-/* Column headings  (Hour, Air, RH, Wind...) */
+/* Column headings  (Hour, Air, RH, Wind...).
+   NOTE: stickiness is handled by the .utci-thead-sticky wrapper, not
+   the <th> itself — see the new wrapper rules higher up. */
 .utci-table th {
   background: #f0e4c4;
   color: #6b4f2a;
@@ -475,9 +580,6 @@ body {
   padding: 14px 12px;
   text-align: right;
   white-space: nowrap;
-  position: sticky;
-  top: 0;                               /* sticks to the top while scrolling */
-  border-bottom: 2px solid #c9b08a;
 }
 
 /* The Hour column aligns left, the rest align right */
@@ -510,6 +612,19 @@ body {
   font-variant-numeric: tabular-nums;   /* stops digits jiggling between rows */
   white-space: nowrap;
   color: #4a3420;
+  /* Baseline minimum column width — the JS width-sync uses max(60, head,
+     body) so very-narrow data columns ("Air 5.0") still feel comfortable
+     to read instead of being squashed. */
+  min-width: 60px;
+}
+
+/* Subtle vertical column dividers — same pale cream as the row
+   dividers so the table reads as a soft grid, not a hard one. The
+   last column has no divider so it doesn't double-up with the
+   container border. */
+.utci-table th:not(:last-child),
+.utci-table td:not(:last-child) {
+  border-right: 1px solid #ede4cc;
 }
 
 
@@ -564,6 +679,17 @@ body {
   font-size: 14px;
 }
 
+/* Hero variant used for the UTCI+P column — the headline number.
+   Bigger, bolder, more breathing room so the eye lands here first. */
+.utci-cell-hero {
+  padding: 7px 16px;
+  font-size: 19px;
+  font-weight: 700;
+  min-width: 76px;
+  letter-spacing: 0.01em;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(255,255,255,0.08) inset;
+}
+
 .utci-band-label {
   font-family: JetBrains Mono, monospace;
   font-size: 10px;