/* Рама интерфейса: меню-ящик, кнопка меню, переключатель плотности,
   колоннада панелей.

   Перенесено из спеки `design/derived_pages.py` (переменная `CSS`, функции
   `rail`, `top`, `_dens`, `workspace`) один в один. Спека — слой поверх ядра:
   галерея собирается как `[kernel.KERNEL_CSS, derived_pages.CSS]`, и здесь
   повторена та же укладка — `kernel.css` объявляет токены и базу, этот файл
   добавляет то, чего в ядре нет.

   Дизайн-код не правится: он под отпечатком `design/kernel.sha256`, и своя
   палитра здесь означала бы две версии одного решения. Всё держится на
   токенах ядра `var(--…)`.

   Чего в файле нет намеренно:

   `.top`, `.crumbs`, `.search`, `.unit`, `.btn`, `--row`, `--pad` и
   `[data-density="compact"]` уже объявлены в `kernel.css` — спека их не
   переопределяет, и повтор здесь развёл бы одно правило по двум файлам.

   Облик B (решение визионера 23.09): верхняя строка со знаком, поиском и
   аватаром, строка приложения `.crmbar` с кнопкой-сеткой и вкладками разделов
   выведены в `design/derived_pages.py` и доезжают сюда листом `derived.css`
   под `[data-style="derived"]`. Тёмная колонка облика A ушла вместе с ветками
   тёмной темы и «свернуть», которые жили здесь.

   Плитки закреплённых разделов (`.dash`, `.dt*`) и кнопка меню `.navbtn`
   сняты вместе с разметкой: стиль без разметки возвращается первой правкой
   темы. Тон второго числа (`.dt__q--*`) ушёл вместе с числами меню.

   Меню «Все разделы» (App Launcher) выведено в `design/derived_pages.py` и
   доезжает листом `derived.css`; здесь только то, что спека сказать не
   может: ящик стоит на окне, а не на артборде, выезжает коротким движением и
   закрытым не рисуется.

   `.shell` спеки (колонка на всю высоту): имя занято в `style.css` под
   горизонтальную раму с рельсом. Переопределить его отсюда значит сломать
   нынешний экран до того, как рама встанет в T4. */

/* ── Меню «Все разделы» ─────────────────────────────────────────────────── */
/*
   Выезжает слева по кнопке-сетке во второй строке верха, как App Launcher в
   Salesforce, и стоит поверх всего — и верха, и содержимого. Закрытое меню из
   потока выходит: ширина рабочей области при нём равна ширине окна.
*/
/* Затемнение под ящиком. Оно гасит содержимое и ловит нажатие мимо меню,
   поэтому стоит на окне целиком: на длинной странице затемнение, привязанное
   к раме, обрывалось бы на первом экране.

   Значение живёт токеном ядра `--scrim`, заведённым ступенью ш0.1: затемнение
   не выводится из цветов темы — `--ink` в тёмной ветке светлый, `--bg` в
   светлой светлый, ни один не годится в обе стороны. */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }

/* ── Переключатель плотности ────────────────────────────────────────────── */
/*
   Решение седьмое свода: плотность выбирает человек. Ступени плотности живут
   в ядре (`--row`, `--pad` при `[data-density="compact"]`), здесь только вид
   переключателя.
*/
.dens { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel2); }
.dens b { font: 600 13px/1 inherit; padding: 5px 9px; border-radius: 5px; color: var(--muted); }
.dens b.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── Вкладки открытых записей. Правая половина полосы.

   Вкладка — это не закладка и не история. Это запись, которую человек держит
   в работе: он сам её открыл и сам закроет, когда закончит. «Мои открытые» —
   фильтр, его считает система; вкладки — намерение, его держит человек.
   Отсюда и польза: про сделку во вкладке не забывают, потому что закрыть её —
   отдельное решение.

   Точка несёт состояние записи, а не её тип: красная — просрочен шаг,
   янтарная — открыта давно и ничего не менялось, серая — мяч у клиента,
   синяя — ждёт вашего хода. Полоса вкладок становится маленькой очередью, а
   не рядом одинаковых имён.

   Сумма показывается только у текущей вкладки и только у записи, у которой
   она есть: у остальных важно имя и точка состояния, а у лида суммы нет.

   Открытая вкладка — черта 2px снизу, как у вкладки раздела слева: коробка с
   рамкой, заливкой и тенью разом была тремя подсветками одного состояния
   (`docs/design/no-ai-look.md`, правило 1). */
.tabs { display: flex; align-items: stretch; gap: 4px; margin-left: auto;
  padding: 0 12px 0 16px; border-left: 1px solid var(--line); min-width: 0; }
.tab { display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: none; min-width: 0; max-width: 210px; flex-shrink: 1; cursor: pointer; }
.tab:hover { border-bottom-color: var(--line); }
.tab--on, .tab--on:hover { border-bottom-color: var(--mass); }
.tab__d { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--low); }
.tab__d--act { background: var(--mass); }
.tab__d--late { background: var(--high); }
.tab__d--stale { background: var(--medium); }
.tab__n { font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tab__s { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tab__x { color: var(--muted); opacity: 0; flex-shrink: 0; }
.tab:hover .tab__x, .tab--on .tab__x { opacity: 1; }
.tabs__more { align-self: center; font-size: 13px; color: var(--muted); white-space: nowrap;
  padding: 0 6px; cursor: pointer; }

/* Дальше — то, чего в спеке нет, и причина у каждого правила своя.

   Вкладка в спеке — `div`, крестик — `span`. Закрыть запись и приколоть её
   надо уметь с клавиатуры, поэтому в раме это кнопки; хром браузер приносит
   свой, и он снимается здесь. Вкладка при этом кнопкой не становится:
   кнопка внутри кнопки браузером не собирается. */
.tab { appearance: none; font-family: inherit; color: inherit; text-align: left; }
.tab__x, .tab__p { appearance: none; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; }
.tab__p { opacity: 0; flex-shrink: 0; }
.tab:hover .tab__p, .tab--on .tab__p, .tab--pin .tab__p { opacity: 1; }
.tab__x:hover, .tab__p:hover { color: var(--ink); }

/* Чужая запись в спеке серая по умолчанию: класс `tab__d--grey` разметка
   называет, а правила под него нет — цвет достаётся от базовой точки. Рама
   объявляет его тем же значением, но вслух: разметка называет состояние, и
   класс без объявления одинаково выглядит и как «серая намеренно», и как
   «забыли покрасить». Немая точка (состояния не знаем) остаётся базовой — на
   экране она неотличима, и это честно: и там, и там ход не ваш. */
.tab__d--grey { background: var(--low); }

/* Приколотую вкладку метит флажок цветом закрепления, а не рамка: рамка
   спорила бы с чертой открытой вкладки за одно и то же место. */
.tab--pin .tab__p { color: var(--medium); }

/* «Ещё N» — кнопка: она разворачивает остаток и сворачивает обратно. */
.tabs__more { appearance: none; border: 0; background: none;
  font-family: inherit; color: var(--muted); }
.tabs__more:hover { color: var(--ink); }

/* ── Ширина рамы ────────────────────────────────────────────────────────── */
/*
   Страница вбок не ездит вовсе. Страховка от содержимого экрана, которое
   объявит ширину больше рамы: без запрета оно растянуло бы раму, и вместе с
   ним уехала бы верхняя строка — «где я» пропало бы ровно тогда, когда человек
   ушёл вправо и нуждается в нём больше всего.

   Здесь же стояли правила колоннады — `.cols`, `.pan*`, строка списка внутри
   слота и полоса рабочих областей. Снесены 27.08 вместе с самой механикой:
   стиль без разметки возвращается первой правкой темы, и правило, которому
   нечего красить, живёт ровно до того дня, когда кто-нибудь припишет к нему
   разметку заново.
*/
body { overflow-x: hidden; }

/* ── Находка слоя смысла ────────────────────────────────────────────────── */
/*
   Улика обязательна: утверждение без улики — мнение машины, и продавец
   правильно сделает, что не поверит. Поэтому улика вынесена отдельной строкой
   с чертой слева, а не дописана к заголовку мелким шрифтом.
*/
.find { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); margin-bottom: 8px; }
.find--hot { border-color: var(--high); background: var(--high-bg); }
.find__t { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.find__e { font-size: 13px; color: var(--ink2); margin-top: 5px;
  padding-left: 9px; border-left: 2px solid var(--line); }
.find__a { margin-top: 8px; }


/* Вход: окно по центру экрана (запуск 08.09). Поля в столбик, кнопка на всю ширину. */
.app .gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.app .gate__box { width: 400px; display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--shadow); }
.app .gate__box input { width: 100%; }
.app .gate__box .btn { width: 100%; justify-content: center; }

/* Знак по теме: чёрный на светлом, белый на тёмном (брендбук Venkon 2026). */
.top__logo--dark { display: none; }
.app[data-theme="dark"] .top__logo--light { display: none; }
.app[data-theme="dark"] .top__logo--dark { display: inline-block; }

/* Экран грани несёт свою .page внутри .page рамы: поля складывались (20 + 20),
   и списки клиентов и контактов стояли глубже сделок и обращений. Поле — одно,
   рамы. */
.page .page { padding: 0; }

/* Действия над строкой списка («В архив» и т. п.) — при наведении и фокусе,
   а не столбом кнопок в каждой строке: столб читался шумом сильнее данных.
   С клавиатуры кнопка видна, как только фокус вошёл в строку; где наведения
   нет (сенсор), кнопки стоят всегда. */
@media (hover: hover) {
  .tbl td.r > .btn { opacity: 0; }
  .tbl tr:hover td.r > .btn, .tbl tr:focus-within td.r > .btn { opacity: 1; }
}

/* Пилюля в поле карточки переносится, а не вылезает за край блока: длинное
   состояние по реестру («Действующие и имеющие налоговые обязательства»)
   уходило за рамку. */
.fld__v .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Проверка строки «Вышла новая версия», 24.09. */

/* ══ Оболочка редизайна р0.1 (поток S) ═════════════════════════════════════
   Рейл 60px, верхняя строка 60px, окно приложений, нижняя панель телефона.
   Классы `rd-shell-*`, только токены пакета (`var(--…)`, объявлены в
   `kernel.css`). Ядро не тронуто: `.app` в нём стоит шириной 1440, здесь —
   резиновая. Правила выбирают через `.app`, потому что ядро красит ссылки
   (`.app a`) и кнопки (`button` в `style.css`) раньше нас.
   Точки перелома — `DESIGN_SYSTEM.md` §4: 1280 / 1024 / 768. */

.app { width: auto; min-width: 0; }
.app .rd-shell { flex: 1; display: flex; min-width: 0; align-items: stretch;
  font-family: var(--font); color: var(--text-primary); }
.app .rd-shell-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Поля страницы — по пакету (§2, §4): 32 на десктопе, 24 на 1024–1279, 16 на
   телефоне; ядро даёт `.page` свои 20, их перекрывает рама. */
.app .rd-shell-col > .page { min-width: 0; padding: 24px var(--page-pad-x) 32px; gap: var(--gap); }

/* ── Рейл ──────────────────────────────────────────────────────────────── */
.app .rd-shell-rail { flex: 0 0 var(--rail-w); width: var(--rail-w); position: sticky;
  top: 0; height: 100vh; align-self: flex-start; background: var(--rail-grad);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 0; z-index: 20; }
.app .rd-shell-logo { width: 32px; height: 32px; margin-bottom: 10px; border-radius: 9px;
  background: var(--rail-bg); color: var(--bg-surface); display: flex;
  align-items: center; justify-content: center; }
.app .rd-shell-appbtn { appearance: none; height: auto; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  color: var(--bg-surface); font-family: inherit; }
.app .rd-shell-appbtn__i { width: 40px; height: 40px; border-radius: 10px;
  background: var(--appbtn-grad); display: flex; align-items: center; justify-content: center; }
.app .rd-shell-appbtn:hover .rd-shell-appbtn__i,
.app .rd-shell-appbtn[aria-expanded="true"] .rd-shell-appbtn__i { background: var(--appbtn-grad-hover); }
.app .rd-shell-appbtn__n { font-size: 9px; font-weight: 600; letter-spacing: .02em;
  max-width: 56px; text-align: center; white-space: nowrap; overflow: hidden; }
.app .rd-shell-sep { display: block; width: 24px; height: 1px; background: var(--rail-active);
  margin: 6px 0; flex: none; }
.app .rd-shell-menu { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Пункт рейла 40×40; подсказка выезжает справа при наведении и фокусе. */
.app .rd-shell-i { position: relative; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--rail-icon);
  text-decoration: none; }
.app .rd-shell-i:hover { background: var(--rail-hover); color: var(--bg-surface);
  text-decoration: none; }
.app .rd-shell-i.rd-shell--on, .app .rd-shell-i.rd-shell--on:hover {
  background: var(--rail-active); color: var(--bg-surface); }
.app .rd-shell-ico { position: relative; display: inline-flex; }
.app .rd-shell-dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 0 2px var(--rail-bg); }
.app .rd-shell-i.rd-shell--on .rd-shell-dot { box-shadow: 0 0 0 2px var(--rail-active); }
.app .rd-shell-tip { display: none; position: absolute; left: 50px; top: 50%;
  transform: translateY(-50%); background: var(--rail-active); color: var(--bg-surface);
  font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 5;
  pointer-events: none; }
.app .rd-shell-i:hover .rd-shell-tip, .app .rd-shell-i:focus-visible .rd-shell-tip { display: block; }

.app .rd-shell-rail :focus-visible, .app .rd-shell-tab :focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* ── Верхняя строка ────────────────────────────────────────────────────── */
.app .rd-shell-top { height: var(--topbar-h); flex: 0 0 var(--topbar-h); display: flex;
  align-items: center; gap: 12px; padding: 0 var(--page-pad-x); }
.app .rd-shell-search { appearance: none; width: 440px; max-width: 100%; height: 38px;
  padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg-surface);
  color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 400;
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.app .rd-shell-search:hover { background: var(--bg-subtle); }
.app .rd-shell-search__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.app .rd-shell-search .kbd2 { margin-left: auto; border: 0; padding: 0; font-family: inherit;
  font-size: 12px; color: var(--text-faint); }
.app .rd-shell-create { appearance: none; height: 36px; padding: 0 12px; border: 0;
  border-radius: var(--r-button); background: none; color: var(--text-primary);
  font-family: inherit; font-size: 14px; font-weight: 400; display: inline-flex;
  align-items: center; gap: 6px; cursor: pointer; }
.app .rd-shell-create:hover { background: var(--bg-hover); }
.app .rd-shell-top .mk { margin-left: auto; }
.app .rd-shell-top :focus-visible, .app .rd-shell-back :focus-visible,
.app .rd-shell-win :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* Аватар: разметка одна, на десктопе он стоит внизу рейла, на телефоне — в
   верхней строке. Фиксированное положение вынимает его из потока строки. */
.app .rd-shell-face { position: fixed; left: 15px; bottom: 16px; z-index: 31; }
[data-style="derived"] .rd-shell-face .ava { width: 30px; height: 30px; flex-basis: 30px;
  background: var(--bg-hover); color: var(--text-body); font-size: 11px; }
[data-style="derived"] .rd-shell-face .face__menu { top: auto; bottom: 0; right: auto;
  left: calc(100% + 12px); margin: 0; }

/* Слоты телефона на десктопе скрыты. */
.app .rd-shell-back, .app .rd-shell-tab, .app .rd-shell-act { display: none; }

/* ── Окно приложений ───────────────────────────────────────────────────── */
.app .rd-shell-veil { position: fixed; inset: 0 0 0 var(--rail-w); z-index: 40;
  background: var(--scrim); }
.app .rd-shell-win { position: fixed; top: 16px; left: calc(var(--rail-w) + 16px);
  width: 960px; max-width: calc(100vw - var(--rail-w) - 32px); max-height: calc(100vh - 32px);
  overflow-y: auto; z-index: 41; display: flex; flex-direction: column;
  background: var(--bg-surface); border-radius: 18px; box-shadow: var(--shadow-pop);
  color: var(--text-primary); animation: rd-shell-in .12s ease-out; }
@keyframes rd-shell-in { from { transform: translateY(-8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .app .rd-shell-win { animation: none; }
}
.app .rd-shell-win__h { display: flex; align-items: center; gap: 16px; padding: 20px 24px 4px; }
.app .rd-shell-win__t { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); }
.app .rd-shell-win__t--m { display: none; }
.app .rd-shell-win__find { flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px; border-radius: 11px;
  background: var(--bg-page); color: var(--text-muted);
  box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
.app .rd-shell-win__find input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0;
  border-radius: 0; background: none; font-family: inherit; font-size: 15px;
  color: var(--text-primary); outline: none; }
.app .rd-shell-win__find input:focus-visible { outline: none; }
.app .rd-shell-win__find input::placeholder { color: var(--text-muted); }
.app .rd-shell-win__esc { font-size: 12px; color: var(--text-faint); }
.app .rd-shell-win__x { display: none; }
.app .rd-shell-win__body { padding-bottom: 4px; }
.app .rd-shell-win__g { margin: 0; padding: 18px 24px 10px; font-size: var(--fs-group);
  font-weight: 600; letter-spacing: .03em; color: var(--text-faint); text-transform: uppercase; }
.app .rd-shell-win__more { display: none; }
.app .rd-shell-win__none { margin: 0; padding: 4px 24px 12px; font-size: 14px;
  color: var(--text-secondary); }

.app .rd-shell-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; padding: 0 24px; }
.app .rd-shell-tile { appearance: none; height: auto; position: relative; display: flex;
  flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 0;
  border-radius: 14px; background: var(--bg-subtle); color: var(--text-primary);
  font-family: inherit; text-align: left; cursor: pointer; }
.app .rd-shell-tile:hover { background: var(--bg-hover); }
.app .rd-shell-tile--on, .app .rd-shell-tile--on:hover { background: var(--brand-blue-soft);
  box-shadow: inset 0 0 0 1.5px var(--brand-blue); }
.app .rd-shell-tile__ico { width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand-black); color: var(--bg-surface); display: flex;
  align-items: center; justify-content: center; }
.app .rd-shell-tile--on .rd-shell-tile__ico { background: var(--brand-blue); }
.app .rd-shell-tile__t { font-size: 15px; font-weight: 600; }
.app .rd-shell-tile__d { font-size: var(--fs-label); font-weight: 400; color: var(--text-muted);
  line-height: 1.4; margin-top: -6px; }
.app .rd-shell-tile__m { font-size: var(--fs-label); font-weight: 400;
  color: var(--text-secondary); line-height: 1.5; }
.app .rd-shell-tile__now { position: absolute; top: 14px; right: 14px; font-size: 11px;
  font-weight: 600; color: var(--brand-blue-text); }

.app .rd-shell-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px; }
.app .rd-shell-chip { appearance: none; height: 30px; padding: 0 12px; border: 0;
  border-radius: 8px; background: var(--bg-page); color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 400; cursor: pointer; }
.app .rd-shell-chip:hover { background: var(--bg-hover); }
.app .rd-shell-chip[aria-current="page"] { background: var(--brand-blue-soft);
  color: var(--brand-blue-text); font-weight: 600; }
.app .rd-shell-win__f { margin-top: 20px; display: flex; align-items: center; gap: 18px;
  padding: 14px 24px; font-size: var(--fs-label); color: var(--text-muted);
  box-shadow: inset 0 1px 0 var(--line); }
.app .rd-shell-win__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.app .rd-shell-win__hint .kbd2 { font-family: inherit; font-size: 11px; color: var(--text-secondary);
  background: var(--bg-page); border: 0; border-radius: 4px; padding: 1px 5px; }

/* ── Планшет и десктоп поуже (§4) ──────────────────────────────────────── */
@media (max-width: 1279px) {
  .app { --page-pad-x: 24px; }
  .app .rd-shell-top { padding: 0 24px; }
  .app .rd-shell-search { width: 320px; }
}
@media (max-width: 1023px) {
  .app .rd-shell-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Телефон (< 768, эталон 390×844) ───────────────────────────────────── */
@media (max-width: 767px) {
  .app { --page-pad-x: 16px; --gap: 12px; }
  .app .rd-shell { flex-direction: column; overflow-x: hidden; }
  .app .rd-shell-rail { display: none; }
  .app .rd-shell-col { padding-bottom: var(--tabbar-h); }
  .app .rd-shell--rec .rd-shell-col { padding-bottom: 0; }
  .app .rd-shell--rec:has(.rd-shell-act:not(:empty)) .rd-shell-col { padding-bottom: 96px; }

  /* Верхняя строка сжата до двух кнопок и аватара: поиск и «+». Экраны р0.2
     несут свои заголовки с этими кнопками — тогда строку снимает
     `.rd-shell-top { display: none }`. */
  .app .rd-shell-top { height: 56px; flex-basis: 56px; padding: 0 16px; gap: 8px;
    justify-content: flex-end; }
  .app .rd-shell-search { width: 40px; height: 40px; padding: 0; border-radius: 12px;
    justify-content: center; margin-right: auto; flex: none; }
  .app .rd-shell-search__t, .app .rd-shell-search .kbd2, .app .rd-shell-create__t { display: none; }
  .app .rd-shell-create { width: 40px; height: 40px; padding: 0; border-radius: 12px;
    justify-content: center; background: var(--brand-black); color: var(--bg-surface); }
  .app .rd-shell-create:hover { background: var(--rail-active); }
  .app .rd-shell-top .mk { margin-left: 0; }
  .app .rd-shell-face { position: relative; left: auto; bottom: auto; z-index: 30; }
  [data-style="derived"] .rd-shell-face .ava { width: 36px; height: 36px; flex-basis: 36px;
    font-size: 12px; }
  [data-style="derived"] .rd-shell-face .face__menu { top: 100%; bottom: auto; right: 0;
    left: auto; margin-top: var(--s2); }

  /* Экран записи: сверху «‹ Назад», верхней строки нет. */
  .app .rd-shell--rec .rd-shell-top { display: none; }
  .app .rd-shell--rec .rd-shell-back { display: flex; align-items: center; height: 56px;
    padding: 0 12px; }
  .app .rd-shell-back__b { appearance: none; height: 40px; padding: 0 8px 0 0; border: 0;
    background: none; display: inline-flex; align-items: center; gap: 2px;
    font-family: inherit; font-size: 16px; font-weight: 400; color: var(--brand-blue-text); }
  .app .rd-shell-back__b svg { transform: scaleX(-1); }

  /* Нижняя панель: Мой день · Задачи · два пункта · Ещё. */
  .app .rd-shell-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: var(--tabbar-h); display: flex; padding: 8px 6px 0;
    padding-bottom: env(safe-area-inset-bottom); background: var(--tabbar-grad); }
  .app .rd-shell--rec .rd-shell-tab { display: none; }
  .app .rd-shell-b { appearance: none; flex: 1; min-width: 0; height: auto; padding: 0;
    border: 0; background: none; display: flex; flex-direction: column; align-items: center;
    gap: 4px; color: var(--rail-icon); font-family: inherit; font-size: 11px;
    font-weight: 400; text-decoration: none; cursor: pointer; }
  .app .rd-shell-b:hover { color: var(--bg-surface); text-decoration: none; }
  .app .rd-shell-b.rd-shell--on { color: var(--bg-surface); font-weight: 600; }
  .app .rd-shell-b svg { width: 24px; height: 24px; }
  .app .rd-shell-b__l { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .app .rd-shell-b .rd-shell-dot { top: -2px; right: -5px; width: 8px; height: 8px; }

  /* Закреплённая панель действия записи: одна `.pri` на всю ширину. Пустой
     слот не рисуется. */
  .app .rd-shell--rec .rd-shell-act { display: flex; position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 30; gap: 8px; padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--bg-surface);
    box-shadow: 0 -1px 0 var(--line), var(--shadow-sheet); }
  .app .rd-shell--rec .rd-shell-act:empty { display: none; }
  .app .rd-shell--rec .rd-shell-act > * { min-height: 48px; }

  /* Шторка «Ещё»: остаток разделов и сетка приложений 2×4. */
  .app .rd-shell-veil { inset: 0; }
  .app .rd-shell-win { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    max-height: 88vh; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet);
    animation: none; }
  .app .rd-shell-win__h { flex-wrap: wrap; padding: 20px 16px 4px; gap: 12px; }
  .app .rd-shell-win__t { flex: 1; font-size: 20px; }
  .app .rd-shell-win__t--d, .app .rd-shell-win__esc { display: none; }
  .app .rd-shell-win__t--m { display: inline; }
  .app .rd-shell-win__x { display: inline-flex; align-items: center; justify-content: center;
    appearance: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px;
    background: var(--bg-page); color: var(--text-primary); cursor: pointer; }
  .app .rd-shell-win__find { flex: 1 0 100%; order: 3; height: 48px; box-shadow: none;
    border-radius: 14px; }
  .app .rd-shell-win__find input { font-size: 16px; }
  .app .rd-shell-win__g { padding: 16px 16px 8px; font-size: 13px; letter-spacing: 0;
    text-transform: none; color: var(--text-secondary); }
  .app .rd-shell-win__more { display: block; }
  .app .rd-shell-win__rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 0 16px; }
  .app .rd-shell-rest { appearance: none; height: 56px; padding: 0 8px; border: 0;
    border-radius: 12px; background: var(--bg-page); color: var(--text-primary);
    font-family: inherit; font-size: 13px; font-weight: 400; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; }
  .app .rd-shell-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 0 16px 16px; }
  .app .rd-shell-tile { padding: 12px; gap: 8px; border-radius: 14px; }
  .app .rd-shell-tile__ico { width: 32px; height: 32px; border-radius: 10px; }
  .app .rd-shell-tile__d { margin-top: -4px; font-size: 13px; }
  .app .rd-shell-tile__m, .app .rd-shell-win__all, .app .rd-shell-win__f { display: none; }
  .app .rd-shell-tile__now { top: 12px; right: 12px; }
}
@media (min-width: 768px) {
  .app .rd-shell-rest { display: none; }
}

/* Форма окном поверх экрана (30.09): экран формы приносит свою раму `.app`
   с фоном страницы и высотой во весь экран — в окне это серая простыня под
   полями. Окну формы хватает ширины поля, 960 px окна просмотра ей много. */
.rd-pop .app, .rd-sheet .app { min-height: 0; background: transparent; display: block; }
.rd-pop:has(.rd-formwin) { width: 640px; }
.rd-formwin > .hint { margin: 0 0 12px; }