Give the Sleep trend average line its own color

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,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" },

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; }