From f5b5106a6166d7c215820ac013be8c7c6fa5f190 Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Wed, 25 Mar 2026 00:14:47 -0400
Subject: [PATCH] fix(ui): tokenize search CSS + add mobile responsive
 breakpoints (THE-72/THE-74)

- Replace hardcoded px/font values in search area with CSS tokens
  (--space-*, --font-size-*, --radius-sm, --font-family, --color-accent)
- Add focus box-shadow on search input using accent color
- Add box-shadow to search results dropdown
- Add @media (max-width: 768px) breakpoints: scale header font,
  make legend responsive (position:relative, width:auto)

These changes were present in feat/the-72 but were not carried forward
when THE-66 (search) and THE-73 (badges) merged into master independently.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 public/css/arf.css | 40 +++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/public/css/arf.css b/public/css/arf.css
index 983a0e2..a32676f 100644
--- a/public/css/arf.css
+++ b/public/css/arf.css
@@ -170,34 +170,36 @@ a {
 /* Search */
 #search-container {
   text-align: center;
-  padding: 8px 0 4px;
+  padding: var(--space-2) 0 var(--space-1);
 }
 
 #search-input {
   width: 400px;
   max-width: 90vw;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-family: "Helvetica Neue", Helvetica;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family);
   background: var(--color-surface);
   color: var(--color-text-primary);
   border: 1px solid var(--color-link);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   outline: none;
 }
 
 #search-input:focus {
-  border-color: var(--color-node-stroke);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(74, 158, 218, 0.25);
 }
 
 #search-results {
-  margin: 8px auto 0;
+  margin: var(--space-2) auto 0;
   width: 600px;
   max-width: 90vw;
   text-align: left;
   background: var(--color-surface);
   border: 1px solid var(--color-link);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
   max-height: 400px;
   overflow-y: auto;
   display: none;
@@ -208,7 +210,7 @@ a {
 }
 
 .search-result-item {
-  padding: 8px 12px;
+  padding: var(--space-2) var(--space-3);
   border-bottom: 1px solid var(--color-link);
   font-size: 13px;
 }
@@ -229,12 +231,28 @@ a {
 
 .search-result-path {
   color: var(--color-text-secondary);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   margin-top: 2px;
 }
 
 .search-no-results {
-  padding: 12px;
+  padding: var(--space-3);
   color: var(--color-text-secondary);
   text-align: center;
 }
+
+/* === Mobile responsive === */
+@media (max-width: 768px) {
+  #header {
+    font-size: var(--font-size-lg);
+    top: 10px;
+  }
+
+  .legend {
+    position: relative;
+    width: auto;
+    max-width: 100%;
+    padding: var(--space-2) var(--space-3);
+    box-sizing: border-box;
+  }
+}