Use semi-transparent accent fill on nav button hover

color-mix(accent 18%, transparent) keeps text readable and gives a
ghost-button tint instead of a full solid fill.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/public/conditions.html

@@ -87,9 +87,9 @@ html, body {
   transition: background .15s, border-color .15s, color .15s;
 }
 .hdr-back:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 .hdr-sep {
   color: var(--border);
@@ -152,9 +152,9 @@ html, body {
   transition: background .15s, border-color .15s, color .15s;
 }
 .hdr-dash-link:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 /* ── Hero ────────────────────────────────────────────────── */

app/public/dashboard.html

@@ -41,9 +41,9 @@ a { color: var(--cool); text-decoration: none; }
   transition: background .15s, border-color .15s, color .15s;
 }
 .logout:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 /* ── Wrapper ── */

app/public/style.css

@@ -128,9 +128,9 @@ a:hover { text-decoration: underline; }
   transition: background .15s, border-color .15s, color .15s;
 }
 .station-link:hover {
-  background: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--accent);
 }
 
 .settings-nav-links {