/* ════════════════════════════════════════════════════════════════════════
   Общее для всех страниц: шапка-плашка, шкала скруглений и выпадающий
   список лабораторий. Живёт отдельным файлом, потому что шапка одинаковая
   на школе и на обеих страницах лабораторий — дублировать в трёх местах
   не хочется.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Шапка-плашка ──
   Не полоса, приклеенная к краю, а скруглённая плашка с отступом от краёв:
   контент видно, как он уезжает под неё. Полупрозрачная, с размытием того,
   что под ней, — над тёмной главой это читается особенно хорошо.
   Ширина ровно по колонке контента, чтобы логотип встал в одну линию
   с заголовками. */
.site-header { position: sticky; top: 0; z-index: 40; padding: 10px 8px 0; }
.site-header__plate {
  max-width: 1024px; margin: 0 auto;
  /* Объявляем явно: панель списка лабораторий висит ниже плашки, и любой
     overflow:hidden срезает её целиком. Скруглению это не мешает —
     у содержимого плашки своего фона нет. */
  overflow: visible;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(26,26,46,0.13);
  border-radius: 16px;
}
@media (min-width: 768px) { .site-header { padding: 14px 16px 0; } }
/* Браузер без backdrop-filter получит просто плотный белый фон. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__plate { background: rgba(255,255,255,0.95); }
}

/* ── Шкала скруглений ──
   Две ступени на весь сайт: 16 — крупные плоскости, 8 — то, что внутри них
   и на что нажимают. Круг — только тому, что и так круглое. Больше значений
   заводить не стоит: шкала перестаёт читаться как система. */
.labs-menu__panel,
.lab-card--open, .lab-card--soon,
.case { border-radius: 16px; }

.bg-accent, .case__img { border-radius: 8px; }

.labs-menu { position: relative; }

.labs-menu__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .15s;
}
.labs-menu__btn:hover { color: #1A1A2E; }

/* Галочка — треугольник на границах, без картинок и иконочных шрифтов. */
.labs-menu__chev {
  width: 0; height: 0; margin-top: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform .18s ease;
}
.labs-menu__btn[aria-expanded="true"] .labs-menu__chev { transform: rotate(180deg); }

.labs-menu__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 278px; z-index: 50;
  background: #FFFFFF;
  border: 1px solid rgba(26,26,46,0.10);
  box-shadow: 0 24px 60px -22px rgba(26,26,46,0.35);
  padding: 6px;
}
/* Мостик между кнопкой и панелью: иначе указатель проваливается в зазор
   и панель закрывается на полпути. */
.labs-menu__panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}

.labs-menu__panel a {
  display: block; padding: 10px 12px;
  text-transform: none; letter-spacing: normal;
  transition: background-color .12s;
}
.labs-menu__panel a:hover { background: #F8FAFC; }
.labs-menu__panel b {
  display: block; font-size: 15px; font-weight: 500; line-height: 1.25; color: #1A1A2E;
}
.labs-menu__panel span {
  display: block; font-size: 12px; line-height: 1.3; color: #6B7280; margin-top: 3px;
}
.labs-menu__all {
  margin-top: 4px; border-top: 1px solid rgba(26,26,46,0.08);
  font-size: 12px; color: #59B292;
}
.labs-menu__all:hover { color: #1A1A2E; }


/* ── Общая типографика ─────────────────────────────────────────────── */
/* Крупные заявления — антиквой, интерфейс и текст — гротеском.
   Разные голоса для «что мы говорим» и «как этим пользоваться».
   Трекинг возвращаем от -0.025em: засечкам такая теснота не идёт.
   Селекторы из двух классов — чтобы перебить утилиту tailwind. */
.t-head, .t-sub, .hero-title, #faq summary h3 {
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-weight: 500;
}
.t-head.tracking-tighter2,
.t-sub.tracking-tighter2,
.hero-title.tracking-tighter2 { letter-spacing: -0.012em; }

/* ── Тёмная глава ──
   Инверсия цвета вместо разделителя: блок читается как отдельная глава,
   а не как следующий пункт списка. Внутри — те же классы, что и везде,
   поэтому перекрываем их точечно; селекторы по атрибуту специфичнее
   одиночных tailwind-классов, !important не нужен. */
.chapter-dark { background: #1A1A2E; color: #FFFFFF; }
.chapter-dark .t-head,
.chapter-dark .t-sub,
.chapter-dark h1, .chapter-dark h2, .chapter-dark h3 { color: #FFFFFF; }
.chapter-dark .t-body { color: rgba(255,255,255,0.72); }
.chapter-dark [class*="text-ink/"] { color: rgba(255,255,255,0.55); }
.chapter-dark [class*="border-ink/"] { border-color: rgba(255,255,255,0.14); }
.chapter-dark .bg-accent:hover { background-color: #FFFFFF; color: #1A1A2E; }

/* Заголовок первого экрана. Кегль растёт со шириной, а строку держим
   не пикселями, а числом знаков. На школе он по центру и уже — там это
   одно заявление на весь экран; на странице лаборатории идёт по левому
   краю в своей колонке. */
.hero-title {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  line-height: 1.06;
  color: #1A1A2E;
  text-wrap: balance;
}
.hero-title--center { max-width: 17ch; }
@media (min-width: 768px) { .hero-title--lab { font-size: clamp(2.25rem, 4.2vw, 3.5rem); } }

/* ── Дорожка времени потока ──
   Десять встреч одной строкой: точка на каждую, дата под ней, последняя —
   игровой праздник, поэтому она заметнее. Два потока стоят рядом и видно,
   что они идут параллельно. На узком экране даты прячем: там они не
   помещаются и превращаются в кашу, остаётся диапазон под дорожкой. */
.streams { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .streams { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.stream {
  background: #FFFFFF;
  border: 1px solid rgba(26,26,46,0.12);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.35rem;
}
.stream__meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(26,26,46,0.45); font-weight: 500; margin-bottom: 1.6rem;
}
.stream__dots {
  position: relative; display: flex; justify-content: space-between;
  margin: 0 0 1.1rem; padding: 0; list-style: none;
}
/* Линия проходит за точками, от первой до последней. */
.stream__dots::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px;
  background: rgba(26,26,46,0.18);
}
.stream__stop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.stream__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(26,26,46,0.35);
}
/* ── Выделенное слово в тексте: росчерк от руки ──
   Обычное подчёркивание цветом текста на вебе читается как ссылка, а в
   обложке прямо под этим абзацем стоит настоящая ссылка «Помогите выбрать».
   Поэтому линия жёлтая, толще ссылочной и волнистая: это след маркера, а не
   гиперссылка. Рисуем фоном (inline-SVG), а не text-decoration: линия не
   разрывается на хвостах букв, а box-decoration-break склеивает её на переносе.
   Правило одно на весь сайт — раньше рядом жил близнец .u-mark, и два похожих
   выделения начали расходиться. Размеры в em: линия растёт вместе с кеглем,
   поэтому одинаково выглядит и в обложке, и в крупном заголовке главы. */
.mark {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3,8.6 C24,3.4 44,10.6 63,6.4 C82,2.7 100,9.6 117,4.9' fill='none' stroke='%23FFC94D' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 100% / 100% 0.34em;
  padding-bottom: 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Жёлтая точка стоит на первой встрече: взгляд должен падать на старт,
   а не на финиш. Остальные точки, включая последнюю, одинаковые. */
.stream__stop--start .stream__dot { background: #FFC94D; box-shadow: inset 0 0 0 1.5px #FFC94D; }
.stream__date { font-size: 10px; letter-spacing: 0.02em; color: rgba(26,26,46,0.5); white-space: nowrap; }
.stream__stop--start .stream__date { color: #1A1A2E; font-weight: 500; }
@media (max-width: 520px) { .stream__date { display: none; } }
.stream__range {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(26,26,46,0.45); font-weight: 500;
}

/* ── Стёртый блок не оставляет дыру ──
   Текст правят через /edit, и стереть блок целиком — законный ход: значит
   в этот раз его не нужно. Пустой абзац при этом продолжал занимать высоту
   и отступы. Внутри редактора правило отменяется (editor.css), иначе по
   пустому полю нечем попасть, чтобы вернуть текст. */
[data-t]:empty { display: none; }

/* ── Обложка помещается в окно целиком ──
   На ноутбуке с невысоким окном кнопки уходили под нижний край, и первый
   экран читался как обрезанный. Когда окно ниже 900px, ужимаем воздух
   и кегль заголовка; на больших экранах обложка остаётся прежней. */
@media (min-width: 768px) and (max-height: 900px) {
  .hero-cover { padding-top: 3rem; padding-bottom: 3rem; }
  .hero-cover .hero-title { font-size: clamp(2.25rem, 5.2vw, 3.5rem); margin-bottom: 1.5rem; }
  .hero-cover > p.t-body { margin-bottom: 1.75rem; }
  .hero-cover > p:first-child { margin-bottom: 1.5rem; }
}
@media (min-width: 768px) and (max-height: 760px) {
  .hero-cover { padding-top: 2rem; padding-bottom: 2rem; }
  .hero-cover .hero-title { font-size: clamp(2.25rem, 4.6vw, 3rem); }
}

/* ── Марка в шапке ──
   Раньше «Тадам!» был набран тем же кеглем и тем же серым, что пункты меню,
   и читался как ещё один пункт: люди не понимали ни что это название, ни что
   отсюда можно вернуться на главную. Рукописное начертание (тот же Caveat,
   что у жёлтого слова в обложке) отделяет марку от навигации, подпись под
   ней прямо говорит, куда ведёт ссылка. Жёлтый достался восклицательному
   знаку: на белом он читается плохо, и целым словом его брать нельзя. */
/* Ряд внутри плашки: одна высота у всех внутренних страниц — платёжных,
   юридических и подготовки. На лендинге тот же ряд собран утилитами. */
.site-head-row { display: flex; align-items: center; height: 3.5rem; padding: 0 1rem; }
@media (min-width: 768px) { .site-head-row { padding: 0 1.5rem; } }

.site-logo { display: flex; flex-direction: column; gap: 2px; line-height: 1.05;
  text-decoration: none; white-space: nowrap; }
.site-logo__name { font-family: 'Caveat', cursive; font-size: 27px; font-weight: 600;
  color: #1A1A2E; transition: color .15s; }
.site-logo__bang { color: #FFC94D; }
.site-logo__sub { font-family: 'Outfit', system-ui, sans-serif; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: rgba(26,26,46,0.45); transition: color .15s; }
.site-logo:hover .site-logo__sub { color: rgba(26,26,46,0.75); }

/* ── Переключатель языка ──
   Два состояния в одном месте: текущий язык — тёмной подписью, другой —
   приглушённой ссылкой. Не выпадающий список: языков всего два, и лишний
   клик тут ничего не экономит, зато список прячет сам факт, что английская
   версия есть. Кегль и трекинг наследуем от места, где стоит переключатель:
   в меню он мелкий и разрядкой, в подвале — как строка копирайта. */
/* Переключатель языка. Буквами в строку он сливался с пунктами меню —
   тот же размер, тот же капс.активный язык сидит в залитом кружке: это фигура,
   а не слово, и глаз находит её сразу. Флаги не берём: флаг обозначает страну,
   а половина наших родителей читает по-русски, живя в Нидерландах или Дубае. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  letter-spacing: 0; text-transform: none;
}
.lang-switch__on,
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.lang-switch__on { background: #59B292; color: #FFFFFF; }
.lang-switch a {
  color: rgba(26,26,46,0.45); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.lang-switch a:hover { background: rgba(26,26,46,0.07); color: #1A1A2E; }
.lang-switch--burger { padding-top: 0.85rem; }
.lang-switch--foot { margin-left: 0.35rem; vertical-align: middle; }
/* На юридических страницах шапка — одна строка: логотип слева, язык справа. */
.lang-switch--legal { margin-left: auto; }
.chapter-dark .lang-switch a { color: rgba(255,255,255,0.55); }
.chapter-dark .lang-switch a:hover { background: rgba(255,255,255,0.14); color: #FFFFFF; }