/*
  ЧТО ЭТО: основа оформления. Все цвета и размеры взяты из макета,
           сделанного владельцем в Claude Design (папка _дизайн/).
  КОГДА СЮДА ЛЕЗТЬ: менять цвета, шрифты, скругления.
  ЧЕГО НЕ ДЕЛАТЬ: не писать цвета прямо в других файлах — только
                  переменные отсюда, иначе тёмная тема разъедется.

  🔴 ОРАНЖЕВЫЙ — ТОЛЬКО ЛИНИЯ, НИКОГДА ЗАЛИВКА.
     Так задумано в макете: подчёркивание вкладки, штрихи иконок,
     цвет ошибки. Заливка — только чёрная (кнопка, бейдж).
*/

/*
  🔴 ТЁМНАЯ ТЕМА — ПО УМОЛЧАНИЮ. Так решил владелец.
  Светлая включается только кнопкой в шапке, и выбор запоминается.
  Тему Telegram намеренно НЕ слушаем: приложение всегда открывается тёмным.
*/
:root {
  /* --- тёмная тема (из макета) — основная --- */
  --фон:             #161514;   /* фон экрана */
  --панель:          #1F1E1C;   /* блок-объяснение, список материалов */
  --подложка:        #262523;   /* пока грузится превью */
  --текст:           #F4F2EC;   /* заголовки и названия */
  --текст-тусклый:   #A6A39D;   /* описания, подписи, мета */
  --волосок:         #2E2C29;   /* все разделители, 1px */
  --акцент:          #FF5A1F;   /* линии и штрихи, НЕ заливка */
  --акцент-текст:    #FF7A47;   /* строка ошибки */
  --на-тёмном:       #161514;   /* текст на светлой кнопке */
  --тушь:            #F4F2EC;   /* заливка кнопки, бейджа, тоста */
  --вуаль-замка:     rgba(22,21,20,.45);
  --номер:           rgba(166,163,157,.32);

  --шрифт: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --моно: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;

  --поля: 16px;
  --r-превью: 16px;
  --r-кнопки: 12px;
  --r-панели: 16px;
}

/* Светлая тема — включается ТОЛЬКО кнопкой в шапке (из макета) */
html[data-тема="светлая"] {
  --фон:           #F4F2EC;
  --панель:        #FBFAF7;
  --подложка:      #ECEAE3;
  --текст:         #0B0B0C;
  --текст-тусклый: #6E6E73;
  --волосок:       #E4E1DA;
  --акцент:        #FF5A1F;
  --акцент-текст:  #E23C00;
  --на-тёмном:     #F4F2EC;
  --тушь:          #0B0B0C;
  --вуаль-замка:   rgba(244,242,236,.45);
  --номер:         rgba(110,110,115,.38);
}

/* Плавное переключение — чтобы не било по глазам вспышкой */
html, body, .вкладки, .курс-шапка, .ролик-материалы, .материал-скачать {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Текст интерфейса не выделяется — иначе при листании пальцем то и дело
   подсвечиваются куски текста, и приложение выглядит как сайт, а не как
   приложение. Описание ролика выделять можно: оттуда копируют. */
body { -webkit-user-select: none; user-select: none; }
.ролик-описание, .материал-имя { -webkit-user-select: text; user-select: text; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--фон);
  color: var(--текст);
  font-family: var(--шрифт);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0);
  min-height: 100vh;
  min-height: 100dvh;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  transition: opacity .12s ease, transform .12s ease;
}
button:active { opacity: .78; }
button:disabled { opacity: .5; cursor: default; }

/* --- Шапка приложения ---------------------------------------------------- */
.шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 var(--поля);
  background: var(--фон);
}

.шапка-слева {
  display: flex;
  align-items: center;
  gap: 9px;
}

.шапка-название {
  font: 600 15px var(--шрифт);
  color: var(--текст);
}

/* Глобус-логотип. Рисунок целиком из макета, см. web/js/глобус.js */
.глобус { display: block; flex: none; }

/* Кнопка «светлая / тёмная» */
.кнопка-темы {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--текст-тусклый);
}
.кнопка-темы:active { opacity: .6; }

/* --- Вкладки: подчёркивание, а не таблетка ------------------------------- */
.вкладки {
  display: flex;
  background: var(--фон);
  border-bottom: 1px solid var(--волосок);
  position: sticky;
  top: 0;
  z-index: 5;
}

.вкладка {
  flex: 1 1 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px var(--шрифт);
  color: var(--текст-тусклый);
}

.вкладка[data-выбрана="да"] {
  color: var(--текст);
  box-shadow: inset 0 -2px 0 var(--акцент);
}

/* --- Мелочи -------------------------------------------------------------- */
.обёртка { max-width: 720px; margin: 0 auto; }

.скрыт { display: none !important; }

/* Мелкий моноширинный текст: бейджи, счётчики, подписи файлов */
.мета {
  font: 500 10px var(--моно);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--текст-тусклый);
}

.крутилка {
  width: 24px; height: 24px;
  margin: 56px auto;
  border: 2px solid var(--волосок);
  border-top-color: var(--акцент);
  border-radius: 50%;
  animation: вращение .8s linear infinite;
}
@keyframes вращение { to { transform: rotate(360deg); } }

/* --- Тост (всплывающая подсказка внизу) ---------------------------------- */
.всплывашка {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  background: var(--тушь);
  color: var(--на-тёмном);
  padding: 13px 18px;
  border-radius: 12px;
  font: 500 14px/19px var(--шрифт);
  max-width: calc(100% - 32px);
  text-align: center;
  z-index: 50;
  animation: всплыть .25s ease;
}
@keyframes всплыть {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Полоса «идёт проверка» ----------------------------------------------
   Видна только владельцу на его компьютере. В бою её не существует.
   Две строки: крупно — что это вообще, мелко — чьими глазами смотрим.   */
.тест-полоса {
  background: var(--акцент-текст);
  color: #fff;
  text-align: center;
  padding: 8px 14px;
}

.полоса-главное {
  font: 700 12px/1.35 var(--шрифт);
}

.полоса-мелко {
  margin-top: 2px;
  font: 500 11px/1.35 var(--шрифт);
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Плавность (M9) -------------------------------------------------------
   Приложение не должно «моргать»: содержимое появляется мягко, а не
   выпрыгивает. Движение маленькое и быстрое — чтобы не приходилось ждать.

   🔴 Всё это выключается настройкой телефона «уменьшить движение»
      (правило @media ниже). Для человека, которого укачивает от анимаций,
      это не украшение, а помеха.                                          */

@keyframes появиться {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Экран целиком: лента, курс, ролик, статистика, заслонки */
.сетка,
.ролик,
.статистика,
.заслонка,
.пусто {
  animation: появиться .22s ease both;
}

/* Карточки появляются одна за другой — «лесенкой».
   Задержка крошечная: к пятой карточке всё уже на месте.
   Дальше пятой не считаем: длинную ленту человек всё равно
   долистает позже, а ждать её проявления не должен. */
.сетка > *             { animation: появиться .26s ease both; }
.сетка > *:nth-child(1) { animation-delay: 0ms; }
.сетка > *:nth-child(2) { animation-delay: 40ms; }
.сетка > *:nth-child(3) { animation-delay: 80ms; }
.сетка > *:nth-child(4) { animation-delay: 120ms; }
.сетка > *:nth-child(n+5) { animation-delay: 150ms; }

/* Нажатие должно чувствоваться: карточка слегка проседает под пальцем */
.карточка:active { transform: scale(.985); }
.карточка { transition: transform .12s ease; }

/* --- Уважение к настройке «уменьшить движение» ---------------------------
   🔴 Было `animation-duration: .01ms`, и этого мало: анимация с
      `both` всё равно успевала мигнуть прозрачностью. Здесь движение
      снимается целиком, а не ускоряется.                                  */
@media (prefers-reduced-motion: reduce) {
  .сетка, .ролик, .статистика, .заслонка, .пусто,
  .сетка > *, .ролик-материалы {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .карточка:active { transform: none; }
}