## Зачем

Первый макет скопировал грамматику живой панели: страница помечается `ops` или `form`, карточки стопкой, пара полей — два независимых `.code`, Save внутри `<form>`, Delete снаружи. Дальше каждая мелочь чинилась отдельно — как в `panel.css` годами. Новый интерфейс должен не давать собрать пустую колонку, разные высоты Host/Type и кнопки на двух строках.

Три оси, которые больше не выбираются «на глаз» у каждой страницы:

1. Регион — как блок занимает ширину окна.
2. Карточка — заголовок, справка, тело, действия.
3. Контрол — одно поле или пара полей одной высоты.

## Регионы

Страница — это `stack` регионов, не класс на `<main>`. Оболочка одна: навбар прижат влево, контент забирает остаток. Навбар не прыгает, когда меняется содержимое.

Регион | Ширина | Когда
--- | --- | ---
`measure` | до 42rem, влево | Одна читаемая форма: login, setup, подтверждение удаления, форма пользователя. Не «вся страница Settings».
`pair` | две колонки до 90rem | Две равноправные задачи на одном экране. Один ребёнок — сам сжимается в `measure` (domain-admin без DMARC).
`fill` | до 90rem | Таблица, лог, DNS-статус, список приложений. Ячейки не переносят однострочные значения; карточка скроллится по X.
`stack` | колонка с зазором | Вертикальный порядок регионов. Зазор даёт `gap`, не `.card + .card`.

Нельзя — страница-форма, две задачи стопкой

## Full backup

Карточка узкая. Справа пустое поле на 1600px.

## Import a domain

Вторая задача под первой — та же пустота.

Надо — pair

## Full backup

Секрет. Шифрование — внутри карточки, поля не растягиваются на 1440px.

## Import a domain

Тот же экран, вторая задача. Не «ещё одна форма ниже».

## Карточка

Один хром: `card-head` (заголовок + слот «?»), тело, при необходимости `actions-row`. Справка — часть хрома, её не расставляют после того, как карточки уже собраны. Нет «?» — слот пустой, заголовки соседних карточек всё равно на одной линии.

Показания (очередь, PTR, CPU) остаются на карточке. В drawer уходит только то, чего на карточке быть не должно: что такое kernel counter, зачем PTR у провайдера, почему пароль показывают один раз.

Хром карточки

## DNS status ok

?

Чтение и Re-check здесь. Абзац «зачем MX» — в справке.

## Danger zone

Без «?»: действие очевидное. Карточка всё равно пара к форме, не на всю ширину.

Delete inbound domain

## Контролы

Одно поле — `field` (подпись + контроль). Два поля в ряд — `field-row`: подписи в первой сетке-строке, значения во второй. Высота значений общая, потому что это одна строка грида, а не два блока с подобранным padding. Баг «Type ниже Host» (`b0ebe06`) из этой разметки не собирается.

`field-row` с узкой второй колонкой — Host / name ‖ Type. `field-row equal` — два равноправных инпута (лимит и окно).

field-row — Host ‖ Type, с Copy и без

## With Copy

Host / name
mail._domainkey.example.com
Type TXT

## Lookup, no Copy

Host / name lists.example.com
Type MX
field-row equal — лимит ‖ окно

## Level-2 rate limit

Message limit
Window (seconds)

## Действия

Primary, secondary и danger — всегда `actions-row`. Для вёрстки неважно, POST это или переход на confirm: ряд один. Форма либо оборачивает всю карточку, либо кнопки несут `form=`. Нельзя оставить Submit внутри блочной формы, а Delete — следующим соседом: блок формы занимает строку целиком.

Save и Delete в одном ряду

## Edit user

Username
Delete user

## Нельзя

Если хочется добавить правило «только на этой странице» — сначала проверить, какого региона не хватило.

- Класс на `main` (`ops` / `form`) как способ выбрать ширину. Ширину выбирает регион.
- Одиночная карточка на 90rem с двумя полями ввода. Это `measure` или `pair`.
- Danger zone отдельным `fill`. Она вторая колонка последней пары (получатели ‖ удалить, экспорт ‖ удалить).
- Два `.code` рядом с разным padding, чтобы «почти совпало». Только `field-row`.
- Submit внутри `<form>`, danger-ссылка после `</form>`.
- Перенос однострочного поля, адреса, статуса, hostname. `nowrap` + горизонтальный скролл карточки.
- Status из одних бейджей без Detail / без строки очереди / без PTR.
- Телефон как уменьшенный десктоп с шестиколоночной таблицей. Таблица → список; `pair` → одна колонка; `field-row` остаётся парой.
- Копировать разметку `internal/web/view/templates` «как есть» в макет. Рецепт экрана — ниже, не шаблон Go.

## Рецепты экранов

Экраны — отдельные HTML-файлы рядом с этой спецификацией. Собираются только так:

Экран | Стек регионов
--- | ---
Login / setup | центр оболочки, `measure` 24rem, полный stamp
Status | `stack`: overall → `pair` очередь‖TLS → `pair` milters‖PTR → inbound если есть → `pair` machine‖processes → configuration. На карточках остаются числа и Detail.
Domains / Inbound / Deliveries / log / queue | `fill` таблица. Добавление домена — поле в той же карточке списка (`measure` внутри, не вторая карточка и не инпут на 90rem).
Domain | `fill` DNS status → `pair` DKIM/SPF ‖ DMARC → `pair` connection ‖ add app → `fill` applications → `pair` domain settings (две половины) → `pair` export ‖ danger. «?» на рабочих карточках.
Inbound domain | `fill` MX DNS → `pair` upstream ‖ MX to publish → `pair` recipients ‖ danger
DMARC | hub: `pair` ingest ‖ this week, затем `fill` список отчётов. Домен: roll-up (`pair` 7 days ‖ third-party, `fill` reports + sources). Один XML: просмотр — `pair` report ‖ policy, `fill` records. Не дашборд, не `ruf=`.
Backup | `pair` full backup ‖ import
Settings | global: `pair` credentials ‖ DMARC, затем `fill` rate limits. Domain-admin: один ребёнок в `pair` → сам `measure`
Users | `fill` таблица. Create/Edit — `measure` + `actions-row`
Confirm delete | `measure` одна карточка

## Телефон

Аварийный доступ, не продукт. `pair` складывается в одну колонку. Таблица заменяется списком (как сейчас в прототипе). `field-row` не складывается: Type — токен. Навбар — выезжающая колонка на checkbox, без обязательного JS. Знак в шапке — SP-иконка, не второй wordmark.

## Как внедрять

1. Новый экран или правка макета — только классы из `system.css` (`stack`, `pair`, `measure`, `fill`, `field-row`, `actions-row`).
2. Не добавлять исключения в `mock.css` «для этой страницы», если это ширина, высота пары полей или ряд кнопок.
3. Click-through — отдельные страницы (`status.html`, `domain.html`, …), не простыня с якорями. Оболочка общая: `shell.js`.
4. Вёрстка `internal/web` — отдельная задача после утверждения системы, не параллельный рескин шаблонов.

Классы живут в `docs/assets/panel-ui/system.css`. Этот файл — спецификация. Экраны — status.html и соседние страницы; оглавление — index.html.