/* Раскладка оболочки: левое меню и поле страницы. Значений тут нет —
   только из `/ui/tokens.css`; общие части — из `/ui/kit.css`.

   Раскладка снята с образца владельца (11.09.2026): меню 236 px, свёрнутое
   68 px одними значками, кружок-складыш на самом борту. */

/* `minmax(0, 1fr)`, а не `1fr`: у колонки грида минимальная ширина по
   умолчанию равна МИНИМАЛЬНОЙ ШИРИНЕ СОДЕРЖИМОГО, и широкая таблица раздела
   раздвигала не свою прокрутку, а всю раскладку — появлялась горизонтальная
   прокрутка САЙТА, левое меню уезжало, а шапки таблиц обрезались правым краем
   окна. Замерено 12.09.2026 на странице задачи мониторинга: scrollWidth 1508
   при окне 1440. С нулевым минимумом колонка держит ширину окна, а таблица
   листается внутри своего `overflow-x`, как и задумано. */
.sh-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh }

/* ── левое меню ────────────────────────────────────────────────── */
.sh-side-wrap { position: relative }
/* Прокручивается ВСЯ полоса, а не первая группа. Пока группы были
   неподвижными заголовками, длинным бывал только список работы, и он
   листался внутри себя. С раскрывающимися группами (03.10.2026, образец
   diboost) высокой становится любая: макет с тремя раскрытыми группами
   на экране в 900 px сжал первую так, что «Мандаринка» наехала на «Полки». */
/* ⚠️ `overflow-x: hidden` обязателен в паре: `overflow-y: auto` делает
   прокручиваемой и вторую ось, и полоса значков уезжала влево на 13 px —
   замер 03.10.2026 (кнопка группы на x = −1 при полосе 0…68). */
.sh-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 18px 14px 0;
  background: var(--card); border-right: 1px solid var(--line);
}

/* Знак платформы — ССЫЛКА на «Главную»: до 03.10.2026 на неё можно было
   попасть только адресом. */
.sh-mark { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; flex-shrink: 0 }
.sh-mark img { width: 30px; height: 30px; border-radius: 8px; display: block; flex-shrink: 0 }
.sh-mark b { font-size: 19px; font-weight: 800; letter-spacing: -.015em }

/* Контур платформы. У образца на этом месте плашка тарифа; у нас — «дев или
   бой», потому что перепутать контуры дороже, чем не увидеть баланс. Цвет
   берётся из `--contour`, а его задаёт `data-env` на корне документа. */
.sh-contour { flex-shrink: 0; margin-bottom: 16px; padding: 10px 12px;
           border: 1px solid var(--line); border-radius: var(--r) }
.sh-contour .sh-row { display: flex; align-items: center; gap: 7px }
/* Своя точка, а не китовая: имена оболочки получили приставку, и китовое
   `.dot` (размер и круг) до неё больше не дотягивается — а форму задавало
   именно оно. Три строки здесь дешевле, чем исключение из приставки. */
.sh-contour .sh-dot { width: 8px; height: 8px; border-radius: 50%;
                      flex-shrink: 0; background: var(--contour) }
.sh-contour .sh-name { font-size: var(--t-cap); font-weight: 800; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--contour) }
.sh-contour .sh-meta { margin-top: 3px; font-size: var(--t-s); color: var(--ink-2) }

/* Группы меню. Первая (работа, без подписи) идёт сразу и начинается
   с «Главной»; подписанные идут РАСКРЫВАЮЩИМИСЯ пунктами, как «Конверсии»
   у образца: знак, название и стрелка, разделы под ними с отступом и тонкой
   линией слева. Группы, которые каталог пометил `dock` («Боты» и
   «Обслуживание»), прижаты к низу одной стопкой — они живут над человеком.
   `margin-top: auto` вешается классом из скрипта, а не через `:last-of-type`:
   при единственной группе она же и последняя, и правило уронило бы её вниз. */
.sh-nav { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px }
.sh-nav-sub { margin-top: 4px }
.sh-nav-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line) }
/* Вторая и следующие в стопке: пустота и линия нужны одной — над всей стопкой. */
.sh-nav-foot ~ .sh-nav-foot { margin-top: 4px; padding-top: 0; border-top: 0 }
.sh-nav a, .sh-nav .sh-off, .sh-nav .sh-group {
  display: flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 10px 12px; border-radius: var(--r);
  font-size: var(--t-m); font-weight: 600; color: var(--ink-2);
}
.sh-nav a:hover, .sh-nav .sh-group:hover { background: var(--hover); color: var(--ink) }
.sh-nav a[aria-current="page"] { background: var(--ink); color: var(--card); font-weight: 700 }
:root[data-theme="dark"] .sh-nav a[aria-current="page"] { background: var(--soft); color: var(--ink) }
.sh-nav svg { width: 19px; height: 19px; flex-shrink: 0 }
/* Обёртка знака — блоком, знак по её центру. Строкой она сажала знак на
   базовую линию: 2,4–2,65 px выше центра строки и подписи во всех строках
   меню (замер 29.10.2026). Высоту строки держала именно она — 24 px, у
   разделов в группе 21, — поэтому высота названа явно, и меню не ужалось. */
.sh-nav .ui-ico { display: flex; align-items: center; height: 24px; flex-shrink: 0 }
.sh-nav .sh-lbl { overflow: hidden; text-overflow: ellipsis }
/* Строка группы — КНОПКА: она раскрывает и сворачивает, а не ведёт. */
.sh-nav .sh-group { width: 100%; border: 0; background: none; font: inherit;
  font-size: var(--t-m); font-weight: 600; text-align: left; cursor: pointer }
.sh-nav .sh-chev { margin-left: auto; display: flex; color: var(--mute) }
.sh-nav .sh-chev svg { width: 15px; height: 15px }
.sh-nav .sh-group[aria-expanded="false"] .sh-chev svg { transform: rotate(-90deg) }
/* Свёрнутая группа, в которой открыта страница, помечена точкой: иначе
   из меню не видно, где ты. */
.sh-nav .sh-cur-dot { display: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0 }
.sh-nav .sh-group[aria-expanded="false"].sh-has-cur .sh-cur-dot { display: block }
.sh-nav .sh-kids { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px;
  padding-left: 9px; border-left: 1px solid var(--line) }
.sh-nav .sh-group[aria-expanded="false"] + .sh-kids { display: none }
.sh-nav .sh-kids a, .sh-nav .sh-kids .sh-off { padding: 8px 10px; font-size: var(--t-b) }
.sh-nav .sh-kids svg { width: 16px; height: 16px }
.sh-nav .sh-kids .ui-ico { height: 21px }
/* Сломанный раздел ВИДЕН, но не ссылка: сайт живёт, причина — в подсказке
   и на «Главной». Показывается только тому, кому видна система. */
.sh-nav .sh-off { color: var(--mute); opacity: .65; cursor: help }
.sh-nav .sh-off .sh-lbl { text-decoration: line-through }

/* Окошко группы у свёрнутого меню: значок группы раскрывает её разделы
   СБОКУ, как меню «ещё» (место считает `placeAside`). Открытая страница
   залита так же, как в самом меню. */
.sh-fly { min-width: 210px }
.sh-fly .ui-menu-item svg { width: 16px; height: 16px }
.sh-fly .ui-menu-item[aria-current="page"] { background: var(--ink); color: var(--card) }

/* ⚠️ Подвал ПРИБИТ к нижнему краю полосы (`sticky`): полоса листается целиком,
   и на низком окне блок человека лежал ниже края. Нажать его можно было,
   только прокрутив полосу, а прокрутка закрывает меню (`bindMenu` слушает
   `scroll`), — меню под именем открывалось и гасло в тот же миг. Замер
   19.10.2026: окно 700 px — подвал на 898…942, полоса 962; 900 px — то же.
   Нижний отступ полосы переехал сюда (`padding-bottom` у `.sh-side` — 0):
   прибитый подвал встаёт к самому краю полосы, а не на 14 px выше него.
   Верхний зазор и линия — собственные, а не `margin` и `border`: поля
   прибитого блока прозрачны, и пункты меню просвечивали бы над линией. */
/* ⚠️ К низу его прижимает СВОЙ `margin-top: auto`, а не нижние группы: у человека
   без «Ботов» и «Обслуживания» прижимать было нечему, и подвал висел сразу под
   меню — замер 29.10.2026 на 1000 px: 504…593. Когда нижние группы есть, авто
   у подвала снято: два авто делят пустоту пополам, и стопка уехала бы в середину. */
.sh-side-foot { position: sticky; bottom: 0; width: 100%; flex-shrink: 0;
             margin-top: auto; padding: 12px 0 14px; background: var(--card) }
.sh-nav-foot ~ .sh-side-foot { margin-top: 0 }
.sh-side-foot::before { content: ''; display: block; margin-bottom: 12px;
             border-top: 1px solid var(--line) }
/* Блок человека — КНОПКА: она открывает меню «про меня» (тема, выход,
   смена пароля). Тон под курсором тот же, что у строки таблицы, — подвал
   не должен вести себя иначе, чем остальная морда. */
.sh-who { display: flex; align-items: center; gap: 10px; width: 100%;
            padding: 6px 8px; margin-bottom: 6px; border: 0; background: none;
            border-radius: var(--r); text-align: left; color: inherit }
.sh-who:hover, .sh-who[aria-expanded="true"] { background: var(--hover) }
.sh-who .sh-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            display: grid; place-items: center; background: var(--soft);
            font-size: var(--t-s); font-weight: 800; color: var(--ink-2) }
.sh-who .txt { min-width: 0 }
.sh-who .sh-nm { font-size: var(--t-b); font-weight: 700; line-height: 1.25;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sh-who .sh-rl { font-size: var(--t-cap); color: var(--mute) }
/* Три точки проступают ПОД КУРСОРОМ — как в строке «Разведки». В покое
   подвал не пестрит кнопкой, которую нажимают раз в квартал; `visibility`,
   а не `display`, чтобы имя не дёргалось, когда точки появляются. */
.sh-who .sh-dots { margin-left: auto; display: flex; color: var(--mute);
            visibility: hidden }
.sh-who .sh-dots svg { width: 18px; height: 18px }
.sh-who:hover .sh-dots, .sh-who:focus-visible .sh-dots,
.sh-who[aria-expanded="true"] .sh-dots { visibility: visible }

/* Меню подвала открывается ВВЕРХ — под ним места нет вовсе, и разворот
   считает сам кит (`bindMenu`). Ширину здесь НЕ задаём: раскрытое меню
   становится `fixed`, и «100 %» отмерялось бы от окна, а не от полосы. */

/* Прибит к ЭКРАНУ по краю полосы (`--rail` меняется со свёрнутостью):
   внутри обёртки высотой во всю страницу `top: 50%` уехал бы к её середине,
   а не к середине экрана. */
.sh-fold { position: fixed; top: 50%; left: calc(var(--rail) - 13px); z-index: 3;
        width: 26px; height: 26px; padding: 0; border-radius: 50%;
        border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
        display: grid; place-items: center }
.sh-fold:hover { color: var(--ink); border-color: var(--mute) }
.sh-fold svg { width: 14px; height: 14px; transition: transform .18s }
/* Обёртка знака — блоком, как у `.btn` в ките: строчной она брала высоту строки
   (20 px), и стрелка вставала на базовую линию на 2 px выше центра (29.10.2026). */
.sh-fold > .ui-ico { display: flex }

/* ── свёрнутое меню: одни значки ───────────────────────────────────
   ⚠️ Только на ШИРОКОМ экране. На телефоне меню — шапка и выдвижная полоса
   (ниже), и запомненное «свёрнуто» не должно превращать выдвинутое дерево
   в столбик значков без подписей. Поэтому правила полосы-значков живут
   под `min-width`, а не просто под атрибутом. */
@media (min-width: 901px) {
  .sh-shell[data-rail="icon"] { --rail: var(--rail-icon) }
  .sh-shell[data-rail="icon"] .sh-side { align-items: center; padding-left: 12px; padding-right: 12px }
  .sh-shell[data-rail="icon"] .sh-mark { padding: 0 0 16px; justify-content: center }
  .sh-shell[data-rail="icon"] .sh-mark b { display: none }
  .sh-shell[data-rail="icon"] .sh-contour { padding: 8px; margin-bottom: 12px }
  .sh-shell[data-rail="icon"] .sh-contour .sh-row { justify-content: center }
  .sh-shell[data-rail="icon"] .sh-contour .sh-name,
  .sh-shell[data-rail="icon"] .sh-contour .sh-meta { display: none }
  .sh-shell[data-rail="icon"] .sh-nav { width: 100%; align-items: center }
  .sh-shell[data-rail="icon"] .sh-nav a,
  .sh-shell[data-rail="icon"] .sh-nav .sh-off,
  .sh-shell[data-rail="icon"] .sh-nav .sh-group { justify-content: center; padding: 11px }
  .sh-shell[data-rail="icon"] .sh-nav .sh-lbl,
  .sh-shell[data-rail="icon"] .sh-nav .sh-chev,
  .sh-shell[data-rail="icon"] .sh-nav .sh-cur-dot,
  .sh-shell[data-rail="icon"] .sh-nav .sh-kids { display: none }
  /* Точка свёрнутой группы весит больше правила выше (пять классов против
     четырёх) и вставала в полосе рядом со значком: сдвиг на 8,5 px, замечено
     владельцем 29.10.2026. В полосе вместо неё заливка ниже. */
  .sh-shell[data-rail="icon"] .sh-nav .sh-group.sh-has-cur .sh-cur-dot { display: none }
  /* Разделов группы в полосе не видно, поэтому группу, в которой открыта
     страница, заливаем так же, как заливается сам открытый раздел. */
  .sh-shell[data-rail="icon"] .sh-nav .sh-group.sh-has-cur { background: var(--ink); color: var(--card) }
  :root[data-theme="dark"] .sh-shell[data-rail="icon"] .sh-nav .sh-group.sh-has-cur { background: var(--soft); color: var(--ink) }
  .sh-shell[data-rail="icon"] .sh-who { justify-content: center; padding: 6px 0 }
  .sh-shell[data-rail="icon"] .sh-who .txt,
  .sh-shell[data-rail="icon"] .sh-who .sh-dots { display: none }
  .sh-shell[data-rail="icon"] .sh-fold svg { transform: rotate(180deg) }
}

/* ── телефон: шапка и выдвижное меню ───────────────────────────────
   Решение владельца 03.10.2026 (вариант «б» из двух): полосы значков на узком
   экране больше нет — она отнимала 68 px из 430. Сверху шапка со знаком,
   контуром и кнопкой «Меню»; кнопка выдвигает ТО ЖЕ дерево, что на
   компьютере. Нижнюю панель образца отклонили: у людей разный набор
   разделов, и «какие три в панель» пришлось бы решать за каждого. */
.sh-top, .sh-dim, .sh-close { display: none }

/* ── поле страницы ─────────────────────────────────────────────── */
/* Ширина ограничена: на широком мониторе строка таблицы иначе растягивается
   так, что глаз теряет связь между её краями. */
.sh-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 26px 30px 60px }
/* ⚠️ Потолок ширины снимает ОБОЛОЧКА и только для страницы, которая сама
   об этом попросила (`ctx.wide`). У обычной страницы он на месте: строка
   длиннее не читается, и колонка текста во весь монитор — это работа глазами,
   а не щедрость. У матрицы «показатель × сутки» всё наоборот: там ширина
   и есть данные — каждые 170 px дают ещё двое суток (замер 15.09.2026). */
.sh-shell[data-wide] .sh-page { max-width: none }
/* Заголовок страницы переехал в кит (`.page-head`): его рисуют уже три
   раздела, и третья копия означала бы третье мнение о размере плашки. */

/* ── «Главная»: карточки разделов ──────────────────────────────── */
/* Собираются ИЗ МАНИФЕСТА, а не свёрстаны: новый раздел появляется здесь
   сам, без правки этой страницы (условие владельца 11.09.2026). */
.sh-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
            gap: 14px; margin-bottom: 14px }
.sh-sec { display: flex; align-items: center; gap: 13px; padding: 16px 18px;
       background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
       transition: border-color .12s }
.sh-sec:hover { border-color: var(--mute) }
.sh-sec .sh-ico { width: 40px; height: 40px; border-radius: var(--r-s); flex-shrink: 0;
            display: grid; place-items: center; background: var(--soft); color: var(--ink-2) }
.sh-sec .sh-ico svg { width: 21px; height: 21px }
.sh-sec .sh-nm { font-size: var(--t-h); font-weight: 800 }
.sh-sec .sh-st { margin-top: 2px; font-size: 12.5px; color: var(--ink-2) }
.sh-sec .sh-go { margin-left: auto; flex-shrink: 0; color: var(--mute) }
.sh-sec .sh-go svg { width: 16px; height: 16px }
.sh-sec:hover .sh-go { color: var(--ink) }

/* ── «Главная» → «Сегодня» (03.10.2026; по магазинам — 26.10.2026) ──
   Сверху таблица «Магазины сегодня» и цифры ботов у магазина, под ней
   «требует внимания» — строка на беду, у каждой имя раздела (и отметка
   магазина, если беда о нём); ниже плитки разделов без магазина по группам
   меню; внизу все разделы. Ритм задаёт страница, а не блоки. */
.sh-home > * + * { margin-top: 20px }
.sh-att .row .t1 { display: flex; align-items: center; gap: 7px }
.sh-att .row .t1 b { font-weight: 800 }
.sh-att .sh-calm { display: flex; align-items: center; gap: 9px; padding: 15px 18px;
  font-size: var(--t-m); color: var(--ink-2) }
.sh-day-group > * + * { margin-top: 12px }
.sh-day-gh { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--t-h); font-weight: 800 }
.sh-day-gh svg { width: 17px; height: 17px; color: var(--ink-2) }
.sh-day-h { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: var(--t-m); font-weight: 700; color: var(--ink-2) }
.sh-day-h:hover { color: var(--ink) }
.sh-day-h svg { width: 16px; height: 16px }
.sh-day .tiles { margin: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
/* Блоки разделов группы — сеткой: каждый на свою строку растягивал страницу
   втрое при двух-трёх плитках в блоке. */
.sh-day-grid { display: grid; gap: 16px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) }
.sh-home .sh-sections { margin-bottom: 0 }
/* Замечание о магазине: отметка магазина впереди имени раздела; строка
   переносится, а отметка не сжимается. */
.sh-att .row .t1:has(.sh-store) { flex-wrap: wrap; row-gap: 3px }
.sh-store { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex-shrink: 0 }
.sh-store b { font-weight: 800; white-space: nowrap }
/* Таблица магазинов. Сдвиг «к вчера» — тоном стрелки; у ячейки с подсказкой
   строка под числом подчёркнута пунктиром: подсказка там длинная, с расчётом. */
.sh-shops .table td { padding: 10px 16px; vertical-align: middle }
.sh-shops .table td .t2 { font-size: var(--t-s); color: var(--ink-2); margin-top: 2px; font-weight: 500 }
.sh-shops .table td.num b { font-weight: 800; font-size: var(--t-m) }
.sh-shops .table td.warn b { color: var(--warn-fg) }
.sh-shops .table td.bad b { color: var(--bad-fg) }
.sh-shops .table td.ok b { color: var(--ok-fg) }
.sh-shops .table td.num .t2 { white-space: nowrap }
.sh-d { font-style: normal; font-weight: 700; color: var(--ink-2) }
.sh-d.ok { color: var(--ok-fg) }
.sh-d.bad { color: var(--bad-fg) }
.sh-shops td.sh-tip { cursor: help }
.sh-shops td.sh-tip .t2 { text-decoration: underline dotted; text-underline-offset: 3px }
.sh-shops td.sh-shop { min-width: 150px }
.sh-shops td.sh-shop a { color: inherit; text-decoration: none }
.sh-shops td.sh-shop a:hover b { text-decoration: underline }
.sh-shops td.sh-sp { width: 150px }
.sh-shops td.sh-sp .ui-chart { width: 140px; height: 30px; display: block }
.sh-shops td.sh-flag { white-space: nowrap }
.sh-shops td.sh-flag .dot { margin-right: 5px }
.sh-shops tr.sh-seller td { background: var(--soft); font-size: var(--t-s); font-weight: 700;
  color: var(--ink-2); padding: 7px 16px }
.sh-shops tr.sh-total td { background: var(--soft) }
.sh-shops .sh-scroll { overflow-x: auto }
.sh-at { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-s);
  color: var(--mute); white-space: nowrap; font-weight: 500 }
.sh-at svg { width: 13px; height: 13px }
.sh-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 18px;
  border-top: 1px solid var(--line-soft); font-size: var(--t-s); color: var(--ink-2) }
.sh-facts a { color: inherit; text-decoration: none }
.sh-facts a:hover { color: var(--ink) }
.sh-facts b { color: var(--ink); font-weight: 800 }
.sh-facts .warn b { color: var(--warn-fg) }
.sh-facts .bad b { color: var(--bad-fg) }

/* Пункт меню, который говорит СОСТОЯНИЕ, а не зовёт к действию
   («Телеграм привязан»): тише обычного и с галочкой справа. Нажимается
   по-прежнему — там отвязка. */
.sh-quiet { color: var(--ink-2) }
.sh-tick { margin-left: auto; color: var(--ok-fg); font-weight: 800 }
/* Под курсором пункт заливается тоном кита, и галочка обязана читаться
   на нём — иначе зелёное на зелёном исчезает. */
.ui-menu-item:hover .sh-tick, .ui-menu-item:focus-visible .sh-tick { color: var(--card) }

/* ── окна «про меня» ───────────────────────────────────────────── */
/* Смена пароля и привязка телеграма — два окна ОДНОГО рода: оба открываются
   из меню под именем и говорят о самом человеке. Поэтому общий ящик
   (`sh-mine`) и общие его части, а своё у каждого только содержимое.
   Второй набор имён под тот же ящик означал бы две правды о его виде.

   Встаёт СБОКУ от подвала (место считает кит, `placeAside`): полоса меню
   узкая, и окно внутри неё пришлось бы сжать до нечитаемого. `fixed`,
   а не `absolute`, — у полосы своя прокрутка, и окно уезжало бы с ней. */
.sh-mine { position: fixed; z-index: 70; width: min(92vw, 330px); padding: 14px;
       background: var(--card); border: 1px solid var(--line);
       border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14) }
.sh-mine-h { margin: 0 0 10px; font-size: var(--t-h) }
.sh-mine .field { display: block; margin-bottom: 8px }
.sh-mine .lbl { display: block; margin-bottom: 4px;
       font-size: var(--t-s); color: var(--ink-2) }
.sh-mine .input { width: 100% }
.sh-mine-note { margin: 0 0 10px; font-size: var(--t-s); color: var(--mute) }
.sh-mine-dim { margin: 0 0 10px; font-size: var(--t-s); color: var(--ink-2) }
.sh-mine-go { width: 100%; justify-content: center }
/* Взвод внутри окна: своего места не занимает — оно уже есть. */
.sh-pw-arm { position: static; display: block; width: auto; margin: 0 }
.sh-mine-ok { display: flex; gap: 10px; align-items: flex-start }
.sh-mine-ok svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
       color: var(--ok-fg) }
.sh-mine-ok p { margin: 4px 0 0; font-size: var(--t-s); color: var(--ink-2) }
/* Плашка внутри окна — своя, а не китовая `notice`: та рассчитана на полосу
   во всю страницу (знак слева, текст колонкой), и в окне на 330 px её ряд
   разъезжается. Тона общие — лестница платформы. */
.sh-pw-box { padding: 12px 14px; border-radius: var(--r-s); border: 1px solid }
.sh-pw-box h3 { margin: 0 0 4px; font-size: var(--t-h) }
.sh-pw-box p { margin: 0 0 8px; font-size: var(--t-s); line-height: 1.5 }
.sh-pw-box p:last-child { margin-bottom: 0 }
.sh-pw-warn { background: var(--warn-bg); border-color: var(--warn-fg);
       color: var(--ink) }
.sh-pw-warn h3 { color: var(--warn-fg) }
.sh-pw-bad { background: var(--bad-bg); border-color: var(--bad-line);
       color: var(--ink) }
.sh-pw-bad h3 { color: var(--bad-fg) }
/* Значение, которое переписывают глазами, когда буфера нет (по http его нет
   вовсе): пароль в одном окне, код привязки в другом. */
.sh-mine-code { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.sh-mine-wide { width: 100%; justify-content: center; margin-top: 10px }
/* `white-space` переопределяем НАМЕРЕННО: у китового `code` стоит `nowrap`
   (он для коротких вставок в текст), и пароль в 20 знаков вылезал из окна
   вправо, за его край. */
.sh-mine-code code { flex: 1; padding: 6px 10px; font-size: var(--t-m);
       font-weight: 700; letter-spacing: .02em;
       white-space: normal; word-break: break-all }

/* ── вкладка, пережившая выкат ─────────────────────────────────────
   Плашка не принадлежит ни разделу, ни боковой полосе: устарела ВСЯ вкладка,
   и уехать вместе с содержимым страницы она не должна — поэтому `fixed`
   внизу справа, а не строка в потоке.

   Янтарная, а не красная: работать можно дальше, и уже открытые разделы
   работают (лестница тонов — DESIGN.md). Слой 50 — выше меню и страницы,
   но НИЖЕ подсказок (60) и окна смены пароля (70): она сообщает, а не
   требует, и перекрывать собой начатое дело ей нечем. */
.sh-stale { position: fixed; z-index: 50; right: 20px; bottom: 20px;
       display: flex; gap: 14px; align-items: center; max-width: 430px;
       padding: 13px 15px; border-radius: var(--r);
       background: var(--warn-bg); border: 1px solid var(--warn-fg);
       box-shadow: 0 12px 32px rgba(0, 0, 0, .14) }
.sh-stale-txt b { display: block; margin-bottom: 3px; font-size: var(--t-m);
       color: var(--warn-fg) }
.sh-stale-txt p { margin: 0; font-size: var(--t-s); line-height: 1.5;
       color: var(--ink) }
/* Кнопка своя, а не китовая: китовая берёт тон страницы и на янтарном фоне
   растворяется. Не переносится (`nowrap`) — иначе «Обно-вить» в две строки
   на узком экране. */
.sh-stale-go { flex-shrink: 0; padding: 8px 14px; border-radius: var(--r-s);
       border: 1px solid var(--warn-fg); background: var(--warn-fg);
       color: var(--card); font: inherit; font-size: var(--t-s);
       font-weight: 700; white-space: nowrap; cursor: pointer }
.sh-stale-go:hover { opacity: .88 }
/* Та же кнопка на странице «раздел не открылся» — там она стоит в потоке
   под текстом ошибки, а не в плашке. */
.form-err + .sh-stale-go { margin-top: 12px }

/* ── узкий экран ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Плашка прижимается к обоим краям: на 430 px окно уже самой плашки,
     и правый отступ в 20 px оставлял бы её обрезанной слева. */
  .sh-stale { right: 12px; left: 12px; bottom: 12px; max-width: none }
  /* `minmax(0, …)` и здесь: без него узкий экран получал ровно ту же
     горизонтальную прокрутку сайта, от которой избавлено правило выше —
     эта строка его молча перекрывала. Колонка одна: полосы меню нет. */
  /* Ряды — по содержимому, сверху. Без `align-content: start` сетка высотой
     в экран (`min-height: 100vh`) раздавала пустоту КОРОТКОЙ страницы рядам
     поровну, и заголовок раздела уезжал вниз на 150–200 px (снимок «Итогов
     дня» «Отзывов» на 430 px, 03.10.2026). На широком экране ряд один — там
     растяжение и нужно: полоса меню во всю высоту. */
  .sh-shell { grid-template-columns: minmax(0, 1fr); align-content: start }
  .sh-side-wrap { display: none }
  .sh-fold { display: none }

  .sh-top { display: flex; position: sticky; top: 0; z-index: 30; align-items: center;
    gap: 10px; height: 56px; padding: 0 12px 0 16px; background: var(--card);
    border-bottom: 1px solid var(--line) }
  .sh-top .sh-tmark { display: flex; align-items: center; gap: 9px; min-width: 0 }
  .sh-top .sh-tmark img { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0 }
  .sh-top .sh-tname { display: flex; flex-direction: column; line-height: 1.2 }
  .sh-top .sh-tname b { font-size: var(--t-h); font-weight: 800 }
  .sh-top .sh-tname span { font-size: var(--t-cap); font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--contour) }
  .sh-top .btn { margin-left: auto }

  /* Выдвинутое меню — та же полоса, что на компьютере, поверх страницы. */
  .sh-shell[data-drawer] .sh-side-wrap { display: block; position: fixed; top: 0; bottom: 0;
    left: 0; width: min(300px, 86vw); z-index: 45; box-shadow: 0 0 40px rgb(0 0 0 / .25) }
  .sh-shell[data-drawer] .sh-dim { display: block; position: fixed; inset: 0; z-index: 44;
    background: rgb(15 17 20 / .38) }
  .sh-shell[data-drawer] .sh-close { display: grid; place-items: center; position: absolute;
    top: 16px; right: 12px; z-index: 2 }
  .sh-page { padding: 20px 16px 48px }
}

/* ── сообщение об исходе ───────────────────────────────────────────
   Подтверждение ожидаемого: «сохранено», «поставлено в очередь». Скромное
   и само уходит — насовсем остаётся только то, что человек должен решить. */
.sh-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60;
            transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
            padding: 10px 16px; border-radius: var(--r);
            border: 1px solid var(--line); background: var(--card);
            /* ⚠️ `--ink`, а не `--fg`: последнего в платформе нет вовсе.
               Беды не случилось только потому, что негодный `color`
               браузер заменяет наследованием, а наследовать тут нечего
               кроме того же `--ink`. Поймано замком 21.09.2026. */
            color: var(--ink); box-shadow: 0 6px 24px rgba(0,0,0,.18);
            font-size: var(--t-s); max-width: min(560px, calc(100vw - 32px));
            transition: opacity .16s ease, transform .16s ease }
.sh-toast.on { opacity: 1; transform: translate(-50%, 0) }
/* Отказ — красным, с крестиком, и сам не гаснет (`toast(…, {tone: 'bad'})`).
   Крестик нажимаем, хотя у плашки `pointer-events: none`: иначе закрыть её
   было бы нечем. */
.sh-toast.bad { display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 10px 11px 16px; border-color: var(--bad-line);
  background: var(--bad-bg); color: var(--bad-fg) }
.sh-toast .sh-toast-x { display: flex; flex-shrink: 0; padding: 2px; border: 0;
  background: none; color: inherit; cursor: pointer }
.sh-toast .sh-toast-x svg { width: 16px; height: 16px }
.sh-toast.on .sh-toast-x { pointer-events: auto }

/* Главная на телефоне: строка магазина — карточкой в две колонки, подпись
   несёт сама клетка (`data-label`); имя, столбики и замечания — во всю ширину.
   Тот же вид, что на макете варианта Б (26.10.2026). */
@media (max-width: 760px) {
  .sh-shops .table thead { display: none }
  .sh-shops .table, .sh-shops .table tbody { display: block }
  .sh-shops .table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-soft) }
  .sh-shops .table td { display: block; padding: 0; border: 0; text-align: left !important }
  .sh-shops .table td[data-label]::before { content: attr(data-label); display: block;
    font-size: var(--t-cap); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-2) }
  .sh-shops .table td.sh-shop, .sh-shops .table td.sh-sp, .sh-shops .table td.sh-flag { grid-column: 1 / -1 }
  .sh-shops .table td.sh-sp { width: auto }
  .sh-shops .table td.sh-sp .ui-chart { width: 100% }
  .sh-shops .table td:empty { display: none }
  .sh-shops .table tr.sh-seller { display: block; padding: 6px 16px; background: var(--soft) }
  .sh-shops .table tr.sh-seller td { padding: 0; background: none }
  .sh-shops .table tr.sh-total { background: var(--soft) }
  .sh-shops .table tr.sh-total td { background: none }
}