/* Шапка «Центр» r3 (Илья 22.10: «лучше меню справа в хэдере а слева кнопка, даже на декстопе»): слева кнопка менеджеру,
   лого на оси экрана, справа язык и «Меню». Сетка бара 1fr · auto · 1fr: лого ровно по центру при любой ширине кнопок.
   Материал по умолчанию Liquid Glass «полоса» (?hd=a), ?hd=b капсула, ?hd=off прежний блюр 12.
   Перенесено из прототипа site/app/_/hdsb 22.10 (отчёт .claude/design-review-header.json). */

/* --fg-2 шапки темнее сайтового: APCA 14/500 в худшем кадре прокрутки (r2 В2) — светлая #4A5260: на #EDEDED (чёрный H2
   под стеклом) WCAG 6.7 / Lc 76.7, на белом Lc 86; тёмная #E0E3E8: на #434345 (белый H1 под стеклом) 7.7 / Lc −78.8 */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top);
  --hd-active: rgb(0 0 0 / 0.06); --fg-2: #4A5260; }
html[data-hero="dark"] .hd { --fg: #FFFFFF; --fg-2: #E0E3E8; --glass-rim: rgb(255 255 255 / 0.06); --hd-active: rgb(255 255 255 / 0.1); }
.hd :focus-visible { outline-offset: 2px; }
html[data-hero="dark"] .hd :focus-visible { outline-color: var(--sky); }
/* лого: две картинки стопкой, смена тона мгновенная и синхронно с текстом (r2 Б2) */
.hd .logo .lg-light, .hd .logo .lg-dark { display: block !important; }
.hd .logo .lg-dark { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }
html[data-hero="dark"] .hd .lg-light { opacity: 0; }
html[data-hero="dark"] .hd .lg-dark { opacity: 1; }

/* ?hd=off: прежнее стекло, блюр 12, светлая .92 / тёмная .80 (r2 Б3) */
.hd .glass { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 var(--glass-rim);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hd .glass::before, .hd .glass::after { content: ''; position: absolute; inset: 0; transition: opacity 200ms ease; }
.hd .glass::before { background: rgb(255 255 255 / 0.92); }
.hd .glass::after { background: rgb(30 34 37 / 0.8); opacity: 0; }
html[data-hero="dark"] .hd .glass::before { opacity: 0; }
html[data-hero="dark"] .hd .glass::after { opacity: 1; }

/* бар: три колонки, ось экрана = центр лого */
.hd .bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: 12px; height: var(--header-h); padding-inline: var(--pad); }
.hd .logo { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 44px; justify-self: center; }
.hd .logo img { display: block; height: var(--logo-h); width: auto; }
.hd .right { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; justify-self: end; }
.hd .right .lang { display: none; }
.hd .lang > a { color: var(--fg-2); transition: background-color 200ms ease; }
.hd .lang [aria-current] { color: var(--fg); }
@media (hover: hover) { .hd .lang > a:hover { color: var(--fg); } }

/* кнопка меню (login-header: слева): Iconly Pro «Hamburger menu» Light 24 в зоне 44, иконка начинается ровно на левом поле (−10).
   С 768 справа от иконки подпись «Меню» (строка s.menu), зона-пилюля; иконка всё так же на поле */
.burger { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  width: 44px; height: 44px; margin-left: -10px; padding: 0 0 0 10px; border: 0; background: none; color: var(--fg); cursor: pointer;
  border-radius: 999px; font: 500 14px/1 var(--font); letter-spacing: -0.01em; transition: background-color 200ms ease; }
.burger svg { display: block; flex: none; }
.burger-t { display: none; }
.hd .burger:active, .hd .lang > a:active, .hd .burger[aria-expanded="true"] { background: var(--hd-active); }
@media (hover: hover) { .hd .burger:hover { background: var(--hd-active); } }

/* «Войти» (login-header): вход для своих клиентов, не призыв — тихая стеклянная пилюля, синий остаётся за кнопками менеджера
   в секциях. Правый край пилюли = правое поле. Светлая шапка: заливка чёрным .05 + кромка .14, текст --fg;
   тёмная: белым .1 + кромка .24, текст белый. Высота = «Меню»: 44 на телефоне, 40 с 768, с 1024 40 → 48 */
.hd .login { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--r-btn);
  font: 600 14px/1 var(--font); letter-spacing: -0.015em; white-space: nowrap; color: var(--fg); text-decoration: none;
  color: #fff; background: linear-gradient(180deg, #1869DC 0%, #1462D2 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(11 58 138 / 0.35), 0 1px 2px rgb(11 58 138 / 0.25), 0 10px 24px -10px var(--btn-glow);
  transition: box-shadow 200ms ease, transform 160ms var(--ease-out); }
@supports (corner-shape: squircle) { .hd .login { corner-shape: squircle; } }
/* Илья 29.10: обводка «хочется нажать?» — нет → синяя заливка как .btn-blue (выбор карточкой) */
.hd .login:active { transform: scale(0.97); }
.hd .login:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (hover: hover) { .hd .login:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36), inset 0 -1px 0 rgb(11 58 138 / 0.35), 0 1px 2px rgb(11 58 138 / 0.25), 0 14px 32px -10px rgb(24 119 242 / 0.95); } }
/* 390: лого 105 по центру, колонки по (350 − 105 − 24) / 2 = 110: «Войти» 14/500 ≈ 75, «Anmelden» ≈ 95 — входят */
@media (max-width: 767px) { .hd { --logo-h: 20px; } .hd .login { padding: 0 12px; } } /* 360: колонка 95, «Connexion» 93 */

@media (min-width: 768px) {
  .hd .bar { column-gap: 24px; }
  .hd .right { gap: 8px; }
  .burger { width: auto; padding: 0 16px 0 10px; }
  .burger-t { display: block; }
  .hd .login { height: 40px; }
}
/* язык рядом с «Войти» справа с 768; на ≤ 767 язык в меню */
@media (min-width: 768px) { .hd .right .lang { display: inline-flex; } }
/* зона касания ≥ 44 (аудит релиза): кнопки 40 на 768–1440 визуально те же, невидимая зона растёт только по вертикали —
   соседи в ряду не задеваются */
.hd :is(.login, .burger, .lp-btn)::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
@media (min-width: 1024px) {
  .hd .bar { column-gap: 32px; }
  .hd .right { gap: 12px; }
  /* масштаб от ширины: 1440 → 14 / 40, 1920+ → 18 / 48 (CD 21.10) */
  .burger { height: clamp(40px, 2.5vw, 48px); font-size: clamp(14px, 0.94vw, 18px); }
  .hd .right .lang { font-size: clamp(14px, 0.94vw, 18px); }
  .hd .login { height: clamp(40px, 2.5vw, 48px); padding: 0 clamp(16px, 1.15vw, 22px); font-size: clamp(14px, 0.94vw, 18px); }
}

/* ===== Liquid Glass (Илья 22.10: «фон сейчас размывается уебищно»). Рецепт: Vault liquid-glass/techniques.md (Приём A)
   + кит iOS 27, раздел 6. Рефракция картой смещения у кромки (--lg, только Chromium), Frost Small 6,
   блики внутренними тенями spread = −offset. Без Chromium остаётся тот же материал без рефракции. */
.hd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html[data-hd] .hd {
  /* тинт плотный на строке текста (28–72 % высоты), прозрачный у кромок; не ниже .92 / .80 базовой шапки (CD r2 Б3) */
  --lg-tint-l: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.93) 28% 72%, rgb(255 255 255 / 0.32));
  --lg-shade-l: 0 6px 14px -10px rgb(0 0 0 / 0.07), 0 0 0 0.5px rgb(0 0 0 / 0.07);
  --lg-spec-l: inset 0 1.5px 0.5px -0.5px rgb(255 255 255 / 0.95), inset 0 14px 14px -14px rgb(255 255 255 / 0.7),
    inset 0 -1.5px 0.5px -0.5px rgb(255 255 255 / 0.8), inset 0 -12px 12px -12px rgb(0 0 0 / 0.06);
  /* тёмный тинт — чистый чёрный (CD 22.10 B2: #0E0E10 .78 и блики .26 давали на чёрной секции серую плашку с линией);
     над светом hero стекло темнит так же, над #000 исчезает, остаётся тонкая кромка */
  --lg-tint-d: linear-gradient(180deg, rgb(0 0 0 / 0.36), rgb(0 0 0 / 0.8) 28% 72%, rgb(0 0 0 / 0.24));
  --lg-shade-d: 0 10px 24px -14px rgb(0 0 0 / 0.6), 0 0 0 0.5px rgb(255 255 255 / 0.04);
  --lg-spec-d: inset 0 1.5px 0.5px -0.5px rgb(255 255 255 / 0.3), inset 0 14px 14px -14px rgb(255 255 255 / 0.06),
    inset 0 -1.5px 0.5px -0.5px rgb(255 255 255 / 0.07); } /* нижняя кромка на #000: L 50 → ~30 */
html[data-hd] .hd .glass { box-shadow: none;
  -webkit-backdrop-filter: blur(6px) saturate(1.7) brightness(1.08); backdrop-filter: var(--lg, ) blur(6px) saturate(1.7) brightness(1.08); }
/* телефон и планшет (perf.md §3.1, fix-B 25.10): без карты рефракции и без saturate/brightness — каждый кадр прокрутки
   пересчитывал SVG-фильтр под фиксированной шапкой. Остаётся тот же тинт и блюр 6; рефракция у нижней кромки на 56 px
   полосе глазом почти не читается (contain: paint не ставим — выпадающий выбор языка выходит за шапку) */
@media (max-width: 1023px), (pointer: coarse) {
  html[data-hd] .hd .glass { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
html[data-hd] .hd .glass::before, html[data-hd] .hd .glass::after { border-radius: inherit; }
html[data-hd] .hd .glass::before { opacity: 1; background: var(--lg-tint-l); box-shadow: var(--lg-shade-l), var(--lg-spec-l); }
html[data-hd] .hd .glass::after { background: var(--lg-tint-d); box-shadow: var(--lg-shade-d), var(--lg-spec-d); }
html[data-hd][data-hero="dark"] .hd .glass::before { opacity: 0; }

/* b: капсула, симметричная: края на поле − 8, внутри 8 — кнопка меню и CTA концентричны капсуле */
html[data-hd="b"] .hd { inset: calc(8px + env(safe-area-inset-top)) 10px auto; padding-top: 0; border-radius: 999px;
  --lg-shade-l: 0 10px 24px -14px rgb(0 0 0 / 0.2), 0 0 0 0.5px rgb(0 0 0 / 0.07); }
html[data-hd="b"] .hd .glass { border-radius: inherit; }
html[data-hd="b"] .hd .bar { height: 52px; padding-inline: 4px; }
html[data-hd="b"] .hd .burger { margin-left: 0; }
@media (min-width: 768px) { html[data-hd="b"] .hd { inset: 12px calc(var(--pad) - 8px) auto; } html[data-hd="b"] .hd .bar { height: 56px; padding-inline: 8px; } }
@media (min-width: 1024px) { html[data-hd="b"] .hd .bar { height: calc(clamp(40px, 2.5vw, 48px) + 16px); } }

@media (prefers-reduced-transparency: reduce) {
  .hd .glass, html[data-hd] .hd .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hd .glass::before { background: #fff; } .hd .glass::after { background: #1E2225; }
  html[data-hd] .hd { --lg-tint-l: #fff; --lg-tint-d: #1E2225; }
}
@media (prefers-reduced-motion: reduce) { .hd .glass::before, .hd .glass::after { transition: none !important; } }
html[data-init] .hd .glass::before, html[data-init] .hd .glass::after { transition: none !important; }