/*
 * Общая обвязка сайта — шапка, кнопки, док и дизайн-токены главной.
 * Подключается на КАЖДОЙ странице (при HOME_REDESIGN=true), а home-redesign.css
 * добавляет поверх только то, что нужно самой главной. Всё пространство имён
 * префиксовано `hx-`, токены объявлены на `.hx`, чтобы не пересекаться со
 * style.min.css / modern-theme.css.
 */

/* Токены объявлены и на body: белая карточка содержимого живёт в обычном
   .container вне .hx, и без этого var() в ней оказывался недействительным. */
/*
 * «Бумага и линии».
 *
 * Ни одной цветной заливки на больших плоскостях: лист — светло-серый
 * (L* 97), контейнеры и плитки — белая бумага с чёткой рамкой (--hx-line-2),
 * тонкие линии таблиц — --hx-line. Цвет остаётся только у смысла: иконки
 * доменов, акцент на действиях, статусы. Иерархия — размером шрифта и воздухом,
 * а не тенями: у карточек их нет, лёгкая тень только у плавающих элементов
 * (док, подсказки).
 */
.hx,
body.hx-chrome {
    --hx-paper: #F7F8FA;
    --hx-sheet: #FFFFFF;
    --hx-sheet-2: #F4F6FA;
    --hx-surface: #FFFFFF;
    --hx-glass: rgba(247, 248, 250, .86);
    --hx-card-glass: rgba(255, 255, 255, .94);
    --hx-ink: #101828;
    --hx-ink-2: #4A5568;
    --hx-ink-3: #6B7690;
    --hx-line: #E1E6EE;
    --hx-line-2: #C9D3E0;
    --hx-brand: #143254;
    --hx-brand-2: #24457A;
    --hx-brand-soft: #E5EAF3;

    /* Шрифты и скругления; скругления контейнеров главной переопределяет site-deep.css. */
    --hx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hx-font-head: var(--hx-font);
    --hx-font-ui: var(--hx-font);
    --hx-r-card: 30px;
    --hx-r-content: 16px;
    --hx-r-tile: 16px;
    --hx-r-ic: 14px;
    --hx-r-btn: 999px;
    --hx-r-field: 8px;
    --hx-r-dock: 18px;
    --hx-r-row: 10px;

    --hx-reg: #3B82F6;
    --hx-reg-soft: #EAF1FD;
    --hx-eval: #14A6A0;
    --hx-eval-soft: #E3F4F0;
    --hx-calc: #C97A1A;
    --hx-calc-soft: #FCF2E0;
    --hx-arch: #8B5CF6;
    --hx-arch-soft: #F1EAFC;

    /* Метка-закладка на вкладке «Меню»: единственный красный в обвязке, поэтому и заметен. */
    --hx-mark: #FF4D63;
    --hx-mark-glow: rgba(255, 77, 99, .55);

    --hx-dot: rgba(46, 98, 212, .16);
    --hx-ring: rgba(46, 98, 212, .13);
    --hx-aurora-1: rgba(59, 123, 238, .10);
    --hx-aurora-2: rgba(123, 69, 201, .08);
    --hx-aurora-3: rgba(14, 138, 114, .07);

    --hx-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
    --hx-sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -14px rgba(16, 24, 40, .22);
    --hx-sh-3: 0 4px 10px rgba(15, 26, 43, .06), 0 26px 56px -26px rgba(20, 50, 84, .38);

    --hx-mono: var(--hx-font); /* был моноширинный — единый шрифт портала */

    --hx-d-fast: 150ms;
    --hx-d: 280ms;
    --hx-e-out: cubic-bezier(.2, .8, .2, 1);
    --hx-net: 110,140,195; /* rgb сети сферы; у стилей — свой */
}

.hx {
    display: block;
    background: var(--hx-paper);
    color: var(--hx-ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.hx *,
.hx *::before,
.hx *::after {
    box-sizing: border-box;
}

/* Шрифт стиля — на всей обвязке и на содержимом внутренних страниц. */
.hx,
body.hx-chrome,
body.hx-chrome .body-wrapper > main { font-family: var(--hx-font); }

.hx h1, .hx h2, .hx h3,
body.hx-chrome .body-wrapper > main h1,
body.hx-chrome .body-wrapper > main h2 { font-family: var(--hx-font-head); }

.hx [hidden] {
    display: none !important;
}

/*
 * style.min.css красит ВСЕ <button> как большие синие кнопки формы
 * (min-width: 238px, padding: 15px, :hover → #012546, :active → #1f1f1f).
 * Сбрасываем это для кнопок главной; каждая кнопка ниже задаёт свой вид сама,
 * а состояния наведения/нажатия — с запасом специфичности, чтобы перебить
 * глобальные `button:hover` / `button:active`.
 */
.hx button {
    min-width: 0;
    line-height: inherit;
}

.hx button:focus-visible {
    outline: 2px solid var(--hx-brand);
    outline-offset: 2px;
}

/* Текст только для скринридеров: сообщает о смене содержимого контейнера. */
.hx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * style.min.css задаёт глобальное `a { font-weight: 700; color: … }`, поэтому
 * сбрасываем начертание здесь: элементы, которым нужен жирный, ставят его сами.
 */
.hx a {
    color: var(--hx-brand);
    font-weight: 400;
    text-decoration: none;
    transition: color var(--hx-d-fast) var(--hx-e-out);
}

.hx a:hover {
    color: var(--hx-brand-2);
}

.hx-ic {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.hx-label {
    font-family: var(--hx-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4B5563;
    line-height: 1.2;
}

.hx-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ─────────────────────────── Стекло ─────────────────────────── */

/*
 * Один и тот же «стеклянный» слой у карточки героя, панели модулей и карточек
 * реестра ИС: полупрозрачная заливка, сильное размытие фона, световой блик по
 * верхней кромке и мягкая тень — как у панелей macOS.
 */
/*
 * Матовое стекло: фон сильно размыт и просвечивает сквозь белую полупрозрачную
 * заливку, рамка — тонкая светлая, тень мягкая и далёкая.
 */
.hx-glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .80) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--hx-line-2);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16, 24, 40, .04);
}

/* ─────────────────────────── Шапка главной ─────────────────────────── */

.hx-top {
    position: relative;
    z-index: 40;
    background: var(--hx-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hx-line);
}

/*
 * Поля шапки и подвала — статичные, одинаковые на всех страницах и с обеих сторон:
 * как у стандартного контейнера содержимого (.container 1300px по центру, поле 20px,
 * на страницах с вкладкой «Меню» — 36px, как у main). Образец владельца —
 * /accounting/iss и /gov-functions-registry.
 */
body.hx-chrome { --hx-page-w: 1300px; --hx-page-gap: 20px; }
body.hx-chrome.has-menu { --hx-page-gap: 36px; }
body.hx-chrome {
    --hx-edge-l: max(var(--hx-page-gap), calc((100% - var(--hx-page-w)) / 2));
    --hx-edge-r: var(--hx-edge-l);
}

.hx-top__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    margin: 0;
    padding: 10px var(--hx-edge-r, 20px) 10px var(--hx-edge-l, 20px);
}

.hx .hx-top__mark,
.hx .hx-top__mark:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hx-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

.hx-top__logo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hx-brand-2), var(--hx-brand));
    color: #fff;
}

.hx-top__logo svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.hx-top__name {
    font-size: 15px;
    line-height: 1.2;
}

.hx-top__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.hx .hx-top__link {
    padding: 8px 4px;
    color: var(--hx-ink-2);
    font-size: 13px;
    font-weight: 600;
}

.hx .hx-top__link:hover { color: var(--hx-brand); }

.hx-top__jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: var(--hx-sheet);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-ink-2);
    cursor: pointer;
    transition: border-color var(--hx-d-fast) var(--hx-e-out), color var(--hx-d-fast) var(--hx-e-out);
}

.hx .hx-top__jump:hover,
.hx .hx-top__jump:active {
    background: var(--hx-sheet);
    border-color: var(--hx-brand);
    color: var(--hx-brand);
}

.hx-top__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: var(--hx-sheet);
    color: var(--hx-ink-2);
}

.hx .hx-top__icon:hover {
    border-color: var(--hx-brand);
    color: var(--hx-brand);
}

.hx-top__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border: 2px solid var(--hx-paper);
    border-radius: 999px;
    background: #E2574C;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.hx-top__user { position: relative; }

.hx-top__userbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 12px 0 4px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: var(--hx-sheet);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-ink);
    cursor: pointer;
}

.hx .hx-top__userbtn:hover,
.hx .hx-top__userbtn:active,
.hx .hx-top__userbtn[aria-expanded="true"] {
    background: var(--hx-sheet);
    border-color: var(--hx-brand);
    color: var(--hx-ink);
}

.hx-top__avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--hx-brand-soft);
    color: var(--hx-brand);
    font-size: 12px;
    font-weight: 700;
}

.hx-top__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--hx-line);
    border-radius: 14px;
    background: var(--hx-sheet);
    box-shadow: var(--hx-sh-2);
}

.hx .hx-top__menu a {
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--hx-ink-2);
    font-size: 13px;
    font-weight: 600;
}

.hx .hx-top__menu a:hover {
    background: var(--hx-sheet-2);
    color: var(--hx-brand);
}

/* Переключатель языка — собственный, чтобы не зависеть от стилей тёмной шапки. */
.hx-top__lang {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: var(--hx-sheet);
}

.hx .hx-top__lang-item {
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--hx-ink-3);
    font-family: var(--hx-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.hx .hx-top__lang-item:hover { color: var(--hx-ink); }

.hx .hx-top__lang-item.is-on {
    background: var(--hx-brand);
    color: #fff;
}

/* Вход и регистрация гостя — жирные, как подписи языков рядом. */
.hx .hx-top__auth { font-weight: 800; }

/* ─────────────────────────── Кнопки ─────────────────────────── */

.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--hx-r-btn);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--hx-d-fast) var(--hx-e-out),
                color var(--hx-d-fast) var(--hx-e-out),
                border-color var(--hx-d-fast) var(--hx-e-out),
                box-shadow var(--hx-d) var(--hx-e-out);
}

/* Двойной класс — чтобы перебить общее `.hx a { color: … }` выше по файлу. */
.hx .hx-btn--solid {
    background: var(--hx-brand);
    color: #fff;
}

.hx .hx-btn--solid:hover {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: var(--hx-sh-3);
}

.hx .hx-btn--ghost {
    background: var(--hx-card-glass);
    border-color: var(--hx-line-2);
    color: var(--hx-ink-2);
}

.hx .hx-btn--ghost:hover {
    border-color: var(--hx-brand);
    color: var(--hx-brand);
}

.hx-btn--sm {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
}

/*
 * Лист страницы и белая карточка содержимого.
 *
 * Внутренние страницы своего фона не задавали и показывали чисто белый лист
 * браузера: во весь экран он бьёт по глазам, а вкладки, поля и таблицы на нём не
 * читались как отдельные поверхности — белое на белом. Фон приглушён, а само
 * содержимое собрано в белую карточку с тенью, поэтому у страницы появляется
 * глубина: лист под ней, карточка над ним.
 *
 * Карточка вешается на прямого потомка <main>, а не на любой .container: тот же
 * класс встречается в шапке, подвале и внутри блоков главной, и они белыми
 * плитами быть не должны.
 *
 * Тон берётся из --hx-paper, поэтому у обеих половин обвязки он один.
 */
body.hx-chrome { background: var(--hx-paper); }

body.hx-chrome .body-wrapper > main > .container,
body.hx-chrome .body-wrapper > main > .container_medium,
body.hx-chrome .body-wrapper > main > .container_large {
    padding: 28px 36px 40px;
    border: 1px solid var(--hx-line-2);
    border-radius: var(--hx-r-content);
    background: var(--hx-sheet);
    box-shadow: none;
}

/* Заголовок страницы — плотнее набран: иерархия здесь держится на размере. */
body.hx-chrome .body-wrapper > main > .container h1 { letter-spacing: -.025em; }

/* Отступ от шапки и между карточками, если их на странице несколько. */
body.hx-chrome .body-wrapper > main > .container,
body.hx-chrome .body-wrapper > main > .container_medium,
body.hx-chrome .body-wrapper > main > .container_large { margin-top: 28px; margin-bottom: 32px; }

/* Хлебные крошки — первая строка карточки, с воздухом от края и до заголовка. */
body.hx-chrome .body-wrapper > main > .container > .breadcrumbs {
    margin: 0 0 18px;
    padding: 0;
}

/*
 * Вкладки — «сегменты» (08.10).
 *
 * Вкладки стоят в светло-серой дорожке, выбранная — белая приподнятая плашка.
 * Цвет статуса — только точкой перед названием, число — серым через тонкую
 * черту: «Опубликованные | 294». Заливок цветом и цветных кружков нет.
 *
 * Дорожку рисуют сами вкладки, а не <nav>: в панели бывают и другие элементы
 * (кнопка «Создать» .tabs__button справа, сброс фильтра, кнопки комментариев),
 * они остаются снаружи. Первая и последняя вкладка скругляют края дорожки,
 * плашка выбранной — псевдоэлемент ::before под текстом.
 */
body.hx-chrome .body-wrapper > main .tabs,
body.hx-chrome .np__tabs,
body.hx-chrome .gf__tabs,
body.hx-chrome .questions__view-tabs {
    --hx-track: #EEF1F6;
    --hx-track-line: #E3E8F0;
}

body.hx-chrome .body-wrapper > main .tabs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    margin: 28px 0 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Вкладки карточек (.is-tabs) раньше растягивались по ширине (space-between) — теперь в одну линию слева, как остальные. */
body.hx-chrome .body-wrapper > main .is-tabs { justify-content: flex-start; }

body.hx-chrome .body-wrapper > main .tabs__link {
    position: relative;
    isolation: isolate;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid var(--hx-track-line);
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
    background: var(--hx-track);
    box-shadow: none;
    color: var(--hx-ink-2);
    font-weight: 600;
    line-height: 20px;
    transition: color var(--hx-d-fast) var(--hx-e-out);
}

/* Плашка вкладки: прозрачная, при наведении — полупрозрачная, у выбранной — белая с тенью. */
body.hx-chrome .body-wrapper > main .tabs__link::before {
    content: "";
    position: absolute;
    inset: 3px 2px;
    z-index: -1;
    border-radius: 10px;
    background: transparent;
    transition: background-color var(--hx-d-fast) var(--hx-e-out), box-shadow var(--hx-d-fast) var(--hx-e-out);
}

/* Края дорожки: первая вкладка панели и последняя (дальше вкладок нет — только кнопки). */
body.hx-chrome .body-wrapper > main .tabs__link:not(.tabs__link ~ .tabs__link) {
    border-left-width: 1px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

body.hx-chrome .body-wrapper > main .tabs__link:not(:has(~ .tabs__link)) {
    border-right-width: 1px;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

body.hx-chrome .body-wrapper > main .tabs__link:hover {
    background: var(--hx-track);
    box-shadow: none;
    color: var(--hx-ink);
}

body.hx-chrome .body-wrapper > main .tabs__link:hover::before { background: rgba(255, 255, 255, .6); }

body.hx-chrome .body-wrapper > main .tabs__link_active,
body.hx-chrome .body-wrapper > main .tabs__link_active:hover {
    background: var(--hx-track);
    box-shadow: none;
    color: var(--hx-ink);
}

body.hx-chrome .body-wrapper > main .tabs__link_active::before,
body.hx-chrome .body-wrapper > main .tabs__link_active:hover::before {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 3px 10px -4px rgba(16, 24, 40, .16);
}

body.hx-chrome .body-wrapper > main .tabs__link:focus-visible { outline: none; }
body.hx-chrome .body-wrapper > main .tabs__link:focus-visible::before { box-shadow: 0 0 0 2px var(--p-primary, #2563eb); }

/*
 * Счётчик вкладки — серое число после названия (order), отделённое тонкой чертой.
 * Цвет статуса шаблоны задают инлайном (style="background: …"), у вкладок
 * карточки ИС ещё и белый текст (color: #fff). У самой цифры фон не рисуется:
 * поле содержимого нулевой высоты, фон обрезан по нему, строка текста выступает
 * в нижний отступ. Зато цвет наследует точка ::before слева от названия,
 * поэтому дублировать палитру статусов в CSS не нужно.
 */
body.hx-chrome .body-wrapper > main .tabs__num {
    order: 2;
    box-sizing: content-box;
    height: 0;
    min-width: 0;
    padding: 0 0 20px 9px;
    border-radius: 0;
    background-clip: content-box !important;
    box-shadow: inset 1px 0 0 var(--hx-line-2);
    color: var(--hx-ink-3) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

body.hx-chrome .body-wrapper > main .tabs__link_active .tabs__num { color: var(--hx-ink-2) !important; }

body.hx-chrome .body-wrapper > main .tabs__link:has(.tabs__num[style*="background"]) { padding-left: 30px; }

body.hx-chrome .body-wrapper > main .tabs__num[style*="background"]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background-color: inherit;
}

/* На узком экране дорожка рвалась бы при переносе — каждая вкладка становится отдельным сегментом. */
@media (max-width: 759px) {
    body.hx-chrome .body-wrapper > main .tabs { gap: 6px; }

    body.hx-chrome .body-wrapper > main .tabs__link,
    body.hx-chrome .body-wrapper > main .tabs__link:not(.tabs__link ~ .tabs__link),
    body.hx-chrome .body-wrapper > main .tabs__link:not(:has(~ .tabs__link)) {
        border-width: 1px;
        border-radius: 12px;
    }

    body.hx-chrome .body-wrapper > main .tabs__link::before { inset: 3px; border-radius: 9px; }
}

/*
 * Те же сегменты — в модулях со своими классами: нацпланы и сводные отчёты
 * (.np__tabs), гос. функции (.gf__tabs), вопросы (.questions__view-tabs).
 * В этих панелях только вкладки, поэтому дорожка — сам контейнер.
 */
body.hx-chrome .np__tabs,
body.hx-chrome .gf__tabs,
body.hx-chrome .questions__view-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    background: var(--hx-track);
    border: 1px solid var(--hx-track-line);
    border-radius: 14px;
    box-shadow: none;
}

body.hx-chrome .np__tab,
body.hx-chrome .gf__tab,
body.hx-chrome .questions__view-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--hx-ink-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--hx-d-fast) var(--hx-e-out), background-color var(--hx-d-fast) var(--hx-e-out), box-shadow var(--hx-d-fast) var(--hx-e-out);
}

body.hx-chrome .np__tab:hover,
body.hx-chrome .gf__tab:hover,
body.hx-chrome .questions__view-tab:hover {
    background: rgba(255, 255, 255, .6);
    box-shadow: none;
    color: var(--hx-ink);
}

body.hx-chrome .np__tab--active,
body.hx-chrome .np__tab--active:hover,
body.hx-chrome .gf__tab--active,
body.hx-chrome .gf__tab--active:hover,
body.hx-chrome .questions__view-tab_active,
body.hx-chrome .questions__view-tab_active:hover {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 3px 10px -4px rgba(16, 24, 40, .16);
    color: var(--hx-ink);
    font-weight: 600;
}

/* Кнопка «Создать» в панели вкладок — по центру строки, без старого отступа под линию. */
body.hx-chrome .body-wrapper > main .tabs > .tabs__button { margin-top: 0; margin-bottom: 0; }

body.hx-chrome .body-wrapper > main .tabs__button,
body.hx-chrome .body-wrapper > main .tabs__button:hover { background: var(--p-primary, #2563eb); color: #fff; border: 0; border-radius: var(--p-r, 8px); font-family: var(--hx-font); font-weight: 600; box-shadow: none; transition: transform var(--hx-d) var(--hx-e-out), box-shadow var(--hx-d) var(--hx-e-out), filter var(--hx-d-fast) var(--hx-e-out); }
body.hx-chrome .body-wrapper > main .tabs__button { margin-bottom: 8px; }
body.hx-chrome .body-wrapper > main .tabs__button:hover { background: var(--p-primary-hover, #1d4ed8); box-shadow: var(--hx-sh-3); }
body.hx-chrome .body-wrapper > main .tabs__button:active { transform: translateY(1px) scale(.985); }

/*
 * Списки (.table): шапка без заливки, строки без рамок.
 *
 * Названия колонок были бледно-серыми (#B5BBCA, контраст 1.9:1) и почти не
 * читались; синяя заливка шапки (04.10) оказалась слишком яркой — теперь текст
 * чёрный жирный (var(--hx-ink), 700) на белом с линией под шапкой (07.10).
 * Строки без рамок и без зебры: их разделяет воздух, строка под курсором
 * подсвечивается. Ячейки красятся сами, потому что фон на <tr> при
 * border-spacing не заполняет зазоры. Таблицы с .table-bordered
 * (bootstrap-разметка) не трогаем — у них свои рамки ячеек.
 */
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) {
    border-collapse: separate;
    border-spacing: 0 2px;
}

/* Шапка без заливки: синяя (в цвет кнопки) владельцу показалась слишком яркой (06.10) —
   названия колонок на белом, под ними тонкая линия; с 07.10 — чёрные и жирные. */
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--hx-line-2);
    background: transparent;
    color: var(--hx-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}

body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th:first-child { border-radius: var(--hx-r-row) 0 0 var(--hx-r-row); }
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th:last-child { border-radius: 0 var(--hx-r-row) var(--hx-r-row) 0; }
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th:only-child { border-radius: var(--hx-r-row); }

body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th a,
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) th a:hover { color: inherit; }

body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody tr,
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody tr:nth-child(even) { background: transparent; }

/* Текст строк — чёрный: базовый .table из style.min.css красит его в бледный #727FA2
   (07.10 владелец: «текст в списке сделать чёрным»). Ссылки и статусы — своими цветами. */
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody td {
    border: 0;
    background: transparent;
    color: var(--hx-ink);
    transition: background-color var(--hx-d-fast) var(--hx-e-out);
}

body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody td:first-child { border-radius: var(--hx-r-row) 0 0 var(--hx-r-row); }
body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody td:last-child { border-radius: 0 var(--hx-r-row) var(--hx-r-row) 0; }

body.hx-chrome .body-wrapper > main .table:not(.table-bordered) tbody tr:hover td { background: var(--hx-sheet-2); }

/* Широкие списки (экспертиза, админка): таблица прокручивается внутри карточки, а не вылезает
   за её край (12.10 владелец: «на Экспертизе слетели стили» — у пользователя со всеми ролями
   в строке десяток колонок статусов). Бейджи статусов в таких таблицах переносятся по словам. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 100%; }
body.hx-chrome .body-wrapper > main .table_expertise .status {
    white-space: normal; line-height: 1.35; padding: 4px 8px; text-align: center;
}
/* У бейджей с иконкой (✓ / ✕ / часы / карандаш) иконка — фон слева: оставляем под неё поле,
   иначе при переносе текста иконка налезает на первую строку. */
body.hx-chrome .body-wrapper > main .table_expertise .status:is(.status_yes, .status_no, .status_wait, .status_edit) {
    padding-left: 26px; background-position: 9px 50%;
}
body.hx-chrome .body-wrapper > main .table_expertise td { vertical-align: middle; }

/* Поля ввода и списки — скругление и шрифт стиля; цвета оставляем прежними. */
body.hx-chrome .body-wrapper > main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.hx-chrome .body-wrapper > main select,
body.hx-chrome .body-wrapper > main textarea { border-radius: var(--hx-r-field); font-family: var(--hx-font); }

/* Панели фильтров — белые с рамкой, как поля ввода. */
body.hx-chrome .body-wrapper > main .datacatalog-filter { background: var(--hx-surface); }

/*
 * Боковое меню модулей со своим сайдбаром (каталог данных, реестр) и его
 * выпадающее подменю: белые по style.min.css. Рядом с белой карточкой они
 * сливались, на приглушённом листе светились полосой во всю высоту.
 */
body.hx-chrome .sidebar,
body.hx-chrome .sidebar__submenu { background: var(--hx-sheet); }

/*
 * Белый фон, зашитый прямо в разметку (style="background: white"), — он есть
 * в десятках шаблонов, перечислить их классами нельзя. Перебить инлайн можно
 * только !important; здесь белый остаётся белым (--hx-surface), правило нужно,
 * чтобы тон таких врезок менялся вместе с токеном, а не расползался по шаблонам.
 * Совпадение — по точной записи белого: «#fff;» и «#fff» в конце атрибута,
 * а не просто «#fff», иначе попались бы тонированные #fff5e6 / #fffbeb.
 */
body.hx-chrome .body-wrapper > main [style*="background: white" i],
body.hx-chrome .body-wrapper > main [style*="background:white" i],
body.hx-chrome .body-wrapper > main [style*="background-color: white" i],
body.hx-chrome .body-wrapper > main [style*="background-color:white" i],
body.hx-chrome .body-wrapper > main [style*="background: #fff;" i],
body.hx-chrome .body-wrapper > main [style*="background:#fff;" i],
body.hx-chrome .body-wrapper > main [style*="background-color: #fff;" i],
body.hx-chrome .body-wrapper > main [style*="background-color:#fff;" i],
body.hx-chrome .body-wrapper > main [style*="background: #ffffff" i],
body.hx-chrome .body-wrapper > main [style*="background:#ffffff" i],
body.hx-chrome .body-wrapper > main [style*="background-color: #ffffff" i],
body.hx-chrome .body-wrapper > main [style*="background-color:#ffffff" i],
body.hx-chrome .body-wrapper > main [style$="background: #fff" i],
body.hx-chrome .body-wrapper > main [style$="background:#fff" i],
body.hx-chrome .body-wrapper > main [style$="background-color: #fff" i],
body.hx-chrome .body-wrapper > main [style$="background-color:#fff" i] {
    background-color: var(--hx-surface) !important;
}

/* ─────────────────────────── Док (боковое меню) ─────────────────────────── */

/*
 * Модулей больше, чем влезает по высоте (site-chrome.js меряет): сначала плотный
 * режим, если и он не помог — прокрутка внутри дока. Увеличение и подпись работают
 * и здесь: иконка растёт вправо в пределах полей дока, подпись — снаружи.
 */

/*
 * Контент на страницах с доком отступает от левого края, пока экран узкий
 * (сайт делает так же для старого сайдбара через body.has-sidebar).
 * Порог возврата к центрированию = ширина контейнера + 2 × 86px.
 */

/*
 * Развёрнутый док: иконка + название строкой. Только на экранах от 1024px — на
 * более узких колонка названий съела бы слишком много ширины у самой страницы,
 * там док всегда свёрнут, а кнопки разворота нет.
 *
 * Контент сдвигается общей обёрткой <main>, а не отступом каждого контейнера:
 * так любой контейнер центрируется в оставшейся ширине и не заходит под док,
 * без отдельного порога под каждую ширину.
 */
@media (min-width: 1024px) {
        width: 236px;
        align-items: stretch;
        padding: 8px 8px 10px;
    }

    /*
     * Высота строки — минимальная, а не жёсткая: длинное название («Реинжиниринг
     * бизнес-процессов») переносится на вторую строку, а не режется многоточием.
     * Увеличения в развёрнутом доке нет, поэтому разная высота строк ему не мешает.
     */
        width: auto;
        height: auto;
        min-height: 40px;
        gap: 11px;
        padding: 4px 10px 4px 4px;
        transform: none;
    }

        width: auto;
        margin: 5px 8px;
        transform: none;
    }

        background: var(--hx-ds, var(--hx-brand-soft));
    }

        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: hidden;
        clip: auto;
        min-width: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
    }

}

/* Названия появляются вслед за раскрытием, а не вспыхивают разом. */
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {

}

/* Модульные сайдбары каталога/реестра и панель комментариев прижимались к старой шапке в 72px. */
body.hx-chrome .sidebar,
body.hx-chrome .comments { top: 64px; }

@media (max-width: 860px) {
    .hx-top__inner { padding: 10px 16px; gap: 10px; }

    .hx-top__name,
    .hx-top__link,
    .hx-top__username { display: none; }
}

@media (max-width: 759px) {

}

/*
 * Шапка — тёмно-синяя (#143254, образец владельца) на всех страницах: белый
 * текст, элементы управления — стекло на синем, активные — белые с синим текстом.
 * Выпадающие меню (.hx-top__menu) остаются светлыми.
 */
.hx-top { background: #143254; border-bottom: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hx-top.hx .hx-top__mark, .hx-top.hx .hx-top__mark:hover, .hx-top .hx-top__name { color: #fff; }
.hx-top .hx-top__logo { background: #fff; color: #143254; }
.hx-top.hx .hx-top__link { color: rgba(255, 255, 255, .8); }
.hx-top.hx .hx-top__link:hover { color: #fff; }
.hx-top .hx-top__lang { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.hx-top.hx .hx-top__lang-item { color: rgba(255, 255, 255, .75); }
.hx-top.hx .hx-top__lang-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.hx-top.hx .hx-top__lang-item.is-on, .hx-top.hx .hx-top__lang-item.is-on:hover { background: #fff; color: #143254; }
.hx-top.hx .hx-top__icon, .hx-top.hx .hx-top__userbtn, .hx-top.hx .hx-top__jump { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.hx-top.hx .hx-top__icon:hover, .hx-top.hx .hx-top__userbtn:hover, .hx-top.hx .hx-top__jump:hover,
.hx-top.hx .hx-top__userbtn[aria-expanded="true"], .hx-top.hx .hx-top__jump[aria-expanded="true"] { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }
.hx-top .hx-top__avatar { background: #fff; color: #143254; }
.hx-top.hx .hx-btn--solid, .hx-top.hx .hx-btn--solid:hover { background: #fff; color: #143254; box-shadow: none; }
.hx-top.hx .hx-btn--solid:hover { background: #EEF3FF; }
.hx-top.hx .hx-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.hx-top.hx .hx-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* Кнопка «наверх» — 46px, полупрозрачная тёмная: не спорит по весу с содержимым (в legacy — белый круг 70px). */
body.hx-chrome .right-buttons_floating .scroll-up,
body.hx-chrome .scroll-up { width: 46px; height: 46px; min-width: 46px; background: rgba(20, 50, 84, .82); border: 1px solid rgba(255, 255, 255, .25); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
body.hx-chrome .scroll-up:hover { background: rgba(20, 50, 84, .95); color: #fff; }
body.hx-chrome .scroll-up svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }

/*
 * Меню разделов на внутренних страницах: вкладка «Меню» и модальное окно с тем же
 * контейнером модулей, что на главной (стили контейнера — site-deep.css).
 * Вкладка — закладка у левого края экрана чуть ниже шапки: того же тёмно-синего
 * цвета, скруглена справа, красная лента по правому краю — чтобы вкладку замечали
 * сразу. Карточка содержимого на таких страницах начинается ниже закладки, поэтому
 * закладка не наезжает на её скруглённый угол. Владелец: форма — эта, место — у края
 * экрана, как было (вариант по краю карточки под логотипом ему не подошёл).
 */
.hx-menutab {
    position: fixed;
    left: 0;
    top: 72px; /* чуть ниже шапки (64px): владелец попросил небольшой отступ сверху */
    z-index: 55;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0 14px 0 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
    border-right: 4px solid var(--hx-mark);
    border-radius: 0 12px 12px 0;
    background: #143254;
    color: #fff;
    font-family: var(--hx-font);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: none;
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: background var(--hx-d-fast) var(--hx-e-out), transform var(--hx-d-fast) var(--hx-e-out);
}
.hx-menutab span { writing-mode: horizontal-tb; transform: none; white-space: nowrap; }
.hx-menutab svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* При наведении закладка чуть «вытягивается» из шапки. */
.hx-menutab:hover { background: #1E436E; transform: translateY(2px); }
.hx-menutab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ореола (дышащего свечения) у ленты больше нет: владелец счёл его слишком ярким (06.10). */

/* Карточка содержимого на страницах с закладкой начинается ниже: закладка (72–104px) её не касается. */
body.hx-chrome.has-menu .body-wrapper > main > .container,
body.hx-chrome.has-menu .body-wrapper > main > .container_medium,
body.hx-chrome.has-menu .body-wrapper > main > .container_large { margin-top: 48px; }

/*
 * Поля страницы с вкладкой «Меню»: слева место под вкладку, справа столько же — карточка
 * остаётся по центру. !important — у части страниц (уведомления и др.) padding задан inline.
 * Шапка на таких страницах получает те же поля, чтобы логотип и правая группа стояли вровень с карточкой.
 */
body.has-menu .body-wrapper > main { padding-left: 36px !important; padding-right: 36px !important; }

.hx-menu[hidden] { display: none; }
.hx-menu { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 36px 16px; overflow-y: auto; }
.hx-menu__backdrop { position: fixed; inset: 0; background: rgba(10, 22, 40, .58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hx-menu__dialog { position: relative; width: min(1400px, 100%); animation: hx-menu-in .28s var(--hx-e-out) both; }
/* Крестик стоит внутри контейнера, в строке поиска (отступы .hx-panel 40px/46px), а не поверх скруглённого угла. */
.hx-menu__close {
    position: absolute;
    top: 40px;
    right: 46px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0; /* старое правило .btn, button задаёт padding 15px и шрифт 20px — крестик уезжал из центра */
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}
.hx-menu__close svg { display: block; width: 18px; height: 18px; max-width: none; max-height: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hx-menu__close:hover { background: rgba(255, 255, 255, .24); }
.hx-menu__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hx-menu .hx-panel { max-height: calc(100vh - 72px); }
.hx-menu .hx-panel__head { padding-right: 60px; }
body.is-menu-open { overflow: hidden; }
@keyframes hx-menu-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
    /* На телефоне закладка уходит вниз, под большой палец, и становится пилюлей. */
    .hx-menutab { top: auto; bottom: 18px; left: 16px; height: 36px; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; }
    .hx-menutab:hover { transform: none; }
    body.hx-chrome.has-menu .body-wrapper > main > .container,
    body.hx-chrome.has-menu .body-wrapper > main > .container_medium,
    body.hx-chrome.has-menu .body-wrapper > main > .container_large { margin-top: 28px; }
    .hx-menu { padding: 12px; }
    .hx-menu__close { top: 8px; right: 8px; }
    body.has-menu .body-wrapper > main { padding-left: 0; }
}

/* ─────────────────────────── Подвал: контакты и права, на всех страницах ─────────────────────────── */

/* Подвал — той же ширины и с теми же боковыми полями, что шапка (.hx-top__inner): 1460px по центру, поля 20px. */
.hx-footer { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); background: #143254; color: #fff; }
.hx-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 40px;
    align-items: end;
    margin: 0;
    padding: 24px var(--hx-edge-r, 20px) 22px var(--hx-edge-l, 20px);
}
.hx-footer__brand { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hx-footer__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #143254; }
.hx-footer__logo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.hx-footer__contacts { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.hx-footer__contacts p { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.hx-footer__contacts svg { width: 17px; height: 17px; flex: none; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-footer a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.hx-footer a:hover, .hx-footer a:focus-visible { color: #fff; text-decoration-color: #fff; }
.hx-footer__rights { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .62); white-space: nowrap; }
@media (max-width: 720px) {
    .hx-footer__inner { grid-template-columns: 1fr; }
    .hx-footer__rights { white-space: normal; }
}

/* ─────────────────────────── Аудит 13.10.2026: системные правки ─────────────────────────── */

/*
 * S1. Широкие таблицы на телефоне прокручиваются по горизонтали внутри карточки,
 * а не обрезаются её краем (раньше терялись все колонки, кроме первой).
 */
@media (max-width: 860px) {
    body.hx-chrome main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.hx-chrome main .table-scroll > table { display: table; } /* обёртка уже прокручивает */
}

/*
 * S2. Плавающие кнопки — «Меню» слева внизу на телефоне и чат справа внизу —
 * не накрывают строку прав в подвале: справа под кнопку чата оставлено место,
 * на телефоне подвал получает нижний отступ под обе кнопки.
 */
.hx-footer__rights { padding-right: 104px; }
@media (max-width: 860px) {
    .hx-footer__inner { padding-bottom: 104px; }
    .hx-footer__rights { padding-right: 0; }
}

/*
 * S4. Пустое состояние «в разделе данных нет» — нейтральная плашка,
 * а не красная ошибка (.info-box-error остаётся для настоящих ошибок).
 */
.info-box-empty {
    position: relative;
    padding: 22px 24px;
    border: 1px dashed #C9D4E3;
    border-radius: 12px;
    background: #F6F8FB;
    color: #4B5B70;
    font-size: 15px;
    line-height: 1.5;
}
.info-box-empty b { color: #143254; font-weight: 600; }
@media (max-width: 860px) {
    .info-box-empty { padding: 14px 16px; font-size: 13.5px; }
}