From e9a4e5ac22a5caf868ea97a82f3fe507b977f73b Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 12 Apr 2026 08:39:19 -0600
Subject: [PATCH] support: add hover, active, and focus-visible states to all
 button types

Replace opacity-based hover with filter:brightness for primary and
empty-action buttons. Add active press states (darken + translateY)
and focus-visible outline for the back button. Add secondary button
hover/active with subtle background fills that override primary states.
---
 apps/support/workspace.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/support/workspace.html b/apps/support/workspace.html
index 2f670099f..6ec083513 100644
--- a/apps/support/workspace.html
+++ b/apps/support/workspace.html
@@ -81,6 +81,8 @@
     margin-bottom: 1rem;
   }
   .support-detail-back:hover { color: var(--text, #222); }
+  .support-detail-back:active { color: #111; }
+  .support-detail-back:focus-visible { outline: 2px solid var(--facet-color, #3b82f6); outline-offset: 2px; }
   .support-message {
     border-left: 3px solid var(--facet-border, #e5e0db);
     padding: 0.75rem 1rem;
@@ -148,13 +150,16 @@
     font-size: 0.9rem;
     font-weight: 500;
   }
-  .support-btn:hover { opacity: 0.9; }
+  .support-btn:hover { filter: brightness(1.1); }
   .support-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .support-btn:active:not(:disabled) { filter: brightness(0.9); transform: translateY(1px); }
   .support-btn-secondary {
     background: transparent;
     color: var(--text, #222);
     border: 1px solid var(--facet-border, #e5e0db);
   }
+  .support-btn.support-btn-secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: #bbb; filter: none; }
+  .support-btn.support-btn-secondary:active { background: rgba(0, 0, 0, 0.08); filter: none; }
 
   .support-empty {
     text-align: center;
@@ -185,7 +190,8 @@
     font-size: 0.9rem;
     font-weight: 500;
   }
-  .support-empty-action:hover { opacity: 0.9; }
+  .support-empty-action:hover { filter: brightness(1.1); }
+  .support-empty-action:active { filter: brightness(0.9); transform: translateY(1px); }
 
   .support-tab-badge {
     position: absolute;
-- 
2.51.2