From f336e8d8a43bb45620e4b8bd2e5258902f32bc74 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 19 Aug 2026 05:37:29 +0200
Subject: [PATCH] fix(controls): say what is clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A `<button>` defaults to `cursor: default`, so most of this app read as
text until you clicked it and found out otherwise — the headline
deadline, the daily chips, the settings pills. Sixty-five controls on the
checklist view alone, two of which had picked up a `cursor-pointer` at
some point because somebody noticed them.

So it is a base-layer rule rather than a class per call site: an
affordance that has to be remembered is one that goes missing. Utilities
still win over it, which is what keeps `cursor-not-allowed` on a disabled
zoom step and `cursor-default` on a checklist day that cannot be ticked
yet saying what they mean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/client/styles.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/client/styles.css b/src/client/styles.css
index 8b4cf39..a410337 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -121,6 +121,30 @@ body {
   background-attachment: fixed;
 }
 
+/*
+ * Anything you can act on says so under the pointer.
+ *
+ * A `<button>` defaults to `cursor: default`, so the app's own controls — a
+ * daily chip, the headline deadline, a settings pill — read as text until you
+ * click one and discover otherwise. Sixty-odd of them, which is why this is a
+ * rule rather than a class added at each call site: the ones that got it were
+ * the ones somebody noticed, and the point of an affordance is that it holds
+ * everywhere without being noticed.
+ *
+ * In `@layer base` on purpose. Utilities beat it, so a control that means
+ * something else by the pointer keeps saying it: `cursor-not-allowed` on a
+ * disabled zoom step, `cursor-default` on a day the checklist cannot tick yet.
+ * `:not(:disabled)` covers the same ground for anything that never bothered.
+ */
+@layer base {
+  button:not(:disabled),
+  [role="tab"],
+  input[type="checkbox"]:not(:disabled),
+  label:has(> input[type="checkbox"]:not(:disabled)) {
+    cursor: pointer;
+  }
+}
+
 /* Countdowns tick. Tabular figures keep them from reflowing every second. */
 .tnum {
   font-variant-numeric: tabular-nums;