/* ═══════════ КАРКАС КОМПЬЮТЕРНОЙ ВЕРСИИ ═══════════
 * Утвержден владельцем 25.09.2026 (макеты 06_Загрузки/revuer-desktop-start-2026-09-25,
 * главный – FinalDay). Этап А: левое меню на всех шести экранах автора и
 * стартовая целиком. Остальные экраны раскладываются поверх этого каркаса
 * следующими этапами.
 *
 * КАК ВКЛЮЧАЕТСЯ. Класс `shell-wide` на <html> ставит shared/okno.js синхронно
 * в <head>, по ширине окна (порог там же, 1100 px). Все правила ниже живут под
 * этим классом: в узком окне, на телефоне и в мини-аппе на компьютере файл не
 * делает ничего – телефонная верстка остается ровно такой, как была.
 *
 * КОНТРАКТ ДЛЯ ЭКРАНА (подробно – шапка shared/desktop.js):
 *   <link rel="stylesheet" href="/shared/desktop.css">       в <head>, после okno.js
 *   <script type="module" src="/shared/desktop.js"></script> там же
 *   Экран по умолчанию – телефонная колонка 760, поставленная по центру места
 *   справа от меню. Экран со своей раскладкой ставит <body class="shell-full">
 *   и раскладывает себя под `html.shell-wide` в своих стилях.
 *   --shell-menu – ширина меню; полноэкранным слоям модуля, которые должны
 *   оставить меню видимым, – left: var(--shell-menu).
 *
 * «ОТБОР» НЕ ПОДКЛЮЧАЕТ theme.css, поэтому у каждого токена здесь запасное
 * значение из светлой палитры (theme.css, html[data-theme="light"]): без него
 * несуществующий токен – это прозрачность, а не «цвет по умолчанию» (урок
 * 18.09.2026 со страницей оплаты). Кегли и радиусы – ступени шкалы
 * (tests/shkala.test.mjs): 11, 13, 15, 17, 20, 26 и 6, 12, 16, 20, 24.
 *
 * ПОЛОС ПО КРАЮ НЕТ (правило оформления владельца): меню отделено от рабочего
 * поля волосяной линией в 1 px и перепадом тона – так в утвержденном макете.
 */

:root{
  --shell-menu:312px;
  /* ЕДИНЫЕ МЕРКИ РАБОЧЕГО ПОЛЯ (этап В, 25.09.2026 – проверка дизайнером).
     Пять экранов собирали пять исполнителей, и одно и то же вышло пятью числами:
     колонка списка 320, 340, 360, 374 и 400, панель правки 400 и 480, окно 440
     и 480. Теперь число одно и живет здесь:
     --shell-list   колонка списка слева (Отбор, Документы, Клиенты, Портфолио,
                    Мой аккаунт) – 374 на 1440, 340 на 1280;
     --shell-panel  панель правки справа (редактор документа, раздел портфолио,
                    форма клиента) – 432 на 1440, 384 на 1280: странице клиента
                    слева остается место и на ноутбуке;
     --shell-dialog окно по центру поверх экрана;
     --shell-gap    воздух между колонками.
     Колонка списка растет с окном до 440 (аудит путей, 25.09.2026, снимок
     владельца на ~2000 px): на 380 в строках резались имя клиента и «выбрано
     N из M», а справа стояло пустое поле. 1280 – 340, 1440 – 374, 1700+ – 440. */
  --shell-list:clamp(340px, 26vw, 440px);
  --shell-panel:clamp(360px, 30vw, 440px);
  --shell-dialog:480px;
  --shell-gap:24px;
  /* Настройки модуля – панель с разделами справа (shared/settings-panel.js,
     «как Системные настройки Mac», владелец 26.09.2026): 660 на 1440, 600 на
     1280 и уже. Левая колонка разделов – 180, пока пунктов до шести; от семи
     (поиск и подписи групп) – 212. */
  --shell-settings:clamp(600px, 46vw, 660px);
  --shell-settings-nav:180px;
  --shell-settings-nav-many:212px;
  /* Узкая колонка сведений справа от открытого объекта – только в просторном
     окне от 1600 (класс shell-roomy, shared/okno.js): «Проект» в «Отборе»
     (вариант А, владелец 27.09.2026). */
  --shell-aside:240px;
  --shell-card:var(--surface-card, #FFFFFF);
  --shell-page:var(--surface-page, #EEF2F7);
  --shell-sunken:var(--surface-sunken, #F0F2F5);
  --shell-hover:var(--surface-hover, #E7EBF1);
  --shell-line:var(--border, #E3E6EB);
  --shell-line-strong:var(--border-strong, #D8DDE5);
  --shell-text:var(--text-primary, #22262E);
  --shell-text-2:var(--text-secondary, #5F656D);
  --shell-text-3:var(--text-muted, #696E76);
  --shell-accent:var(--accent, #4067F8);
  --shell-accent-text:var(--accent-text, #1E3AA8);
  --shell-lift:var(--shadow-lift, 0 8px 20px rgba(16,17,20,.14), 0 18px 44px rgba(16,17,20,.10));
}

/* Меню появляется только на широком окне. */
.shell{display:none}

/* Каркас выключен (закрытый запуск, desktop.js: выключитьКаркас): ни меню, ни
   подложки колонки; экран встает по центру окна телефонной колонкой. */
html.shell-wide.shell-off .shell, html.shell-wide.shell-off body::before{display:none}
html.shell-wide.shell-off body, html.shell-wide.shell-off body.shell-full{margin:0 auto;
  max-width:640px; padding:max(24px, var(--page-top, 24px)) 16px 28px}

/* ── Место под меню с первого кадра (правило Б11) ──
   Меню собирает скрипт после разбора страницы, а класс стоит с первого кадра.
   Подложка колонки рисуется псевдоэлементом тела сразу: рабочее поле с первого
   кадра стоит правее меню и не прыгает вбок, когда меню встанет поверх. */
html.shell-wide body::before{content:''; position:fixed; left:0; top:0; bottom:0;
  width:var(--shell-menu); box-sizing:border-box; background:var(--shell-card);
  border-right:1px solid var(--shell-line); z-index:4; pointer-events:none}

/* ── Рабочее поле по умолчанию: телефонная колонка по центру места справа ──
   Свои отступы и предел ширины экрана не трогаем – только сдвигаем колонку.
   Специфичность (0,1,2) сильнее `body{margin:0 auto}` экранов без !important. */
/* Край колонки – переменными: панели модуля, прибитые к низу окна (left/right
   от края окна), встают по колонке, а не под меню:
   left: calc(var(--shell-col-left) + 16px); right: calc(var(--shell-col-right) + 16px). */
html.shell-wide{--shell-col-left:calc(var(--shell-menu) + max(24px, (100vw - var(--shell-menu) - 760px) / 2));
  --shell-col-right:calc(100vw - var(--shell-col-left) - 760px)}
html.shell-wide body{margin-left:var(--shell-col-left); margin-right:auto}
/* ── Рабочая ширина экрана со своей раскладкой (аудит путей, 25.09.2026) ──
   Было: воздух 36 с обеих сторон, а предел ширины каждый экран ставил сам
   (1400 у стартовой, Клиентов и Портфолио, без предела у Отбора и Документов).
   На мониторе 2000+ одни экраны оставляли справа пустую полосу во всю высоту,
   у других кнопки шапки уезжали к краю окна, а содержимое кончалось раньше.
   Теперь предел один – --shell-max, – и лишнее место делится поровну слева и
   справа: рабочая часть встает по центру свободного места. До окна
   312 + 36 + 1640 + 36 = 2024 поле просто заполняет ширину, как раньше.
   --shell-side – воздух от меню и от правого края окна: экраны, у которых
   части прибиты к окну (position:fixed), считают свои края от него, а не от 36. */
html.shell-wide{--shell-max:1640px;
  --shell-side:max(36px, (100vw - var(--shell-menu) - var(--shell-max)) / 2)}
/* Экран со своей раскладкой (стартовая и дальше модули по этапам). */
html.shell-wide body.shell-full{max-width:none; margin:0 0 0 var(--shell-menu);
  padding:max(24px, var(--page-top, 24px)) var(--shell-side) 28px; box-sizing:border-box;
  min-height:100vh}

/* ═══ ЗАСЛОНКА ДОКУМЕНТОВ НА ШИРОКОМ ОКНЕ (аудит путей, 25.09.2026) ═══
   Экран «Прежде чем начать» / «Документы обновились» (shared/consent.js)
   собран под телефон: на мониторе галочки и кнопка «Принять и продолжить»
   растягивались во всю ширину окна (кнопка 1960 px), текст прижимался влево.
   Здесь только раскладка: карточка 600 по центру места справа от меню, воздух
   сверху, кнопка своего размера. Тексты, галочки и их умолчания не трогаем –
   они юридически значимы (сторож tests/desktop-start-paths.test.mjs держит,
   что галочка новостей не отмечена заранее). Меню остается видно слева.
   Строк в сетке восемь – по числу частей разметки consent.js: подложка
   карточки (::before) тянется через все восемь. */
html.shell-wide .gate{left:var(--shell-menu); padding:48px var(--shell-side)}
html.shell-wide .gate.show{display:grid; grid-template-columns:min(600px, 100%);
  grid-template-rows:repeat(8, auto); justify-content:center; align-content:safe center}
html.shell-wide .gate::before{content:''; grid-column:1; grid-row:1 / -1; margin:-36px -40px;
  background:var(--shell-card); border-radius:var(--radius-lg, 20px); box-shadow:var(--shell-lift)}
html.shell-wide .gate > *{grid-column:1; position:relative; min-width:0}
/* Ряды – явно: подложка уже заняла ряды 1–8, и без номера части ушли бы под нее. */
html.shell-wide .gate > :nth-child(1){grid-row:1}
html.shell-wide .gate > :nth-child(2){grid-row:2}
html.shell-wide .gate > :nth-child(3){grid-row:3}
html.shell-wide .gate > :nth-child(4){grid-row:4}
html.shell-wide .gate > :nth-child(5){grid-row:5}
html.shell-wide .gate > :nth-child(6){grid-row:6}
html.shell-wide .gate > :nth-child(7){grid-row:7}
html.shell-wide .gate > :nth-child(8){grid-row:8}
html.shell-wide .gate .gbtn{justify-self:start; width:auto; min-width:240px; padding:12px 28px}

/* ═══ МЕНЮ ═══
   Слой ниже модальных окон модулей (шторки, поиск, согласие – 70 и выше) и
   ниже полноэкранных слоев модулей (15 и выше): открытый слой модуля
   закрывает меню целиком, как окно, а не наезжает на него краем. */
html.shell-wide .shell{display:flex; flex-direction:column; gap:4px;
  position:fixed; left:0; top:0; bottom:0; width:var(--shell-menu); z-index:5;
  box-sizing:border-box; padding:0 16px 20px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--shell-card); border-right:1px solid var(--shell-line);
  color:var(--shell-text); font-family:var(--font-text, inherit); line-height:1.35;
  scrollbar-width:none}
.shell::-webkit-scrollbar{display:none}
.shell a{color:inherit; text-decoration:none}

/* Строка знака наверху меню (владелец, 25.09.2026, образец – кабинет ЮKassa):
   знак 28 и имя приложения 20 жирным слева, справа «свернуть». Высота 64 –
   под ней обложка край в край, как была. Знак в меню один: мелкий внизу снят. */
.shell-top{display:flex; align-items:center; gap:8px; min-height:64px; flex:0 0 auto;
  margin:0 -4px 0 0}
.shell-logo{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  padding:0 4px; font-family:var(--font-head, inherit); font-size:var(--fs-title, 20px);
  line-height:var(--lh-title, 24px); font-weight:700; letter-spacing:-.2px; color:var(--shell-text)}
.shell-logo img{width:28px; height:28px; flex:0 0 28px; display:block}
.shell-logo span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* «Свернуть» – тихая квадратная кнопка: действие редкое, залитым быть не должно. */
.shell-fold{flex:0 0 36px; width:36px; height:36px; display:inline-flex; align-items:center;
  justify-content:center; padding:0; border:0; border-radius:var(--radius-sm, 12px);
  background:transparent; color:var(--shell-text-2); cursor:pointer}
.shell-fold:hover{background:var(--shell-sunken); color:var(--shell-text)}
.shell-fold:focus-visible{outline:none; box-shadow:var(--shell-cursor, inset 0 0 0 1.5px var(--shell-accent))}
.shell-fold svg{display:block}
.shell-fold svg + svg{display:none}

/* Обложка край в край, 16:9, фото целиком по ширине (владелец, 25.09.2026).
   Рамка держит пропорцию сама – картинка не задает высоту (LOADING.md). */
.shell-cover{position:relative; flex:0 0 auto; width:var(--shell-menu); margin:0 -16px;
  aspect-ratio:16 / 9; background:var(--shell-sunken); overflow:hidden}
.shell-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; opacity:0; transition:opacity var(--dur-3, .35s) var(--ease-out, ease)}
.shell-cover img.on{opacity:1}
/* Пусто: серая рамка 16:9 с приглашением (макет FinalNew). Кнопка во всю рамку. */
.shell-cover-add{position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; width:100%; border:0;
  background:transparent; color:var(--shell-text-2); font:inherit; font-size:var(--fs-cap, 13px);
  font-weight:600; cursor:pointer; text-align:center; padding:0 24px}
.shell-cover-add small{font-size:var(--fs-cap, 13px); font-weight:500; color:var(--shell-text-3)}
.shell-cover.blank .shell-cover-add{display:flex}
/* Проектов еще нет – рамка молчит: тихий фон без призыва (аудит дублей ПК, К18). */
.shell-cover.blank.quiet .shell-cover-add{display:none}
.shell-cover.blank{box-shadow:inset 0 -1px 0 var(--shell-line)}
.shell-cover-add:hover{background:var(--shell-hover)}

/* Имя, метки тарифа и группы, карандаш обложки. */
.shell-who{display:flex; align-items:center; gap:12px; padding:16px 12px 16px; min-height:52px;
  box-sizing:content-box}
.shell-who-t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px}
.shell-name{font-size:var(--fs-title, 20px); line-height:var(--lh-title, 24px); font-weight:700;
  letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shell-tags{display:flex; gap:4px; min-height:22px}
/* Метка – та же нейтральная, что .tag в theme.css (сторож neutral-tags):
   здесь копия, потому что «Отбор» theme.css не подключает. */
.shell-tag{display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-pill, 999px);
  background:var(--tag-bg, var(--shell-sunken)); color:var(--tag-text, var(--shell-text));
  font-size:var(--fs-cap, 13px); font-weight:600; line-height:var(--lh-cap, 18px); white-space:nowrap;
  box-shadow:inset 0 0 0 .5px var(--tag-ring, var(--shell-line))}
.shell-tag[hidden]{display:none}
/* Карандаш – значок правки (Б16): квадратная кнопка-сквиркл (.sq.ico.sq-sunk),
   рисуется 36, нажимается 44. Плитка 88 несет форму 60: вынос -4 px дает
   видимые (44 + 8) × 60 / 88 ≈ 36 – тот же расчет, что у кнопок шапки витрины. */
.shell-pen{flex:0 0 44px; width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--shell-text); cursor:pointer; padding:0}
.shell-pen.sq.ico::before{inset:-4px}
.shell-pen[hidden]{display:none}

/* Пункты: Главная и четыре сервиса. Цвет – только в знаке сервиса. */
.shell-item{display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px;
  border-radius:var(--radius-sm, 12px); font-size:var(--fs-sub, 15px); font-weight:600;
  color:var(--shell-text); flex:0 0 auto}
.shell-item:hover{background:var(--shell-sunken)}
.shell-item.on{background:var(--shell-hover)}
.shell-item > svg, .shell-item > img{width:22px; height:22px; flex:0 0 22px; display:block}
.shell-grow{flex:1 1 auto; min-height:16px}
/* Счетчик дел у «Главной» (владелец, 2026-09-28): сколько строк в «Ждут вас»
   стартовой. Вид – значок с числом витрины (.badge в theme.css: «вас ждут»,
   заливка акцентом, белое число); здесь копия вида, потому что «Отбор»
   theme.css не подключает, а меню стоит и там. В развернутом меню – у правого
   края строки, в свернутом – справа от значка, значок не закрывает. */
.shell-badge{margin-left:auto; min-width:20px; height:20px; box-sizing:border-box; padding:0 4px;
  border-radius:var(--radius-pill, 999px); background:var(--shell-accent); color:#fff;
  font-size:var(--fs-cap, 13px); font-weight:750; line-height:1; display:inline-flex; align-items:center;
  justify-content:center; font-style:normal; font-variant-numeric:tabular-nums; flex:0 0 auto}
.shell-badge[hidden]{display:none}

/* Хранилище: одна строка «X из Y ГБ» и полоса. Цифра – одна (КОД_ДИЗАЙНА).
   От 80 % под полосой встает дорога к тарифу – словом-ссылкой внутри той же
   подложки (ui.js, местоКончается). */
.shell-store{display:flex; flex-direction:column; flex:0 0 auto;
  border-radius:var(--radius-md, 16px); background:var(--shell-sunken); overflow:hidden}
.shell-store-go{display:flex; flex-direction:column; gap:8px; padding:16px 12px}
.shell-store-go:hover{background:var(--shell-hover)}
/* .shell a красит ссылки меню в цвет текста – у дороги к тарифу цвет акцента:
   это действие, а не пункт (Б12). */
.shell .shell-store-more{display:block; margin-top:-8px; padding:0 12px 16px; font-size:var(--fs-cap, 13px);
  line-height:var(--lh-cap, 18px); font-weight:600; color:var(--shell-accent-text)}
.shell-store-more:hover{text-decoration:underline}
.shell-store-more[hidden]{display:none}
.shell-store-t{display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-cap, 13px);
  color:var(--shell-text-2); min-height:18px}
.shell-bar{height:6px; border-radius:var(--radius-pill, 999px); background:var(--shell-line); overflow:hidden}
.shell-bar i{display:block; height:100%; width:0; border-radius:inherit; background:var(--shell-accent);
  transition:width var(--dur-3, .35s) var(--ease-out, ease)}

/* Строка аккаунта внизу меню (проверка дизайнером Apple, 28.09.2026): кружок
   с инициалами, имя и тариф строкой. Кнопка – открывает меню аккаунта
   (desktop.js); открытое меню держит строку тоном, как выбранный пункт. */
.shell-acc{width:100%; min-height:56px; margin-top:8px; border:0; background:transparent; font:inherit;
  font-size:var(--fs-sub, 15px); font-weight:600; color:var(--shell-text); text-align:left; cursor:pointer}
.shell-acc[aria-expanded="true"]{background:var(--shell-hover)}
.shell-acc:focus-visible{outline:none; box-shadow:var(--shell-cursor, inset 0 0 0 1.5px var(--shell-accent))}
.shell-acc-ico{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--shell-sunken);
  display:flex; align-items:center; justify-content:center; color:var(--shell-text);
  font-size:var(--fs-cap, 13px); font-weight:700; letter-spacing:.2px; font-variant-numeric:tabular-nums}
.shell-acc-t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.shell-acc-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Срок – до двух строк (проверка дизайнером Apple, 28.09.2026): в одну строку многоточие
   съедало год – «оплачено до 14 сентября …», а год в сроке и есть главное. */
.shell-acc-t small{font-size:var(--fs-cap, 13px); color:var(--shell-text-2); font-weight:500;
  min-height:18px; line-height:var(--lh-cap, 18px); overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere}

/* ═══ СВЕРНУТОЕ МЕНЮ ═══ (владелец, 25.09.2026; кнопка «‹» и ⌘\ – desktop.js)
   Полоса 72: знак, «развернуть», значки пунктов, внизу аккаунт. Обложка, имя
   и хранилище спрятаны. Рабочая часть берет место сама: все раскладки считают
   край от --shell-menu. Название пункта – подсказкой при наведении справа от
   значка; подпись остается для чтения с экрана (спрятана зрительно). */
html.shell-wide.shell-mini{--shell-menu:72px}
html.shell-wide.shell-mini .shell{padding:0 12px 16px; overflow:visible}
html.shell-mini .shell-top{flex-direction:column; gap:4px; margin:0; padding:16px 0 8px}
/* Свернутое меню: знак приложения прячется, наверху одна «›». Иначе два
   одинаковых знака стояли столбиком (у имени и у «Главной»), а нажимался
   только нижний (аудит дублей ПК, К17). */
html.shell-mini .shell-logo{display:none}
html.shell-mini .shell-fold svg{display:none}
html.shell-mini .shell-fold svg + svg{display:block}
html.shell-mini .shell-cover, html.shell-mini .shell-who, html.shell-mini .shell-store{display:none}
html.shell-mini .shell-item{justify-content:center; padding:0; position:relative}
html.shell-mini .shell-item > span:not(.shell-acc-ico){position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap}
html.shell-mini .shell-acc{margin-top:8px}
/* Свернутое меню: счетчик мельче и справа от значка – левый край на 2 px
   правее значка 22, значок открыт целиком (жалоба владельца на прототип,
   где число садилось на угол значка). */
html.shell-mini .shell-badge{position:absolute; left:calc(50% + 13px); top:50%; transform:translateY(-50%);
  min-width:20px; height:20px; padding:0 4px; font-size:var(--fs-cap, 13px); margin:0}
html.shell-mini .shell-item::after{content:attr(data-name); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%); padding:4px 12px; border-radius:var(--radius-sm, 12px); white-space:nowrap;
  background:var(--shell-text); color:var(--shell-card); font-size:var(--fs-cap, 13px); font-weight:600;
  line-height:var(--lh-cap, 18px); box-shadow:var(--shell-lift); opacity:0; pointer-events:none;
  transition:opacity var(--dur-1, .15s) ease; z-index:1}
html.shell-mini .shell-item:hover::after, html.shell-mini .shell-item:focus-visible::after{opacity:1}

/* Заглушки меню: форма и дыхание – как .sk в theme.css (общая фаза из
   skeleton.js через --sk-delay). Копия здесь по той же причине, что метка:
   «Отбор» theme.css не подключает, а меню стоит и там. */
.shell .sk{background:var(--skeleton, #E4E8EE); border-radius:6px;
  animation:sk-breath 1.2s ease-in-out infinite; animation-delay:var(--sk-delay, 0s)}
@keyframes sk-breath{0%,100%{opacity:.55} 50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){ .shell .sk{animation:none} }
.shell .sk-name{display:block; width:62%; height:14px; margin:4px 0}
.shell .sk-num{display:inline-block; width:84px; height:11px; vertical-align:middle}
.shell[aria-busy="true"] .shell-cover-add{visibility:hidden}

/* ═══ ШАПКА РАБОЧЕГО ПОЛЯ ═══
   Поиск по всему приложению с ⌘K, вторичные действия, одна залитая кнопка.
   Общий компонент: следующие экраны ставят свои действия в ту же полосу. */
/* Отбивка шапки от содержимого – одна на все экраны (была 18, 20, 22 и 24). */
.shell-head{display:flex; align-items:center; gap:12px; min-height:44px}
html.shell-wide .shell-head{margin-bottom:20px}
.shell-spacer{flex:1 1 auto}
/* Один поиск на экране (аудит путей, 25.09.2026, снимок владельца). У экрана
   со своим поиском по списку (Документы, Клиенты – узел с data-list-search)
   поле «Проекты, клиенты, документы» в шапке стояло прямо над полем списка:
   два одинаковых поля друг под другом. Поле шапки на таких экранах не
   показываем; поиск по всему приложению остается на ⌘K / Ctrl K, и чип с
   клавишей стоит в поле списка (ставит desktop.js), нажатием – тот же поиск.
   Контракт: поиск списка виден, когда у узла data-list-search стоит класс
   show. Короткий список поля не показывает – тогда в шапке остается свое. */
html.shell-wide body:has([data-list-search].show) .shell-head .shell-search{display:none}
html:not(.shell-wide) .shell-list-kbd{display:none}
html.shell-wide .shell-list-kbd{display:inline-flex; position:absolute; right:12px; top:50%;
  transform:translateY(-50%); cursor:pointer; border:0}
html.shell-wide .shell-list-kbd:hover{color:var(--shell-text)}
html.shell-wide [data-list-search] input[type="search"]{padding-right:64px}
/* Набрали текст – справа встает крестик очистки, чип уступает ему место. */
html.shell-wide [data-list-search]:has(input:not(:placeholder-shown)) .shell-list-kbd{display:none}
/* Поле поиска по приложению – настоящее поле (shared/search-window.js делает
   его из разметки <a class="shell-search">). Материал поля – утопленное,
   --sq-pole: его заполняют, а не нажимают как кнопку. */
/* Поле поиска одной ширины и на одном месте на всех экранах (было 398–520 –
   по тому, сколько кнопок справа); на ноутбуке ужимается, если кнопок много. */
.shell-search{flex:0 1 440px; min-width:240px; height:44px; box-sizing:border-box; display:flex;
  align-items:center; gap:12px; padding:0 16px; color:var(--shell-text-3); font:inherit;
  font-size:var(--fs-sub, 15px); cursor:text; text-align:left; text-decoration:none}
.shell-search span{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shell-search svg{flex:0 0 18px}
.shell-kbd, .acm .pm-kbd{display:inline-flex; align-items:center; font-size:var(--fs-cap, 13px); line-height:18px;
  font-weight:600; font-family:inherit; color:var(--shell-text-3); background:var(--shell-card);
  box-shadow:inset 0 0 0 1px var(--shell-line); border-radius:6px; padding:1px 6px; white-space:nowrap}
.shell-act{display:inline-flex; align-items:center; gap:8px; height:44px; box-sizing:border-box;
  padding:0 16px; font:inherit; font-size:var(--fs-sub, 15px); font-weight:600;
  color:var(--shell-text); text-decoration:none; cursor:pointer; white-space:nowrap}
.shell-act svg{flex:0 0 auto}
.shell-act.sq-accent{color:#fff; padding:0 20px; margin-left:4px}
/* Единые действия верхней панели во всех модулях (владелец, 02.10.2026). */
html.shell-wide .shell-head :is(.shell-act,.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;height:44px;min-height:44px;margin:0;
  font:600 15px/20px var(--font-text,'Onest',sans-serif)!important;
  padding:0 16px!important;white-space:nowrap;
}
html.shell-wide .shell-head :is(.shell-act.sq-accent,.btn:not(.secondary)){
  padding-inline:20px!important;color:#fff;
}
html.shell-wide .shell-head :is(.shell-act,.btn) svg{display:block;width:18px;height:18px;flex:0 0 18px}
.shell-ico{width:44px; height:44px; flex:0 0 44px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; color:var(--shell-text)}

/* ═══ ПАНЕЛЬ «В РАБОТЕ» ═══
   Карточка с подписью по содержимому, до трех строк и ссылкой внизу
   («Все проекты 9»). Общий компонент: такие же панели будут у экранов
   модулей. Высота панели задана сеткой, а не содержимым: строки приходят
   с сервера и не должны двигать экран (правило Б11). */
.wpanels{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:272px; gap:16px}
.wpanels-box{container-type:inline-size}
@container (min-width: 1000px){ .wpanels{grid-template-columns:repeat(4, minmax(0, 1fr))} }
.wpanel{display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--shell-card); border-radius:var(--radius-lg, 20px)}
.wpanel-h{margin:0; padding:16px 16px 8px; font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px);
  font-weight:700; color:var(--shell-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wpanel-list{display:flex; flex-direction:column; min-height:0}
.wpanel-row{display:flex; align-items:center; gap:12px; padding:8px 16px; min-height:56px;
  box-sizing:border-box; color:inherit; text-decoration:none}
a.wpanel-row:hover{background:var(--shell-sunken)}
/* Линия между строками – от текста, как в карточке-списке (КОД_ДИЗАЙНА 9.5). */
.wpanel-row + .wpanel-row{background-image:linear-gradient(var(--shell-line), var(--shell-line));
  background-size:calc(100% - 16px) .5px; background-position:16px 0; background-repeat:no-repeat}
.wpanel-pic{width:36px; height:36px; flex:0 0 36px; border-radius:var(--radius-sm, 12px);
  object-fit:cover; background:var(--shell-sunken); display:block}
.wpanel-av{width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--shell-sunken);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-cap, 13px);
  font-weight:700; color:var(--shell-text-2)}
.wpanel-b{flex:1 1 auto; min-width:0}
.wpanel-t{display:block; font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wpanel-s{display:block; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px);
  color:var(--shell-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wpanel-grow{flex:1 1 auto}
.wpanel-more{display:block; padding:12px 16px; font-size:var(--fs-cap, 13px); font-weight:600;
  color:var(--shell-accent-text); text-decoration:none; box-shadow:inset 0 .5px 0 var(--shell-line)}
.wpanel-more:hover{background:var(--shell-sunken)}
.wpanel-more[hidden]{display:none}
/* Пустая панель: у новичка – что здесь появится и первый шаг; у остальных –
   одна строка или сразу действие (КОД_ДИЗАЙНА: «пустой раздел не повторяет
   пустоту словами»). */
.wpanel-empty{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:8px 16px 16px}
.wpanel-empty p{margin:0; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}
.wpanel-btn{display:inline-flex; align-items:center; gap:8px; height:36px; box-sizing:border-box;
  padding:0 16px; font:inherit; font-size:var(--fs-cap, 13px); font-weight:600; color:var(--shell-text);
  text-decoration:none; cursor:pointer; white-space:nowrap}
/* Витрина работ на панели «Ваша страница»: пять квадратов в ряд. */
.wpanel-works{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; padding:2px 16px 0}
.wpanel-works img, .wpanel-works span{width:100%; aspect-ratio:1; object-fit:cover; display:flex;
  align-items:center; justify-content:center; border-radius:6px; background:var(--shell-sunken);
  font-size:var(--fs-cap, 13px); font-weight:700; color:var(--shell-text-2)}
.wpanel-note{margin:0; padding:8px 16px 0; font-size:var(--fs-cap, 13px); color:var(--shell-text-2)}
.wpanel .sk{background:var(--skeleton, #E4E8EE); border-radius:6px;
  animation:sk-breath 1.2s ease-in-out infinite; animation-delay:var(--sk-delay, 0s)}
.wpanel[aria-busy="true"]{pointer-events:none}


/* ═══ КЛАВИША У СВОЕЙ КНОПКИ ═══ (владелец, 2026-09-27, вариант А;
   поведение – shared/shortcuts.js). Строки клавиш внизу экранов больше нет:
   наведение на кнопку с aria-keyshortcuts (0,45 с) или фокус с клавиатуры –
   темный пузырь «действие + клавиша», клавиша фишкой справа. Пузырь один на
   страницу, место ставит скрипт: под кнопкой по ее правому краю, у пунктов
   меню – справа от пункта. Тон – как подсказка названием в свернутом меню.
   Слой 99: выше окон и заслонки, пузырь ничего не перекрывает надолго. */
.shell-ktip{position:fixed; left:0; top:0; z-index:99; display:flex; align-items:center; gap:8px;
  padding:4px 4px 4px 12px; border-radius:10px; background:var(--shell-text); color:var(--shell-card);
  font-family:var(--font-text, inherit); font-size:var(--fs-cap, 13px); line-height:20px; font-weight:500;
  white-space:nowrap; pointer-events:none; box-shadow:var(--shell-lift); opacity:0; transform:translateY(-4px);
  transition:opacity var(--dur-1, .15s) var(--ease-out, ease), transform var(--dur-1, .15s) var(--ease-out, ease)}
.shell-ktip.side{transform:translateX(-4px)}
.shell-ktip.on{opacity:1; transform:none}
.shell-ktip[hidden]{display:none}
html:not(.shell-wide) .shell-ktip{display:none}
.shell-ktip .shell-kbd{min-width:22px; min-height:20px; box-sizing:border-box; justify-content:center; padding:0 6px;
  font-size:var(--fs-cap, 13px); line-height:20px; color:inherit; box-shadow:none;
  background:color-mix(in srgb, var(--shell-card) 18%, transparent)}
@media (prefers-reduced-motion:reduce){ .shell-ktip, .shell-ktip.side{transform:none; transition-property:opacity} }

/* ═══ МЕНЮ АККАУНТА ═══ (desktop.js, открытьМенюАккаунта; прототип acm-*,
   холсты 127–129). Общее меню у кнопки (.pmenu, menu.js) шириной 288 со своей
   шапкой: кто я и тариф, полоска места, тревога строкой. «Сочетания клавиш»
   живут здесь, с фишкой «?» той же клавиши (до 28.09.2026 – тихой строкой в
   меню каркаса). Пункты 15, как строки меню каркаса; фокус с клавиатуры –
   кольцом акцента. */
.pmenu.acm{width:288px; max-width:calc(100vw - 24px); box-sizing:border-box; padding:8px;
  border-radius:var(--radius-lg, 20px); color:var(--shell-text); font-family:var(--font-text, inherit)}
.acm .pm-item{min-height:44px; padding:10px; border-radius:var(--radius-sm, 12px);
  font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); color:var(--shell-text)}
.acm .pm-item:hover{background:var(--shell-sunken)}
.acm .pm-item:focus-visible{background:var(--shell-sunken); box-shadow:var(--shell-cursor, inset 0 0 0 1.5px var(--shell-accent))}
.acm .pm-grp + .pm-grp{margin-top:4px; padding-top:4px}
.acm .pm-grp + .pm-grp::before{left:10px; right:10px}
.acm-top{padding:8px 10px 12px}
.acm-head{display:flex; align-items:center; gap:12px; padding-bottom:10px}
.acm-ava{width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:var(--shell-page);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-sub, 15px); font-weight:700;
  color:var(--shell-text); letter-spacing:.2px}
.acm-id{min-width:0; display:flex; flex-direction:column}
.acm-id b{font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acm-id small{font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}
.acm-id small[hidden], .acm-store[hidden]{display:none}
.acm-store{display:flex; flex-direction:column; gap:6px}
.acm-bar{display:block; height:6px; border-radius:var(--radius-pill, 999px); background:var(--shell-line); overflow:hidden}
.acm-bar i{display:block; height:100%; border-radius:inherit; background:var(--shell-accent)}
.acm-store small{font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2);
  font-variant-numeric:tabular-nums}
/* Линия под шапкой – как между группами; тревога сразу под местом, без линии. */
.acm-top + .pm-grp{position:relative; margin-top:4px; padding-top:4px}
.acm-top + .pm-grp::before{content:''; position:absolute; top:0; left:10px; right:10px; height:.5px;
  background:var(--shell-line)}
.acm-top + .pm-grp:has(.acm-alert){margin-top:0; padding-top:0}
.acm-top + .pm-grp:has(.acm-alert)::before{display:none}
/* Тревога: подложкой, что случилось – слева, действие – словом акцентом справа (Б12). */
.acm .acm-alert{background:var(--shell-sunken); font-weight:600}
.acm .acm-alert:hover, .acm .acm-alert:focus-visible{background:var(--shell-hover)}
.acm .pm-act{flex:0 0 auto; font-style:normal; font-weight:600; color:var(--shell-accent-text); white-space:nowrap}
.acm .pm-kbd{min-width:22px; box-sizing:border-box; justify-content:center; flex:0 0 auto}

/* ═══ ОКНО «СОЧЕТАНИЯ КЛАВИШ» ═══ (shared/shortcuts.js)
   Общее окно поверх экрана (.sheetwrap > .sheet, §13 п. 8): по центру
   рабочей части, ширина --shell-dialog, крестик в углу. Группы – карточкой
   на утопленном, клавиши – фишками справа. Растет из нажатого: из строки
   меню – от нее (точку роста ставит скрипт), по «?» – из центра; уходит
   короче, чем пришло. Слой 93 – выше окон модулей, ниже заслонки документов. */
html.shell-wide .sheetwrap.shortcuts-wrap{z-index:93}
html.shell-wide .shortcuts-wrap .sheet.shortcuts{width:100%; padding:20px 24px 24px; outline:none;
  display:flex; flex-direction:column; gap:8px; color:var(--shell-text)}
.shortcuts-h{margin:0; padding-right:40px; font-family:var(--font-head, inherit); font-size:var(--fs-title, 20px); line-height:26px; font-weight:700}
/* Поля под крестик нужны только заголовку: правило окна с крестиком
   (components.css, первый div и p) здесь снимаем. */
html.shell-wide .sheetwrap[data-x] .sheet.shortcuts > :is(.shortcuts-note, .shortcuts-list){padding-right:0}
.shortcuts-note{margin:-2px 0 4px; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}
.shortcuts-g{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.shortcuts-gh{margin:0; font-size:var(--fs-sub, 15px); line-height:20px; font-weight:600}
.shortcuts-card{background:var(--shell-sunken); border-radius:var(--radius-md, 16px); padding:2px 12px}
.shortcuts-row{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px;
  font-size:var(--fs-sub, 15px); line-height:20px}
.shortcuts-row + .shortcuts-row{box-shadow:inset 0 .5px 0 var(--shell-line)}
.shortcuts-keys{display:flex; gap:4px; flex:0 0 auto}
.shortcuts .shell-kbd{min-width:24px; min-height:22px; box-sizing:border-box; justify-content:center; font-size:var(--fs-cap, 13px);
  line-height:20px; color:var(--shell-text)}
/* Стрелка вверх – тот же шеврон «вниз», перевернутый (знаки набора). Штрих
   знака рассчитан на 20 px; в фишке 12 px он тоньше пикселя – ведем его толще.
   Мерка поля Lucide 24 (28.09.2026): 2.8 = 1,4 px при 12 px; прежние 14 были на холсте 120. */
.shell-kbd svg{display:block}
.shell-kbd svg path{stroke-width:2.8}
.shell-kbd .shell-kbd-up{transform:scaleY(-1)}
html.shell-wide .shortcuts-wrap.show{animation:shortcuts-veil var(--dur-3, .35s) var(--ease-out, ease) both}
html.shell-wide .shortcuts-wrap.show .sheet{animation:shortcuts-in var(--dur-3, .35s) var(--ease-morph, cubic-bezier(.32,.72,0,1)) both}
html.shell-wide .shortcuts-wrap.show.from .sheet{animation:shortcuts-grow var(--dur-4, .5s) var(--ease-morph, cubic-bezier(.32,.72,0,1)) both}
html.shell-wide .shortcuts-wrap.out{animation:shortcuts-veil-out .3s var(--ease-out, ease) both}
html.shell-wide .shortcuts-wrap.out .sheet{animation:shortcuts-out .3s var(--ease-out, ease) both}
@keyframes shortcuts-veil{from{background-color:transparent}}
@keyframes shortcuts-veil-out{to{background-color:transparent}}
/* Слой плотнеет в первые 45 % хода: сквозь окно не просвечивает экран (§9.1). */
@keyframes shortcuts-in{0%{opacity:0; transform:scale(.96)} 45%{opacity:1} 100%{opacity:1; transform:none}}
@keyframes shortcuts-grow{0%{opacity:0; transform:scale(.4)} 45%{opacity:1} 100%{opacity:1; transform:none}}
@keyframes shortcuts-out{0%{opacity:1; transform:none} 55%{opacity:1} 100%{opacity:0; transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){
  html.shell-wide .shortcuts-wrap.show, html.shell-wide .shortcuts-wrap.show .sheet,
  html.shell-wide .shortcuts-wrap.out, html.shell-wide .shortcuts-wrap.out .sheet{animation-duration:.01ms}
}

/* ═══ СТРОКА СПИСКА: ОТКРЫТА И ПОД КЛАВИШАМИ ═══ (этап В)
   Открытая справа строка – тоном (--surface-hover), как пункт меню. Строка
   под клавишами ↑↓ – рамкой вокруг целиком. Наведение – тоном углубления.
   Экраны берут отсюда переменную курсора, чтобы рамка была одна. */
html.shell-wide{--shell-cursor:inset 0 0 0 1.5px var(--shell-accent)}

/* ═══ ОКНО ПОВЕРХ ЭКРАНА ═══ (этап В, КОД_ДИЗАЙНА §13.8)
   Телефонная шторка снизу (.sheetwrap > .sheet во всех модулях) на широком
   окне – окно по центру рабочего поля: меню не закрывает, ширина одна,
   затемнение легкое и одно, ручка шторки не нужна. Было: 440 или 480, фон
   .18 или .45, у «Портфолио» и «Моего аккаунта» оставалась ручка. */
html.shell-wide .sheetwrap{align-items:center; justify-content:center;
  padding:24px 24px 24px calc(var(--shell-menu) + 24px); background:rgba(16,17,20,.18)}
html.shell-wide .sheet{max-width:var(--shell-dialog); max-height:calc(100vh - 48px); overflow-y:auto;
  border-radius:var(--radius-lg, 20px); box-shadow:var(--shell-lift)}
html.shell-wide .sheet::before{display:none}

/* ═══ СЛОЙ БРОСКА ФАЙЛОВ ═══ (этап В; поведение – слойБроска() в desktop.js)
   Папка или файлы над окном: рамка пунктиром вокруг всего окна – подсказка,
   куда бросать (рамка вокруг целиком – не полоса по краю), по центру карточка
   «что будет». Один вид на стартовой, в «Отборе» и в «Портфолио». */
.shell-drop{position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center;
  background:rgba(238,242,247,.82)}
.shell-drop[hidden]{display:none}
.shell-drop *{pointer-events:none}
.shell-drop::before{content:''; position:absolute; inset:16px; border:2px dashed var(--shell-accent);
  border-radius:var(--radius-sheet, 24px); pointer-events:none}
.shell-drop-card{position:relative; width:520px; max-width:calc(100% - 64px); box-sizing:border-box; padding:36px 40px;
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
  background:var(--shell-card); border-radius:var(--radius-sheet, 24px); box-shadow:var(--shell-lift)}
.shell-drop-card img{display:block; margin-bottom:8px}
.shell-drop-h{margin:0; font-family:var(--font-head, inherit); font-size:var(--fs-title, 20px);
  line-height:var(--lh-title, 24px); font-weight:700; color:var(--shell-text); text-wrap:balance}
.shell-drop-what{margin:0; font-size:var(--fs-title, 20px); line-height:var(--lh-title, 24px); color:var(--shell-text)}
.shell-drop-what:empty{display:none}
.shell-drop-note{margin:0; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}

/* ═══ ОКНО ОБЛОЖКИ ═══ (аудит путей ПК, п. 23, 26.09.2026; поведение –
   shared/cover-window.js). Встает поверх ЛЮБОГО экрана, без ухода на главную:
   экран под ним не трогается, набранное на нем цело. Подложка – легкое
   затемнение всего окна браузера, окно – по центру рабочей части справа от
   меню (§13.8). Слой 92: выше меню строки (90–91) и слоя броска (85), ниже
   заслонки документов (95) – она важнее любого окна. */
.shell-win{position:fixed; inset:0; z-index:92; background:rgba(16,17,20,.18);
  color:var(--shell-text); font-family:var(--font-text, inherit); line-height:1.35}
.shell-win[hidden]{display:none}
html:not(.shell-wide) .shell-win{display:none}
.shell-win-box{position:absolute; box-sizing:border-box; background:var(--shell-card);
  border-radius:var(--radius-lg, 20px); box-shadow:var(--shell-lift);
  left:calc(var(--shell-menu) + max(24px, (100vw - var(--shell-menu) - var(--w)) / 2)); width:min(var(--w), calc(100vw - var(--shell-menu) - 48px))}

/* ═══ ПОЛЕ ПОИСКА И ВЫДАЧА ═══ (владелец, 26.09.2026; поведение –
   shared/search-window.js). Поле шапки – настоящее поле ввода; выдача
   раскрывается списком прямо под ним, по его левому краю и ширине (место
   ставит скрипт), без затемнения экрана и без второго поля. Слой 92 – как у
   окон каркаса: выше меню строки, ниже заслонки документов. */
.shell-search .shell-search-q{flex:1 1 auto; min-width:0; height:100%; border:0; outline:none; padding:0;
  background:transparent; font:inherit; color:var(--shell-text); -webkit-appearance:none; appearance:none}
.shell-search .shell-search-q::placeholder{color:var(--shell-text-3); opacity:1}
.shell-search .shell-search-q::-webkit-search-cancel-button{display:none}
/* Поле в работе – материал карточки поверх утопленного: тот же вид, что у
   выдачи под ним. Набран текст – клавиша ⌘K уступает место. */
.shell-search.sq:focus-within{border-image-source:var(--sq-card) !important}
.shell-search:has(.shell-search-q:not(:placeholder-shown)) .shell-kbd{display:none}
/* Экран со своим поиском по списку прячет поле шапки (выше); ⌘K и чип
   возвращают его на время поиска – поле одно, и оно в шапке. */
html.shell-wide.shell-search-on body:has([data-list-search].show) .shell-head .shell-search{display:flex}
.shell-find{position:fixed; z-index:92; box-sizing:border-box; max-height:calc(100vh - 110px); overflow-y:auto;
  overscroll-behavior:contain; padding:8px; background:var(--shell-card); border-radius:var(--radius-lg, 20px);
  box-shadow:var(--shell-lift); color:var(--shell-text); font-family:var(--font-text, inherit); line-height:1.35}
.shell-find[hidden]{display:none}
html:not(.shell-wide) .shell-find{display:none}
/* Где ищем – только когда ничего не нашлось, под словами «Ничего не нашлось»
   (аудит дублей ПК, К11): выдача строку не повторяет. */
.shell-find-about{display:none; margin:8px 8px 4px; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-3)}
.shell-find-res[data-none] + .shell-find-about{display:block; margin:4px 12px 12px 56px; text-align:left;
  color:var(--shell-text-3)}
.shell-find-res:empty{display:none}
.shell-find .sgrp{font-size:var(--fs-cap, 13px); font-weight:600; color:var(--shell-text-3); margin:16px 8px 8px}
.shell-find .sgrp:first-child{margin-top:4px}
.shell-find .sitem{display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:var(--radius-sm, 12px);
  color:inherit; text-decoration:none; outline:none}
.shell-find .sitem:hover{background:var(--shell-sunken)}
.shell-find .sitem:focus-visible, .shell-find .sitem:focus{background:var(--shell-hover); box-shadow:var(--shell-cursor)}
.shell-find .sic{flex:0 0 34px; width:34px; height:34px; border-radius:var(--radius-sm, 12px); display:flex;
  align-items:center; justify-content:center; background:var(--shell-sunken); color:var(--shell-text-2)}
.shell-find .sb{flex:1 1 auto; min-width:0; display:block}
.shell-find .st{display:block; font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shell-find .ss{display:block; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shell-find .schev{color:var(--shell-text-3); display:flex}
.shell-find .schev svg{width:14px; height:14px}
.shell-find .shint{font-size:var(--fs-cap, 13px); color:var(--shell-text-3); text-align:center; padding:20px 16px}
/* Пусто: та же сетка, что у строки выдачи – знак 34, отступ 12, текст колонкой;
   текст переносится, а не режется троеточием (владелец, 26.09.2026). */
.shell-find .snone{display:flex; align-items:flex-start; gap:12px; padding:12px 12px 0}
.shell-find .snone .st, .shell-find .snone .ss{white-space:normal; overflow:visible}
.shell-find .snone .st{overflow-wrap:anywhere}
.shell-find .snone .ss{margin-top:2px}

/* Окно обложки: 560 по центру по высоте, шапка с крестиком, миниатюры 16:9
   по три, подсказка, «Готово» своего размера справа внизу. */
.shell-win-box{--w:560px; top:50%; transform:translateY(-50%); max-height:calc(100vh - 48px); overflow-y:auto; padding:20px}
.shell-win-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 16px}
.shell-win-h h2{margin:0; font-family:var(--font-head, inherit); font-size:var(--fs-title, 20px);
  line-height:var(--lh-title, 24px); font-weight:700}
.shell-win-x{flex:0 0 36px; width:36px; height:36px; margin-right:-8px; display:inline-flex; align-items:center;
  justify-content:center; padding:0; border:0; border-radius:var(--radius-sm, 12px); background:transparent;
  color:var(--shell-text-2); cursor:pointer}
.shell-win-x:hover{background:var(--shell-sunken); color:var(--shell-text)}
.cw-seg{display:flex; padding:3px; border-radius:var(--radius-md, 16px); background:var(--shell-sunken); margin-bottom:16px}
.cw-seg[hidden]{display:none}
.cw-seg button{flex:1 1 0; min-width:0; border:0; border-radius:var(--radius-sm, 12px); padding:8px;
  font:inherit; font-size:var(--fs-cap, 13px); font-weight:600; color:var(--shell-text-2); background:transparent; cursor:pointer}
.cw-seg button.on, .cw-seg > .seg-thumb{background:var(--shell-card); color:var(--shell-text); box-shadow:0 0 0 .5px var(--shell-line-strong), 0 1px 2px rgba(16,17,20,.08)}
.cw-thumbs{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; min-height:93px}
.cw-th{position:relative; aspect-ratio:16 / 9; border-radius:var(--radius-sm, 12px); overflow:hidden;
  background:var(--shell-sunken); cursor:pointer; padding:0; border:0; font:inherit}
.cw-th img{width:100%; height:100%; object-fit:cover; display:block}
.cw-th.pin{outline:2px solid var(--shell-accent); outline-offset:-2px}
.cw-add{display:flex; align-items:center; justify-content:center; color:var(--shell-text-2);
  box-shadow:inset 0 0 0 1px var(--shell-line)}
.cw-add:hover{background:var(--shell-hover); color:var(--shell-text)}
.cw-x{position:absolute; top:6px; right:6px; min-width:28px; height:28px; padding:0; border:0;
  border-radius:var(--radius-pill, 999px); display:flex; align-items:center; justify-content:center;
  background:rgba(16,17,20,.55); color:#fff; font:inherit; font-size:var(--fs-cap, 13px); cursor:pointer}
.cw-x.ask{padding:0 12px; font-weight:600; background:var(--danger, #D93A3A)}
.cw-thumbs[aria-busy="true"]{pointer-events:none}
.cw-hint{margin:12px 0 0; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}
.cw-center{text-align:center}
.cw-msg{margin:8px 0 0; font-size:var(--fs-cap, 13px); color:var(--warning-text, #8A5A00)}
.cw-msg:empty{display:none}
.cw-foot{display:flex; justify-content:flex-end; gap:12px; margin-top:16px}
.cw-btn{height:44px; box-sizing:border-box; padding:0 24px; font:inherit; font-size:var(--fs-sub, 15px);
  font-weight:600; color:var(--shell-text); cursor:pointer}
.cw-btn.sq-accent{color:#fff}
.cw-btn[disabled]{opacity:.55; cursor:default}
.cw-num{margin:0 0 8px; font-size:var(--fs-cap, 13px); color:var(--shell-text-3)}
.cw-num:empty{display:none}
.cw-cropbox{position:relative; margin:0 auto; overflow:hidden; border-radius:var(--radius-sm, 12px);
  touch-action:none; cursor:grab; background:var(--shell-sunken)}
.cw-cropbox:active{cursor:grabbing}
.cw-cropbox canvas{display:block; width:100%; height:100%; pointer-events:none}
/* Вне полосы – притушено тенью самой полосы: рамка вокруг целиком, не полоса по краю. */
.cw-band{position:absolute; border:2px solid #fff; border-radius:4px; box-sizing:border-box;
  box-shadow:0 0 0 999px rgba(16,17,20,.45); pointer-events:none}

/* ═══ «‹ ОТКУДА» В ШАПКЕ МОДУЛЯ (правило О2 прототипа, 2026-09-28) ═══
   Пришли не из меню – первой в шапке, слева от поиска, тихая кнопка «‹ Главная»,
   «‹ Полина Соколова», «‹ Портфолио». Нажатие и Esc ведут туда же (desktop.js,
   строкаОткуда). Высота шапки (44) не меняется: у модулей своя раскладка, и
   строка над шапкой сдвигала бы липкую шапку и сетку. */
.shell-from{display:none}
html.shell-wide .shell-from{display:inline-flex; align-items:center; gap:4px; flex:0 1 auto; min-width:0;
  max-width:240px; height:44px; padding:0 16px 0 12px; box-sizing:border-box;
  border-radius:var(--radius-pill, 999px); font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px);
  font-weight:600; color:var(--accent-text); text-decoration:none; white-space:nowrap}
html.shell-wide .shell-from span{min-width:0; overflow:hidden; text-overflow:ellipsis}
html.shell-wide .shell-from:hover, html.shell-wide .shell-from:focus-visible{background:var(--surface-sunken, #E3E8EF)}
html.shell-wide .shell-from svg{flex:0 0 16px}
/* У редактора своя кнопка «‹ Назад» в шапке (Документы) – вторая рядом лишняя:
   своя ведет туда же, откуда пришли. */
html.shell-wide .shell-head:has(> .dskback:not([hidden])) > .shell-from{display:none}

/* Главное действие шапки сохраняет синий при открытых панелях.
   shell-quiet остается сигналом состояния для остальных элементов. */

/* ═══ КАРТОЧКА ВХОДА: «ВЫ ВЫШЛИ» И /login/ – ОДНА РАЗМЕТКА ═══
   (проверка дизайнером Apple, владелец 2026-09-28, холсты 137–138; прототип
   lo-out, lo-card). Экран «Вы вышли» (shared/logout-window.js) встает поверх
   всего окна после выхода; страница /login/ – та же карточка со своими
   шагами. Фон страницы, карточка 420 по центру, знак и имя, заголовок 26,
   строка 15, залитая кнопка во всю карточку, мелкая строка 13. На узком
   экране телефона карточка становится страницей: край в край, без тени. */
.signin{display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:100vh; min-height:100dvh; padding:24px 16px; background:var(--shell-page);
  color:var(--shell-text); font-family:var(--font-text, inherit)}
.signin-over{position:fixed; inset:0; z-index:2147483001; overflow-y:auto; overscroll-behavior:contain;
  animation:signin-fade var(--dur-3, .35s) var(--ease-out, ease) both}
.signin-card{width:min(420px, 100%); box-sizing:border-box; padding:40px 32px 32px;
  border-radius:var(--radius-sheet, 24px); background:var(--shell-card);
  box-shadow:0 1px 2px rgba(20,24,32,.06), 0 0 0 .5px var(--shell-line);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.signin-card > *{max-width:100%}
.signin-over .signin-card{animation:signin-in var(--dur-4, .5s) var(--ease-morph, cubic-bezier(.32,.72,0,1)) .05s both}
.signin-brand{display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-family:var(--font-head, inherit);
  font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); font-weight:700; color:var(--shell-text);
  text-decoration:none; letter-spacing:-.2px}
.signin-brand img{width:24px; height:24px; flex:0 0 24px; display:block}
.signin-h{margin:0; font-family:var(--font-head, inherit); font-size:var(--fs-display, 26px); line-height:32px;
  font-weight:700; letter-spacing:-.4px; color:var(--shell-text)}
.signin-t{margin:0; font-size:var(--fs-sub, 15px); line-height:var(--lh-sub, 20px); color:var(--shell-text-2)}
.signin-btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:12px;
  padding:12px 16px; font:inherit; font-size:var(--fs-sub, 15px); font-weight:600; cursor:pointer}
.signin-btn.sq-accent{color:#fff}
.signin-btn[disabled]{cursor:default; opacity:.7}
.signin-n{margin:4px 0 0; font-size:var(--fs-cap, 13px); line-height:var(--lh-cap, 18px); color:var(--shell-text-2)}
@keyframes signin-fade{from{opacity:0}}
/* Слой плотнеет в первые 45 % хода (§9.1). */
@keyframes signin-in{0%{opacity:0; transform:scale(.94)} 45%{opacity:1} 100%{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .signin-over, .signin-over .signin-card{animation-duration:.01ms} }
@media (max-width:480px){
  .signin{align-items:flex-start; padding:0; background:var(--shell-card)}
  .signin-card{padding:32px 20px; border-radius:0; box-shadow:none}
}

/* ═══ ВОПРОС, ВЫРОСШИЙ ИЗ НАЖАТОГО ═══ (dialog.js, спросить({ растиИз });
   КОД_ДИЗАЙНА 9.1). Окно растет из строки меню и уходит короче, чем пришло;
   ход – тот же, что у окна «Сочетания клавиш». Точку роста ставит скрипт. */
html.shell-wide .ask-wrap.ask-grow{animation:shortcuts-veil var(--dur-3, .35s) var(--ease-out, ease) both}
html.shell-wide .ask-wrap.ask-grow .sheet{animation:shortcuts-grow var(--dur-4, .5s) var(--ease-morph, cubic-bezier(.32,.72,0,1)) both}
html.shell-wide .ask-wrap.ask-grow.out{pointer-events:none; animation:shortcuts-veil-out .3s var(--ease-out, ease) both}
html.shell-wide .ask-wrap.ask-grow.out .sheet{animation:shortcuts-out .3s var(--ease-out, ease) both}
@media (prefers-reduced-motion:reduce){
  html.shell-wide .ask-wrap.ask-grow, html.shell-wide .ask-wrap.ask-grow .sheet{animation-duration:.01ms}
}

/* Поиск стартовых страниц – материал поля из Документов (.search input). */
html.shell-wide body [data-list-search] input[type="search"]{
  box-sizing:border-box;min-height:44px;height:44px;
  padding:12px 64px 12px 38px;
  font-family:inherit;font-size:var(--fs-sub);line-height:var(--lh-sub);
  color:var(--text-primary);background:transparent;
  border:none;border-radius:0;border-image:var(--sq-pole) 42 fill / 42px / 14px;
  outline:none;-webkit-appearance:none;
}
html.shell-wide body [data-list-search] input[type="search"]::placeholder{color:var(--text-muted);opacity:1}
html.shell-wide body [data-list-search] input[type="search"]:focus{box-shadow:none;border-image-source:var(--sq-pole)}
html.shell-wide body [data-list-search] .mag svg,html.shell-wide body [data-list-search]>svg{width:16px;height:16px;color:var(--text-muted)}
/* Единый шрифт поля и клавиш, независимо от шрифта модуля. */
html.shell-wide body [data-list-search] input[type="search"],html.shell-wide body .tasks-search #dkSearch .shell-search-q{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html.shell-wide body [data-list-search] .shell-list-kbd,html.shell-wide body .tasks-search #dkSearch>.shell-kbd{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:var(--fs-cap);line-height:var(--lh-cap);padding:1px 6px}
html.shell-wide body #searchBox[data-list-search]{display:block;visibility:visible}
html.shell-wide body [data-list-search] input[type="search"]{height:44px;min-height:44px;padding:12px 64px 12px 38px;line-height:var(--lh-sub);font-size:var(--fs-sub);font-weight:400;background:transparent;border:none;border-radius:0;border-image:var(--sq-pole) 42 fill / 42px / 14px}
/* Полки под поиском – исходное оформление фильтров Документов. */
html.shell-wide body .project-list-top>.filters,
html.shell-wide body #pfTabs,
html.shell-wide body #podbBar{
  display:flex;gap:8px;padding:0 0 4px;margin:0 0 12px;
  height:auto;background:transparent;border-radius:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
html.shell-wide body .project-list-top>.filters>button,
html.shell-wide body #pfTabs>button,
html.shell-wide body #podbBar>button{
  flex:0 0 auto;box-sizing:border-box;height:auto;min-height:0;
  padding:8px 14px;border:none;border-radius:var(--radius-md);
  background:var(--surface-card);color:var(--text-secondary);
  font:400 var(--fs-cap)/1.45 Onest,sans-serif;white-space:nowrap;
  box-shadow:none;gap:6px;
}
html.shell-wide body .project-list-top>.filters>button.on,
html.shell-wide body #pfTabs>button.on,
html.shell-wide body #podbBar>button.on{
  background:var(--surface-hover);color:var(--text-primary);font-weight:600;box-shadow:none;
}
html.shell-wide body .project-list-top>.filters>.seg-thumb,
html.shell-wide body #pfTabs>.seg-thumb{background:var(--surface-hover);border-radius:var(--radius-md);box-shadow:none}
html.shell-wide body #pfTabs button .n,html.shell-wide body #podbBar button .n{font-weight:400;color:var(--text-disabled)}
html.shell-wide body #pfTabs button.on .n,html.shell-wide body #podbBar button.on .n{color:var(--text-muted)}
html.shell-wide body #pfTabs>.seg-thumb~button:not(.on),html.shell-wide body .project-list-top>.filters>.seg-thumb~button:not(.on){background:var(--surface-card)!important}
/* Форма из живых Компонентов – общая SVG-плитка sq.css, n=3,3. */
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips)>button{
  background:transparent!important;border:none;border-radius:0;corner-shape:round;
  border-image:var(--sq-flat) 42 fill / 42px / 14px;
}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips)>button.on{
  border-image-source:var(--sq-sunk);
}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs)>.seg-thumb{
  background:transparent;border-radius:0;corner-shape:round;
  border-image:var(--sq-sunk) 42 fill / 42px / 14px;
}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs):has(>.seg-thumb)>button.on{border-image:none}
/* Каркас не наследует шрифты и мерки конкретного модуля. */
html.shell-wide .shell{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px}
html.shell-wide .shell-logo{font-family:Unbounded,Onest,sans-serif;font-size:20px;line-height:24px}
html.shell-wide .shell-who{flex:0 0 auto;height:84px;min-height:84px;padding:16px 12px;box-sizing:border-box}
html.shell-wide .shell-name{height:24px;line-height:24px;font-size:20px}
html.shell-wide .shell-tags{height:22px;flex:0 0 22px}
html.shell-wide .shell-item{height:44px;min-height:44px;box-sizing:border-box;line-height:20px}
html.shell-wide .shell-acc{height:56px;min-height:56px}

/* Обновление подписей не должно включать браузерное удержание якоря. */
html.shell-wide .shell{overflow-anchor:none}

/* Меню сразу рисует финальным шрифтом, без промежуточного swap.
   Файлы общие с приложением; псевдонимы меняют только режим показа. */
@font-face{
  font-family:'Shell Onest'; font-style:normal; font-weight:300 800; font-display:block;
  src:url('/fonts/onest/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Shell Onest'; font-style:normal; font-weight:300 800; font-display:block;
  src:url('/fonts/onest/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Shell Unbounded'; font-style:normal; font-weight:400 900; font-display:block;
  src:url('/fonts/unbounded/unbounded-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Shell Unbounded'; font-style:normal; font-weight:400 900; font-display:block;
  src:url('/fonts/unbounded/unbounded-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html.shell-wide .shell{--font-text:"Shell Onest",sans-serif;--font-head:"Shell Unbounded","Shell Onest",sans-serif;font-family:var(--font-text)}
html.shell-wide .shell-logo{font-family:var(--font-head)}


/* Полоса прокрутки не меняет ширину контента и положение поля поиска. */
html.shell-wide{scrollbar-gutter:stable}
html.shell-wide :is(.shell,.shell-win,.sheet){scrollbar-gutter:stable}
.shell-badge,.shell-store-t,.shell-tag{font-variant-numeric:tabular-nums}

/* Собственная прокрутка колонок и панелей не сужает их при смене содержимого. */
html.shell-wide :is(#pfList,#listScreen,#listScroll,#pfPane,.cs-body,.dskside,.docside,.sp-host,.setp-body,.pf-screen,.createview,.reswrap,#pairGrid){scrollbar-gutter:stable}
/* Число меняется внутри занятого места, подпись фильтра не сдвигается. */
html.shell-wide :is(#chips,#pfTabs,#podbBar) .n{display:inline-block;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
html.shell-wide :is(.shell-head,#pfTabs,#chips,#podbBar,.project-list-top){flex-shrink:0}
/* Четыре статуса проектов помещаются в колонку, SVG-края не обрезаются. */
html.shell-wide body .project-list-top>.filters{
  gap:4px;overflow:visible;
}
html.shell-wide body .project-list-top>.filters>button{
  flex:1 1 0;min-width:0;padding:8px 4px;
}
/* Подложки фильтров не режутся контейнером; подписи сохраняют полную ширину. */
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips){
  overflow:visible;gap:4px;
}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips)>button{
  flex:1 1 auto;min-width:max-content;padding:8px 4px;
}
html.shell-wide body #chips>button{padding-inline:2px}
/* Раздельные сквирклы: расстояние между видимыми краями – 8 px. */
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips){gap:8px}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips)>button{
  padding-inline:4px;
  border-image-width:28px;border-image-outset:0;
}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs)>.seg-thumb{
  border-image-width:28px;border-image-outset:0;
}
html.shell-wide body #chips>button{padding-inline:0}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips){gap:12px}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs,#podbBar,#chips)>button{padding-inline:2px;border-image-width:42px;border-image-outset:14px}
html.shell-wide body :is(.project-list-top>.filters,#pfTabs)>.seg-thumb{border-image-width:42px;border-image-outset:14px}
html.shell-wide body #chips>button{padding-inline:0}