Fix lit pads not highlighting; stop swallowing haptics errors

A lit pad kept its grey text and only its border turned orange, so pads
looked unhighlighted next to every other key. Cause was cascade order,
not logic: .pad is a single-class selector like .lit, so equal
specificity meant whichever came last won, and .pad was declared after.
The state classes now sit at the bottom of the file with a comment
saying why, and a lit pad computes rgb(255,74,0) for text and border.

native.ts reported nothing when haptics failed because I wrote
catch(() => {}) and discarded the reason. It now reports once per
distinct failure - enough to read in logcat, quiet enough not to spam on
every key press.

That reporting shows the software path is fine: isNativePlatform true,
Haptics available and bridged, VIBRATE granted, and both impact and
vibrate resolve without rejecting. So the silence is below the bridge -
most likely the phone's own touch-vibration setting - and not something
this code can detect.

141 tests, typecheck clean, installed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/ui/Panel.module.css

@@ -1,4 +1,10 @@
-/* Measured geometry: 8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525. */
+/* Measured geometry: 8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525.
+ *
+ * Ordering matters here: the state classes (.lit, .sel, .held, .down) live at
+ * the BOTTOM of this file. They are single-class selectors, same specificity as
+ * .pad or .fx, so whichever comes last wins. With .pad declared after .lit, a
+ * lit pad kept its grey text and only the border turned orange — pads looked
+ * unhighlighted next to every other key. */
 
 .panel {
   height: var(--panel-h);
@@ -16,11 +22,6 @@
   -webkit-touch-callout: none;
 }
 
-/* Pressed, whether or not it is lit. */
-.down {
-  transform: scale(0.95);
-}
-
 /* ---- shared key look ---- */
 
 .key,
@@ -53,27 +54,6 @@
   overflow: hidden;
 }
 
-/* Lit is an outline, not a fill. The SHIFT layer lights 35 of 54 controls, and
-   35 solid orange keys is a wall; solid is reserved for the selected one. */
-.lit {
-  border-color: var(--accent);
-  color: var(--accent);
-  font-weight: 700;
-}
-
-.sel {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--on-accent);
-  font-weight: 700;
-}
-
-.held {
-  background: var(--ink);
-  color: var(--page);
-  font-weight: 700;
-}
-
 .badge {
   position: absolute;
   top: 1px;
@@ -102,20 +82,6 @@
   color: var(--pad-ink);
 }
 
-/* A round key cannot hold a lit function's label at full size: SHIFT + VALUE is
-   "MARK FN", which spilled outside the circle. Clip it, and shrink when lit. */
-.knob,
-.valueKnob {
-  overflow: hidden;
-}
-
-.knob.lit,
-.knob.sel,
-.valueKnob.lit,
-.valueKnob.sel {
-  font-size: 6px;
-}
-
 /* ---- fx and the screen ---- */
 
 .screenRow {
@@ -286,6 +252,11 @@
   border-radius: 4px;
 }
 
+.side {
+  color: var(--accent);
+  font-weight: 700;
+}
+
 /* The pad's number, as printed on the hardware. */
 .num {
   font-family: var(--mono);
@@ -294,7 +265,39 @@
   color: var(--muted);
 }
 
-.side {
+/* ---- state: LAST in the file, so it wins over .pad, .fx, .side and .knob ---- */
+
+/* Lit is an outline, not a fill. The SHIFT layer lights 35 of 54 controls, and
+   35 solid orange keys is a wall; solid is reserved for the selected one. */
+.lit {
+  border-color: var(--accent);
   color: var(--accent);
   font-weight: 700;
 }
+
+.sel {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+  font-weight: 700;
+}
+
+.held {
+  background: var(--ink);
+  color: var(--page);
+  font-weight: 700;
+}
+
+/* A round key cannot hold a lit function's label at full size: SHIFT + VALUE is
+   MARK FN, which spilled outside the circle. Shrink it when lit. */
+.knob.lit,
+.knob.sel,
+.valueKnob.lit,
+.valueKnob.sel {
+  font-size: 6px;
+}
+
+/* Pressed, whether or not it is lit. */
+.down {
+  transform: scale(0.95);
+}