From 0d166e2b8029c9a7ef5ef9171fbe1292f167b51d Mon Sep 17 00:00:00 2001
From: fraxle <fraxle@yahoo.co.uk>
Date: Tue, 4 Aug 2026 03:13:05 +0100
Subject: [PATCH] 4.9.2

Simple cards are now separate
---
 assets/css/table.css | 4 ++++
 assets/js/app.js     | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/assets/css/table.css b/assets/css/table.css
index 4b36593..d627c36 100644
--- a/assets/css/table.css
+++ b/assets/css/table.css
@@ -2371,6 +2371,10 @@
   border: none;
   background: transparent;
   padding: 10px 8px 12px;
+  /* 2px each side = 4px between neighbouring cards. Done with margin rather
+     than a grid gap so the cards stay centred on their landing hour and keep
+     lining up with the curve below. */
+  margin: 0 2px;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/assets/js/app.js b/assets/js/app.js
index ef9522a..0c86aeb 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1315,10 +1315,14 @@ export function UTCIForecast() {
                   // Card wears the same hue as its feel tag, washed right back so
                   // the tag still reads as the strong swatch on top of it.
                   const cardRgb = fscRgb(dispTemp, 0.70) || [245, 245, 245];
+                  // Border is the same hue a few shades down, so it edges the card
+                  // without introducing a colour that isn't already on it.
+                  const edgeRgb = fscRgb(dispTemp, 0.40) || [200, 200, 200];
                   return html`
                     <div key=${r.iso} class=${'fsc-card' + (isNow ? ' fsc-card--now' : '')}
                          style=${{
                            background: `rgb(${cardRgb[0]},${cardRgb[1]},${cardRgb[2]})`,
+                           ...(isNow ? {} : { border: `1px solid rgb(${edgeRgb[0]},${edgeRgb[1]},${edgeRgb[2]})` }),
                            ...(fscPlot ? { gridColumn: fscPlot.cardCol(fscPlot.landing[ri]) } : {}),
                          }}>
                       <div class="fsc-time">${localHHMMs}</div>