From dd3714f0a1f567905b82d676517e2fd12b274dd2 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Sat, 7 Feb 2026 20:58:41 +0000
Subject: [PATCH] style(ui): restyle buttons, tabs, and form inputs

- Change btn-adjust to grey border with orange text and subtle hover
- Add font-family/font-size to .input-field for consistency
- Redesign desktop tabs: bordered, orange text, equal width, accent
  border on active instead of filled background
- Redesign mobile tab selector: bordered dropdown with orange text,
  rounded container, subtle active background
---
 static/css/input.css            | 22 ++++++++++++----------
 templates/partials/tab_bar.html |  7 +++----
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 145246d..1284180 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -107,6 +107,8 @@ a {
   border: 1px solid var(--border);
   background-color: var(--surface);
   padding: 0.6rem 0.75rem;
+  font-family: inherit;
+  font-size: 0.875rem;
   color: var(--text);
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
@@ -134,7 +136,7 @@ input.input-field[type="number"] {
   align-items: center;
   justify-content: center;
   border-radius: 0.375rem;
-  border: 1px solid var(--accent);
+  border: 1px solid var(--border);
   background-color: var(--surface);
   color: var(--accent);
   font-weight: 700;
@@ -142,8 +144,8 @@ input.input-field[type="number"] {
 }
 
 .btn-adjust:hover {
-  background-color: var(--accent);
-  color: var(--accent-text);
+  background-color: var(--surface-alt);
+  color: var(--accent-hover);
 }
 
 /* ── Sticky Submit ────────────────────────────────────────────── */
@@ -316,15 +318,17 @@ input.input-field[type="number"] {
 .tab {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  flex: 1;
   border-radius: 0.375rem;
   padding: 0.375rem 0.875rem;
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
-  border: none;
+  border: 1px solid var(--border);
   background: none;
-  transition: background-color 150ms ease, color 150ms ease;
-  color: var(--text);
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+  color: var(--accent);
 }
 
 .tab:not(.tab-active):hover {
@@ -332,8 +336,7 @@ input.input-field[type="number"] {
 }
 
 .tab-active {
-  background-color: var(--accent);
-  color: var(--accent-text);
+  border-color: var(--accent);
 }
 
 .tab-mobile {
@@ -345,6 +348,7 @@ input.input-field[type="number"] {
   cursor: pointer;
   border: none;
   background: none;
+  color: var(--accent);
   transition: background-color 150ms ease, color 150ms ease;
   color: var(--text-secondary);
 }
@@ -355,8 +359,6 @@ input.input-field[type="number"] {
 
 .tab-mobile-active {
   background-color: var(--accent-subtle);
-  color: var(--text);
-  font-weight: 600;
 }
 
 /* ── Timeline layout ───────────────────────────────────────────── */
diff --git a/templates/partials/tab_bar.html b/templates/partials/tab_bar.html
index 3605477..0bc5ec3 100644
--- a/templates/partials/tab_bar.html
+++ b/templates/partials/tab_bar.html
@@ -2,7 +2,7 @@
 
 <div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
   <!-- Desktop tabs -->
-  <nav class="hidden md:flex flex-wrap gap-1.5 p-2" role="tablist">
+  <nav class="hidden md:flex gap-1.5" role="tablist">
     {% for tab in tabs %}
     <button
       type="button"
@@ -17,8 +17,7 @@
   <div class="md:hidden">
     <button
       type="button"
-      class="flex w-full items-center justify-between p-3 text-sm font-medium"
-      style="color: var(--text)"
+      class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
       data-on:click="$_tabsOpen = !$_tabsOpen"
     >
       <span>
@@ -29,7 +28,7 @@
       <span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
       <span data-show="$_tabsOpen" style="display:none">{{ icons::chevron_up("h-5 w-5") }}</span>
     </button>
-    <div class="flex flex-col border-t" data-show="$_tabsOpen" style="display:none">
+    <div class="mt-1 flex flex-col rounded-md border overflow-hidden" data-show="$_tabsOpen" style="display:none">
       {% for tab in tabs %}
       <button
         type="button"