Phase 2: the info card, selection, and what 35 lit keys taught

InfoCard fills the box that was empty: the layer hint and instruction
when nothing is picked, or the selected combo as chips with its name,
description and manual page. App carries the selection, and pressing a
control that holds several functions cycles through them, as the
reference does.

Lit is now an outline rather than a fill, and solid orange means
selected. This deviates from the mockups on purpose. They only ever
showed three lit keys; the SHIFT layer lights 35 of 54 controls, and
solid orange across all of them is a wall instead of a map. I checked
that by rendering the SHIFT layer rather than assuming, which meant
temporarily defaulting to it, capturing, and restoring the source.

That capture also caught a defect nothing else would have: SHIFT + VALUE
is MARK FN inside a 30px circle, and border-radius alone does not clip,
so the label sat outside the knob. Round keys now hide overflow and
shrink when lit.

Verified in light, dark, and on the SHIFT layer at 360x735. Typecheck
clean, 112 tests, www/ untouched so the Phase 1 APK still installs.

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

src/ui/Panel.module.css

@@ -37,8 +37,17 @@
   overflow-wrap: break-word;
 }
 
+/* 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;
 }
@@ -77,6 +86,20 @@
   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 {