docs: rebuild panel UI mockups on the design system

Split the hash-sheet prototype into one HTML file per screen, composed from stack, pair, measure, and fill. system.html is the grammar; shell.js is shared chrome. The running panel is unchanged.

Co-Authored-By: Cursor <cursoragent@cursor.com>

docs/assets/panel-ui/index.html

@@ -13,19 +13,25 @@
 <header>
   <p class="eyebrow">макеты · не панель</p>
   <h1>Self<b>Post</b> — полное обновление интерфейса</h1>
-  <p>Click-through прототип всех экранов: текущая панель, согласованный roadmap и кандидаты. Знак и палитра из листа утверждения не меняются. Это HTML в <code>docs/assets/panel-ui/</code>, не вёрстка <code>internal/web</code>.</p>
+  <p>Проект системы — как собирать экраны, чтобы не чинить пустые колонки, высоту полей и ряды кнопок по одному. Каждый экран — отдельная страница, не простыня с якорями. Знак и палитра из листа утверждения не меняются. HTML в <code>docs/assets/panel-ui/</code>, не вёрстка <code>internal/web</code>.</p>
   <div class="cta-row">
-    <a class="cta" href="app.html#status">Открыть прототип</a>
-    <a class="cta quiet" href="app.html?view=phone#status">Аварийный телефон</a>
-    <a class="cta quiet" href="app.html?theme=dark#status">Status, тёмная тема</a>
+    <a class="cta" href="status.html">Открыть Status</a>
+    <a class="cta quiet" href="system.html">Система интерфейса</a>
+    <a class="cta quiet" href="status.html?view=phone">Аварийный телефон</a>
+    <a class="cta quiet" href="status.html?theme=dark">Status, тёмная тема</a>
   </div>
 </header>
 
+<section>
+  <h2>Система, не рескин</h2>
+  <p>Первый click-through повторил сетку живой панели, поэтому те же сбои чинились по одному. <a href="system.html">Грамматика</a> задаёт регионы (<code>measure</code> / <code>pair</code> / <code>fill</code>), карточку со слотом справки, <code>field-row</code> (Host и Type одной высоты) и <code>actions-row</code>. Макеты собраны только из этого: один экран — один HTML-файл.</p>
+</section>
+
 <section>
   <h2>Ширина окна</h2>
   <p>Сейчас оболочка центрируется, колонка контента упирается в <code>64rem</code>, формы ещё уже — <code>48rem</code>. На широком мониторе поля пустые. Растянуть поля на 100% окна нельзя — они становятся нечитаемыми. Две независимые карточки рядом — можно.</p>
   <h3>Гибрид</h3>
-  <p>Навигация прижата влево. Ops-страницы (Status, Deliveries, очередь, лог, Backup, Settings, DMARC, inbound) занимают остаток до <strong>90rem (~1440px)</strong>. Backup — полный бэкап ‖ импорт. Settings — учётные данные ‖ DMARC (у domain-admin остаётся одна узкая карточка). Одиночные формы (Users, подтверждения) остаются <strong>42rem и выровнены влево</strong>. Login и setup — по-прежнему узкий центрированный блок.</p>
+  <p>Навигация прижата влево. Ops-страницы (Status, Deliveries, очередь, лог, Backup, Settings, DMARC, inbound) занимают остаток до <strong>90rem (~1440px)</strong>. Backup — полный бэкап ‖ импорт. Settings — учётные данные ‖ DMARC (у domain-admin остаётся одна узкая карточка). Таблица Users — <code>fill</code>. Одиночные формы (подтверждения, форма пользователя) остаются <strong>42rem и выровнены влево</strong>. Login и setup — по-прежнему узкий центрированный блок.</p>
   <div class="compare">
     <div>
       <div class="row">сейчас, окно ~1600px</div>
@@ -122,51 +128,55 @@
 
 <section>
   <h2>Экраны</h2>
+  <h3>Система</h3>
+  <div class="screen-index">
+    <a href="system.html">Грамматика и живые образцы</a>
+  </div>
   <h3>Вход</h3>
   <div class="screen-index">
-    <a href="app.html#login">Sign in</a>
-    <a href="app.html#setup">Create administrator</a>
+    <a href="login.html">Sign in</a>
+    <a href="setup.html">Create administrator</a>
   </div>
   <h3>Текущая панель</h3>
   <div class="screen-index">
-    <a href="app.html#status">Status</a>
-    <a href="app.html#domains">Domains</a>
-    <a href="app.html#domain">Domain detail</a>
-    <a href="app.html#domain-delete">Delete domain</a>
-    <a href="app.html#deliveries">Deliveries</a>
-    <a href="app.html#delivery">Delivery (deferred + retries)</a>
-    <a href="app.html#mail-queue">Mail queue + retry policy</a>
-    <a href="app.html#system-log">System log</a>
-    <a href="app.html#backup">Backup</a>
-    <a href="app.html#users">Users</a>
-    <a href="app.html#user-form">Edit user</a>
-    <a href="app.html#user-delete">Delete user</a>
-    <a href="app.html#settings">Settings</a>
+    <a href="status.html">Status</a>
+    <a href="domains.html">Domains</a>
+    <a href="domain.html">Domain detail</a>
+    <a href="domain-delete.html">Delete domain</a>
+    <a href="deliveries.html">Deliveries</a>
+    <a href="delivery.html">Delivery (deferred + retries)</a>
+    <a href="mail-queue.html">Mail queue + retry policy</a>
+    <a href="system-log.html">System log</a>
+    <a href="backup.html">Backup</a>
+    <a href="users.html">Users</a>
+    <a href="user-form.html">Edit user</a>
+    <a href="user-delete.html">Delete user</a>
+    <a href="settings.html">Settings</a>
   </div>
   <h3>Roadmap</h3>
   <div class="screen-index">
-    <a href="app.html#mail-queue">queue-retries — карточка на Mail queue</a>
-    <a href="app.html#delivery">queue-retries — history deferred</a>
-    <a href="app.html#inbound">Inbound list (колонка DNS = MX)</a>
-    <a href="app.html#inbound-domain">Inbound domain — DNS ok</a>
-    <a href="app.html#inbound-backup">Inbound domain — DNS error</a>
-    <a href="app.html#inbound-delete">Delete inbound domain</a>
-    <a href="app.html?inbound=0#status">Inbound выключен (пункта нет)</a>
-    <a href="app.html#dmarc">DMARC reports <span class="tag future">candidate</span></a>
-    <a href="app.html#help">Help <span class="tag future">candidate</span></a>
+    <a href="mail-queue.html">queue-retries — карточка на Mail queue</a>
+    <a href="delivery.html">queue-retries — history deferred</a>
+    <a href="inbound.html">Inbound list (колонка DNS = MX)</a>
+    <a href="inbound-domain.html">Inbound domain — DNS ok</a>
+    <a href="inbound-backup.html">Inbound domain — DNS error</a>
+    <a href="inbound-delete.html">Delete inbound domain</a>
+    <a href="status.html?inbound=0">Inbound выключен (пункта нет)</a>
+    <a href="dmarc.html">DMARC reports <span class="tag future">candidate</span></a>
+    <a href="help.html">Help <span class="tag future">candidate</span></a>
   </div>
   <h3>Аварийный телефон</h3>
   <div class="screen-index">
-    <a href="app.html?view=phone#status">Status 390px — Overall, then queue/cert, then the rest</a>
-    <a href="app.html?view=phone#mail-queue">Mail queue 390px</a>
-    <a href="app.html?view=phone#deliveries">Deliveries 390px — список, не таблица</a>
-    <a href="app.html?view=phone#delivery">Delivery 390px</a>
+    <a href="status.html?view=phone">Status 390px — Overall, then queue/cert, then the rest</a>
+    <a href="mail-queue.html?view=phone">Mail queue 390px</a>
+    <a href="deliveries.html?view=phone">Deliveries 390px — список, не таблица</a>
+    <a href="delivery.html?view=phone">Delivery 390px</a>
   </div>
 </section>
 
 <section style="border-bottom:none">
   <h2>Как смотреть</h2>
-  <p>Откройте <a href="app.html#status">app.html</a> в браузере. Шапка прототипа — не часть панели: роль, Desktop/Phone, inbound, светлая/тёмная. Копирайт экранов английский, как в продукте. Drawer Help открывается с «?» на Status или с карточек домена; на карточках остаются показания и колонка Detail.</p>
+  <p>Откройте любой экран из списка — это отдельная страница, не якорь в одном файле. Шапка прототипа — не часть панели: роль, Desktop/Phone, inbound, светлая/тёмная. Копирайт экранов английский, как в продукте. Drawer Help открывается с «?» на Status или с карточек домена; на карточках остаются показания и колонка Detail.</p>
   <p class="muted">После утверждения макетов вёрстка <code>panel.css</code> и шаблонов — отдельная задача. CSP и progressive enhancement в этом HTML не воспроизводятся один в один: здесь допустимы вещи, которые в панели останутся в файле стилей.</p>
 </section>