From 7f2762aeb8987f2861464479ea6cb367258929e8 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Tue, 8 Sep 2026 21:05:54 +0200
Subject: [PATCH] fix(ui): white input boxes on a dark page, and a slab of line
 colour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The text-entry rule was an allowlist of type= values, which fails twice.
An <input> with no type attribute is a text field but matches no
[type=...] selector at all, and any type nobody listed falls through
silently. Both had happened: the add-a-word fields carry no type, and the
server URL and token are url and password. All four rendered as white UA
boxes on a dark page.

A denylist of the controls that must keep native rendering — checkbox,
radio, range, colour, file, the button-like ones — cannot rot the same way.

color-scheme now sits on :root per theme rather than nowhere. It is what
tells the browser to paint the parts CSS cannot reach: the select dropdown
list, spinner arrows, scrollbars, the autofill wash.

Separately, .tiles draws its hairlines with its own background, so as a
stretched grid item it filled the rest of the hero's height with a solid
block of line colour. align-self: start.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/src/style/components.css | 22 +++++++++++++++++++---
 app/src/style/tokens.css     | 10 ++++++++++
 app/src/ui/tabs/today.css    |  4 ++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/src/style/components.css b/app/src/style/components.css
index 5e15d1e..a4df1aa 100644
--- a/app/src/style/components.css
+++ b/app/src/style/components.css
@@ -120,9 +120,20 @@
   color: var(--on-jade);
 }
 
-input[type="text"],
-input[type="number"],
-input[type="search"],
+/* Match every text-entry control, however it was declared.
+
+   This was an allowlist of type= values, which fails twice over: an
+   `<input>` with no type attribute is a text field but matches no
+   [type=...] selector at all, and any type nobody thought of (url,
+   password, email) silently falls through. Both happened — the add-a-word
+   fields and the server URL and token rendered as white UA boxes on a dark
+   page. A denylist of the controls that must keep their native rendering
+   is the shape that cannot rot. */
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+    [type="color"]
+  ):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(
+    [type="reset"]
+  ),
 select,
 textarea {
   padding: 8px 11px;
@@ -131,6 +142,11 @@ textarea {
   color: var(--ink);
 }
 
+::placeholder {
+  color: var(--ink3);
+  opacity: 1; /* Firefox dims placeholders by default. */
+}
+
 textarea {
   resize: vertical;
 }
diff --git a/app/src/style/tokens.css b/app/src/style/tokens.css
index c6f2f6f..e39bbd7 100644
--- a/app/src/style/tokens.css
+++ b/app/src/style/tokens.css
@@ -11,6 +11,12 @@
    ways. Only the tokens are redefined — never a colour's only definition. */
 
 :root {
+  /* Tells the UA which palette to paint the parts CSS cannot reach: the
+     select dropdown list, spinner arrows, scrollbars, the autofill wash
+     and the canvas behind the page. Without it those stay light while
+     everything around them is dark. */
+  color-scheme: light;
+
   --bg: #f1f4f1;
   --paper: #ffffff;
   --sunk: #e7ece7;
@@ -63,6 +69,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
     --bg: #0d1412;
     --paper: #151f1c;
     --sunk: #1c2723;
@@ -106,6 +114,8 @@
 }
 
 :root[data-theme="dark"] {
+  color-scheme: dark;
+
   --bg: #0d1412;
   --paper: #151f1c;
   --sunk: #1c2723;
diff --git a/app/src/ui/tabs/today.css b/app/src/ui/tabs/today.css
index d6eb387..477d717 100644
--- a/app/src/ui/tabs/today.css
+++ b/app/src/ui/tabs/today.css
@@ -61,6 +61,10 @@
   background: var(--line);
   border: 1px solid var(--line);
   align-content: start;
+  /* The background IS the hairline between tiles, so the box must not be
+     taller than its rows: as a stretched grid item it filled the rest of
+     the hero's height with a solid slab of line colour. */
+  align-self: start;
 }
 
 .tile {