chore: reorganize rules files — consolidate duplicates

Migrates legacy rule numbering (18, 20) to standardized sequence (53, 54) and adds new 18-preexisting-issues.md for handling pre-existing issues during development. This consolidates duplicate rule coverage across the old and new numbering schemes.

Files changed:
- Removed: 18-relative-units.md (moved to 53-relative-units.md)
- Removed: 20-testing-gate.md (moved to 54-testing-gate.md)
- Added: 18-preexisting-issues.md (new)
- Added: 53-relative-units.md (renamed from 18)
- Added: 54-testing-gate.md (renamed from 20)

.claude/rules/53-relative-units.md

@@ -0,0 +1,17 @@
+# Relative Units (CSS)
+
+Use relative units (`em`, `rem`, `%`, `vh`, `vw`) for layout and spacing. Pixels are acceptable only for:
+
+- Icon sizes (`width`/`height` on `<svg>` or icon containers)
+- Borders and outlines (`1px solid ...`)
+- Box shadows
+
+## Rules
+
+- **Layout dimensions** (width, height, max-width, min-width): use `em`, `rem`, `%`, or viewport units.
+- **Padding and margin**: use `em` or `rem`.
+- **Font sizes**: use `rem` or `em`, never `px`.
+- **Gap, border-radius**: use `em` or `rem`.
+- **Media queries**: use `em`.
+- When existing code uses `px` for layout elements, convert to relative units as part of the change.
+- CSS custom properties for typography (`--ui-font-size`, `--term-font-size`) store `px` values because they feed into JS APIs (xterm.js) that require pixels. This is the only exception beyond icons/borders.