/* Кадр кабинета и общее кабинетное (новая витрина, часть 3; постановка
   docs/superpowers/specs/2026-10-03-storefront-part3-account-and-login.md, раздел 3) — по эталону
   docs/design/reference/layout.css («Кабинет», ~210–228) и account.html. Размеры — только токены (tokens.css),
   цвета — только роли темы: это стережёт tests/design/test_tokens_guard.py и
   tests/form/test_no_colour_hides_outside_the_theme.py (файл — в их списках).

   ══ ПАМЯТКА ДЛЯ ЭКРАНОВ КАБИНЕТА (задачи 5–8 части 3) ══════════════════════════════════════════════════════

   1. КАДР. Экран кабинета не строит рамку сам — он зовёт `buildCabinetSection(root, { screen, title, back })`
      из js/cabnav.js и наполняет то, что она вернёт (`.account__content`). Кадр ставит:
        <div class="account">
          <div class="account__bar"><a class="back-link account__back" href="/account">← Назад</a></div>
                                                         — до 1100, полосой, липнет под шапкой
          <nav class="navlist account__nav" aria-label="Разделы кабинета">           — с 1100, липнет под шапкой
            <a class="navlist__item" href="/account" aria-current="page">Профиль</a> … «Уведомления» с
            <span class="menu__count">N</span> (число следует за `shushu:unread`)
          </nav>
          <section class="account__main">
            <h1 class="account__title">Профиль</h1>
            <div class="account__content"> ← содержимое экрана, колонка для чтения (`--column-max`)
        Заголовок раздела — имя его пункта (js/sections.js, PROFILE_MENU, Р9); `title` — только у экрана без
        своего пункта («Смена номера», «Мои документы»). Отмеченный пункт шага — SECTION_OF (`form`, `phone` →
        Профиль, `mydocs` → Согласия). «← Назад»: у профиля (`cabinet`, `form`) — откуда пришли, без истории — в
        меню; у страницы с частью адреса (купон, опрос) — к списку раздела; у прочих — в профиль; `back` — своё.
        Страницу (`#screen[data-zone='cabinet']`) узнают по зоне: экран кладут в CABINET_ZONE роутера.

   2. АДРЕСА И ВХОД (js/router.js). Кабинетный адрес без входа ведёт на вход, после входа — обратно на тот же
      адрес с его частью (`cameFor`); новый Гость — в `form` (профиль с «Моими данными» в правке, И9), даже
      если шёл по другому адресу. `/account/profile` — экран `form`: адрес-синоним профиля. Задача 5 рисует
      `form` тем же профилем с открытой правкой (кадр уже считает его профилем). Имена экранов (`cabinet`,
      `form`, `data`, `inbox`…) не меняются: на них ведут ссылки публикаций и купонов (LINKABLE_SCREENS).

   3. БЛОКИ СТРАНИЦЫ (здесь, ниже): `.account__block` — карточка раздела цветом `--panel` (h2 внутри —
      заголовок блока эталона), `.account__row` — строка кнопок или полей в блоке.

   4. ДЕТАЛИ (web/components.css, разметка — как у эталона):
        переключатель  <label class="switch"><input type="checkbox"><span class="switch__track"></span>Telegram</label>
        флажок, радио  <label class="check|radio"><input …><span class="check__box|radio__dot"></span>Подпись</label>
                       (`.check--long` — длинная подпись: флажок у первой строки)
        строки данных  <dl class="data-rows"><div class="data-row"><dt class="data-row__label">Имя</dt>
                       <dd class="data-row__value">…</dd></div></dl>; в значении: `.data-row__line` (значение и
                       кнопки в ряд), `.icon-btn.data-row__copy` (скопировать, значок COPY), `.btn.btn--text
                       .data-row__action` (со значком), `.data-row__note` (пояснение, значок LOCK/ALERT),
                       `.input.data-row__input` (поле правки), `.data-row__choices` (радио пола),
                       `.data-row__chips` > `.badge` (категории); пустое — <span class="muted">не указано</span>
        скопировать    <div class="input-copy"><input class="input"><button class="icon-btn input-copy__btn">
        почта          <p class="email-status [is-ok]">{ALERT|CHECK}<span>…</span><button class="btn btn--text">
        шаги           <ol class="steps"><li class="steps__item is-current"><b>Шаг</b><span>пояснение</span></li>
        выбор ухода    <div class="leave-choices"><button class="leave-choice [leave-choice--danger]"><b>…</b>
                       <span>…</span></button></div>
        уведомления    <ul class="inbox"><li class="inbox__item [is-unread]"><b>…</b><span>…</span>
                       <span class="muted">когда</span></li></ul>
        операции       <ul class="ops"><li class="ops__item"><span>что</span><span class="muted">когда</span>
                       <b [class="ops__plus"]>сумма</b></li></ul>
        карта Гостя    <section class="qr-card"><span class="qr-card__code"><canvas>…</span><div class="qr-card__text">
                       <b class="qr-card__name">…</b>…<span class="qr-card__hint">…</span></div></section>
                       — холст кода своего размера, рамка его не масштабирует (drawQr, vendor/qr.js)
        кошелёк        <button class="wallet-picker">`__emoji` `__text`(`__name` [`__prog`] `__balance`(<b>, `__unit`)
                       `__time`) [`__more`] {CHEVRON `__chevron`}</button>; список — `.menu` (js/popup.js, bindMenu)
        загрузка       <div class="skeleton"></div>;  пусто — <div class="empty"><b>…</b><span>…</span></div>
        ещё            `.btn` (--primary, --secondary, --text, --danger, --md, --block), `.icon-btn`, `.field`
                       (`__label`, `__hint`, `__error`), `.input`, `.select`, `.notice` (--ok, --warn, --err),
                       `.badge`, `.menu__count`, `.visually-hidden`
      Значки — js/icons.js: drawnIcon(COPY|LOCK|ALERT|CHECK|INFO|MAIL|CHEVRON|ZOOM|CLOSE|PENCIL|BIN, размер).
      Новая деталь-КНОПКА (<button>) — в общий сброс прежних кнопок наверху components.css (иначе её зальёт
      золотом правило `button` из app.css) или со своим сбросом в своём файле.

   5. ОКНА И ТОСТЫ. Окно — openDialog(content, { returnTo, focus, onClose }) из js/popup.js (`.dialog`,
      `.dialog--small`, `__head`, `__body`, `__foot`; [data-close] закрывает); тост «Сохранено» — toast() из
      js/toast.js (он же объявляет слова читалке и пишет их с большой буквы — отказы службы годятся как есть);
      announce() — слово для читалки без тоста. Прежнее showMessage() роутера — только у прежних экранов.

   6. СВОИ ТАБЛИЦЫ СТИЛЕЙ (заготовки уже подключены в index.html и стоят под обоими сторожами): профиль —
      profile.css (задача 5), вход, замок и смена номера — login.css (6), прочие разделы кабинета и публичные
      «Документы» — pages.css (7), приглашение в программу — invite.css (8). Прежние правила своих экранов из
      app.css снимает каждая задача сама.

   7. ПРЕЖНЕЕ СНЯТО: прежний тумблер «Согласий» (задача 7) — теперь `.switch` витрины. Прежний профиль (приветствие,
      телефонные кнопки разделов, «Последние заказы», тёмная карточка баланса, анкета отдельным экраном) снят
      задачей 5: профиль — screens/cabinet.js, карта Гостя — account/card.js, «Мои данные» — account/mydata.js.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Страница кабинета: широкая (Р39, Р65), края — вровень с шапкой ───── */
.screen[data-zone='cabinet'] {
  width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
/* Фон страницы — тот же, что у шапки, как у меню и корзины: кабинет — страница сайта, а не другой лист. */
body:has(> #screen[data-zone='cabinet']) { background: var(--page); }

/* ── Сетка: на ПК слева разделы, справа раздел; до 1100 — «← Назад» сверху ── */
.account {
  display: grid; grid-template-columns: calc(var(--space-8) * 4) minmax(0, 1fr); align-items: start;
  gap: var(--space-7); min-width: 0;
}
/* «← Назад» — только до 1100: на ПК путь между разделами — колонка разделов. */
.account__bar { display: none; }
.account__nav { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.account__main { display: grid; gap: var(--space-5); min-width: 0; }
.account__title {
  margin: 0; color: var(--ink); text-align: left; font-family: var(--font-title); font-size: var(--title-xl);
  font-weight: var(--weight-medium); line-height: var(--leading-title); letter-spacing: 0.01em; overflow-wrap: anywhere;
}
/* Содержимое — колонкой для чтения (Р39, И3): длинная строка на мониторе не читается. */
.account__content { display: grid; gap: var(--space-5); min-width: 0; max-width: var(--column-max); }
.account__content > * { min-width: 0; }

/* ── Блок раздела и строка в нём ──────────────────────────────────────── */
.account__block {
  display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5);
  border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--border2); color: var(--ink);
}
.account__block > h2, .account__content > h2 {
  margin: 0; color: var(--ink); text-align: left; font-family: var(--font-title); font-size: var(--title-lg);
  font-weight: var(--weight-medium); line-height: var(--leading-title); letter-spacing: 0.01em;
}
.account__block > h3, .account__content > h3 {
  margin: 0; color: var(--ink); text-align: left; font-family: var(--font-title); font-size: var(--title-sm);
  font-weight: var(--weight-medium); line-height: var(--leading-title); letter-spacing: 0.01em;
}
.account__block .field { width: 100%; }
.account__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

@media (max-width: 1099px) {
  .account { grid-template-columns: minmax(0, 1fr); }
  .account__nav { display: none; }
  /* Полоса «← Назад» липнет под шапкой во всю ширину страницы, цветом страницы (владелец 15.08: «чтобы выйти
     в телефоне требуется листать вниз»; 01.10.2026 — в длинной истории «Назад» уезжала вверх): длинный список
     уходит под неё, а дорога назад остаётся под рукой. Нажимается сама ссылка, а не вся полоса. */
  .account__bar {
    display: flex; position: sticky; top: var(--header-h); z-index: var(--z-sticky);
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); background: var(--page);
  }
}
@media (max-width: 767px) {
  .screen[data-zone='cabinet'] { padding-top: var(--space-4); }
  .account { gap: var(--space-6); }
}