5.0.3

The Week Ahead - Best Times Out

assets/css/ui.css

@@ -1537,6 +1537,54 @@
   margin-top: 10px;
 }
 
+/* Week rows carry a score bar, so they are a two-line grid rather than the
+   single flex line the glance rows use: day and window on top, bar beneath. */
+.insight-panel--week .insight-row {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+  grid-template-areas:
+    "icon  label value"
+    "icon  score score";
+  column-gap: 8px;
+  row-gap: 4px;
+  align-items: center;
+}
+.insight-panel--week .insight-icon  { grid-area: icon; }
+.insight-panel--week .insight-label { grid-area: label; }
+.insight-panel--week .insight-value { grid-area: value; }
+
+/* How good the day is out of 100 — the bar does the comparing, the number
+   settles close calls. */
+.week-score {
+  grid-area: score;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.week-score__track {
+  flex: 1;
+  height: 5px;
+  border-radius: 3px;
+  background: #ede4cc;
+  overflow: hidden;
+}
+
+/* Colour is set inline per row - it tracks the score itself (red at 0 through
+   amber to green at 100), so it can't live in a static rule. */
+.week-score__fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+}
+
+.week-score__pct {
+  font-family: JetBrains Mono, monospace;
+  font-size: 11px;
+  color: #8a8375;
+  flex-shrink: 0;
+}
+
 /* ── Pro: Export day data ──────────────────────────────────────────────── */
 .export-panel {
   margin-top: 10px;
@@ -1618,6 +1666,16 @@
   gap: 7px;
 }
 
+/* Sits under the panel title to say what the listed days are being judged on
+   - the rows themselves are just dates and windows. */
+.insight-panel-sub {
+  font-family: Manrope, sans-serif;
+  font-size: 12px;
+  color: #8a8375;
+  text-align: center;
+  margin: -6px 0 10px;
+}
+
 .insight-thermal-cat {
   display: inline-block;
   padding: 2px 7px;
@@ -1772,6 +1830,15 @@
     row-gap: 1px;
     align-items: start;
   }
+  /* The rail is only 240px wide, so the window drops under the day name and
+     the score bar takes a third line rather than sharing one. */
+  .insight-panel--week .insight-row {
+    grid-template-areas:
+      "icon label"
+      "icon value"
+      "icon score";
+    row-gap: 3px;
+  }
   .insight-panel--glance .insight-icon,
   .insight-panel--week .insight-icon {
     grid-area: icon;