/* ТОМОКО — слой компонентов.
   Сведён 27.08.2026 из UI-kit файла Figma U5M0ihzdUI9upBTwUAHZ42.
   Спорные размеры не подбирались, а замерены на компонентах напрямую:
   кнопка 49px / паддинг 16-32, малая 33px / 9-14-9-16, чип 27px / 7-14,
   поле 52px / радиус 12 / обводка 1px, обложка радиус 20.
   Подключать после tokens.css и base.css. */

/* ═══ Кнопки ═══════════════════════════════════════════
   Три размера — не три компонента. В макете встречаются
   58px (герой), 49px (основная линейка) и 33px (поверх фото
   и в карточках). Вариант задаёт цвет, размер задаёт геометрию. */

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);          /* 16 / 32 → высота 49 */
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--t-label-14-size);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-14-ls);
  line-height: 1.2;                        /* в макете «normal», не токен 1.59 */
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tk-btn--lg { padding: 18px var(--s-10); }                    /* высота 58, герой */
.tk-btn--sm {
  padding: 9px 14px 9px var(--s-4);                           /* высота 33 */
  font-size: var(--t-label-12-size);
  letter-spacing: var(--t-label-12-ls);
}

/* Варианты по цвету */
.tk-btn--primary { background: var(--c-brand-green); color: var(--c-paper); }
.tk-btn--primary:hover  { background: var(--c-green-deep); }
.tk-btn--primary:active { background: var(--c-forest); }

.tk-btn--accent { background: var(--c-orange); color: var(--c-ink-green); }
.tk-btn--accent:hover  { background: color-mix(in srgb, var(--c-orange) 88%, var(--c-ink-green)); }
.tk-btn--accent:active { background: color-mix(in srgb, var(--c-orange) 78%, var(--c-ink-green)); }

.tk-btn--light { background: var(--c-paper); color: var(--c-ink-green); }
.tk-btn--light:hover  { background: var(--c-mist); }
.tk-btn--light:active { background: var(--c-mist); color: var(--c-brand-green); }
.tk-btn--light:focus-visible { outline-color: var(--c-paper); }

.tk-btn--mist { background: var(--c-mist); color: var(--c-ink-green); }
.tk-btn--mist:hover { background: var(--c-hairline); }

/* Обводочная. Обводка внутренняя (1.5px), поэтому вычитается
   из паддингов — иначе кнопка станет на 3px выше соседних. */
.tk-btn--secondary {
  background: transparent;
  color: var(--c-ink-green);
  border: var(--bw-outline) solid var(--c-hairline);
  padding: calc(var(--s-4) - var(--bw-outline)) calc(var(--s-8) - var(--bw-outline));
}
.tk-btn--secondary.tk-btn--lg { padding: calc(18px - var(--bw-outline)) calc(var(--s-10) - var(--bw-outline)); }
.tk-btn--secondary:hover  { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-btn--secondary:active { border-color: var(--c-green-deep); color: var(--c-green-deep); background: var(--c-mist); }

/* Поверх фотографии: полупрозрачная подложка и белая обводка.
   Прозрачности в палитре нет — значения замерены на макете. */
.tk-btn--on-photo {
  background: var(--c-paper-14);
  border: 1px solid var(--c-paper-75);
  color: var(--c-paper);
  padding: 8px 13px 8px calc(var(--s-4) - 1px);
}
.tk-btn--on-photo:hover  { background: color-mix(in srgb, var(--c-paper) 24%, transparent); border-color: var(--c-paper); }
.tk-btn--on-photo:active { background: var(--c-paper); color: var(--c-ink-green); }
.tk-btn--on-photo:focus-visible { outline-color: var(--c-paper); }

.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  border-color: transparent;
  cursor: not-allowed;
}

/* ═══ Чипы и метки ════════════════════════════════════
   Высота 27, паддинг 7/14. Не кнопки — не кликаются. */

.tk-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tk-chip--accent { background: var(--c-orange); color: var(--c-ink-green); }
.tk-chip--paper  { background: var(--c-paper);  color: var(--c-ink-green); }
.tk-chip--mist   { background: var(--c-mist);   color: var(--c-ink-green); }
.tk-chip--green  { background: var(--c-brand-green); color: var(--c-paper); }

/* ═══ Поля формы ══════════════════════════════════════
   Высота 52, радиус 12, обводка 1px --c-field-border. */

.tk-field { display: flex; flex-direction: column; gap: var(--s-2); }

.tk-field__label {
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
}

.tk-field__input,
.tk-field__area,
.tk-field__select {
  width: 100%;
  padding: var(--s-4) 18px var(--s-4) var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-input);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink-green);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tk-field__area { min-height: 120px; resize: vertical; }

.tk-field__input::placeholder,
.tk-field__area::placeholder { color: var(--c-ash); }

.tk-field__input:focus,
.tk-field__area:focus,
.tk-field__select:focus {
  outline: none;
  border-color: var(--c-brand-green);
  box-shadow: inset 0 0 0 1px var(--c-brand-green);
}

.tk-field--error .tk-field__input,
.tk-field--error .tk-field__area { border-color: var(--c-error); }
.tk-field__error {
  font-size: var(--t-label-12-size);
  color: var(--c-error);
}

.tk-field__input:disabled,
.tk-field__area:disabled {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}

/* Согласие на обработку персональных данных — обязательный чекбокс.
   Без него форму записи в клинику публиковать нельзя. */
.tk-check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.tk-check input {
  flex: none;
  width: 20px; height: 20px; margin: 0;
  accent-color: var(--c-brand-green);
  cursor: pointer;
}
.tk-check__text { font-size: var(--t-label-12-size); line-height: 1.5; color: var(--c-fog); }
.tk-check__text a { color: var(--c-brand-green); text-decoration: underline; }

/* ═══ Вкладки ═════════════════════════════════════════ */

.tk-tabs {
  display: flex;
  gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.tk-tab {
  padding: calc(13px - var(--bw-outline)) calc(var(--s-6) - var(--bw-outline));
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tk-tab:hover { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-tab[aria-selected="true"] {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}

/* Вкладок прайса семь — на узких экранах едут вбок, не переносятся. */
.tk-tabs--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.tk-tabs--scroll::-webkit-scrollbar { display: none; }

/* ═══ Карточки ════════════════════════════════════════ */

/* Услуга: фото 282×376, затемнение снизу, подпись и кнопка поверх. */
.tk-card-service {
  position: relative;
  display: block;
  aspect-ratio: 282 / 376;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-service img { width: 100%; height: 100%; object-fit: cover; }
.tk-card-service::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top,
    var(--c-ink-green) 0%,
    color-mix(in srgb, var(--c-ink-green) 55%, transparent) 45%,
    transparent 100%);
}
.tk-card-service__body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--s-6);
  color: var(--c-paper);
}
.tk-card-service__title { font-size: var(--t-body-lg-size); line-height: 1.2; font-weight: var(--w-medium); }
.tk-card-service__action { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1; }

/* Врач: портрет 282×322, фамилия зелёная, кнопка «К врачу». */
.tk-card-doctor { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-doctor__photo {
  aspect-ratio: 282 / 322;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-doctor__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tk-card-doctor__name { font-size: var(--t-body-lg-size); line-height: 1.2; }
.tk-card-doctor__surname { display: block; color: var(--c-brand-green); font-weight: var(--w-medium); }
.tk-card-doctor__role { font-size: var(--t-label-12-size); color: var(--c-fog); text-transform: uppercase;
                        letter-spacing: var(--t-label-12-ls); }

/* Статья: обложка радиус 20, чип даты поверх. */
.tk-card-post { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-post__cover {
  position: relative;
  aspect-ratio: 282 / 190;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.tk-card-post__date { position: absolute; top: var(--s-3); left: var(--s-3); }
.tk-card-post__title { font-size: var(--t-body-lg-size); line-height: 1.2; }
.tk-card-post:hover .tk-card-post__title { color: var(--c-brand-green); }

/* Ценность: иконка-бейдж, заголовок, текст. Плитки под иконкой нет. */
.tk-card-value { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-value__icon { width: 88px; height: 88px; }

/* Отзыв: подложка mist, оценка, текст, автор. */
.tk-card-review {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}
.tk-card-review__rating { display: flex; align-items: center; gap: var(--s-2);
                          font-weight: var(--w-semibold); }
.tk-card-review__text { font-size: var(--t-body-size); line-height: 1.5; }
.tk-card-review__author { font-size: var(--t-label-12-size); color: var(--c-fog);
                          text-transform: uppercase; letter-spacing: var(--t-label-12-ls); }

/* ═══ Блоки страницы ══════════════════════════════════ */

/* Полоса-анонс: оранжевая, 48px, код ОМС слева и ссылка справа. */
.tk-announce {
  background: var(--c-orange);
  color: var(--c-ink-green);
}
.tk-announce__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 48px;
}

/* Шапка. На главной лежит поверх видео и прозрачна. */
.tk-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  min-height: 88px;
}
.tk-header--overlay {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  background: transparent;
  color: var(--c-paper);
}

.tk-nav { display: flex; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
.tk-nav__link {
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  padding-block: var(--s-2);
  transition: color .16s ease;
}
/* Пункты меню не подчёркиваются — реагируют только цветом.
   На светлой шапке это фирменный зелёный; на главной шапка лежит поверх
   тёмного видео, там зелёный не читается, поэтому оранжевый акцент.
   Когда под раскрытым меню шапка белеет, возвращается зелёный. */
.tk-nav__link:hover,
.tk-nav__link:focus-visible { color: var(--c-brand-green); }
.tk-nav__link[aria-current="page"] { color: var(--c-brand-green); }

.tk-header--overlay .tk-nav__link:hover,
.tk-header--overlay .tk-nav__link:focus-visible,
.tk-header--overlay .tk-nav__link[aria-current="page"] { color: var(--c-orange); }

.tk-header--overlay.is-drop-open .tk-nav__link:hover,
.tk-header--overlay.is-drop-open .tk-nav__link:focus-visible,
.tk-header--overlay.is-drop-open .tk-nav__link[aria-current="page"] { color: var(--c-brand-green); }

/* Хлебные крошки */
.tk-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0;
                  font-size: var(--t-label-12-size); color: var(--c-fog); }
.tk-breadcrumbs li + li::before { content: "—"; margin-right: var(--s-2); color: var(--c-ash); }
.tk-breadcrumbs a:hover { color: var(--c-brand-green); }

/* Заголовок секции: надстрочный лейбл + заголовок + действие справа. */
.tk-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.tk-sec-head__label { color: var(--c-orange); margin-bottom: var(--s-4); }
@media (max-width: 680px) {
  .tk-sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
}

/* Строка прайса: код, наименование, цена. Цифры выравниваются по разряду. */
.tk-price-row {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: var(--s-6);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-hairline);
}
.tk-price-row__code  { font-size: var(--t-label-12-size); color: var(--c-ash);
                       font-variant-numeric: tabular-nums; }
.tk-price-row__price { font-weight: var(--w-semibold); white-space: nowrap;
                       font-variant-numeric: tabular-nums; }
/* Вкладка ОМС — без цен, две колонки вместо трёх. */
.tk-price-row--oms { grid-template-columns: 148px 1fr; }
@media (max-width: 680px) {
  .tk-price-row { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); }
  .tk-price-row__code { grid-column: 1 / -1; }
}

/* Точки галереи */
.tk-dots { display: flex; gap: var(--s-2); }
.tk-dots button {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--c-hairline);
  transition: width .2s ease, background-color .2s ease;
}
.tk-dots button[aria-current="true"] { width: 28px; background: var(--c-brand-green); }

/* Аккордеон */
.tk-acc__item { border-bottom: 1px solid var(--c-hairline); }
.tk-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding-block: var(--s-5); text-align: left;
  font-size: var(--t-body-lg-size);
}
.tk-acc__btn::after { content: "+"; font-size: 24px; color: var(--c-brand-green); flex: none; }
.tk-acc__btn[aria-expanded="true"]::after { content: "–"; }
.tk-acc__panel { padding-bottom: var(--s-5); color: var(--c-fog); }
.tk-acc__panel[hidden] { display: none; }

/* Пагинация */
.tk-pager { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.tk-pager a, .tk-pager span {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding-inline: var(--s-3);
  border: 1px solid var(--c-hairline); border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.tk-pager [aria-current="page"] { background: var(--c-brand-green); border-color: var(--c-brand-green);
                                  color: var(--c-paper); }

/* Круглая кнопка-иконка (пауза видео, стрелки слайдера) */
.tk-icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-hairline);
  background: var(--c-paper);
  transition: background-color .16s ease, border-color .16s ease;
}
.tk-icon-btn:hover { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-icon-btn--on-photo {
  background: var(--c-paper-14);
  border-color: var(--c-paper-75);
  color: var(--c-paper);
}

/* Финальный блок: CTA и подвал одной градиентной поверхностью,
   разделённые белым швом. Градиент замерен на макете. */
.tk-final {
  background: var(--g-green);
  color: var(--c-paper);
}
.tk-final__seam { height: 1px; background: var(--c-paper-28); }

.tk-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8);
  padding-block: var(--s-16);
}
@media (max-width: 1100px) { .tk-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .tk-footer__cols { grid-template-columns: 1fr; gap: var(--s-10); } }

.tk-footer__title {
  font-size: var(--t-label-12-size); font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls); text-transform: uppercase;
  color: var(--c-paper-55);
  margin-bottom: var(--s-4);
}
.tk-footer__list { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.tk-footer__list a:hover { color: var(--c-orange); }

.tk-social { display: flex; gap: var(--s-2); }
.tk-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--c-paper-10);
  transition: background-color .16s ease;
}
.tk-social a:hover { background: var(--c-paper-20); }

/* Последняя строка прайса без разделителя — иначе линия висит
   в нижнем краю плашки. Правило компонентное, в секциях не дублировать. */
.tk-price-row:last-child { border-bottom: 0; }

/* На узких экранах подпись кнопки переносится: длинные названия
   услуг иначе выпирают за край. Тоже свойство компонента, а не секции. */
@media (max-width: 680px) {
  .tk-btn { white-space: normal; }
}

/* Цель ссылок «записаться» со всех страниц. Запас сверху — чтобы после
   перехода заголовок не упирался в край окна. */
#zapis { scroll-margin-top: var(--s-10); }

/* ═══ Хрома внутренних страниц ═════════════════════════
   Светлая шапка и крошки со слэшем одинаковы на всех внутренних
   страницах. Раньше каждый page-*.css объявлял их заново — шесть
   одинаковых копий. Место им здесь, в общем слое. */
.tk-header--solid .tk-burger { color: var(--c-ink-green); }
.tk-breadcrumbs--slash li + li::before {
  content: "/";
  color: var(--c-field-border);
}
.tk-breadcrumbs--slash [aria-current="page"] {
  color: var(--c-brand-green);
  font-weight: var(--w-medium);
}

/* Светлая шапка внутренних страниц: на главной она прозрачная
   поверх видео (--overlay), здесь — на бумаге с волосяной линией. */
.tk-header--solid {
  background: var(--c-paper);
  color: var(--c-ink-green);
  border-bottom: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}

/* Отбивка крошек от шапки. Одинакова на всех внутренних страницах;
   раньше каждый page-*.css объявлял её заново — 36 копий, причём пять
   страниц вовсе не имели своей и держались на правиле соседней. */
.tk-crumbs { padding-top: calc(var(--s-12) + var(--s-2)); }  /* 56 из макета */
@media (max-width: 680px) {
  .tk-crumbs { padding-top: var(--s-8); }
}

/* ═══ Выпадающие меню шапки ═══════════════════════════
   Figma 400:2 (услуги), 400:73 (о центре), 400:128 (пациенту).
   Панель во всю ширину под шапкой: белая, поля 40/120/44/120.
   Ниже 1100 не показываются — там работает бургер. */

.tk-nav__item { position: static; }          /* панель тянется на всю ширину, не на пункт */
.tk-nav__caret { display: inline-block; transition: transform .16s ease; }
.tk-nav__link[aria-expanded="true"] { color: var(--c-brand-green); }
.tk-nav__link[aria-expanded="true"] .tk-nav__caret { transform: rotate(180deg); }

/* Панель — обычный блок в потоке внутри <header>, а не абсолют под ним.
   Своего фона у неё НЕТ: красит шапка, одним фоном на всё. Иначе панель
   появляется мгновенно, а фон шапки переходит за 180 мс — и в этот момент
   они разного цвета, то есть выглядят двумя плитами. */
.tk-drop { color: inherit; }
.tk-drop[hidden] { display: none; }

.tk-drop__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: var(--s-10);
  padding-block: var(--s-10) 44px;   /* 40 сверху и 44 снизу — замер макета */
  align-items: start;
}
/* «О центре» и «Пациенту» короче: колонки не растягиваем на всю ширину */
.tk-drop__inner--narrow { grid-template-columns: repeat(2, minmax(0, 280px)) 1fr; }

.tk-drop__label {
  font-size: var(--t-label-12-size);   /* в макете 11 — ступени 11 в шкале нет */
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
  margin-bottom: var(--s-4);
}
.tk-drop__list { display: flex; flex-direction: column; gap: var(--s-3); }
.tk-drop__list a {
  display: inline-block;
  font-size: var(--t-body-size);
  line-height: 1.3;
  transition: color .16s ease;
}
/* Пункты выпадающего меню — тоже только цветом, без подчёркивания. */
.tk-drop__list a:hover,
.tk-drop__list a:focus-visible { color: var(--c-brand-green); }

/* Зелёная плашка «Все цены» справа */
.tk-drop__promo {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6);
  background: var(--c-brand-green);
  color: var(--c-paper);
  border-radius: var(--r-card);
  transition: background-color .16s ease;
}
.tk-drop__promo:hover { background: var(--c-green-deep); }
.tk-drop__promo-label {
  font-size: var(--t-label-12-size); font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls); text-transform: uppercase;
  color: var(--c-paper-75);
}
.tk-drop__promo-title { font-size: var(--t-body-lg-size); line-height: 1.25; }
.tk-drop__promo-go {
  margin-top: var(--s-2);
  font-size: var(--t-label-14-size); font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-14-ls); text-transform: uppercase;
}

/* Шапка на главной лежит поверх видео и прозрачна, но раскрытая панель
   белая — иначе текст меню лёг бы на кадр. */


@media (max-width: 1100px) {
  .tk-drop { display: none !important; }   /* ниже — бургер */
}

/* ═══ Шапка главной под раскрытым меню ════════════════
   На главной шапка прозрачная поверх видео. Когда раскрывается
   выпадающее меню, панель белая — и шапка над ней тоже должна стать
   белой, иначе тёмная полоса и белая панель читаются двумя разными
   плитами вместо одной. Класс вешает js/menu.js. */

.tk-header--overlay .tk-logo--dark { display: none; }
.tk-header--overlay .tk-logo--light { display: block; }

.tk-header--overlay.is-drop-open {
  background: var(--c-paper);
  color: var(--c-ink-green);
  border-bottom: 1px solid var(--c-hairline);
}
/* Шапка переключается МГНОВЕННО, без переходов. Панель раскрывается сразу,
   поэтому любая плавность рассинхронизирует их: при переходе фона видна
   тёмная шапка над белой панелью, при переходе цвета — белый текст на
   белом фоне. Оба состояния красятся одним кадром. */
.tk-header--overlay.is-drop-open .tk-logo--light { display: none; }
.tk-header--overlay.is-drop-open .tk-logo--dark  { display: block; }

/* Кнопка записи в герое оранжевая; на белом ей место зелёной,
   как на внутренних страницах. Переопределение под состоянием
   шапки, базовый .tk-btn не трогается. */
.tk-header--overlay.is-drop-open .tk-btn--accent {
  background: var(--c-brand-green);
  color: var(--c-paper);
}
.tk-header--overlay.is-drop-open .tk-btn--accent:hover {
  background: var(--c-green-deep);
}

/* Переход мягкий, но только по цвету: геометрию не двигаем,
   иначе шапка «дышит» при каждом проходе курсора. */
.tk-header--overlay .tk-btn--accent {
  transition: background-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tk-header--overlay,
  .tk-header--overlay .tk-btn--accent { transition: none; }
}