:root {
  --bg: #F6F2EB;
  --card: #FCFAF6;
  --gold-c: #8B6914;
  --text: #1C1810;
  --body: #3A3222;
  --muted: #7A7060;
  --border: #D8D1C4;
  --border-g: rgba(139, 105, 20, .28);
  --error: #B3261E;
  --hero-bg: #0C0B08;
  --gold-lg: #DFC270;
  --bg-alt: #EDE7DC;
  --ok: #4C7A4C;
  --warn: #A8641C;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  font-family: 'Lora', Georgia, serif;
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.top { padding: 22px 20px 6px; max-width: 480px; margin: 0 auto; }
.pad { padding: 0 20px 40px; max-width: 480px; margin: 0 auto; }
.eye {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-c);
  display: block;
  margin-bottom: 10px;
}
h1 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--text); }
h2 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text); }
h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--text); }
.small { font-size: 13px; color: var(--muted); line-height: 1.55; }
.rule { width: 48px; height: 1px; background: var(--gold-c); margin: 14px 0; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.card.gold { border-color: var(--border-g); background: linear-gradient(180deg, #FDFBF7, #F8F3E9); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  background: var(--gold-c); color: #FDFAF5;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: none; border-radius: 3px; cursor: pointer;
  padding: 14px 18px; box-shadow: 0 6px 18px rgba(139, 105, 20, .26);
}
.btn.ghost { background: transparent; color: var(--gold-c); border: 1px solid var(--border-g); box-shadow: none; }
.btn.dark { background: var(--hero-bg); color: var(--gold-lg); box-shadow: none; }
.btn.mini { min-height: 38px; padding: 9px 14px; font-size: 9.5px; }
a.btn { text-decoration: none; }
.dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; animation: dots-bounce 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots-bounce {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.modhead { margin: 22px 0 9px; }
.modhead:first-child { margin-top: 4px; }
.modhead .mnum {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-c); margin-bottom: 5px;
}
.modhead h3 { font-size: 17px; }

.lesson {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 14px; margin-bottom: 9px; min-height: 64px; font-family: 'Lora', serif;
}
.lesson.locked { opacity: .5; background: transparent; border-style: dashed; }
a.lesson { text-decoration: none; color: inherit; }
a.card { display: block; text-decoration: none; color: inherit; }
.lesson .num {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--border-g);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--gold-c);
}
.num svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.lesson .t { flex: 1; }
.lesson .t b { display: block; font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: var(--text); }
.lesson .t span { display: block; font-size: 11.5px; color: var(--muted); font-family: 'Montserrat', sans-serif; }

.field { margin-bottom: 16px; }
.block { margin-bottom: 28px; }
.section-title {
  display: flex; align-items: center; font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--text);
  border-left: 3px solid var(--gold-c); padding-left: 10px; margin-bottom: 10px;
}
.mod-title {
  display: block; font-family: 'Montserrat', sans-serif;
  font-size: 11.5px; color: var(--muted); margin-bottom: 10px;
}
.field-l {
  display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--text); margin-bottom: 6px;
}
.inp {
  width: 100%; font-family: 'Lora', serif; font-size: 15px; color: var(--body);
  background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px;
}
textarea.inp { min-height: 90px; resize: vertical; }
.inp:disabled { opacity: .5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-g);
  background: transparent; color: var(--body); cursor: pointer;
}
.chip.active { background: var(--gold-c); color: #FDFAF5; border-color: var(--gold-c); }
.consent-row { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; cursor: pointer; }
.consent-row input { margin-top: 3px; }
.err { color: var(--error); margin-bottom: 12px; }

.back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 2px;
}

.player {
  aspect-ratio: 16/9; background: var(--hero-bg); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; position: relative; overflow: hidden;
}
.play {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(223, 194, 112, .5); background: rgba(223, 194, 112, .12);
  display: flex; align-items: center; justify-content: center;
}
.play:before {
  content: ''; border-left: 15px solid var(--gold-lg); border-top: 9px solid transparent;
  border-bottom: 9px solid transparent; margin-left: 4px;
}

.row { display: flex; gap: 10px; }
.tag {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px;
}
.tag.ok { background: rgba(76, 122, 76, .12); color: var(--ok); }
.tag.wait { background: rgba(168, 100, 28, .12); color: var(--warn); }
.tag.mute { background: rgba(122, 112, 96, .12); color: var(--muted); }
.tag.gold { background: rgba(139, 105, 20, .1); color: var(--gold-c); }
.tag.lg { font-size: 12px; padding: 8px 14px; letter-spacing: .1em; }

.shot {
  height: 150px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 12px;
}
.shot-preview { position: relative; padding: 0; overflow: hidden; }
.shot-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-remove {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(28, 24, 16, .72); color: #FDFAF5; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hist { font-size: 12px; color: var(--muted); line-height: 1.9; border-left: 1px solid var(--border-g); padding-left: 12px; margin-top: 14px; }
.note {
  background: rgba(139, 105, 20, .07); border: 1px dashed var(--border-g); border-radius: 4px; padding: 11px 13px;
  font-size: 11.5px; color: var(--gold-c); line-height: 1.55; margin-bottom: 12px; font-family: 'Montserrat', sans-serif;
}

/* админка потока */
.admin { background: var(--bg); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.tbl th {
  font-family: 'Montserrat', sans-serif; font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: left; padding: 9px 6px;
  border-bottom: 1px solid var(--border); font-weight: 600;
}
.tbl td { padding: 12px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr { cursor: pointer; }
.who-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border-g);
  display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif;
  font-size: 12px; color: var(--gold-c); margin-right: 8px; vertical-align: middle;
}

/* нижняя навигация (З11, П46) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: rgba(252, 250, 246, .97); border-top: 1px solid var(--border);
  backdrop-filter: blur(8px); padding-bottom: env(safe-area-inset-bottom);
  max-width: 480px; margin: 0 auto;
}
.tab {
  flex: 1; min-height: 50px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 4px;
}
.tab svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.4; }
.tab.on { color: var(--gold-c); }
.tab.on svg { stroke: var(--gold-c); }
.pad.with-tabbar { padding-bottom: 80px; }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; pointer-events: none; }

/* карточка активной программы (§8.1) — <a class="card"> обязана уметь
   быть скрыта: a.card{display:block} авторского правила иначе побеждает
   [hidden]{display:none} из UA-стиля независимо от специфичности, потому
   что порядок каскада сравнивает origin раньше specificity. То же самое
   верно для .btn (display:flex) и .tag (display:inline-block) — оба
   тоже встречаются со скрытым hidden в разметке (финальное ревью З11).
   .tabbar (display:flex, З11 Задача 4) — тот же случай: скрыт до
   определения статуса ДЗ и во время заполнения формы */
.card[hidden] { display: none; }
.lesson[hidden] { display: none; }
#upcoming-title[hidden] { display: none; }
#active-title[hidden] { display: none; }
#completed-title[hidden] { display: none; }
.btn[hidden] { display: none; }
.tag[hidden] { display: none; }
.tabbar[hidden] { display: none; }
/* надзаголовок карточки счётчика (В21): у .eye авторское display:block —
   тот же случай каскада. Селектор адресный, по id, а НЕ по классу .eye:
   второй такой надзаголовок со скрытым hidden живёт в
   public/staff/homework-review.html («Ответ ученику»), и правило по классу
   убрало бы эту подпись у ролей expert и owner (Р1). Правило по классу
   стережётся утверждением в test/countdownCard.test.js */
#countdown-eyebrow[hidden] { display: none; }

.md p { margin-bottom: 12px; line-height: 1.6; }
.md p:last-child { margin-bottom: 0; }

/* Учебный текст и домашка (В11). Выравнивание по обеим сторонам с
   переносами — lang="ru" у обеих страниц уже стоит, без него переносы не
   включаются; -webkit-hyphens — основная аудитория беты на iOS.
   overflow-wrap — страховка от горизонтального скролла на длинной
   неразрывной строке при ширине 360px. */
.md {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Вертикальный ритм внутри .md: * { margin: 0 } обнуляет отступы у всего,
   и без этих правил заголовок и список прилипают к соседнему абзацу
   вплотную. Границы контейнера — парой: три домашки тест-драйва
   начинаются списком, три тела списком заканчиваются, и ни там, ни там
   зазора сегодня нет. .md p:last-child выше не дублируется — он бьёт по
   последнему абзацу внутри любого родителя, включая блок примера. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h2 {
  font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  text-align: left;
  border-bottom: 1px solid var(--border-g); padding-bottom: 6px;
  margin: 20px 0 10px;
}
.md h3 {
  font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700;
  color: var(--text); text-align: left;
  margin: 16px 0 8px;
}
.md ol, .md ul { padding-left: 22px; margin-top: 12px; margin-bottom: 12px; line-height: 1.6; }
.md li { margin-bottom: 6px; }
.md li:last-child { margin-bottom: 0; }
.md li::marker { color: var(--gold-c); }
.md .example { background: var(--bg-alt); border-radius: 6px; padding: 14px 16px; }
.md .formula {
  border-left: 2px solid var(--gold-c); padding-left: 14px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: left;
}
/* Картинки в теле урока (В18, § 4 спеки). display: block несущий — им
   подряд идущие картинки встают друг под друга, и он же рвёт строку внутри
   text-align: justify. width: 100% + height: auto: колонка .pad не шире
   440px, а самая узкая картинка хранилища 591px — растягивать нечего,
   только ужимать, и без height: auto поехали бы пропорции. Лайтбокса нет
   (решение Димона 10.09.2026) — в <a> картинка не оборачивается.

   Собственного вертикального поля у <img> нет намеренно: ритм держит
   существующий .md p { margin-bottom: 12px }, а поле на картинке добавило
   бы 12px сверху первой картинке тела и снизу последней, то есть сдвинуло
   бы границу контейнера, которую П71 закрывает парой
   .md > :first-child / .md > :last-child. Зазор нужен только соседям
   внутри одного родителя — его и даёт правило ниже. Оно не ограничено
   абзацем (.md img, а не .md p img) сознательно: картинка внутри <li> или
   блока ::: тоже встаёт во всю ширину колонки. */
.md img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Ролик тела урока (§ 8 спеки В25). width: 100% вписывает его в колонку
   320px на экране 360px. max-height — в единице видимой части вьюпорта:
   vid-04 на такой колонке выше экрана 360×640, и полоса контролов ушла бы за
   край; первая декларация 70vh — запасная для браузера без svh, вторая её
   перекрывает. Скругление ложится на коробку, а не на кадр (допущение 4).
   Зазор до соседней картинки держит .md p: ролик стоит отдельным абзацем. */
.md video { display: block; width: 100%; height: auto; max-height: 70vh; max-height: 70svh; border-radius: 6px; }
/* Правило соседства — четырьмя парами, потому что плашка С36 на месте
   упавшей картинки это span, а соседний комбинатор ищет img и её не видит:
   одна пара img + img теряла бы зазор ровно там, ради чего правило писано.
   Своих полей у плашки нет вовсе (* { margin: 0 } выше), взяться зазору
   больше неоткуда. Записано списком через запятую, а не :is(...): парсер
   mdRules() в test/lessonPage.test.js режет CSS по запятым и селектор с
   запятой внутри скобок не соберёт. */
.md img + img,
.md img + .md-img-missing,
.md .md-img-missing + img,
.md .md-img-missing + .md-img-missing { margin-top: 12px; }
/* Кегль и цвет — существующего приглушённого текста (.small: 13px,
   var(--muted)), второго источника правды по стилю не заводим. */
.md-img-missing { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; }

.branch { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.branch .dotb { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid var(--gold-c); }
.branch .dotb.full { background: var(--gold-c); }
.branch .n { flex: 1; font-size: 14.5px; color: var(--text); }

/* Голосовой ответ на домашку (В31, спека Р14): только раскладка, цвета и
   шрифты — существующие токены design_system.md. */
.voice-player { display: block; width: 100%; margin-top: 8px; }
.voice-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.voice-rec[hidden] { display: none; }
.voice-rec .btn { width: auto; }
.voice-rec .voice-player, .voice-rec .note, .voice-rec .err { flex-basis: 100%; margin-bottom: 0; }
.voice-timer { font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Экран «Материалы» (В36) — карточка по прототипу, блок «Материалы урока»:
   кружок типа 34 px золотом, название Playfair 14.5 px, вес .small. Вся
   плашка — ссылка (§ 4.12 спеки), компактная, цель касания не меньше 44 px. */
a.card.mat {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 8px 12px; margin-bottom: 8px;
}
.mat-type {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--border-g);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 12px; font-weight: 700; color: var(--gold-c);
}
.mat-type.long { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: -.03em; }
.mat-text { flex: 1; min-width: 0; }
.mat-text b { display: block; font-family: 'Playfair Display', serif; font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
.mat-text .small { display: block; line-height: 1.3; }

/* страница файла (В40): страницы PDF во всю колонку, ссылки из PDF — слоем поверх */
.pdf-pages { margin-top: 16px; }
.pdf-page { position: relative; margin-bottom: 12px; background: var(--card); border: 1px solid var(--border); }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.pdf-links { position: absolute; inset: 0; }
.pdf-links a { position: absolute; display: block; }

/* Блок ожидания доступа (В65): карточка .card.gold, текст и под ним ссылка на
   поддержку. Ссылка — отдельной строкой, зона нажатия не ниже 44px. */
.wait-text { font-size: 15px; color: var(--body); }
.wait-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--gold-c); text-decoration: underline; text-underline-offset: 3px;
}
.wait-link:focus-visible { outline: 2px solid var(--gold-c); outline-offset: 2px; border-radius: 2px; }