v0.3 Phase 4i: counterlines as interaction-affordance identity

Round-7 redirect (Option D): move counterlines from notices (where
they're invisible) to interactive controls (where they add identity).

Three-level model:

  Level 0  no counterline   panels, notices (default), content, disabled
  Level 1  quiet            controls, chips, active nav
                            1 px, 48% opacity dark / 34% light
  Level 2  focus / strong   keyboard focus, recording state
                            2 px, 85% opacity

Notices retire from default counterline rendering. Notice already
carries enough semantic language: bar + icon + border + bg + label.
A complementary inset on top was adding nothing. Notice can opt in
via <LumotiaNotice counterline ... /> when it deliberately mimics
control identity.

Token deltas vs Phase 4h.

  --counterline-width: 1px               unchanged
  --counterline-width-focus: 2px         new (Level-2 width)
  --counterline-opacity-dark: 0.48       was 0.32 (raised so Level-1
                                          actually reads on controls)
  --counterline-opacity-light: 0.34      was 0.22
  --counterline-opacity-focus: 0.85      new
  --role-brand-counterline: #3A6BFF      new (blue counter for the
                                          orange brand accent so
                                          primary buttons get an
                                          identity edge like the
                                          other roles)
  --button-{role}-counterline            new (per-role component tokens
                                          subscribing to role-counterline
                                          via color-mix)
  --focus-ring-color                     new (defaults to brand accent;
                                          HC overrides to #005FCC)

LumotiaButton applies counterlines to primary + destructive variants
only. Secondary + tertiary stay clean. All variants get a Level-2
focus-visible ring at --focus-ring-color * opacity-focus, with the
existing ring-offset-2 ring-offset-bg pattern.

LumotiaNotice gains a `counterline` boolean prop, default false. When
set, the previous Phase 4h inset shadow re-applies.

HC contract: counterline-width 0 + all -counterline tokens transparent.
Focus width stays 2 px because the HC focus ring IS the tactile
detail in that mode. focus-ring-color forces to #005FCC.

Honest evaluation of the visible result.

  Notices: visibly cleaner without the default inset shadow. Reads
  with more confidence. Good change.

  Buttons: counterline applied at 1 px / 48% dark / 34% light is
  perceptible at standard viewing but screenshot-zoom subtle. Focus
  state implemented but not visible in static screenshots; requires
  manual tab-test in the dev server.

  Recommend keeping the architecture even if the visual is restrained,
  because the focus-state work is genuinely valuable accessibility
  scaffolding regardless of how the Level-1 reads.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.

Phase 5c (Dictation layout migration) still queued for a focused
fresh sitting. This commit does not block it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/release/v0.3-tactile-quietware.md

@@ -351,7 +351,41 @@ LumotiaNotice now reads these via Tailwind arbitrary-value classes (`bg-[var(--n
 
 Per Jake's round-5 spec: yellow stays yellow (visible signal), ochre only appears as small-text ink, and brown/khaki never represents the caution role's primary identity again.
 
-### Phase 4h — Counterlines test (TBD: keep or remove). Landed 2026-05-15.
+### Phase 4i — Counterlines as interaction-affordance identity. Landed 2026-05-15.
+
+Round-7 redirect (Option D): move counterlines from notices (where they're invisible) to interactive controls (where they add identity). Three-level model:
+
+| Level | Surface | Width | Opacity |
+|---|---|---|---|
+| 0 — none | panels, notices (default), content, disabled | — | — |
+| 1 — quiet | controls, chips, active nav | 1 px | 48% dark / 34% light |
+| 2 — focus | keyboard focus, recording state | 2 px | 85% |
+
+Notice retires from default counterline rendering. Opt-in via `<LumotiaNotice counterline ... />` when a specific notice deliberately mimics control identity.
+
+LumotiaButton primary + destructive variants gain a Level-1 inset counterline:
+
+- primary: `--button-brand-counterline` (softened blue, complement of brand amber)
+- destructive: `--button-danger-counterline` (softened blue, complement of red)
+- secondary / tertiary: no counterline (clean neutral)
+- All variants on `:focus-visible`: 2-px ring at `--focus-ring-color` (default `--color-accent`) at 85% opacity. HC overrides to a strong blue `#005FCC`.
+
+Token deltas vs Phase 4h:
+
+```css
+--counterline-width: 1px                    /* unchanged */
+--counterline-width-focus: 2px              /* new — Level-2 width */
+--counterline-opacity-dark: 0.48            /* was 0.32 */
+--counterline-opacity-light: 0.34           /* was 0.22 */
+--counterline-opacity-focus: 0.85           /* new */
+--role-brand-counterline: #3A6BFF           /* new — blue counter for orange brand */
+--button-{role}-counterline                 /* new — per-role component tokens */
+--focus-ring-color                          /* new — context-overridable focus tint */
+```
+
+HC contract: every counterline token forced transparent, `--counterline-width: 0`, focus width kept at 2 px (HC focus ring carries the tactile detail in that mode), `--focus-ring-color: #005FCC`.
+
+### Phase 4h — Counterlines test (RETIRED 2026-05-15, superseded by Phase 4i). Landed 2026-05-15.
 
 Test commit per Jake's round-6 spec. Subtle 1-px inner-shadow detail in a softened complementary hue, applied to LumotiaNotice only. Other test surfaces (Button.destructive, status pills, record ring, active nav) reserved for after evaluation.