# Patch — `docs/spacing.md`

Two surgical edits to the existing spacing recipe doc. Both are **additive** —
nothing existing is removed or contradicted.

---

## Edit 1 — §4.2 "Max content widths" table

**Find** this table (currently around line 250):

```
| Surface | Max width |
|---|---|
| Manager canvas | 1280px (the standard widescreen ops console) |
| Citizen web | 1120px |
| Citizen mobile | 100% device width |
| Modal body | 480px (sm) / 640px (md) / 800px (lg) |
| Detail-view two-column layout | 1280px (main col flexes, sidebar fixed at 320px) |
```

**Replace** with:

```
| Surface | Max width | Token | Class |
|---|---|---|---|
| Manager canvas | 1280px | `--u-page-max-w`        | `.u-page--mgr` (default) |
| Manager form   | 960px  | `--u-page-max-w-form`   | `.u-page--form` |
| Manager detail | 1280px | `--u-page-max-w-detail` | `.u-page--detail` (grid `1fr 320px`) |
| Manager tree   | none   | —                       | `.u-page--tree` (grid `260px 1fr`) |
| Citizen web    | 1120px | (override in `.u-page--cit-web`) | `.u-page--cit-web` |
| Citizen mobile | 100%   | (override in `.u-page--cit-mobile`) | `.u-page--cit-mobile` |
| Modal body     | 480 / 640 / 800px | `--u-dialog-width-sm/md/lg` | `.u-dialog--sm / --md / --lg` |
| Detail right rail | 320px | `--u-detail-sidebar-w` | `.u-page__sidebar` |
```

And immediately below the table, add this paragraph:

> **Why form is narrower.** Forms read top-to-bottom, label above input.
> At 1280px content width a single-line text input is 600+ characters wide,
> which is unreadable, and the eye has to track across the screen for short
> labels. 960px keeps inputs at a comfortable line length and groups the form
> as a single column of work. Beállítások, hír-szerkesztő, program-szerkesztő,
> info-szerkesztő and the user-meghívó dialog all use this template.
>
> **Why detail isn't form.** Bejelentés-adatlap is **not** a form — it's a
> read-heavy two-column reference view with inline-editable fields. The 320px
> right rail carries map, timestamps, similar-tickets box and activity log;
> the main column flexes to give photos and description room.

---

## Edit 2 — §4 (Page anatomy) example block

**Find** this ASCII diagram (currently around line 230):

```
┌─────────────────────────────────────────────────────────────┐
│  Top bar           (sticky, 56px tall)                       │
├─────────┬───────────────────────────────────────────────────┤
│         │  Page header   (breadcrumb · title · primary CTA) │
│ Sidebar │  ----------                                        │
│ (240/   │  Toolbar      (filters · search · view-switch)    │
│  64px)  │  ----------                                        │
│         │  Main canvas  (cards / lists / tables / forms)    │
│         │                                                    │
└─────────┴───────────────────────────────────────────────────┘
```

**Augment** it with a slim "which template" hint by appending this block right after:

> **Which page template the main canvas uses depends on content:**
>
> | Content shape | Template class | Why |
> |---|---|---|
> | KPI dashboard, riport-archívum, content lists with rich tiles | `.u-page--mgr` | Default canvas — balanced max-width 1280 |
> | Bejelentés-lista, felhasználó-lista, csoport-lista, any wide table | `.u-page--mgr` + table with `data-density="data"` | Same outer; the table density carries the look |
> | Bejelentés-adatlap, hír-adatlap, riport-adatlap | `.u-page--detail` | Two-column: main flex + 320 rail |
> | Beállítások, hír-szerkesztő, program-szerkesztő, info-szerkesztő, user-meghívó dialog body | `.u-page--form` | Narrower content for readable line-length |
> | Kategória-kezelő | `.u-page--tree` | Bal navigation rail + jobb editor |
>
> The template choice is **one decision per page**. Once made, every spacing
> recipe (block gap, section gap, card padding, table density) inherits from
> the world (`.urbino-mgr` default) and the chosen density mode
> (`data-density="canvas|work|data|header"`).

---

## Notes for the merging developer

- These edits add **no new tokens** — every number was already documented in §4.
  The patch only assigns names to existing decisions.
- The "manager tree" row is a new template (was not in the original §4.2).
  Added here because Kategória-kezelő needs it and it's a small, clean pattern.
- If the citizen world ever needs `--cit` variants of these classes, the
  pattern is `.u-page--form.urbino-cit` → override `--u-page-max-w-form` inside.