/* Раскладки страниц: вход и первый экран (каталог сервисов).
   Геометрия — из README макетов: топбар 56px, сайдбар 248/64px,
   контент max 1240px, поля 32px/40px. */

/* --- Вход -------------------------------------------------------------------- */

.login-page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface-page);overflow:hidden}
.login-arc{position:absolute;right:0;bottom:0;width:820px;height:820px;pointer-events:none;animation:rf-arc var(--duration-slow) var(--ease-out) both}
.login-arc::before{content:"";position:absolute;right:-260px;bottom:-360px;width:820px;height:820px;border-radius:50%;background:var(--yellow-400);transform:rotate(var(--brand-slant))}
.login-grid{position:relative;width:100%;max-width:1080px;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
@media (max-width:960px){.login-grid{grid-template-columns:1fr;max-width:420px}}
.login-intro{display:flex;flex-direction:column;gap:24px;max-width:460px}
.login-intro img{height:40px;width:auto;align-self:flex-start}
.login-intro h1{font-size:var(--text-display-size);line-height:var(--text-display-lh);letter-spacing:var(--text-display-ls);text-wrap:pretty}
.login-intro .u-label{margin-bottom:12px}
.login-lead{color:var(--text-secondary);text-wrap:pretty}
.login-status{display:flex;align-items:center;gap:10px;padding-top:8px;font-size:var(--text-body-sm-size);color:var(--text-secondary)}
.login-status .dot{width:8px;height:8px;border-radius:50%;background:var(--status-success-dot)}
.login-status .sep{color:var(--border-strong)}
.login-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.login-form{padding:32px;display:flex;flex-direction:column;gap:20px}
.login-form h2{margin-bottom:6px}
.login-hint{font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text-secondary)}
.login-error{display:flex;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--status-danger-bg);color:var(--status-danger-fg);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh)}
.login-error svg{flex:none;margin-top:1px}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.login-forgot{font-size:var(--text-body-sm-size);color:var(--text-muted)}
/* Показ пароля: кнопка внутри поля. Место справа освобождает padding самого
   поля — иконка слева уже занята замком (.input-wrap>svg). Без JS кнопки
   нет вовсе: разметка отдаёт её с hidden, снимает атрибут login.js. */
.login-pass{padding-right:38px}
.login-reveal{position:absolute;right:4px}
.login-reveal[hidden]{display:none}
@keyframes rf-arc{from{transform:translate(140px,140px);opacity:0}to{transform:translate(0,0);opacity:1}}

/* --- Оболочка кабинета -------------------------------------------------------- */

.shell{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page)}
/* Левый отступ 14px, а не 24px: кнопка сворачивания встаёт ровно над
   столбиком иконок свёрнутого сайдбара — 14 + 18 (половина .icon-btn) = 32,
   то есть середина колонки 64px. Прежние 24px давали центр на 42px, и две
   кнопки в одном углу стояли на разных вертикалях (приёмка 27.08.2026).

   Это НЕ починка ошибки в коде: 24px отступа и 64px свёрнутого сайдбара —
   оба значения дизайн-системы, они просто не сходятся между собой. Здесь
   мирим их на месте; в систему это должно уехать отдельно.

   Кнопка стоит на 32px в ОБОИХ состояниях меню. Двигать её вместе с
   сайдбаром нельзя: она прыгала бы при каждом сворачивании, а прыгающая
   кнопка хуже несовпадения на 10px. */
.topbar{display:flex;align-items:center;gap:16px;height:var(--layout-topbar-h);flex:0 0 auto;padding:0 24px 0 14px;background:var(--surface-card);border-bottom:1px solid var(--border-default)}
.topbar-logo{height:26px;width:auto;display:block}
/* Логотип-ссылка: подчёркивание base.css прошло бы линией под знаком. */
/* +10px — ровно те, что сняты с отступа топбара выше: логотип и всё за ним
   остаются на прежних местах до пикселя. Двигалась только кнопка. */
.topbar-home{display:inline-flex;align-items:center;text-decoration:none;margin-left:10px}
.topbar-sep{width:1px;height:24px;background:var(--border-default)}
.topbar-host{font-size:var(--text-body-size);font-weight:700}
.topbar-search{width:360px;margin-left:auto}
.topbar-right{display:flex;align-items:center;gap:4px}
.topbar-version{margin-left:8px;padding-left:16px;border-left:1px solid var(--border-default);font-size:var(--text-caption-size);color:var(--text-muted);white-space:nowrap}

.shell-body{display:flex;flex:1;min-height:0}
.sidebar{width:var(--layout-sidebar-w);flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface-card);border-right:1px solid var(--border-default);transition:width var(--duration-base) var(--ease-out)}
.sidebar-group{padding:20px 16px 8px}
.sidebar-list{display:flex;flex-direction:column;gap:2px;padding-right:12px}
.sidebar-footer{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border-default)}
.sidebar-user{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.sidebar-user .name{font-size:var(--text-body-sm-size);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user .dept{font-size:var(--text-caption-size);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Три уровня меню (приёмка 27.08): вход → приложение → раздел. Отступом, а не
   вложенными списками: подсветка активного пункта остаётся одним правилом, а
   свёрнутому сайдбару отступы всё равно не нужны. */
/* Отступ сверху — тот же 20px, что у заголовка группы: до выноса «Сервисов»
   наверх его давала группа «Пилот», и без него первый пункт лип к границе окна
   (приёмка 27.08). В свёрнутом сайдбаре — 10px, как у групп там же. */
.sidebar-list.root{padding-top:20px;padding-bottom:12px}
.sidebar-collapsed .sidebar-list.root{padding-top:10px}
.sidebar-item.app{padding-left:26px}
.sidebar-item.sub{padding-left:38px;font-size:var(--text-body-sm-size)}
.sidebar-collapsed .sidebar-item.app,
.sidebar-collapsed .sidebar-item.sub{padding-left:0}

/* Строка пункта: ссылка плюс шеврон. Подсветка переехала со ссылки на строку —
   иначе жёлтая заливка обрывалась бы, не доходя до шеврона. */
.sidebar-row{display:flex;align-items:center;border-left:2px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:var(--transition-control)}
.sidebar-row .sidebar-item{flex:1;min-width:0;border-left:none;border-radius:0}
.sidebar-row:hover{background:var(--surface-hover)}
.sidebar-row:hover .sidebar-item{background:none;color:var(--text-primary)}
.sidebar-row.active{background:var(--yellow-50);border-left-color:var(--yellow-400)}
.sidebar-row.active .sidebar-item{background:none;color:var(--text-primary);font-weight:700}
.sidebar-row.active:hover{background:var(--yellow-50)}

/* Шеврон. Поворачивается, когда группа свёрнута; в свёрнутом сайдбаре его нет
   вовсе — там и сворачивать нечего. */
.sidebar-fold{display:inline-flex;align-items:center;justify-content:center;width:28px;height:38px;flex:0 0 auto;padding:0;border:none;background:none;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.sidebar-fold:hover{color:var(--text-primary)}
.sidebar-fold svg{transition:transform var(--duration-fast) var(--ease-out)}
.sidebar-fold[aria-expanded="false"] svg{transform:rotate(-90deg)}
.sidebar-sections[hidden]{display:none}

/* Свёрнутый сайдбар: остаётся только иконка приложения (приёмка 27.08). Три
   одинаковых столбика иконок без подписей не сообщали ничего — а перейти в
   раздел мимо приложения всё равно некуда. Подсветку в этом состоянии берёт на
   себя строка приложения: `has-open-section` для случая «человек в разделе». */
.sidebar-collapsed .sidebar-sections,
.sidebar-collapsed .sidebar-fold{display:none}
.sidebar-collapsed .sidebar-row{border-left-width:0;border-radius:var(--radius-sm)}
.sidebar-collapsed .sidebar-row.has-open-section{background:var(--yellow-50)}
.sidebar-collapsed .sidebar-row.has-open-section .sidebar-item{color:var(--text-primary);font-weight:700}

/* Свёрнутый сайдбар: только иконки по центру */
.sidebar-collapsed .sidebar{width:var(--layout-sidebar-w-collapsed)}
.sidebar-collapsed .sidebar-group .u-label{display:none}
.sidebar-collapsed .sidebar-group{padding:10px 0 0}
.sidebar-collapsed .sidebar-list{padding-right:0}
.sidebar-collapsed .sidebar-item{justify-content:center;padding:0;border-left-width:0;border-radius:var(--radius-sm)}
.sidebar-collapsed .sidebar-item span{display:none}
.sidebar-collapsed .sidebar-footer{flex-direction:column;padding:12px 0}
.sidebar-collapsed .sidebar-user{display:none}
.sidebar-collapsed #icon-collapse{display:none}
html:not(.sidebar-collapsed) #icon-expand{display:none}

.content{flex:1;min-width:0;padding:32px 40px;overflow-y:auto}
/* Центрирование, а не прижим влево: при сворачивании сайдбара освободившаяся
   ширина делится на оба поля, иначе справа остаётся пустой рукав. */
.content-inner{max-width:var(--layout-content-max);margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* --- Заголовок страницы -------------------------------------------------------- */

.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.page-header-text{display:flex;flex-direction:column;gap:4px}
/* Хлебные крошки. Отдельного компонента в дизайн-системе нет: до второго
   уровня разделов он был не нужен. Живут здесь, а не в стилях одного экрана, —
   их рисуют и сводная, и нейрочат. Разделитель — обычный текст, а не
   псевдоэлемент: так его находит поиск по странице и не теряет копирование. */
.crumbs{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-body-sm-size);color:var(--text-secondary)}
.crumbs a{color:var(--text-link)}
.crumbs-sep{color:var(--text-muted)}

/* Заголовок и бейдж рядом. Без этого бейдж уезжал во второй слот .page-header
   и вставал у правого края экрана — на широком мониторе он оказывался в метре
   от заголовка, к которому относится (снимок приёмки 27.08). */
.title-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.page-subtitle{color:var(--text-secondary)}
.request-wrap{position:relative}
.request-note{position:absolute;top:calc(100% + 8px);right:0;padding:8px 12px;background:var(--surface-inverse);color:var(--text-inverse);font-size:var(--text-body-sm-size);border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md);display:none}
.request-wrap.show-note .request-note{display:block}

/* --- Панель вкладок и вида ------------------------------------------------------ */

.catalog-toolbar{display:flex;align-items:flex-end;gap:24px}
.catalog-toolbar .tabs{flex:1;min-width:0}
.toolbar-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-bottom:10px}
.view-switch{display:flex;gap:2px;padding:2px;background:var(--surface-sunken);border-radius:var(--radius-sm)}

.tags-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tags-row .u-label{margin-right:8px;color:var(--text-muted)}

/* --- Каталог: список ------------------------------------------------------------ */

.catalog-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden}
.catalog-row{display:grid;grid-template-columns:1fr 260px 150px 92px;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border-subtle);transition:background-color var(--duration-fast) var(--ease-out)}
.catalog-row:last-child{border-bottom:none}
.catalog-row:hover{background:var(--surface-hover)}
.catalog-cols{display:grid;grid-template-columns:1fr 260px 150px 92px;align-items:center;gap:16px;padding:10px 20px;background:var(--grey-25);border-bottom:1px solid var(--border-default)}
.catalog-cols .u-label{color:var(--text-secondary)}
.catalog-head{padding:10px 20px;background:var(--grey-25);border-bottom:1px solid var(--border-default)}
.catalog-head .u-label{color:var(--text-secondary)}
.catalog-head.section{border-bottom-color:var(--border-subtle)}
.catalog-head.section .u-label{color:var(--text-muted)}
.catalog-row.planned{opacity:.72}
.service-cell{display:flex;align-items:center;gap:12px;min-width:0}
.service-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.service-title{display:flex;align-items:center;gap:8px}
.service-title .name{font-size:var(--text-body-size);font-weight:700}
.service-desc{font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text-secondary)}
.service-author{font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text-muted)}
.service-tags{display:flex;flex-wrap:wrap;gap:6px}
.service-tags .tag{cursor:default}
.service-tags .tag:hover{border-color:var(--border-default);color:var(--text-secondary)}
.service-count{font-size:var(--text-body-sm-size);color:var(--text-muted)}
.service-access{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--grey-400)}
.star-btn.faved{color:var(--amber-500)}
.star-btn.faved svg{fill:var(--yellow-400);color:var(--yellow-600)}

/* --- Каталог: сетка -------------------------------------------------------------- */

.catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:1100px){.catalog-grid{grid-template-columns:1fr}}
/* «Жест» дизайн-системы — единственный в ней: плитка сервиса при наведении
   поднимается на 1px и заливает жёлтым плашку иконки. Он описан в системе для
   плиток сервисов вообще; до 27.08 в CSS его не было, а потом он появился
   только у новых плиток-разделов — и первый экран стал вести себя иначе, чем
   экран приложения. Приёмка это и заметила: теперь правило одно на обе плитки.

   Плиток «планируется» жест не касается: там кликать нечего, а подъём обещал бы
   переход. */
.grid-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.grid-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.grid-card:not(.planned):hover{transform:translateY(-1px)}
.grid-card:not(.planned):hover .name{text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:2px}
.grid-card:not(.planned):hover .app-icon{background:var(--yellow-400);border-color:var(--yellow-400)}
.grid-card .app-icon{transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.grid-card.planned{opacity:.72}
.grid-card.planned:hover{border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.grid-card-top{display:flex;align-items:flex-start;gap:12px}
.grid-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.grid-card-title{display:flex;align-items:center;gap:8px}
.grid-card-title .name{font-size:var(--text-h3-size);line-height:var(--text-h3-lh);font-weight:700}
/* Под описание заложены ДВЕ строки, даже если сейчас оно в одну (приёмка
   27.08). Иначе плитки рядом расходятся: у соседа описание переносится, и
   серая приписка с тегами у него уезжает вниз — глазом строки уже не
   сопоставить. Это floor, а не потолок: описание длиннее двух строк не
   обрезается, а раздвигает плитку. */
.grid-card-desc{min-height:calc(var(--text-body-sm-lh) * 2);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text-secondary);text-wrap:pretty}
.grid-card-access{display:flex;align-items:center;gap:6px;flex:0 0 auto;color:var(--grey-400)}

/* Кликается вся плитка и вся строка, а не только имя — так же, как на экране
   приложения. Ссылку растягиваем псевдоэлементом, а не оборачиваем карточку в
   <a>: внутри живёт кнопка «в избранное», а кнопка внутри ссылки — неверная
   разметка, и звёздочка перестала бы нажиматься. Ей и замку хватает своего
   слоя (z-index), чтобы остаться поверх растянутой ссылки. */
.catalog-row,.grid-card{position:relative}
.catalog-row .service-title .name::after,
.grid-card-title .name::after{content:"";position:absolute;inset:0;z-index:0}
.service-access,.grid-card-access{position:relative;z-index:1}
/* Подчёркивание с растянутого имени снимаем: жёлтая линия из base.css иначе
   рисуется под всей карточкой. Возвращается только при наведении, правилами
   выше. */
.catalog-row .service-title .name,.grid-card-title .name{text-decoration:none}
.catalog-row:not(.planned):hover .service-title .name{text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:2px}
.catalog-row:not(.planned):hover .app-icon{background:var(--yellow-400);border-color:var(--yellow-400)}
.catalog-row .app-icon{transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
/* Строка раздела на экране приложения — список из тех же данных, что плитка.
   Колонок первого экрана («Запусков», «Доступ») здесь нет намеренно: запуски мы
   не считаем, роль одна, и две пустые колонки на двух строках выглядели бы как
   недоделанная таблица. Осталось то, что различает разделы: имя и теги. */
.section-cols,.section-row{display:grid;grid-template-columns:1fr 260px;align-items:center;gap:16px;padding:14px 20px}
.section-cols{padding:10px 20px;background:var(--grey-25);border-bottom:1px solid var(--border-default)}
.section-cols .u-label{color:var(--text-secondary)}
.section-row{border-bottom:1px solid var(--border-subtle);text-decoration:none;color:var(--text-primary);transition:background-color var(--duration-fast) var(--ease-out)}
.section-row:last-child{border-bottom:none}
.section-row:hover{background:var(--surface-hover);color:var(--text-primary)}
.section-row:hover .name{text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:2px}
.section-row:hover .app-icon{background:var(--yellow-400);border-color:var(--yellow-400)}
.section-row .app-icon{transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
@media (max-width:1100px){.section-cols,.section-row{grid-template-columns:1fr}.section-cols{display:none}}

/* Плитка-раздел — та же плитка, целиком ссылка. Жест и подчёркивание берёт из
   общих правил выше; здесь снимается только жёлтая линия base.css, которая
   иначе прошла бы под всей карточкой. */
a.grid-card{text-decoration:none;color:var(--text-primary)}
a.grid-card:hover{color:var(--text-primary)}
.grid-card-meta{font-size:var(--text-caption-size);line-height:var(--text-caption-lh);color:var(--text-muted)}

.planned-divider{display:flex;align-items:center;gap:12px}
.planned-divider::after{content:"";flex:1;height:1px;background:var(--border-default)}

.catalog-list,.catalog-grid-wrap{display:none}
.view-list .catalog-list{display:block}
.view-grid .catalog-grid-wrap{display:flex;flex-direction:column;gap:24px}

.hidden{display:none !important}

/* Название сервиса-ссылки (запись каталога с href) выглядит как название, а не
   как ссылка: базовые стили дают жёлтое подчёркивание, а жёлтый на экране один —
   у кнопки «Запросить сервис». Подчёркивание возвращается по наведению. */
a.name{color:inherit;text-decoration:none}
a.name:hover{text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px}

/* --- Вход: шаг кода из письма (макет «LoginScreen — Код из письма») --------------- */

.code-body{padding:32px;display:flex;flex-direction:column;gap:20px}
.code-body h2{margin-bottom:6px}
.code-form{display:flex;flex-direction:column;gap:20px}
.code-cells{display:flex;gap:8px}
.code-cell{width:40px;height:44px;text-align:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);transition:var(--transition-control)}
.code-cell:hover{border-color:var(--border-strong)}
.code-cell:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.code-cells.invalid .code-cell{border-color:var(--status-danger-dot)}
.code-cell:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
.code-lock{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-sm);background:var(--status-danger-bg);color:var(--status-danger-fg);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh)}
.code-lock svg{flex:none}
.code-actions{font-variant-numeric:tabular-nums}
.login-link{padding:0;border:0;background:none;font:inherit;font-size:var(--text-body-sm-size);color:var(--text-link);text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:2px;cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}
.login-link:hover{color:var(--text-link-hover);text-decoration-color:var(--yellow-600)}
.login-link:disabled{color:var(--text-muted);text-decoration:none;cursor:default}

/* --- Страницы отказов: 404/403/500 в оболочке кабинета (заявка №3) ----------- */

.error-page{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:560px;padding:48px 0}
.error-page h1{font-size:var(--text-h1-size);line-height:var(--text-h1-lh);font-weight:var(--text-h1-weight);letter-spacing:var(--text-h1-ls)}
.error-text{color:var(--text-secondary);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
.error-page .btn{margin-top:8px}
.error-request-id{color:var(--text-muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh)}

/* --- Телефон и планшет (план 0061, сессия mobile-shell) ------------------------
   Переломы 700/1100 — комментарий в tokens/spacing.css. Настольный вид эти
   правила не трогают: всё ниже живёт внутри @media. До 13.09.2026 ниже 960px
   правил не было вовсе: при окне 344px страница просила 502px (шапка), а меню
   248px не сжималось (снимки в журнале mobile-plan). */

.nav-toggle,.topbar-search-btn,.nav-backdrop{display:none}

@media (max-width:1100px){
  .content{padding:24px}
  /* Список сервисов: колонки 260/150/92 на 800px переносили описание по одному
     слову. Ниже перелома строка складывается в две: сервис и доступ сверху,
     теги под ними; «Запусков» здесь не показывается — мы их не считаем. */
  .catalog-cols{display:none}
  .catalog-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cell access" "tags tags";gap:10px 12px;padding:12px 16px}
  .service-cell{grid-area:cell}
  .service-tags{grid-area:tags}
  .service-count{display:none}
  .service-access{grid-area:access}
  /* Имя сервиса и бейдж «Пилот» в одну строку на 230px не влезают — бейдж
     переносится под имя (замер mobile-shots на 344px: 235>230). */
  .service-title{flex-wrap:wrap}
}

@media (max-width:700px){
  /* Шапка: остаются кнопка панели, логотип, поиск-иконка и две кнопки справа.
     Имя хоста, разделитель и версия на 344px не помещаются. */
  .topbar{position:relative;padding:0 8px;gap:8px}
  .topbar-home{margin-left:0}
  .topbar-sep,.topbar-host,.topbar-version,#sidebar-toggle{display:none}
  .nav-toggle,.topbar-search-btn{display:inline-flex}
  .topbar-right{margin-left:auto;gap:0}
  /* Поиск по сервисам раскрывается строкой под шапкой по кнопке (app.js). */
  .topbar-search{display:none;position:absolute;left:0;right:0;top:100%;width:auto;margin:0;padding:8px 12px;background:var(--surface-card);border-bottom:1px solid var(--border-default);z-index:25}
  html.search-open .topbar-search{display:flex}
  /* Меню — выдвижная панель поверх страницы: тот же сайдбар, то же содержимое.
     Свёрнутого состояния на телефоне нет (base.html снимает класс до отрисовки,
     app.js — при смене ширины), панель всегда с подписями. */
  .sidebar{position:fixed;top:var(--layout-topbar-h);bottom:0;left:0;width:280px;max-width:85vw;z-index:30;transform:translateX(-100%);transition:transform var(--duration-base) var(--ease-out);overflow-y:auto}
  html.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .nav-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--layout-topbar-h);z-index:29;background:rgba(20,21,23,.35)}
  html.nav-open .nav-backdrop{display:block}
  .content{padding:16px 16px 24px}
  .content-inner{gap:16px}
  .page-header{gap:12px}
  /* Панель вкладок и вида: в столбик, вкладки прокручиваются вбок при нужде. */
  .catalog-toolbar{flex-direction:column;align-items:stretch;gap:12px}
  .catalog-toolbar .tabs{overflow-x:auto;gap:16px}
  .catalog-toolbar .tab{white-space:nowrap}
  .toolbar-controls{padding-bottom:0}
  .toolbar-controls .select{flex:1;min-width:0}
  .error-page{padding:24px 0}
  /* Вход: поля 40px по краям съедали 80 из 344; ячейки кода 6×40+5×8=280px
     в карточку не влезали — теперь делят ширину поровну. width:0, а не auto:
     у поля «естественная» ширина — 20 знаков, и с auto колонка 1fr сетки
     входа считала минимум по ней — карточка вырастала до 1846px, кнопка
     «Войти» уезжала за экран (поймано инструментом mobile-shots 13.09). */
  .login-page{padding:24px 16px}
  .login-form,.code-body{padding:24px 20px}
  .code-cells .code-cell{flex:1 1 0;min-width:0;width:0}
}

@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none}
  .login-arc{animation:none}
}