/* human-shell.css – наше оформление общей шапки и подвала AIM на core-human.

   ИСКЛЮЧЕНИЕ из контракта AIM (MANDATORY_INSTRUCTIONS.md в корне репо): общие шапку и подвал меняют только ключи
   theme в aim-page.json. Кирилл (01.10): «набор ссылок проектный, оформление наше»; исключение он согласует с Сашей.
   Разрешено только оформление: шрифты, цвета, сетка, отступы, вид кнопки. Запрещено скрывать, переставлять и
   переписывать пункты родителя: логотип, «AI Mindset», меню, labs, столбцы подвала, «суть», строку made. Единственное
   скрытое – подменю AIM (.page-tabs) на десктопе с мышью: вместо него наша полоса разделов (.secnav, с 30.09).
   Кнопку шапки скрыть нельзя: проверка родителя (browser-check) требует ее на 390 px («mandatory content hidden», 02.10).
   position шапки не трогать: js/landing.js закрепляет героя по её sticky.

   Разметку, ссылки и мобильное меню рисует скрипт родителя (shell-bundle/assets/site/site-shell.js) внутри
   <aim-site-header page="human"> и <aim-site-footer page="human">, без Shadow DOM. Его стили встают перед </head>,
   после наших, и при равной специфичности побеждают. Поэтому каждый селектор начинается с :root:not(#_) – уровень ID
   перебивает классовые правила родителя; !important – только против его же !important (бренд).
   Классы родителя, на которые опирается файл, сверяет сборка (build.mjs, shellClassGuard): ушёл класс из пакета –
   сборка падает, и CI не примет новый пакет родителя молча.

   Роли текста – как у остальной страницы (js/type-roles.js): меню, ссылки подвала – надпись; заголовки столбцов и
   метки мобильного меню – бирка; кнопка – действие; «суть» и ссылки мобильного меню – текст; метка human – логотип. */

/* ── шапка: стекло, как у липкой кнопки (blocks.css, .stickycta) ── */
:root:not(#_) aim-site-header[page="human"] {
  --aim-shell-top: var(--l-topbar-h);
  --aim-shell-gutter: var(--l-gutter);
}
:root:not(#_) aim-site-header[page="human"] :is(.site-header, .tabs) {
  background: color-mix(in oklab, var(--l-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--l-ink);
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono);
}
/* над героем линии нет, как у бывшей .topbar; волосяная линия – когда страницу уже листают */
:root:not(#_) aim-site-header[page="human"] .site-header { border-bottom: var(--l-hair) solid transparent; }
:root:not(#_) body:has(.opener--covered) aim-site-header[page="human"] .site-header { border-bottom-color: var(--l-hairline); }
:root:not(#_) aim-site-header[page="human"] :is(.site-header, .tabs) .wrap {
  max-width: var(--l-max); padding-inline: var(--l-gutter);
}
/* высота – --l-topbar-h без полей родителя (8 px сверху и снизу): 62 px плюс волосяная линия, как у бывшей .topbar */
:root:not(#_) aim-site-header[page="human"] .site-header .wrap { gap: var(--l-s5); padding-block: 0; }

/* бренд – логотип, вне шкалы (js/type-roles.js, outside), как бывшая .topbar__name: знак AIM 26 px, «AI Mindset»
   узкой гарнитурой заголовков цветом --l-ink-2, метка human – наш логотип прописными, как было «HUMAN» */
:root:not(#_) aim-site-header[page="human"] .site-header .brand {
  gap: var(--l-s2); color: var(--l-ink-2);
  font-family: "Martian Grotesk", system-ui, sans-serif !important; font-stretch: 100% !important;
  font-weight: 400 !important; font-size: 0.875rem !important; letter-spacing: 0 !important;
  transition: opacity var(--l-t-hover) var(--l-ease);
  align-items: center;
}
:root:not(#_) aim-site-header[page="human"] .site-header .brand:hover { opacity: 0.75; }
:root:not(#_) aim-site-header[page="human"] .site-header .brand-mark {
  width: 26px; height: 26px; flex-basis: 26px; transform: none;
}
:root:not(#_) aim-site-header[page="human"] .aim-partner {
  max-width: none; overflow: visible;
  color: var(--l-ink);
  font-family: var(--l-logo-font); font-stretch: var(--l-logo-stretch); font-weight: var(--l-logo-weight);
  font-size: var(--l-text-body); line-height: 1; letter-spacing: var(--l-logo-tracking);
  text-transform: uppercase;
  margin-top: 2px; /* slight vertical adjustment for baseline */
}

/* меню: надпись, строчные, без точек родителя. Стоит справа у кнопки, как у бывшей .topbar. Отступ до кнопки
   больше промежутка строки: measure() родителя прячет меню (data-compact), если край меню ближе промежутка */
:root:not(#_) aim-site-header[page="human"] .site-header .primary-nav {
  position: static; left: auto; transform: none; min-width: 0;
  gap: var(--l-s5); margin-left: auto; margin-right: var(--l-s3);
}
:root:not(#_) aim-site-header[page="human"] .site-header .primary-nav > :not(:first-child)::before { content: none; }
:root:not(#_) aim-site-header[page="human"] .site-header :is(.primary-nav > a, .nav-dropdown > button) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  color: var(--l-ink-2); text-transform: none; text-decoration: none;
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight);
  font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking);
  transition: color var(--l-t-hover) var(--l-ease);
}
:root:not(#_) aim-site-header[page="human"] .site-header :is(.primary-nav > a, .nav-dropdown > button):is(:hover, :focus-visible) {
  color: var(--l-ink); text-decoration: none;
}
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown > button[data-current] { color: var(--l-accent); }
:root:not(#_) aim-site-header[page="human"] .site-header .nav-type { font-weight: inherit; color: var(--l-ink-2); }

/* labs: панель – наша карточка */
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel {
  min-width: 240px; padding: var(--l-s2);
  background: var(--l-bg-card); border: var(--l-hair) solid var(--l-line); border-radius: var(--l-radius-m);
  box-shadow: 0 12px 32px color-mix(in oklab, #000 40%, transparent);
}
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a {
  display: flex; align-items: center; gap: 0.5ch; min-height: 44px; padding: 0 var(--l-s3);
  border-radius: var(--l-radius-s); color: var(--l-ink);
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight);
  font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking);
}
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a .nav-type { color: var(--l-ink-mute); }
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a:is(:hover, :focus-visible) {
  background: color-mix(in oklab, var(--l-ink) 8%, transparent); color: var(--l-ink);
}
/* фокус с клавиатуры: у родителя в панели outline снят, подсветка фона одна – возвращаем кольцо (base.css) */
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a:focus-visible {
  outline: var(--l-focus) solid var(--l-accent); outline-offset: -2px;
}
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a[aria-current="page"] {
  color: var(--l-accent); box-shadow: none;
  background: color-mix(in oklab, var(--l-accent) 10%, transparent);
}
:root:not(#_) aim-site-header[page="human"] .site-header .nav-dropdown__panel a[aria-current="page"] .nav-type { color: inherit; }

/* фокус с клавиатуры – как во всей странице (base.css, :focus-visible) */
:root:not(#_) aim-site-header[page="human"] :is(a, button):focus-visible {
  outline: var(--l-focus) solid var(--l-accent); outline-offset: 3px; border-radius: var(--l-radius-s);
}

/* кнопка – вид .btn--primary (base.css), стиль «действие»; во всех трёх местах: шапка, строка разделов, меню */
:root:not(#_) aim-site-header[page="human"] .aim-shell-cta {
  min-height: var(--l-btn-h); padding: var(--l-btn-pad-y) var(--l-btn-pad-x);
  background: var(--l-cta-bg); color: var(--l-cta-ink);
  border: var(--l-hair) solid var(--l-cta-bg); border-radius: var(--l-btn-radius);
  font-family: var(--l-btn-font); font-stretch: var(--l-btn-stretch); font-weight: var(--l-btn-weight);
  font-size: var(--l-btn-text); line-height: var(--l-leading-body); letter-spacing: var(--l-btn-tracking);
  transition: transform var(--l-t-hover) var(--l-ease), background var(--l-t-hover) var(--l-ease),
              border-color var(--l-t-hover) var(--l-ease);
}
:root:not(#_) aim-site-header[page="human"] .site-header .aim-shell-cta { margin-left: 0; }
/* меню спрятано (data-compact: родитель не уместил его в строку) – кнопку и бургер вправо толкает сама кнопка, как
   на телефоне; иначе отступ меню пропадает вместе с ним, и кнопка встает к бренду */
:root:not(#_) aim-site-header[page="human"][data-compact] .site-header .aim-shell-cta { margin-left: auto; }
:root:not(#_) aim-site-header[page="human"][data-compact] .site-header .mobile-menu-trigger { margin-left: 0; }
:root:not(#_) aim-site-header[page="human"] .aim-shell-cta:hover {
  box-shadow: none; transform: translateY(var(--l-btn-lift)); color: var(--l-cta-ink);
  background: color-mix(in oklab, var(--l-cta-bg) 88%, var(--l-ink));
  border-color: color-mix(in oklab, var(--l-cta-bg) 88%, var(--l-ink));
}
:root:not(#_) aim-site-header[page="human"] .aim-shell-cta:active { transform: scale(var(--l-btn-press)); }
@supports (corner-shape: superellipse(1.263)) {
  :root:not(#_) aim-site-header[page="human"] .aim-shell-cta { corner-shape: superellipse(var(--l-corner-k)); }
}

/* строка разделов AIM: на десктопе с мышью её заменяет наша полоса справа (.secnav, human.css); где она видна –
   iPad альбомом (hover: none), – надпись на нашем стекле */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  :root:not(#_) aim-site-header[page="human"] .page-tabs { display: none; }
}
:root:not(#_) aim-site-header[page="human"] .tabs { border-bottom: var(--l-hair) solid var(--l-hairline); }
:root:not(#_) aim-site-header[page="human"] .tabs a {
  color: var(--l-ink-2); text-transform: none; background: transparent;
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight);
  font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking);
}
:root:not(#_) aim-site-header[page="human"] .tabs a:is(:hover, :focus-visible) {
  color: var(--l-ink); background: transparent; border-bottom-color: var(--l-line);
}
:root:not(#_) aim-site-header[page="human"] .tabs a:is(.is-current, [aria-current="location"]) {
  color: var(--l-ink); border-bottom-color: var(--l-accent);
}

/* ── шапка на телефоне (≤1100): одна строка – бренд, кнопка, бургер. Родитель ставит кнопку второй строкой
   (сетка .wrap, data-has-cta); где стоит кнопка – решает его скрипт, здесь только сетка строки. Кнопка шапки здесь
   мельче остальных (Кирилл, 02.10, вместе со снятием липкой кнопки внизу): ступень «мелкий» (js/type-roles.js,
   стиль «действие»), поля по 8 px, видимая высота 36 px; зона нажатия – 44 px прозрачными полями сверху и снизу ── */
@media (max-width: 1100px) {
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap {
    grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--l-s2);
    min-height: var(--l-topbar-h); padding-block: 0;
  }
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap > .aim-shell-cta {
    grid-column: 3; grid-row: 1; justify-self: end; margin: 0; position: relative;
    min-height: 36px; padding: var(--l-s1) var(--l-s2); font-size: var(--l-text-small);
  }
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap > .aim-shell-cta::before {
    content: ""; position: absolute; inset: -4px 0;
  }
  /* иконка бургера – 26 px в кнопке 44 px (поля родителя по 9 px): край иконки встает по полю страницы, а зазор до кнопки
     дают сами эти поля */
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap > .mobile-menu-trigger {
    grid-column: 4; margin-inline: calc(-1 * var(--l-s2)) -9px;
  }
  :root:not(#_) aim-site-header[page="human"] .site-header .aim-partner { flex: none; font-size: 0.9375rem; }
  :root:not(#_) aim-site-header[page="human"] .site-header .brand { gap: var(--l-s1); font-size: 0.8125rem !important; }
  :root:not(#_) aim-site-header[page="human"] .site-header .brand-mark { width: 22px; height: 22px; flex-basis: 22px; }
}
/* На узкой шапке подпись страницы остается в меню родителя, где уже есть
   отдельный .aim-partner. В закрытой строке оставляем место бренду и действиям. */
@media (max-width: 620px) {
  :root:not(#_) aim-site-header[page="human"] .site-header .aim-partner { display: none; }
}
/* одна строка: бренд 88 px, HUMAN 48, кнопка 139, бургер 27 по видимой иконке, два зазора по 8 и поля 2 × 12 –
   351 px (замер 02.10; до уменьшения кнопки было 368). Уже 352 – зазоры по 4 px и HUMAN на пиксель мельче – 339 px.
   Еще уже – кнопка второй строкой у правого края, как у родителя. 04.10: мелкий на телефоне 12.8 вместо 14 (шкала T1) –
   кнопка 129 px вместо 139, пороги ниже стоят с запасом 10 px */
@media (max-width: 351px) {
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap { column-gap: var(--l-s1); }
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap > .mobile-menu-trigger { margin-left: calc(-1 * var(--l-s1)); }
  :root:not(#_) aim-site-header[page="human"] .site-header .aim-partner { font-size: 0.875rem; }
}
@media (max-width: 339px) {
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap { row-gap: var(--l-s2); padding-block: var(--l-s2); }
  :root:not(#_) aim-site-header[page="human"][data-has-cta] .site-header > .wrap > .aim-shell-cta { grid-column: 1 / -1; grid-row: 2; }
}
/* бургер и крестик меню */
:root:not(#_) aim-site-header[page="human"] :is(.mobile-menu-trigger, .mobile-menu-close) {
  color: var(--l-ink); border-radius: var(--l-radius-s);
}
/* бургер стоит на 3 px от края окна (поле страницы минус поля иконки): кольцо фокуса – внутрь, иначе правая сторона за экраном */
:root:not(#_) aim-site-header[page="human"] .mobile-menu-trigger:focus-visible { outline-offset: -2px; }
:root:not(#_) aim-site-header[page="human"] :is(.mobile-menu-trigger, .mobile-menu-close):hover {
  background: color-mix(in oklab, var(--l-ink) 8%, transparent);
}

/* ── мобильное меню (dialog родителя) ── */
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu {
  padding: var(--l-s5) var(--l-gutter) 0;
  background: var(--l-bg); color: var(--l-ink);
  font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-body);
}
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu::backdrop { background: var(--l-bg); }
:root:not(#_) aim-site-header[page="human"] :is(.mobile-menu-head, .mobile-menu-label) {
  color: var(--l-ink-mute);
  font-family: var(--l-font-label); font-stretch: var(--l-stretch-label); font-weight: var(--l-label-weight);
  font-size: var(--l-label-size); line-height: var(--l-label-leading); letter-spacing: var(--l-tracking-label);
  text-transform: var(--l-label-case);
}
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu > .aim-partner { margin-bottom: var(--l-s5); }
:root:not(#_) aim-site-header[page="human"] :is(.mobile-site-links > a, .mobile-labs-label, .mobile-labs > a, .mobile-section-links > a) {
  display: flex; align-items: center; gap: 0.5ch; min-height: 44px; padding-block: var(--l-s1);
  font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-body);
  font-size: var(--l-text-body); line-height: var(--l-leading-body); letter-spacing: var(--l-tracking-body);
  text-transform: none;
}
:root:not(#_) aim-site-header[page="human"] :is(.mobile-site-links > a, .mobile-labs-label) { color: var(--l-ink); }
:root:not(#_) aim-site-header[page="human"] :is(.mobile-labs > a, .mobile-section-links > a) { color: var(--l-ink-2); }
:root:not(#_) aim-site-header[page="human"] .mobile-labs > a { padding-left: var(--l-s4); }
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu .nav-type { color: var(--l-ink-mute); }
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu a:not(.aim-shell-cta):hover {
  color: var(--l-ink); background: transparent; text-decoration: none;
}
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu a[aria-current="page"],
:root:not(#_) aim-site-header[page="human"] .aim-mobile-menu a[aria-current="page"] .nav-type { color: var(--l-accent); }
:root:not(#_) aim-site-header[page="human"] .mobile-section-links { border-top-color: var(--l-line); }
:root:not(#_) aim-site-header[page="human"] .mobile-menu-action {
  margin-inline: calc(-1 * var(--l-gutter)); padding-inline: var(--l-gutter);
  background: var(--l-bg); border-top: var(--l-hair) solid var(--l-line);
}

/* ── подвал AIM: столбцы в нашем виде, на фоне страницы ── */
:root:not(#_) aim-site-footer[page="human"] .site-footer {
  padding-block: var(--l-s6);
  background: var(--l-bg); color: var(--l-ink-2);
  border-top: var(--l-hair) solid var(--l-hairline);
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono);
}
:root:not(#_) aim-site-footer[page="human"] .site-footer .wrap {
  max-width: var(--l-max); padding-inline: var(--l-gutter); column-gap: var(--l-s5);
}
:root:not(#_) aim-site-footer[page="human"] .site-footer .h {
  margin-bottom: var(--l-s2); color: var(--l-ink-mute);
  font-family: var(--l-font-label); font-stretch: var(--l-stretch-label); font-weight: var(--l-label-weight);
  font-size: var(--l-label-size); line-height: var(--l-label-leading); letter-spacing: var(--l-tracking-label);
  text-transform: var(--l-label-case);
}
:root:not(#_) aim-site-footer[page="human"] .site-footer :is(li, .small) {
  color: var(--l-ink-2);
  font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight);
  font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking);
}
:root:not(#_) aim-site-footer[page="human"] .site-footer li { margin-bottom: var(--l-s1); }
/* узкий столбец на телефоне: длинное слово («конфиденциальности») переносится по слогам, а не посреди буквы, как
   у overflow-wrap: anywhere родителя. Не меньше пяти букв до переноса и четырех после: «договор» не рвется
   на «дого-вор», а уходит на следующую строку целиком (02.10) */
:root:not(#_) aim-site-footer[page="human"] .site-footer :is(li, li a) {
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
}
/* ссылки – как во всей странице (base.css, a): подчёркивание в треть цвета, при наведении полное */
:root:not(#_) aim-site-footer[page="human"] .site-footer a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--l-ink-2); border-bottom: 0;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
}
:root:not(#_) aim-site-footer[page="human"] .site-footer a:hover { color: var(--l-ink); text-decoration-color: currentColor; }
:root:not(#_) aim-site-footer[page="human"] .site-footer a:focus-visible {
  outline: var(--l-focus) solid var(--l-accent); outline-offset: 3px; border-radius: var(--l-radius-s);
}
:root:not(#_) aim-site-footer[page="human"] .site-footer .footer-essence p {
  color: var(--l-ink);
  font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-body);
  font-size: var(--l-text-body); line-height: var(--l-leading-body); letter-spacing: var(--l-tracking-body);
}