# Add form patterns to design system + fix my.irc.now text fields

## Context

The design system at `design/` only has IRC decorative input patterns (`.cl-input`,
`.cl-input-field`, `.cl-cursor`). There are no web form element patterns -- no text
inputs, textareas, selects, labels, or form group layouts.

The `bouncers.html` template on my.irc.now has a bare `<label>`, `<input type="text">`,
and `<button>` inside a `.card`, but `portal.css` has zero styles for form elements.
They render with browser defaults (white background input on a dark page -- broken).

The paste service (`paste.css`) already has working form styles (`.input`, `.editor`,
`.select`) that follow the design conventions. These should be promoted to the design
system as the canonical pattern.

## Changes

### 1. Update `design/components/forms.css`

Keep the existing IRC input patterns (`.cl-input`, `.cl-input-field`, `.cl-cursor`).
Add web form component patterns below them:

**`.form-group`** -- vertical stack for label + input pairs
- `display: flex; flex-direction: column; gap: 6px;`

**`label` / `.label`** -- form labels
- `font-family: var(--mono); font-size: 12px; color: var(--text-3);`

**`.input`** -- text inputs & selects
- `background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-md);`
- `color: var(--text); font-family: var(--mono); font-size: 13px; padding: 8px 12px;`
- `outline: none; transition: border-color var(--transition-fast);`
- Focus: `border-color: var(--g);`
- Placeholder: `color: var(--text-4);`

**`.editor`** -- textarea
- Same as `.input` plus: `resize: vertical; min-height: 120px; padding: 12px; tab-size: 4;`

**`.select`** -- select-specific tweaks
- `appearance: none; cursor: pointer;`
- Background chevron SVG (green) via `background-image`

**`.form-actions`** -- button row at bottom of form
- `display: flex; gap: 10px; align-items: center; margin-top: 4px;`

### 2. Update `design/index.html` -- forms section

Replace the forms section (lines 703-733) to show both the IRC input and the new web
form components: text input, select, textarea, and a form group with label + input +
button.

### 3. Update `crates/web-api/static/portal.css`

Add form element styles matching the design system patterns:
- `.form-group`, `label` inside `.card`, `.input`, `.input:focus`, placeholder
- Keep it minimal -- just what the portal actually uses

### 4. Update `crates/web-api/templates/bouncers.html`

Wrap the form content with proper classes:
```html
<form method="post" action="/bouncers/create" class="paste-form">
  <div class="form-group">
    <label for="name">bouncer name</label>
    <input type="text" id="name" name="name" placeholder="my-bouncer" required class="input">
  </div>
  <button type="submit" class="btn-fill">create bouncer</button>
</form>
```

## Files to edit

```
design/components/forms.css          -- add web form patterns
design/index.html                    -- update forms preview section
crates/web-api/static/portal.css     -- add form styles
crates/web-api/templates/bouncers.html -- add form CSS classes
```

## Verification

1. Open `design/index.html` in browser -- forms section shows styled text input, select,
   textarea, and form group preview
2. Build and deploy web-api: `cargo build -p irc-now-web-api`
3. Visit my.irc.now/bouncers -- text field should have dark background (`--well`), mono
   font, green focus border, and proper spacing with the label and button