From c4169f7a2091aed2edc1e82c25d3b83e63530dd6 Mon Sep 17 00:00:00 2001
From: Niels Mokkenstorm <niels@mokkenstorm.dev>
Date: Tue, 14 Jul 2026 22:07:37 +0200
Subject: [PATCH] fix(web): close remaining design-engineering gaps in modular
 CSS

Gate the two ungated hover rules behind (hover: hover) and (pointer:
fine), fix a dead var(--cream) reference in the login provider hover,
add scale(.97) press feedback (with a reduced-motion fallback) to
icon-btn/chip/fab/display-toggle/segment buttons that had none, give
the autocomplete/popout dropdown-panel the same vdom-mount entrance
animation as amend/edit panels, align the notice entrance to the
200ms/ease-out-cubic tokens, and add tabular-nums to badges and the
load-more count so live numbers stop nudging their row.
---
 web/css/02-app-bar.css      |  3 +++
 web/css/04-controls.css     |  3 +++
 web/css/12-autocomplete.css |  6 ++++--
 web/css/14-windowing.css    |  1 +
 web/css/15-misc.css         |  2 +-
 web/css/16-login.css        |  7 +++++--
 web/css/90-interaction.css  | 28 ++++++++++++++++++++++++++--
 7 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/web/css/02-app-bar.css b/web/css/02-app-bar.css
index 386913d..e5cc336 100644
--- a/web/css/02-app-bar.css
+++ b/web/css/02-app-bar.css
@@ -79,5 +79,8 @@
   background: var(--surface);
   border: 2px solid var(--ink);
   box-shadow: var(--shadow-md);
+  /* Mounts/unmounts via the vdom (same as .amend-panel/.edit-panel), so this
+     reuses the panel-in keyframe defined in 09-record.css. */
+  animation: panel-in var(--dur-fast) var(--ease-out-cubic);
 }
 
diff --git a/web/css/04-controls.css b/web/css/04-controls.css
index 8f41e97..4c548e1 100644
--- a/web/css/04-controls.css
+++ b/web/css/04-controls.css
@@ -10,6 +10,9 @@
   text-transform: uppercase;
   cursor: pointer;
   text-decoration: none;
+  /* Some chips/badges carry live counts (pending edits, confidence %); fixed-
+     width digits stop them nudging their row when the number changes. */
+  font-variant-numeric: tabular-nums;
 }
 .chip {
   padding: 6px 11px;
diff --git a/web/css/12-autocomplete.css b/web/css/12-autocomplete.css
index 90c835d..4b52f9a 100644
--- a/web/css/12-autocomplete.css
+++ b/web/css/12-autocomplete.css
@@ -28,8 +28,10 @@
   text-align: left;
   cursor: pointer;
 }
-.suggestions button:hover {
-  background: var(--bg);
+@media (hover: hover) and (pointer: fine) {
+  .suggestions button:hover {
+    background: var(--bg);
+  }
 }
 .suggestion__main {
   min-width: 0;
diff --git a/web/css/14-windowing.css b/web/css/14-windowing.css
index cb4c2b7..3ebabd9 100644
--- a/web/css/14-windowing.css
+++ b/web/css/14-windowing.css
@@ -8,6 +8,7 @@
   letter-spacing: 0.5px;
   color: var(--ink-muted);
   margin: 0 0 10px;
+  font-variant-numeric: tabular-nums;
 }
 
 /* small cover thumb used in result rows */
diff --git a/web/css/15-misc.css b/web/css/15-misc.css
index 854cd43..fc8d86c 100644
--- a/web/css/15-misc.css
+++ b/web/css/15-misc.css
@@ -29,7 +29,7 @@
   box-shadow: var(--shadow-md);
   padding: 12px 14px;
   font: 700 13px/1.4 var(--mono);
-  animation: notice-in 0.18s ease-out;
+  animation: notice-in var(--dur-base) var(--ease-out-cubic);
 }
 @keyframes notice-in {
   from {
diff --git a/web/css/16-login.css b/web/css/16-login.css
index cd1bf0d..102c926 100644
--- a/web/css/16-login.css
+++ b/web/css/16-login.css
@@ -71,8 +71,11 @@
   text-decoration: none;
   color: var(--ink);
 }
-.provider:hover {
-  background: var(--cream);
+/* was `var(--cream)`, an undefined token, so this hover silently no-oped */
+@media (hover: hover) and (pointer: fine) {
+  .provider:hover {
+    background: var(--bg);
+  }
 }
 .provider__name {
   font: 700 14px/1 var(--display);
diff --git a/web/css/90-interaction.css b/web/css/90-interaction.css
index 3314074..0e2636e 100644
--- a/web/css/90-interaction.css
+++ b/web/css/90-interaction.css
@@ -45,13 +45,37 @@ button.chip::before,
   padding: 9px 11px;
 }
 
+/* Press feedback for the button-like controls .btn doesn't already cover
+   (it has its own shadow-squash :active). Never scale(0): .97 reads as a
+   press, not a disappearance. */
+.icon-btn,
+button.chip,
+.display-toggle__btn,
+.fab,
+.segment button {
+  transition: transform 100ms ease;
+}
+.icon-btn:active,
+button.chip:active,
+.display-toggle__btn:active,
+.fab:active,
+.segment button:active {
+  transform: scale(0.97);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .notice,
   .amend-panel,
-  .edit-panel {
+  .edit-panel,
+  .dropdown-panel {
     animation: none;
   }
-  .btn {
+  .btn,
+  .icon-btn,
+  button.chip,
+  .display-toggle__btn,
+  .fab,
+  .segment button {
     transition: none;
   }
 }
-- 
2.51.2