# Rules: Styling & Interaction

### Visual Rules
1. **Wrapper**: Height 40px. Border 1px solid `var(--border)`. Border-radius `--r-sm`.
2. **Input**: Flex-grow 1. Centered text. Read-only (`readonly`). No border.
3. **Buttons**: Width 32px. Background `--panel-2`. Hover `--text-mid`.
4. **Layout**: Buttons on right. Input on left.
5. **Suffix**: If `unit` is provided, show it inside input field, centered or trailing.