Quiet fields: base.css field baseline, --field tokens, 3:1 border-strong, app-wide migration

.claude/skills/alignment/SKILL.md

@@ -59,13 +59,28 @@ Review all changes in scope. If changes span multiple patterns below, apply all
      `Button` component, icon-only buttons are `IconButton` — never a freshly styled
      `<button>`. Interactive controls are `var(--control-height)` (32px) or
      `var(--control-height-lg)` (40px); a hardcoded control height (28px, 36px, …) in a
-     diff is a finding. A freshly written bordered-field recipe is the same finding —
-     fields share one look (1px `--border-strong`, `--bg` fill, `--control-height`); a
-     new input should copy an existing field class, not re-derive it. Call-site classes composed onto a primitive may only do layout
+     diff is a finding. **The field look has exactly one home** — the element baseline
+     in `styles/base.css` (fill `var(--field)` + bottom border `--border-strong`, no
+     box; arch 09 §4): a `border:` or `background:` on an input/textarea in a component
+     module is a finding (module classes add only width/padding/font-size); the sole
+     sanctioned restatements are the select-like triggers (SelectControl, SortControl).
+     A surface that elevates to `--layer-01` sets `--field: var(--field-02)` /
+     `--field-hover: var(--field-hover-02)` on its container, mirroring
+     `--control-hover-fill`. Call-site classes composed onto a primitive may only do layout
      (flex, margins, reveal) or a documented state accent (outlined-danger, pressed) —
      restyling the primitive's box from a call site is a finding. Borders mark function:
-     value-holding controls get `--border-strong` boxes; plain actions are ghost or
-     filled; list rows are flat with dividers, not stacked boxes.
+     full `--border-strong` boxes are reserved for segmented controls, secondary
+     buttons, drop targets (dashed), and the color-swatch input; fields and triggers
+     are underlined, not boxed;
+     passive chrome (tags, badges, glyphs) takes `--border`; plain actions are ghost or
+     filled; list rows are flat with dividers, not stacked boxes. A shared look travels
+     through one of exactly four mechanisms — design tokens, contextual custom
+     properties set by surfaces, `base.css` element baselines, React primitives
+     (Button/IconButton); introducing a fifth (CSS-module `composes`, utility classes,
+     a mixin layer) is a finding. When a recipe migrates to a shared baseline, grep
+     for every selector that restated any of its fragments (focus, placeholder,
+     border) — a partially deleted restatement is worse than an undeleted one,
+     because its higher specificity silently overrides the baseline.
 
 6. **Code Comments**: Comments should not duplicate what the code already says. Remove
    parroting comments. Ensure comments capture non-obvious _why_ — design decisions,