/* =========================================================
   Страница урока в кабинете Тильды (/members/courses/…/<урок>).

   Шапку кабинета (а с ней site.css и блок members-header) Тильда
   на урок не ставит. Зато её скрипт кабинета на всех страницах
   кабинета подключает CSS-файл из «Настройки сайта → Шрифты →
   Расширенные настройки → Google Fonts → CSS link» (поле
   customcssfile). Ссылка там — на этот файл (Vercel).

   Файл подключается и на обычных страницах сайта (Тильда ставит
   шрифтовую ссылку везде) — поэтому здесь только классы кабинета
   (tlk-), а цвета — свои переменные с приставкой --ml-, чтобы не
   пересечься с переменными site.css.
   Стили Тильды грузятся позже — приставка :is(#allrecords, body)
   весит как id. Классы Тильды переименуют — слетит только вид.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ml-bg: #080808;
  --ml-surface: #1a1a1a;
  --ml-surface-2: #222222;
  --ml-surface-3: #2f2f2f;
  --ml-line: rgba(255, 255, 255, 0.10);
  --ml-line-2: rgba(255, 255, 255, 0.18);
  --ml-ink: #ffffff;
  --ml-ink-2: rgba(255, 255, 255, 0.72);
  --ml-ink-3: rgba(255, 255, 255, 0.55);
  --ml-brand: #394acb;
  --ml-brand-bright: #5263ff;
  --ml-free-bg: rgba(45, 190, 125, 0.16);
  --ml-free-ink: #4fd598;
  --ml-font: "Arimo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ml-font-display: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ml-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Фон и текст урока ---------- */
body:has(.tlk-lecture) { background: var(--ml-bg) !important; }
:is(#allrecords, body) .tlk-lecture {
  color: var(--ml-ink);
  font-family: var(--ml-font);
}
:is(#allrecords, body) .tlk-lecture__container { padding-top: 72px; padding-bottom: 96px; }
:is(#allrecords, body) .tlk-lecture__title {
  max-width: 880px;
  margin-bottom: 32px;
  color: var(--ml-ink);
  font-family: var(--ml-font-display) !important;
  font-size: 52px;
  font-weight: 500 !important;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
:is(#allrecords, body) .tlk-lecture__date { color: var(--ml-ink-3); font-size: 14px; }
:is(#allrecords, body) .tlk-lecture__text {
  color: var(--ml-ink-2);
  font-family: var(--ml-font);
  font-size: 18px;
  line-height: 1.6;
}
:is(#allrecords, body) .tlk-lecture__text :is(h1, h2, h3, h4, strong, b) { color: var(--ml-ink); }
:is(#allrecords, body) .tlk-lecture__text :is(h1, h2, h3, h4) { font-family: var(--ml-font-display); font-weight: 600; letter-spacing: -0.02em; }
:is(#allrecords, body) .tlk-lecture__text a { color: var(--ml-brand-bright); }
/* Видео — в скруглённой рамке, как фото на сайте */
:is(#allrecords, body) .tlk-lecture__video-wrap {
  margin: 24px 0;
  border: 1px solid var(--ml-line);
  border-radius: 16px;
  background: var(--ml-surface);
}

/* ---------- Кнопка списка уроков ---------- */
/* ПК 1200+: полоса во всю высоту слева */
:is(#allrecords, body) .tlk-menu__panel {
  background: var(--ml-surface);
  border-right: 1px solid var(--ml-line);
  color: var(--ml-ink-3);
}
:is(#allrecords, body) .tlk-menu__panel-text {
  color: var(--ml-ink-3);
  font-family: var(--ml-font-display);
  font-size: 15px;
  font-weight: 500;
}
:is(#allrecords, body) .tlk-menu__burger :is(span),
:is(#allrecords, body) .tlk-menu__burger::before,
:is(#allrecords, body) .tlk-menu__burger::after { background-color: var(--ml-ink) !important; }

/* ---------- Выезжающий список уроков ---------- */
:is(#allrecords, body) .tlk-menu__courses {
  background: var(--ml-surface);
  border-left: 1px solid var(--ml-line);
  border-right: 1px solid var(--ml-line);
}
:is(#allrecords, body) .tlk-menu__container { background: var(--ml-surface) !important; }
:is(#allrecords, body) .tlk-menu__content { font-family: var(--ml-font); }
:is(#allrecords, body) .tlk-menu__title-wrap a {
  color: var(--ml-ink) !important;
  font-family: var(--ml-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
:is(#allrecords, body) .tlk-menu__back-btn {
  background: var(--ml-surface-3);
  box-shadow: none;
}
:is(#allrecords, body) .tlk-menu__back-btn path { stroke: var(--ml-ink); }
:is(#allrecords, body) .tlk-menu__title {
  color: var(--ml-ink-3) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 1;
}
:is(#allrecords, body) .tlk-menu__submenu-item { padding-top: 6px; padding-bottom: 6px; }
:is(#allrecords, body) .tlk-menu__link {
  color: var(--ml-ink-2) !important;
  font-size: 14px;
  line-height: 1.4;
}
:is(#allrecords, body) .tlk-menu__link_active { color: var(--ml-ink) !important; font-weight: 600; }
:is(#allrecords, body) .tlk-menu__tick { border-color: var(--ml-free-ink); }
@media (width >= 1024px) {
  :is(#allrecords, body) .tlk-menu__link:hover { color: var(--ml-brand-bright) !important; }
  :is(#allrecords, body) .tlk-menu__title-wrap a:hover { opacity: 1 !important; color: var(--ml-brand-bright) !important; }
}

/* ---------- «Предыдущий / следующий урок» внизу ---------- */
:is(#allrecords, body) .tlk-switcher {
  background: var(--ml-bg);
  border-top: 1px solid var(--ml-line);
}
:is(#allrecords, body) .tlk-switcher__title {
  color: var(--ml-ink-2);
  font-family: var(--ml-font-display);
  font-size: 15px;
  font-weight: 600;
}
:is(#allrecords, body) .tlk-switcher__arrow :is(path, polyline, line) { stroke: currentColor; }
@media (width >= 1024px) {
  :is(#allrecords, body) .tlk-switcher__item:not(.tlk-switcher__item_disabled) a:hover { opacity: 1; }
  :is(#allrecords, body) .tlk-switcher__item:not(.tlk-switcher__item_disabled) a:hover .tlk-switcher__title { color: var(--ml-brand-bright); }
}

/* ---------- Меню профиля (на уроке шапки нет — оформляем здесь) ---------- */
:is(#allrecords, body) .tlk-userbar__popup {
  padding: 18px;
  border: 1px solid var(--ml-line-2);
  border-radius: 12px;
  background: var(--ml-surface);
  box-shadow: none;
  color: var(--ml-ink);
  font-family: var(--ml-font) !important;
}
:is(#allrecords, body) .tlk-userbar__popup-name { color: var(--ml-ink); font-family: var(--ml-font-display); font-size: 16px; font-weight: 600; }
:is(#allrecords, body) .tlk-userbar__popup-name svg path,
:is(#allrecords, body) .tlk-userbar__popup-logout svg path { stroke: var(--ml-ink-3); }
:is(#allrecords, body) :is(.tlk-userbar__popup-cabinet, .tlk-userbar__popup-edit-profile) { color: var(--ml-ink-3); font-size: 13px; }
:is(#allrecords, body) .tlk-userbar__popup-container { border-top: 1px solid var(--ml-line); }
:is(#allrecords, body) .tlk-userbar__popup-heading { color: var(--ml-ink-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; }
:is(#allrecords, body) .tlk-userbar__popup :is(.tlk-userbar__popup-courses-link, .tlk-userbar__popup-groups-link, .tlk-userbar__popup-accordion-link, .tlk-userbar__popup-groups-not-link) {
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ml-ink-2) !important;
  font-size: 14px;
  line-height: 1.35;
}
/* Светлый фон Тильды при наведении (#f8f8f8) на телефоне залипал после касания и закрывал
   текст (15.10) – фон прозрачный всегда, наш – только на ПК. Раздел «Группы» прячем, как
   и на остальных страницах кабинета (members.css) – там служебные группы срока доступа */
:is(#allrecords, body) .tlk-userbar__popup :is(.tlk-userbar__popup-courses-link, .tlk-userbar__popup-groups-link, .tlk-userbar__popup-accordion-link, .tlk-userbar__popup-groups-not-link, .tlk-accordion__link) {
  background-color: transparent !important;
}
:is(#allrecords, body) .tlk-userbar__popup-groups { display: none; }
:is(#allrecords, body) .tlk-userbar__popup-title span:not(.tlk-userbar__popup-notification) { color: var(--ml-ink-3); }
@media (width >= 1024px) {
  :is(#allrecords, body) :is(.tlk-userbar__popup-cabinet, .tlk-userbar__popup-edit-profile):hover { color: var(--ml-ink); }
  :is(#allrecords, body) .tlk-userbar__popup :is(.tlk-userbar__popup-courses-link, .tlk-userbar__popup-groups-link, .tlk-userbar__popup-accordion-link, .tlk-userbar__popup-groups-not-link, .tlk-accordion__link):hover {
    background-color: var(--ml-surface-2) !important;
    color: var(--ml-ink) !important;
  }
}

/* ---------- Ниже ПК ---------- */
/* 1199 и ниже Тильда делает из полосы круглую кнопку, а список — белым */
@media (width < 1200px) {
  :is(#allrecords, body) .tlk-menu__panel {
    border: 1px solid var(--ml-line-2);
    background: var(--ml-bg);
  }
  :is(#allrecords, body) .tlk-menu__burger_black :is(span),
  :is(#allrecords, body) .tlk-menu__burger_black::before,
  :is(#allrecords, body) .tlk-menu__burger_black::after { background-color: var(--ml-ink) !important; }
}
@media (width < 1024px) {
  :is(#allrecords, body) .tlk-lecture__container { padding-top: 96px; }
  :is(#allrecords, body) .tlk-lecture__title { font-size: 40px; }
}
@media (width < 768px) {
  :is(#allrecords, body) .tlk-lecture__title { font-size: 32px; margin-bottom: 24px; }
  :is(#allrecords, body) .tlk-lecture__text { font-size: 16px; }
  :is(#allrecords, body) .tlk-lecture__video-wrap { border-radius: 12px; }
}