From 9c1048fdc9327fdc8c3c30f6aa2bba6dfd9f46ba Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 12 Apr 2026 08:37:59 -0600
Subject: [PATCH] health: add hover/active/focus interaction states to service
 logs controls

This adds CSS interaction states (hover, active, focus) to four groups of elements in the health dashboard service logs section: the logs header, select dropdowns, control buttons (including the Follow toggle), and the dynamically-injected back button. Also fixes the focus-visible ring on .logs-header to use var(--facet-color) instead of hard-coded blue.
---
 apps/health/workspace.html | 59 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/apps/health/workspace.html b/apps/health/workspace.html
index 23018306d..7cb27c31f 100644
--- a/apps/health/workspace.html
+++ b/apps/health/workspace.html
@@ -594,11 +594,20 @@
 }
 
 .logs-header:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--facet-color, #b06a1a);
   outline-offset: 2px;
   border-radius: 4px;
 }
 
+.logs-header:hover {
+  background: #f9fafb;
+  border-radius: 4px;
+}
+
+.logs-header:active {
+  background: #f3f4f6;
+}
+
 .logs-title {
   font-size: 1.1em;
   font-weight: 600;
@@ -644,6 +653,16 @@
   background: white;
 }
 
+.logs-controls select:hover {
+  border-color: #9ca3af;
+}
+
+.logs-controls select:focus {
+  outline: none;
+  border-color: var(--facet-color, #b06a1a);
+  box-shadow: 0 0 0 3px rgba(176, 106, 26, 0.1);
+}
+
 .logs-controls button {
   padding: 0.3em 0.6em;
   border: 1px solid #d1d5db;
@@ -651,6 +670,7 @@
   background: white;
   cursor: pointer;
   font-size: 0.8em;
+  transition: background 0.1s ease, border-color 0.1s ease;
 }
 
 .logs-controls button.active {
@@ -659,6 +679,43 @@
   border-color: #3b82f6;
 }
 
+.logs-controls button:hover:not(.active) {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.logs-controls button.active:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.logs-controls button:active:not(.active) {
+  background: #e5e7eb;
+}
+
+.logs-controls button.active:active {
+  background: #1d4ed8;
+}
+
+#logBackBtn {
+  padding: 0.3em 0.6em;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: background 0.1s ease;
+}
+
+#logBackBtn:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+#logBackBtn:active {
+  background: #e5e7eb;
+}
+
 .logs-viewport {
   max-height: 400px;
   min-height: 200px;
-- 
2.51.2