/*!
 * tol-header.css — ЕДИНЫЙ БЛОК АВТОРИЗАЦИИ-ПРОФИЛЯ ВОДИТЕЛЯ + БАННЕР ВХОДА.
 * Карточка #227 · TA-0161 §2 · GOVERNING: ADR-0222 (шапка как разделяемый блок)
 * и ADR-0221 (попап привязан к триггеру со сдвигом по столкновению).
 *
 * ★★ ОДИН ЭКЗЕМПЛЯР НА ЧЕТЫРЕ ЭКРАНА: /chargers · /session · /my/sessions · /parking.
 * До #227 разметка и стили шапки были СКОПИРОВАНЫ инлайном в каждый HTML (общими были
 * только lang-picker.js и theme-picker.js, то есть ПОВЕДЕНИЕ). Признак Ч-2 карточки
 * предъявляется дифом: собственные копии из страниц удалены, а не оставлены рядом.
 *
 * ⚠ ИМЕНА НЕ ПЕРЕИМЕНОВЫВАТЬ. Идентификаторы #langPickBtn, #langPickMenu, #themePickBtn,
 * #themePickMenu и семейства классов lang-pick- / theme-pick- читают ОБЩИЕ файлы
 * /assets/js/lang-picker.js (65 потребителей) и /assets/js/theme-picker.js (67),
 * почти все — web/admin/**. Переименование сломало бы шестьдесят чужих экранов
 * ради косметики внутри четырёх (TA-0161 §3.2).
 *
 * ⚠ И ОТДЕЛЬНО: в CSS-комментарии НЕЛЬЗЯ ставить звёздочку перед слэшем — пара закрывает
 * комментарий досрочно и МОЛЧА съедает следующее правило. В мокапе так уже было
 * уничтожено правило .tol-header целиком, и шапка встала в столбик без ошибки в консоли
 * (TA-0161 §8.5).
 *
 * ★ ПАЛИТРА — СОБСТВЕННАЯ И НАМЕРЕННО НАМЕСПЕЙСНУТАЯ (--tolh-*). Блок стоит на четырёх
 * страницах с ЧЕТЫРЬМЯ РАЗНЫМИ наборами токенов (parking: --ink/--line/--surface;
 * session: --phoenix-*; chargers и my-sessions: голые hex). Возьми блок чужие имена —
 * и «один код» выглядел бы по-своему на каждом экране, то есть признак Ч-1 не
 * выполнялся бы при формально общем файле. Значения — канон ink (скил tol-charge-design),
 * скопированы из принятого владельцем мокапа _artifacts/mock/mock_227_parking_header.html.
 */

:root {
  --tolh-surface: #FFFFFF;
  --tolh-raised:  #F7F7F5;
  --tolh-line:    #DDDDD7;
  --tolh-ink:     #262621;
  --tolh-ink-2:   #5C5C55;
  --tolh-muted:   #8E8E86;
  --tolh-brand:   #1F4FCC;
  --tolh-cta:     #FF6B35;
  --tolh-cta-dk:  #E54E1A;
  --tolh-cta-50:  #FFF1EA;
  --tolh-cta-100: #FFE0CE;
}

html[data-bs-theme="dark"] {
  --tolh-surface: #262621;
  --tolh-raised:  #3E3E38;
  --tolh-line:    #3E3E38;
  --tolh-ink:     #F7F7F5;
  --tolh-ink-2:   #DDDDD7;
  --tolh-muted:   #8E8E86;
}

/* ══════════════════════════ ШАПКА ══════════════════════════ */

.tol-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
  max-width: 1100px; margin: 0 auto;
  font-family: inherit;
}
/* ★ #227 Ч-12 (дефект С-4): 26 → 34 px. Владелец 17.08 — «логотип слишком мелкий».
   Число не выдумано: 34 px — это высота логотипа в БАННЕРЕ входа (.cta-logo) на этих же
   четырёх экранах, принятая владельцем 16.08; шапка и баннер получают один масштаб, а не
   два. ⚠ width:auto — единственная гарантия пропорции: задавать ширину числом запрещено.
   Замер файла TC_aquarel_transp_sm.png — 256×256, соотношение 1,000; оно обязано остаться
   тем же после правки, и это проверяется числом, а не глазом. */
.tol-header > img { height: 34px; width: auto; flex: 0 0 auto; display: block; }
.tol-header .ttl { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; color: var(--tolh-ink); }

.tol-header .header-nav { display: flex; gap: 2px; margin-left: 12px; }
.tol-header .header-nav a {
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--tolh-muted);
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.tol-header .header-nav a:hover { color: var(--tolh-ink); background: var(--tolh-raised); }
.tol-header .header-nav a.active { color: var(--tolh-cta); background: var(--tolh-cta-50); }
html[data-bs-theme="dark"] .tol-header .header-nav a.active { background: rgba(255,107,53,.14); }

/* ══════ «МЕНЮ» — МОБИЛЬНАЯ РАСКЛАДКА ТЕХ ЖЕ РАЗДЕЛОВ (#227 Ч-9, Ч-12) ══════
   ★★ Правила переехали сюда из corp-overlay.js::injectStyle НАМЕРЕННО. Кнопка «Меню» и
   горизонтальная строка разделов — ДВЕ РАСКЛАДКИ ОДНОГО КОМПОНЕНТА, и переключает их
   один брейкпойнт. Пока половина правил жила в JS-строке другого файла, брейкпойнт был
   бы объявлен дважды — а два места, знающие про 480 px, расходятся на первой же правке.
   Содержимое выпадашки строит corp-overlay.js::setupNav, читая ЭТИ ЖЕ <a> из #headerNav.

   ★ Ч-12: типографика кнопки СОВПАДАЕТ с пунктом строки (13px/600, padding 6px 10px,
   radius 8px) — отсюда и равенство высот, которого требует признак. До правки было
   .72rem/5px 10px и высота 24 px против 31,5 px у «Мои сессии».
   ⚠ white-space:nowrap — не косметика: без него на узком флексе «Меню ▾» переносилось
   в две строки и кнопка вырастала до 36 px (замер на 500 px до правки). */
.cb-menu-wrap { position: relative; display: none; }
.cb-menu-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  color: var(--tolh-cta); background: var(--tolh-cta-50); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
html[data-bs-theme="dark"] .cb-menu-btn { background: rgba(255,107,53,.14); }
.cb-menu-list {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--tolh-surface); border: 1px solid var(--tolh-line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(20,20,17,.14);
  min-width: 150px; z-index: 200; overflow: hidden; display: none;
}
html[data-bs-theme="dark"] .cb-menu-list { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.cb-menu-list.open { display: block; }
.cb-menu-list a {
  display: block; padding: 9px 13px; font-size: 13px; color: var(--tolh-ink);
  text-decoration: none; cursor: pointer; white-space: nowrap; text-align: left;
}
.cb-menu-list a:hover { background: var(--tolh-cta-50); color: var(--tolh-cta-dk); }
html[data-bs-theme="dark"] .cb-menu-list a:hover { background: rgba(255,107,53,.14); }

.theme-picker { position: relative; margin-left: auto; }
.lang-picker  { position: relative; margin-left: 4px; }
.theme-pick-btn, .lang-pick-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--tolh-surface); border: 1px solid var(--tolh-line);
  border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tolh-ink); cursor: pointer;
}
.theme-pick-btn { padding: 6px 9px; }
.theme-pick-btn:hover, .lang-pick-btn:hover { background: var(--tolh-raised); }
.theme-pick-icon { font-size: 1.05rem; line-height: 1; }
.lang-pick-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-pick-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }

.theme-pick-menu, .lang-pick-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 150px; background: var(--tolh-surface);
  border: 1px solid var(--tolh-line); border-radius: 12px; padding: 6px;
  box-shadow: 0 8px 24px rgba(20,20,17,.12);
  display: none; z-index: 60;
}
html[data-bs-theme="dark"] .theme-pick-menu,
html[data-bs-theme="dark"] .lang-pick-menu { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.theme-pick-menu.show, .lang-pick-menu.show { display: block; }
/* ★★ ПОТОЛОК ШИРИНЫ — ПОЛОВИНА ЛЕЧЕНИЯ (ADR-0221 п.3). Правило right:0 привязывает
   меню к ПРАВОМУ КРАЮ КНОПКИ, а не к краю экрана: пока кнопка у правого края страницы,
   это совпадает и дефекта не видно; в баннере кнопка стоит в середине строки, и меню
   уходит левее нуля. Вторая половина — замер и сдвиг в tol-header.js: чистый CSS не
   знает, в какую сторону не хватило места. */
.theme-pick-menu, .lang-pick-menu { max-width: calc(100vw - 16px); }
.theme-pick-item, .lang-pick-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; color: var(--tolh-ink); text-decoration: none; font-size: 14px;
  white-space: nowrap;
}
.theme-pick-item:hover, .lang-pick-item:hover { background: var(--tolh-raised); }
.theme-pick-item.active, .lang-pick-item.active { background: var(--tolh-cta-50); color: var(--tolh-cta); font-weight: 600; }
html[data-bs-theme="dark"] .theme-pick-item.active,
html[data-bs-theme="dark"] .lang-pick-item.active { background: rgba(255,107,53,.14); }
.lang-pick-code { display: inline-block; min-width: 34px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--tolh-muted); }
.lang-pick-item.active .lang-pick-code { color: var(--tolh-cta); }

/* Кнопка входа / профиль — ОДИН элемент в двух состояниях, а не два.
   Ключ текста — chargers.auth.login, он же на трёх остальных экранах.
   ⚠ Т-17: у ключа пять потребителей в двух файлах, переименовывать его не просили. */
.auth-btn {
  display: flex; align-items: center; gap: 7px; margin-left: 6px;
  background: var(--tolh-brand); border: 0; border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.auth-btn:hover { background: #1743B0; }
.auth-btn.auth-logged-in { background: transparent; border: 1px solid var(--tolh-line); color: var(--tolh-ink); }
.auth-btn.auth-logged-in:hover { background: var(--tolh-raised); }
.auth-wa-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.auth-user-icon {
  display: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tolh-raised); border: 1px solid var(--tolh-line);
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--tolh-ink-2); flex: 0 0 auto;
}
.auth-btn.auth-logged-in .auth-user-icon { display: flex; }
.auth-btn.auth-logged-in .auth-wa-icon { display: none; }
.auth-user-segment { display: none; }

/* Панель профиля — раскрывается кликом по кнопке-профилю. Перенесена из донора
   /chargers ЦЕЛИКОМ: имя, телефон, тариф, выход. Раньше она была только на двух
   экранах из четырёх; блок один ⇒ она теперь на всех (признак Ч-3). */
.tol-profile-panel {
  max-width: 1100px; margin: 0 auto 12px; padding: 12px 16px;
  border: 1px solid var(--tolh-line); border-radius: 12px; background: var(--tolh-surface);
}
.tol-profile-panel .profile-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tol-profile-panel .profile-label { font-size: 12px; color: var(--tolh-muted); width: 76px; flex-shrink: 0; }
.tol-profile-panel .profile-value { font-size: 13px; color: var(--tolh-ink); font-weight: 600; }
.tol-profile-panel .profile-name-wrap { display: flex; gap: 8px; flex: 1; min-width: 0; }
.tol-profile-panel .profile-name-input {
  flex: 1; min-width: 0; border: 1px solid var(--tolh-line); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 13px; color: var(--tolh-ink);
  background: var(--tolh-surface); outline: none;
}
.tol-profile-panel .profile-name-input:focus { border-color: var(--tolh-brand); }
.tol-profile-panel .profile-name-save {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--tolh-brand); background: transparent;
  border: 1px solid var(--tolh-line); border-radius: 8px; cursor: pointer;
}
.tol-profile-panel .profile-name-save:hover { background: var(--tolh-raised); }
.tol-profile-panel .logout-btn {
  font: inherit; font-size: 12.5px; color: var(--tolh-ink-2); background: none;
  border: 1px solid var(--tolh-line); border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.tol-profile-panel .logout-btn:hover { color: var(--tolh-ink); border-color: var(--tolh-muted); }

/* ★★ ЕДИНСТВЕННЫЙ БРЕЙКПОЙНТ РАСКЛАДКИ НАВИГАЦИИ (#227 Ч-9, решение владельца 17.08).
   Выше 480 px: разделы стоят строкой, кнопки «Меню» НЕТ (.cb-menu-wrap{display:none}
   объявлен выше, в блоке «Меню»).
   На 480 px и уже: строка прячется, «Меню» появляется и поглощает ТЕ ЖЕ пункты — это
   ограничение вёрстки, зафиксированное владельцем 28.07 и 17.08 не отменённое.
   ⚠ ПРЯЧЕМ ПЛОСКИЕ ССЫЛКИ, А НЕ ВЕСЬ #headerNav: внутри того же узла лежит #cbMenuWrap,
   и, скрыв контейнер, мы убрали бы ЕДИНСТВЕННЫЙ способ добраться до разделов с телефона,
   при этом выглядя исполнением решения владельца.
   Остальное — та же мобильная раскладка, что в принятом мокапе: у профиля только аватар,
   номер появляется на десктопе; порядок справа тема → язык → профиль.

   ★★ #227 Ч-21 (кандидат C-0324): БРЕЙКПОЙНТ 480 → 660 → 790 → 861 px.
   Действующее число — 861. Решение владельца 17.08.2026, дословно: «поднимай порог до 861».
   Оно ОТМЕНЯЕТ его же решение о 790 от того же дня; 480 и 660 отменены ранее.

   ⚠ ЧИСЛО ВЫВЕДЕНО ЗАМЕРОМ, А НЕ ВЫБРАНО — и переставлено потому, что прежнее было выведено
   на недостающих данных. 790 получено формулой «661 + переполнение при 661» на корп-члене
   (ru 727 · kk 789 · en 701 ⇒ максимум 789), но формула мерила ДРУГУЮ шапку: ниже порога CSS
   прячет номер телефона и режет паддинги, поэтому ширина, снятая под порогом, не равна
   ширине, которая понадобится над ним. Прямой перебор границы (kk, корп-член, живая раздача
   dev.tol.kz, 17.08) дал другие числа:
       /session 861 · /chargers 796 · /my/sessions 796 · /my/parking ≤791
   Худший экран — /session: его шапка стоит в бутстраповом .container 720 px против 1100 у
   остальных трёх, и переполняет окно уже в ru. ⇒ 861, а не 790: на 790 казахская шапка
   корп-члена продолжала бы давать горизонтальную прокрутку в полосе 791…861.
   ⇒ До 861 px включительно работает мобильная раскладка («Меню»), выше — горизонтальная
   строка. Признак Ч-9 держится обеими границами: на 1280 px «Меню» нет и разделы стоят
   строкой, на 375 и на 791 px «Меню» есть и несёт ТЕ ЖЕ разделы, включая «Моя группа».
   ★ Цена, названная владельцу и принятая им: на 791…861 px корп-член получает «Меню»
   вместо строки. Это выбранный размен, а не дефект; откат — одно число.
   ⚠ ЧИСЛО СТАРЕЕТ ОТ СОСТАВА И ПОДПИСЕЙ МЕНЮ, А НЕ ОТ ВРЕМЕНИ: добавишь пятый раздел или
   сменишь перевод — требуемая ширина поедет, и 861 надо ПЕРЕМЕРИТЬ прямым перебором границы,
   а не подкрутить на глаз и не пересчитать формулой. Гардом это не ловится: он судит текст,
   а не раскладку.
   ⛔ ВТОРОЙ БРЕЙКПОЙНТ ЗАВОДИТЬ НЕЛЬЗЯ — это ровно тот дефект, от которого защищает
   инвариант «две раскладки навигации = один компонент с одним брейкпойнтом». Меняешь число
   здесь — меняй его и в зеркальном блоке html.pre-authed внизу файла (там сказано, почему). */
@media (max-width: 861px) {
  .tol-header { padding: 12px 12px 10px; gap: 8px; }
  .tol-header .ttl { display: none; }
  .tol-header .header-nav { margin-left: 4px; }
  .tol-header .header-nav > a { display: none !important; }
  .cb-menu-wrap { display: inline-block; }
  .auth-btn.auth-logged-in .auth-user-phone { display: none; }
  /* ★ #227 Ч-13 (дефект С-7). У кнопки-профиля на мобиле нет ни фона, ни рамки ⇒ человек
     видит РОВНО КРУЖОК с инициалами, и сравнивает его с кнопкой темы. Замер до правки:
     кружок 22,0 px против 31,8 px у темы — 30,8 % разницы при допуске 10 %. Растим сам
     кружок и снимаем паддинг, чтобы видимый элемент и был кнопкой. */
  .auth-btn.auth-logged-in { padding: 0; border: 0; background: transparent; }
  .auth-btn.auth-logged-in .auth-user-icon { width: 30px; height: 30px; font-size: 12.5px; }
}

/* ══════════════════════════ БАННЕР ВХОДА ══════════════════════════
   Донор: web/chargers/index.html, правила .cta-plashka и ниже (TA-0038 v3/v4).
   Поведение донора сохранено дословно: у НЕавторизованного баннер ЗАМЕНЯЕТ шапку и
   стоит на самом верху; свёрнут по умолчанию; кликается целиком; тема и язык
   ПЕРЕЕЗЖАЮТ внутрь него. У вошедшего баннера нет — есть шапка.
   Дельта #227 против донора — ровно две вещи: палитра ink вместо navy и ЧЕТВЁРТЫЙ
   блок ценности (бесплатная парковка). */
/* Хост баннера. Ширину задаёт страница: у /parking колонка контента 520 px, у остальных
   трёх баннер живёт внутри уже ограниченного контейнера. Отдельный хост нужен потому,
   что баннер и шапка монтируются в ОДНОЙ точке (тег скрипта), а живут в разных сетках. */
.tol-banner-wrap { max-width: 1100px; margin: 0 auto; }

.cta-plashka {
  margin: 0 0 14px; border: 1px solid var(--tolh-line); border-radius: 16px;
  background: var(--tolh-surface);
  box-shadow: 0 1px 2px rgba(20,20,17,.06), 0 1px 3px rgba(20,20,17,.10);
  overflow: hidden;
}
/* ★★ ВТОРАЯ ПРИЧИНА ОБРЕЗАННОГО ПОПОВЕРА — вот этот overflow:hidden. Он стоит у донора
   ради скруглённых углов и режет ЛЮБОГО потомка по рамке плашки, как бы правильно тот
   ни спозиционировался: замер на 360 px — меню после удержания в экране встаёт на x=8,
   а плашка начинается с x=16, и восемь пикселей всё равно срезаются. Удержание в экране
   этот дефект НЕ лечит: причины две и они разные. Снимаем overflow ТОЛЬКО пока
   какой-нибудь поповер открыт — насовсем нельзя, вернутся неровные углы.
   ⚠ :has() поддержан не везде — тот же эффект дублирован классом .tolh-pop-open,
   который ставит tol-header.js. */
.cta-plashka:has(.theme-pick-menu.show),
.cta-plashka:has(.lang-pick-menu.show),
.cta-plashka.tolh-pop-open { overflow: visible; }
.cta-plashka.collapsed { background: var(--tolh-cta-50); border-color: var(--tolh-cta-100); cursor: pointer; }
.cta-plashka.collapsed .cta-pickers-mount { display: none; }
.cta-top-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.cta-logo { flex: 0 0 auto; height: 34px; width: auto; display: block; }
.cta-call { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: #262621; line-height: 1.25; }
.cta-call .sub { font-weight: 500; color: #5C5C55; }
.cta-pickers-mount { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.cta-pickers-mount .theme-picker,
.cta-pickers-mount .lang-picker { margin-left: 0; }
.cta-toggle {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 700; color: var(--tolh-cta-dk);
  white-space: nowrap; padding: 4px 2px;
}
.cta-toggle-less { display: none; }
.cta-plashka:not(.collapsed) .cta-toggle-more { display: none; }
.cta-plashka:not(.collapsed) .cta-toggle-less { display: inline; }
.cta-body { display: none; padding: 0 12px 13px; }
.cta-plashka:not(.collapsed) .cta-body { display: block; }
.vrow { display: flex; gap: 10px; padding: 9px 11px; border-radius: 12px; margin-bottom: 8px; }
.vrow.strong0 { background: #FFF1EA; border: 1px solid #FFE0CE; }
.vrow.strong0 .vi { background: #FFE0CE; color: #E54E1A; }
.vrow.strong0 .vt .accent { color: #E54E1A; }
.vrow.strong1 { background: #262621; }
.vrow.strong1 .vt { color: #F7F7F5; }
.vrow.strong1 .vd { color: #DDDDD7; }
.vrow.strong2, .vrow.strong3 { background: #F7F7F5; border: 1px solid var(--tolh-line); }
.vrow .vi { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.vrow.strong1 .vi { background: rgba(255,255,255,.10); color: #F7F7F5; }
.vrow.strong2 .vi { background: #EEF4FF; color: #1F4FCC; }
.vrow.strong3 .vi { background: #EAF6EE; color: #1B8A5A; }
.vrow .vi .uil { font-size: .95rem; }
.vt { font-size: .81rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 1px; color: #262621; }
.vd { font-size: .75rem; color: #5C5C55; line-height: 1.4; }
.vcond { display: inline-block; margin-top: 4px; font-size: .66rem; font-weight: 500; color: #8E8E86; background: #EDEDEA; border-radius: 999px; padding: 1px 8px; }
.cta-more-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 2px 10px; }
.cta-more-line .chip {
  display: inline-flex; align-items: center; gap: 4px; background: #F7F7F5;
  border: 1px solid var(--tolh-line); border-radius: 999px; padding: 3px 8px;
  color: #5C5C55; font-weight: 500; font-size: .66rem; white-space: nowrap;
}
.cta-more-line .chip .uil { font-size: .8rem; color: #8E8E86; }
.cta-banner-cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #FF6B35; color: #fff; border: none; border-radius: 999px; padding: 12px;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,107,53,.34);
}
.cta-banner-cta:hover { background: #E54E1A; }
.cta-banner-cta .auth-wa-icon { width: 30px; height: 30px; flex: 0 0 30px; }
/* В РАСКРЫТОМ баннере на 375 px верхняя строка держит логотип, призыв, два пикера и
   «Свернуть», и призыв сжимается в колонку 60 px. При этом тот же призыв дословно
   повторён первым блоком ценности прямо под ним ⇒ скрываем ДУБЛЬ, а не содержание. */
@media (max-width: 480px) {
  .cta-plashka:not(.collapsed) .cta-call { display: none; }
}
/* Тёмная. Свёрнутая плашка ОСТАЁТСЯ СВЕТЛОЙ и в тёмной теме — так у донора (v4). */
html[data-bs-theme="dark"] .cta-plashka { background: #1F1F1E; border-color: var(--tolh-line); }
html[data-bs-theme="dark"] .cta-plashka.collapsed { background: #FFF1EA; border-color: #FFE0CE; }
html[data-bs-theme="dark"] .cta-plashka.collapsed .cta-call { color: #262621; }
html[data-bs-theme="dark"] .cta-plashka.collapsed .cta-call .sub { color: #5C5C55; }
html[data-bs-theme="dark"] .cta-call { color: #F7F7F5; }
html[data-bs-theme="dark"] .cta-call .sub { color: #DDDDD7; }
html[data-bs-theme="dark"] .vd { color: #DDDDD7; }
html[data-bs-theme="dark"] .vrow.strong0 { background: #2A211C; border-color: #5E3A22; }
html[data-bs-theme="dark"] .vrow.strong2,
html[data-bs-theme="dark"] .vrow.strong3 { background: #262621; border-color: var(--tolh-line); }
html[data-bs-theme="dark"] .vrow.strong3 .vi { background: #17301F; color: #3FBF7F; }
html[data-bs-theme="dark"] .vt { color: #F7F7F5; }
html[data-bs-theme="dark"] .vcond { background: var(--tolh-line); color: #DDDDD7; }
html[data-bs-theme="dark"] .cta-more-line .chip { background: #262621; border-color: var(--tolh-line); color: #DDDDD7; }

/* ══════════════════════════ АНТИ-FOUC (дефект Д-А) ══════════════════════════
   tol-header-boot.js ставит html.pre-authed СИНХРОННО, до первого кадра, если в
   localStorage лежит tol_authed='1'. Разметку блок тоже вставляет синхронно ⇒ у
   вернувшегося посетителя первый кадр уже логин-раскладка, и после ответа /me
   (~300 мс) ничего не прыгает. До #227 ключ tol_authed на /chargers ПИСАЛСЯ и ни разу
   не читался — лекарство было написано, но на главном экране не подключено. */
html.pre-authed .auth-btn { background: transparent; border: 1px solid var(--tolh-line); color: var(--tolh-ink); }
html.pre-authed .auth-btn .auth-wa-icon { display: none; }
html.pre-authed .auth-btn .auth-user-icon { display: flex; }
/* ⚠ Мобильные размеры ОБЯЗАНЫ совпадать с блоком .auth-btn.auth-logged-in выше: это
   первый кадр той же кнопки. Разойдись они — аватар прыгнул бы с 22 на 30 px по ответу
   /me, то есть вернулся бы ровно дефект Д-А, только меньшего масштаба.
   ⚠ #227 Ч-21: И ГРАНИЦА ТОЖЕ ОБЯЗАНА СОВПАДАТЬ, не только размеры. 861 px здесь — то же
   число, что в блоке раскладки навигации выше. Разойдись ОНО — кнопка меняла бы размер на
   одной ширине, а её же первый кадр на другой, и прыжок вернулся бы в полосе между ними.
   Гард test_js_menu_breakpoint_lives_in_one_file_only сверяет эти два числа между собой. */
@media (max-width: 861px) {
  html.pre-authed .auth-btn { padding: 0; border: 0; background: transparent; }
  html.pre-authed .auth-btn .auth-user-icon { width: 30px; height: 30px; font-size: 12.5px; }
}