From a1a6ec872086f8de47a675d7f69986afe414f03e Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Wed, 15 Jul 2026 13:18:42 +0000
Subject: [PATCH] Give the Sleep trend average line its own color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All three blue lines were hard to tell apart; the N-day average is now
teal (the --weight token) and slightly more opaque, while the projected
tail stays blue on purpose — it continues today's line.
---
 src/changelog.json | 1 +
 src/style.css      | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/changelog.json b/src/changelog.json
index 9f301f5..dbaf08f 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-15", "text": "The Sleep trend average line is teal now, so it doesn't blend in with today's blue line and its projection" },
   { "date": "2026-07-15", "text": "Tapping a day in a chart selects it without jumping down to the history" },
   { "date": "2026-07-15", "text": "Meals with an amount logged show their grams in the day's history" },
   { "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" },
diff --git a/src/style.css b/src/style.css
index 29857b0..32998ad 100644
--- a/src/style.css
+++ b/src/style.css
@@ -934,12 +934,12 @@ input.switch:checked::after { transform: translateX(18px); }
   opacity: 0.75;
 }
 .chart-svg .trend-avg {
-  stroke: var(--sleep);
+  stroke: var(--weight); /* teal — keeps it apart from today's blue and its blue projected tail */
   stroke-width: 1.5;
   stroke-dasharray: 4 3;
   stroke-linejoin: round;
   fill: none;
-  opacity: 0.7;
+  opacity: 0.85;
 }
 /* Today's projected tail: same weight/color as today so it reads as its
    continuation, dashed + faded because it hasn't happened yet. */
@@ -955,7 +955,7 @@ input.switch:checked::after { transform: translateX(18px); }
 .lg.trend-today .sw { background: var(--sleep); }
 .lg.trend-projected .sw { background: color-mix(in srgb, var(--sleep) 40%, var(--surface)); }
 .lg.trend-yesterday .sw { background: var(--muted); }
-.lg.trend-avg .sw { background: color-mix(in srgb, var(--sleep) 55%, var(--surface)); }
+.lg.trend-avg .sw { background: var(--weight); }
 .lg[hidden] { display: none; }
 
 .chart-svg .hm-cell { stroke: none; }