/* Оформление в системе школы «Лидер». Правка файла app/style.css.
 *
 * Значения цвета и шрифтов не менялись: navy #0d2c50, золото #c69544, бумага
 * #fdfcfa, Onest для текста, Playfair Display для заголовков, Montserrat 600 с
 * большим трекингом для капс-лейблов — всё из живого CSS сайта школы.
 *
 * Что изменилось и почему:
 *
 * 1. Порядок вёрстки — мобильный сначала. Смотрят с телефона на перемене, и
 *    десктоп здесь — редкий случай (директор, родительское собрание), поэтому
 *    он вынесен в один медиазапрос на 52rem, а не наоборот.
 *
 * 2. Карточка олимпиады раскрывается. В свёрнутом виде она отвечает на два
 *    первых вопроса — «что это даёт» (строка вердикта) и «когда регистрация»
 *    (строка срока) — и занимает экран целиком не больше одного раза. Всё
 *    остальное живо, но под нажатием: у одной олимпиады шесть льгот с
 *    пятистрочными примечаниями, и без сворачивания список нечитаем.
 *
 * 3. Ссылка на первоисточник и дата сверки не сворачиваются никогда — ни в
 *    льготе, ни в строке календаря. Сворачивается только примечание, то есть
 *    пересказ, а не доказательство.
 *
 * 4. Различие подтверждённой и предположительной даты держится четырьмя
 *    признаками сразу: слово, цвет, форма маркера (круг / кольцо / ромб) и
 *    пунктирная рамка. Цвет один читается плохо, а на распечатке не читается
 *    вовсе. Сверх того «ожидается» вынесено в отдельную группу под своим
 *    заголовком и дата подписана словом «ориентир» — принять её за факт нельзя.
 *
 * 5. Тёмной темы по-прежнему нет намеренно: сайт школы светлый, у него вместо
 *    тёмной темы режим для слабовидящих. color-scheme объявлен явно, чтобы
 *    браузер не подмешивал свой фон.
 *
 * Геймификации нет и не предусмотрено: счётчик «до регистрации N дней» — это
 * срок из приказа, а не серия и не очки.
 */

:root {
  --ink: #123963;
  --ink-deep: #0d2c50;
  --ink-deeper: #0a2342;
  --ink-soft: #21508f;
  --accent: #c69544;
  --accent-soft: #e8c98a;
  --accent-deep: #8a5e1c;
  --accent-wash: #fbf5e9;
  --paper: #fdfcfa;
  --paper-warm: #f6f1e8;
  --paper-cool: #eef2f8;
  --text: #131a2c;
  --text-mute: #5a6b86;
  --rule: rgba(10, 35, 72, 0.12);
  --rule-soft: rgba(10, 35, 72, 0.06);
  --ok: #1f7a4d;
  --ok-wash: #eef6f1;
  --sans: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: 'Playfair Display', Georgia, serif;
  --caps: 'Montserrat', var(--sans);
  --shell: 46rem;
}

* { box-sizing: border-box; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 16px/1.55 var(--sans);
  color: var(--text);
  background: var(--paper);
  text-wrap: pretty;
}

.shell { max-width: var(--shell); margin: 0 auto; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */

header {
  background: var(--ink-deep);
  color: var(--paper-warm);
  padding: 1rem 1rem 1.15rem;
}

/* Вордмарк уровня C: только «Лидер» и капс-подпись. Полную версию с гербом и
   строкой «с 2012 года» в шапку не ставим — прямое правило бренда. */
.brand { display: flex; align-items: baseline; gap: .55rem; }
.brand__name { font: 500 1.35rem/1 var(--display); color: var(--paper-warm); }
.brand__kind {
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

header h1 {
  font: 500 1.45rem/1.22 var(--display);
  margin: .85rem 0 0;
  color: #fff;
  max-width: 18em;
}

/* ── Вкладки: липкие, потому что это единственная навигация ─────────────── */

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink-deep);
  border-bottom: 2px solid var(--accent);
}
.tabs__inner {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: rgba(232, 201, 138, .35);
}
.tabs__inner::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  white-space: nowrap;
  min-height: 48px;
  padding: .5rem .6rem;
  font: 500 .92rem/1.2 var(--sans);
  color: var(--paper-warm);
  background: var(--ink-deep);
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tabs button:hover { background: var(--ink-deeper); }
.tabs button.on { background: var(--accent); color: var(--ink-deeper); font-weight: 600; }
/* Раздел без содержимого помечен полым кольцом — тот же словарь маркеров, что и у
   статусов дат. Кнопка остаётся нажимаемой: за ней лежит причина, а причина — это
   ответ, а не заглушка. */
.tabs button.pending { color: rgba(246, 241, 232, .6); }
.tabs button.pending::before {
  content: '';
  display: inline-block;
  width: .38rem;
  height: .38rem;
  margin-right: .4rem;
  vertical-align: .08em;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.tabs button.pending.on { color: var(--ink-deeper); }

main { padding: 1.1rem 1rem 2.5rem; }

.lead { margin: 0 0 1.1rem; color: var(--text-mute); font-size: .93rem; }
.muted { color: var(--text-mute); }
.sub { font-size: .87rem; line-height: 1.45; }

a { color: var(--ink-soft); }
a:hover { color: var(--accent-deep); }
a.src { text-decoration: underline; text-underline-offset: 2px; }

/* Капс-лейбл раздела — приём сайта: Montserrat 600, широкий трекинг, золото.
   Хвостовая линейка отделяет блок, не тратя вертикаль на отступ. */
.block__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font: 600 .64rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 1.35rem 0 .55rem;
}
.block__label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ── Главная: два трека и разделы внутри ─────────────────────────── */

.track {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: .95rem .9rem .35rem;
  margin: 0 0 .8rem;
}
.track__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .7rem; }
.track__title { font: 500 1.25rem/1.2 var(--display); color: var(--ink-deep); margin: 0; }
.track__lead { margin: .35rem 0 .7rem; font-size: .91rem; color: var(--text-mute); }

.sections { display: flex; flex-direction: column; }
.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 56px;
  padding: .55rem 0;
  border-top: 1px solid var(--rule-soft);
  color: inherit;
  text-decoration: none;
}
.srow:hover .srow__title { color: var(--accent-deep); }
.srow__title { display: block; font-weight: 500; color: var(--ink-deep); }
.srow__note { display: block; font-size: .85rem; color: var(--text-mute); }
.srow__state {
  flex: none;
  font: 600 .58rem/1 var(--caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Пустой раздел приглушён, но не выключен: за ним лежит причина. */
.srow--pending .srow__title { color: var(--text-mute); font-weight: 400; }
.srow--pending .srow__state { color: var(--accent-deep); }

.pending {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-deep);
  border-radius: 2px;
  padding: 1rem .9rem 1.2rem;
}
.pending__title { font: 500 1.3rem/1.2 var(--display); color: var(--ink-deep); margin: 0; }
.pending__note { margin: .2rem 0 0; font-size: .88rem; color: var(--text-mute); }
.pending__why { margin: 0 0 .3rem; }

/* ── Карточка олимпиады ─────────────────────────────────────────────────── */

.olymp {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  margin: 0 0 .8rem;
}
/* Неподтверждённые сведения — не золото, а глухой охристый: видно, что это
   другой сорт данных, а не просто другая карточка. */
.olymp--unverified { border-left-color: var(--accent-deep); background: var(--paper); }

.olymp__head {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: .85rem .9rem .8rem;
  cursor: pointer;
}
.olymp__head:hover { background: rgba(238, 242, 248, .5); }
.olymp__head:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: -2px; }

.olymp__top { display: flex; gap: .7rem; align-items: flex-start; }

/* Уровень в Перечне — гербовый штамп: римская цифра в золотой рамке.
   Родитель узнаёт уровень раньше, чем читает название. */
.stamp {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font: 500 1.05rem/1 var(--display);
}
.stamp--none { border-color: var(--rule); background: transparent; color: var(--text-mute); font-size: .95rem; }

.olymp__h { margin: 0; font: inherit; }
.olymp__name { display: block; font: 500 1.16rem/1.24 var(--display); color: var(--ink-deep); }
.olymp__level {
  display: block;
  margin-top: .28rem;
  font: 600 .58rem/1.3 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Вердикт — ответ на «что это даёт» одной строкой, до чтения. */
.verdict { display: block; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft); }
.verdict__main { display: block; font: 600 1rem/1.3 var(--sans); color: var(--ink-deep); }
.verdict__main--none { font-weight: 400; color: var(--text-mute); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.chip {
  font: 600 .6rem/1.25 var(--caps);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .32rem .45rem;
  border-radius: 2px;
  background: var(--paper-cool);
  color: var(--ink);
}
.chip--ok { background: var(--ok-wash); color: var(--ok); }
.chip--warm { background: var(--accent-wash); color: var(--accent-deep); }
.chip--plain { background: transparent; border: 1px solid var(--rule); color: var(--text-mute); }

/* Строка срока — ответ на «когда регистрация», второй по важности элемент
   карточки и первый для школьника. */
.next { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-top: .7rem; font-size: .89rem; }
.next__num { font: 600 .95rem/1 var(--sans); color: var(--ok); white-space: nowrap; }
.next__soft { color: var(--accent-deep); }

.olymp__more {
  display: block;
  margin-top: .7rem;
  font: 600 .6rem/1 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.olymp__body { padding: 0 .9rem 1.1rem; }
[hidden] { display: none !important; }

.olymp__full { margin: 0; font-size: .87rem; color: var(--text-mute); }

/* ── Льготы ─────────────────────────────────────────────────────────────── */

.benefit { padding: .7rem 0; border-top: 1px solid var(--rule-soft); }
.benefit:first-child { border-top: 0; padding-top: .2rem; }
.benefit__kind {
  font: 600 .62rem/1 var(--caps);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-deep);
  padding: .3rem .42rem;
  border-radius: 2px;
  white-space: nowrap;
}
.benefit__kind--ege { background: var(--ink-soft); }
.benefit__award { font-size: .88rem; color: var(--text-mute); }
.benefit__where { display: block; margin-top: .4rem; font-weight: 500; }
.benefit__prog { display: block; font-size: .87rem; color: var(--text-mute); }
.benefit__cond { display: block; margin-top: .25rem; font-size: .88rem; }
.benefit__src { display: block; margin-top: .25rem; font-size: .84rem; }

details.note { margin-top: .3rem; font-size: .87rem; }
details.note summary {
  cursor: pointer;
  color: var(--ink-soft);
  font: 600 .6rem/1 var(--caps);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem 0;
}
details.note[open] summary { color: var(--text-mute); }
details.note > div { color: var(--text-mute); padding-bottom: .3rem; }

/* ── Этапы, пробелы в данных, предупреждение ────────────────────────────── */

.stages { margin: 0; padding: 0; list-style: none; }
.stages li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  padding: .42rem 0;
  border-top: 1px solid var(--rule-soft);
  font-size: .9rem;
}
.stages li:first-child { border-top: 0; }
.stages b { font-weight: 500; }
.stages .stages__meta { color: var(--text-mute); font-size: .86rem; }

/* Пробел в данных выглядит как пробел, а не как ноль: человек должен понять,
   что проверять придётся самому. */
.gap {
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-left: 2px solid var(--accent-soft);
  padding: .55rem .7rem;
  font-size: .89rem;
  margin: .3rem 0;
}
.gap-inline { color: var(--accent-deep); font-weight: 500; }

/* Предупреждение заметное, но не пугающее: охра школы, а не красный. */
.warn {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .8rem 0 0;
  padding: .6rem .7rem;
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent-deep);
  border-radius: 2px;
  font-size: .89rem;
  color: var(--accent-deep);
}
.warn__label {
  font: 600 .58rem/1.5 var(--caps);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Действия ───────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink-deep);
  font: 500 .9rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn--primary { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper-warm); }
.btn--primary:hover { background: var(--ink-deeper); border-color: var(--accent); color: #fff; }

.start { margin: 0; padding: 0; list-style: none; }
.start li { padding: .4rem 0; font-size: .92rem; }

/* ── Кто вошёл и вход ───────────────────────────────────────────────────────
   Полоса стоит между вкладками и содержимым и видна на каждом экране. Пометка
   «демо» оформлена как ярлык, а не как подпись мелким: демо-историю, увиденную
   без пометки, учитель посчитает результатом класса — а это цена ошибки, которую
   оформление обязано учитывать. */

.who { background: var(--paper-cool); border-bottom: 1px solid var(--rule); }
.who__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  padding: .5rem 1rem;
  font-size: .89rem;
}
.who__inner .btn { min-height: 36px; margin-left: auto; }
.who__demo {
  font: 600 .6rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .3rem .45rem;
  border-radius: 2px;
  background: var(--accent-deep);
  color: #fff;
}
.who__note {
  margin: 0;
  padding: 0 1rem .5rem;
  font-size: .84rem;
  color: var(--accent-deep);
}

.login {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-deep);
  border-radius: 2px;
  background: #fff;
  padding: 1rem;
  max-width: 26rem;
}
.login__title { font: 500 1.3rem/1.2 var(--display); color: var(--ink-deep); margin: 0 0 .3rem; }
.field { display: block; margin: .8rem 0 0; }
.field span {
  display: block;
  font: 600 .58rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .3rem;
}
.field input {
  width: 100%;
  min-height: 44px;
  padding: 0 .7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  font: 400 1rem/1.2 var(--sans);
  color: var(--text);
}
.field input:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: -1px; }
.login__err {
  margin: .7rem 0 0;
  padding: .5rem .6rem;
  border-left: 3px solid var(--accent-deep);
  background: var(--accent-wash);
  font-size: .89rem;
  color: var(--accent-deep);
}
.login__demo { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: .3rem; }

/* ── Занятие и задание ──────────────────────────────────────────────────────
   Задание занимает экран целиком и не соревнуется ни с чем: ни счётчиков серии,
   ни очков. Строка «почему это задание» стоит НАД заданием, потому что она и есть
   ответ на вопрос «зачем мне это»; атрибуция источника — под, сноской, и не
   сворачивается никогда. */

.plan { margin: 0; padding-left: 1.2rem; }
.plan li { padding: .3rem 0; font-size: .9rem; }
.plan__why { display: block; }
.plan__meta { font-size: .82rem; }

.task { display: flex; flex-direction: column; gap: .9rem; }
.task__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; }
.task__count {
  font: 600 .58rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.task__why { font-size: .87rem; color: var(--accent-deep); }
.task__prompt { margin: 0; font: 500 1.12rem/1.45 var(--sans); color: var(--ink-deep); }
.task__src { margin: 0; font-size: .8rem; }

.stim {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-soft);
  border-radius: 2px;
  background: #fff;
  padding: .8rem .9rem;
}
.stim__head { display: flex; gap: .6rem; margin-bottom: .3rem; }
.stim__meta {
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* Текст бывает на 7769 знаков: без ограничения высоты задание уезжает за три экрана,
   и вопрос теряется. Прокрутка внутри рамки оставляет вопрос на месте. */
.stim__body { max-height: 17rem; overflow-y: auto; font-size: .94rem; line-height: 1.6; }
.stim__audio { width: 100%; margin: .2rem 0; }
.stim__src { margin: .5rem 0 0; font-size: .8rem; }

/* Пропуск в тексте: номер видно всегда, спрашиваемый — золотом. Один и тот же текст
   обслуживает девять заданий, и без выделения ученик заполняет не тот пропуск. */
.gapnum { color: var(--text-mute); white-space: nowrap; }
.gapnum--now {
  color: var(--accent-deep);
  background: var(--accent-wash);
  padding: 0 .2rem;
  border-radius: 2px;
  white-space: nowrap;
}

.opts { display: flex; flex-direction: column; gap: .4rem; }
.opt {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  font: 400 1rem/1.4 var(--sans);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; }
.opt__key {
  flex: none;
  width: 1.6rem;
  font: 600 .8rem/1.6rem var(--caps);
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-deep);
}
/* Выбранное и верное различаются рамкой, фоном И подписью-меткой: один цвет не читается
   на распечатке и не различается при дальтонизме. */
.opt--ok { border-color: var(--ok); background: var(--ok-wash); }
.opt--miss { border-color: var(--accent-deep); background: var(--accent-wash); }
.opt--right { border-left: 3px solid var(--ok); }
.opt--right .opt__key { border-color: var(--ok); color: var(--ok); }

.answer { margin: 0; }
.answer .field { margin-top: 0; }

.verdict-box { border-radius: 2px; padding: .1rem 0 0; }
.verdict-box--ok .verdict-box__word { color: var(--ok); }
.verdict-box--miss .verdict-box__word { color: var(--accent-deep); }
.verdict-box--none .verdict-box__word { color: var(--text-mute); }
.verdict-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .5rem 0;
  border-top: 1px solid var(--rule);
}
.verdict-box__word {
  font: 600 .62rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.verdict-box__key { font-size: .95rem; }

.layer { padding: .5rem 0; border-top: 1px solid var(--rule-soft); }
.layer__what {
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.layer__text { margin: .25rem 0 0; font-size: .95rem; }
.layer__note { margin: .2rem 0 0; font-size: .83rem; }
/* Слой, написанный моделью, помечен и оформлением тоже: пометка в тексте примечания
   уходит из вида первой, а этот слой единственный не выведен из данных банка. */
.layer--option { border-left: 3px solid var(--accent-soft); padding-left: .6rem; }

/* ── Каталог, история, группа, слова ────────────────────────────────────────
   Доля всюду стоит рядом с числом попыток и полом угадывания — это не стиль
   оформления, а правило проекта: процент без числа попыток здесь запрещён. */

.cat { display: flex; flex-direction: column; }
.cat__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding: .6rem 0 .6rem .7rem;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
  font-size: .92rem;
}
.cat__row--due { border-left-color: var(--accent-deep); }
.cat__row--weak { border-left-color: var(--accent); }
.cat__row--new { border-left-color: var(--ink-soft); }
.cat__row--known { border-left-color: var(--ok); }
.cat__status {
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.cat__name { font-weight: 500; color: var(--ink-deep); }
.cat__id { font-size: .8rem; }
.cat__items, .cat__why { font-size: .84rem; }

/* Столбики по дням — не украшение: высота это число судимых попыток, тёмная часть
   верные. Рисуются только с порога в пять дней, потому что три точки складываются
   в любую линию, какую захочешь увидеть. */
.bars { display: flex; align-items: flex-end; gap: .25rem; height: 7rem; margin: .3rem 0; }
.bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
             align-items: center; height: 100%; }
.bars__bar {
  width: 100%;
  min-height: 2px;
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bars__ok { background: var(--ink-soft); }
.bars__day { font-size: .68rem; color: var(--text-mute); padding-top: .2rem; }

.codes { margin: 0; padding-left: 1.1rem; }
.codes li { padding: .25rem 0; font-size: .92rem; }

.grp { width: 100%; border-collapse: collapse; }
.grp thead { display: none; }
.grp tr { display: block; padding: .6rem 0; border-top: 1px solid var(--rule); }
.grp td { display: flex; gap: .5rem; padding: .12rem 0; font-size: .9rem; }
.grp td::before {
  content: attr(data-label);
  flex: none;
  width: 9rem;
  font: 600 .56rem/1.5 var(--caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Часы варианта. Крупно и монospace, чтобы цифры не прыгали по ширине; красным — только
   последняя минута, потому что постоянный красный перестают видеть. */
.clock {
  margin-left: auto;
  font: 600 1.1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-deep);
  padding: .2rem .45rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
}
.clock--low { color: #fff; background: var(--accent-deep); border-color: var(--accent-deep); }

.words { margin: 0; padding-left: 1.1rem; }
.words li { padding: .3rem 0; font-size: .92rem; }
.words__ex { display: block; font-size: .85rem; }

/* ── Экран 2. Ближайший срок — самый крупный элемент экрана ─────────────── */

.hero {
  background: var(--ink-deep);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  color: var(--paper-warm);
  padding: 1rem 1rem 1.1rem;
  margin: 0 0 1rem;
}
.hero__label {
  font: 600 .58rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.hero__num {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .45rem 0 .15rem;
  font: 500 3rem/1 var(--display);
  color: var(--accent-soft);
}
.hero__unit { font: 500 1.05rem/1 var(--sans); color: var(--paper-warm); }
.hero__what { margin: .35rem 0 0; font-size: .95rem; color: #fff; }
.hero__when { margin: .2rem 0 0; font-size: .87rem; color: rgba(246, 241, 232, .75); }
/* Ссылка на источник на тёмном фоне — золотом: синий #21508f на navy нечитаем. */
.hero a { color: var(--accent-soft); }
.hero a:hover { color: #fff; }
.hero .muted { color: rgba(246, 241, 232, .68); }
.hero--empty .hero__num { font-size: 1.4rem; }

/* Легенда статусов = ключ к таблице. Стоит до таблицы, потому что без неё
   «ожидается» читается как дата. */
.legend { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.2rem; padding: .7rem .8rem; background: #fff; border: 1px solid var(--rule); border-radius: 2px; }
.legend__item { display: flex; align-items: baseline; gap: .5rem; font-size: .87rem; color: var(--text-mute); }
.legend__item b { color: var(--text); font-weight: 500; }

/* Маркер статуса: цвет + форма. Круг — подтверждено, кольцо — объявлено,
   повёрнутый пунктирный квадрат — ожидается. */
.dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; align-self: center; }
.dot--confirmed { background: var(--ok); }
.dot--announced { background: transparent; border: 2px solid var(--ink-soft); }
.dot--expected { background: transparent; border: 1px dashed var(--accent-deep); border-radius: 0; transform: rotate(45deg); }

.calgroup { margin: 0 0 1.6rem; }
.calgroup__head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.calgroup__label {
  font: 600 .64rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-deep);
}
.calgroup--expected .calgroup__label { color: var(--accent-deep); }
.calgroup__note { margin: 0 0 .7rem; font-size: .86rem; color: var(--text-mute); }

/* ── Таблица дат: на телефоне строки-карточки, на широком экране — таблица ── */

table { width: 100%; border-collapse: collapse; }
thead { display: none; }
tbody tr {
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 2px;
  padding: .7rem .8rem;
  margin-bottom: .55rem;
}
td { display: block; padding: .18rem 0; }

tr.c-confirmed { border-left-color: var(--ok); }
tr.c-announced { border-left-color: var(--ink-soft); }
/* «Ожидается» — пунктирная рамка и тёплый фон: другой сорт данных виден до
   чтения слова. */
tr.c-expected {
  border: 1px dashed rgba(138, 94, 28, .45);
  border-left: 3px solid var(--accent-deep);
  background: #fdfaf3;
}

/* Заголовки столбцов на узком экране скрыты, поэтому каждое поле подписывает
   себя само. Без этого «не объявлено» читается как отсутствие даты проведения,
   хотя речь о сроке регистрации. */
td[data-label]::before {
  content: attr(data-label);
  display: block;
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .22rem;
}
td[data-label="Олимпиада"]::before { display: none; }
td[data-label="Олимпиада"] { padding-bottom: .5rem; }
td[data-label="Когда"], td[data-label="Регистрация до"] { padding-top: .5rem; }
td[data-label="Откуда дата"] { padding-top: .5rem; }

.cal__olymp { font-weight: 500; }
.cal__stage { display: block; font-size: .87rem; color: var(--text-mute); }
.cal__date { font-size: .98rem; }
/* Дата-ориентир подчёркнута пунктиром и подписана словом: принять её за
   объявленную нельзя. */
.cal__date--soft { border-bottom: 1px dashed var(--accent-deep); color: var(--accent-deep); }
.cal__pre {
  display: block;
  font: 600 .56rem/1 var(--caps);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .18rem;
}
.soon {
  display: inline-block;
  margin-top: .25rem;
  padding: .3rem .45rem;
  background: var(--ok-wash);
  color: var(--ok);
  border-radius: 2px;
  font: 600 .8rem/1 var(--sans);
  white-space: nowrap;
}
.closed { font-size: .85rem; color: var(--text-mute); }

.cal__src { display: block; margin-top: .25rem; font-size: .84rem; }

.conf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: 600 .62rem/1.3 var(--caps);
  letter-spacing: .1em;
  text-transform: uppercase;
}
tr.c-confirmed .conf { color: var(--ok); }
tr.c-announced .conf { color: var(--ink-soft); }
tr.c-expected .conf { color: var(--accent-deep); }
/* Слово статуса бывает в три строки — маркер держится первой. */
.conf .dot { align-self: flex-start; margin-top: .3rem; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */

footer { padding: 1rem 1rem 2.5rem; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--text-mute); }
footer p { margin: .4rem 0; }
.bank { color: var(--text-mute); }

/* ── Широкий экран: показывают директору с ноутбука ─────────────────────── */

@media (min-width: 52rem) {
  header { padding: 1.6rem 1.25rem 1.4rem; }
  .brand__name { font-size: 1.8rem; }
  header h1 { font-size: 1.9rem; }
  .tabs__inner { flex-wrap: wrap; gap: .4rem; background: none; padding: .5rem 1.25rem; overflow: visible; }
  .tabs button { border: 1px solid rgba(232, 201, 138, .45); border-radius: 2px; padding: 0 1.1rem; min-height: 44px; }
  main { padding: 1.75rem 1.25rem 3rem; }
  footer { padding: 1.1rem 1.25rem 2.5rem; }

  .olymp__head { padding: 1.05rem 1.2rem 1rem; }
  .track { padding: 1.15rem 1.2rem .5rem; }
  .pending { padding: 1.2rem 1.2rem 1.4rem; }
  .olymp__body { padding: 0 1.2rem 1.3rem; }
  .olymp__name { font-size: 1.3rem; }
  .stamp { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }

  /* Каталог и группа на широком экране становятся строками таблицы: доля, число
     попыток и «почему» читаются в одну линию, а не столбиком. */
  .cat__row {
    grid-template-columns: 8rem minmax(11rem, 1fr) minmax(12rem, 1.2fr) auto;
    gap: .2rem .9rem;
    align-items: baseline;
  }
  .cat__row .cat__why { grid-column: 2 / -1; }
  .grp thead { display: table-header-group; }
  .grp tr { display: table-row; padding: 0; }
  .grp th {
    text-align: left;
    padding: .5rem .55rem;
    font: 600 .6rem/1.3 var(--caps);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-deep);
    border-bottom: 2px solid var(--accent);
  }
  .grp td { display: table-cell; padding: .6rem .55rem; border-bottom: 1px solid var(--rule); }
  .grp td::before { display: none; }

  .hero { display: grid; grid-template-columns: auto 1fr; gap: 0 1.6rem; align-items: center; padding: 1.3rem 1.4rem; }
  .hero__label { grid-column: 1 / -1; }
  .hero__num { font-size: 3.6rem; margin: .5rem 0 0; }
  .hero__what { margin-top: .5rem; }
  .legend { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.4rem; }

  thead { display: table-header-group; }
  tbody tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  tbody tr:hover td { background: var(--paper-cool); }
  th {
    text-align: left;
    padding: .6rem .55rem;
    font: 600 .62rem/1.3 var(--caps);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-deep);
    border-bottom: 2px solid var(--accent);
    vertical-align: bottom;
  }
  td {
    display: table-cell;
    padding: .7rem .55rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
    font-size: .92rem;
  }
  td[data-label]::before { display: none; }
  /* Ширины столбцов заданы явно: иначе дата ломается на три строки, а самое
     важное поле — срок регистрации — оказывается самым узким. */
  th:nth-child(1), td:nth-child(1) { width: 26%; }
  th:nth-child(2), td:nth-child(2) { width: 24%; }
  th:nth-child(3), td:nth-child(3) { width: 22%; }
  th:nth-child(4), td:nth-child(4) { width: 28%; }
  /* На широком экране левую полосу строки заменяет цветная линейка первой
     ячейки — таблица остаётся таблицей, признак статуса не теряется. */
  tbody tr td:first-child { border-left: 3px solid transparent; padding-left: .7rem; }
  tr.c-confirmed td:first-child { border-left-color: var(--ok); }
  tr.c-announced td:first-child { border-left-color: var(--ink-soft); }
  tr.c-expected { border: 0; background: none; }
  tr.c-expected td { background: #fdfaf3; border-bottom-style: dashed; }
  tr.c-expected td:first-child { border-left-color: var(--accent-deep); }
  tbody tr.c-expected:hover td { background: #faf3e6; }
}

/* ── Школа: класс, задания, качество, отчёты ────────────────────────────────
   Карточки входа печатаются листом: при печати остаются только они, всё
   остальное (навигация, формы, подвал) скрывается — PIN существует открыто один
   раз, и лист должен выйти с первой попытки. */

.btn--small { min-height: 34px; padding: 0 .6rem; font-size: .82rem; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: .4rem 0; }
.inline label { font-size: .86rem; color: var(--text-mute); }
.inline input[type=number] { width: 4.2rem; min-height: 34px; padding: 0 .4rem;
  border: 1px solid var(--rule); border-radius: 2px; font: inherit; }
.inline select, .field select, .override select { min-height: 34px; max-width: 100%;
  border: 1px solid var(--rule); border-radius: 2px; background: #fff; font: inherit; font-size: .86rem; }
.field select { width: 100%; min-height: 44px; }
fieldset.field { border: 0; padding: 0; }
fieldset.field label { display: block; padding: .2rem 0; font-size: .92rem; }

.pins-wrap { margin: 0 0 1.4rem; padding: .8rem; border: 1px solid var(--accent-soft);
  background: var(--accent-wash); border-radius: 2px; }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.pin { background: #fff; border: 1px dashed var(--ink-soft); border-radius: 2px; padding: .7rem .8rem;
  break-inside: avoid; }
.pin__school { font: 600 .56rem/1.4 var(--caps); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: .4rem; }
.pin__row { display: flex; justify-content: space-between; gap: .5rem; padding: .12rem 0; }
.pin__row span { color: var(--text-mute); font-size: .84rem; }
.pin__row b { font: 600 1.05rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-deep); }
.pin__group { font-size: .78rem; margin-top: .3rem; }

.report { margin: .7rem 0 .2rem; font-size: .88rem; }
.report summary { cursor: pointer; color: var(--text-mute); }
.report__kinds { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .3rem; }

.skill-pick { display: grid; grid-template-columns: 1fr; gap: .15rem; margin: .5rem 0; }
.skill-pick label { font-size: .9rem; padding: .2rem 0; }
.asg { border-top: 1px solid var(--rule); padding: .7rem 0; }
.asg--closed { opacity: .6; }
.asg__head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .3rem; }
.q__prompt { display: block; font-size: .84rem; color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0 0 1rem; }
.stats div { background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: .6rem .7rem;
  display: flex; flex-direction: column; }
.stats b { font: 500 1.6rem/1.1 var(--display); color: var(--ink-deep); }
.stats span { font-size: .8rem; color: var(--text-mute); }

.layer5 { display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; padding: .9rem 0;
  border-top: 1px solid var(--rule); }
.layer5__n { font: 500 1.7rem/1 var(--display); color: var(--accent); }
.layer5__title { margin: 0 0 .25rem; font: 500 1.15rem/1.2 var(--display); color: var(--ink-deep); }
.layer5__what { margin: 0 0 .4rem; font-size: .92rem; }

@media (min-width: 52rem) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .skill-pick { grid-template-columns: 1fr 1fr; }
}

@media print {
  header, nav, #who, footer, .lead, .block__label, .cat, .grp, form, .actions, #class-msg,
  .pins-wrap > .sub, .pins-wrap > .block__label { display: none !important; }
  .pins-wrap { border: 0; background: none; padding: 0; }
  .pins { grid-template-columns: repeat(3, 1fr); }
}
.cat__row .add-students { grid-column: 1 / -1; }
.newgroup { max-width: 26rem; margin: .6rem 0 1rem; }
.field input[type=radio], .field input[type=checkbox],
.skill-pick input { width: auto; min-height: 0; margin: 0 .4rem 0 0; vertical-align: -1px; }

/* Банк слов к пропускам — справка, а не варианты: слово подставляется в поле, отвечает
   ученик словом. Поэтому вид — плашки, а не кнопки ответа. */
.bank-words { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .6rem 0; }
.bank-words__label { width: 100%; font: 600 .56rem/1.4 var(--caps); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute); }
.bank-word { border: 1px dashed var(--ink-soft); background: var(--paper-cool); color: var(--ink-deep);
  border-radius: 2px; padding: .3rem .55rem; font: 500 .92rem/1.2 var(--sans); cursor: pointer; }
.bank-word:hover, .bank-word:focus-visible { background: #fff; outline: 2px solid var(--ink-soft); outline-offset: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   Слой дизайна 12.10.2026 — по docs/design/ПАСПОРТ-СТИЛЯ.md (референсы: Khan Academy,
   Решу ЕГЭ, Duolingo for Schools, Brilliant, Google Classroom, Write & Improve). Правила
   ниже перекрывают прежние; значения цвета — с посчитанным контрастом WCAG AA на бумаге.
   Золото #c69544 на бумаге — 2.63:1, поэтому оно здесь только линия, а текст в золотых
   тонах — #8a5e1c (5.54:1).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --err: #b3261e;          /* «неверно», 6.37:1 */
  --err-wash: #fbeeed;
  --link: #21508f;         /* 7.85:1 */
  --focus: #0d2c50;
  --read: 1.0625rem;       /* текст для чтения 17 px */
}

/* Шапка: вордмарк уровня C из бренд-кита — живой SVG, не картинка. */
.brand { display: inline-block; line-height: 0; }
.brand__logo { width: 7.2rem; height: auto; display: block; }
header h1 { font-size: 1.35rem; }

/* Фокус виден везде: контур navy на бумаге, светлое золото на navy. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
header :focus-visible, .tabs :focus-visible, .hero :focus-visible, .next :focus-visible {
  outline-color: #e8c98a;
}
#view:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Кнопки — не ниже 48 px: на них жмут пальцем. Маленькая остаётся только в таблицах. */
.btn { min-height: 48px; }
.btn--small { min-height: 40px; }
.btn--wide { width: 100%; justify-content: center; }
.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; }
.lead { color: var(--text); opacity: .86; font-size: .95rem; }

/* Текст для чтения — в потоке страницы, без прокрутки внутри прокрутки: на телефоне она
   теряла место в тексте. 17 px, строка не длиннее ~68 знаков. */
.stim__body { max-height: none; overflow: visible; font-size: var(--read); line-height: 1.65;
  max-width: 68ch; }
.task__prompt { font-size: 1.06rem; }

/* Варианты ответа: блок на всю ширину от 52 px; вердикт — словом, значком и цветом сразу. */
.opt { min-height: 52px; }
.opt--ok, .opt--right { border-color: var(--ok); background: var(--ok-wash); }
.opt--miss { border-color: var(--err); background: var(--err-wash); }
.opt--ok .opt__key::after, .opt--right .opt__key::after { content: " ✓"; color: var(--ok); }
.opt--miss .opt__key::after { content: " ✕"; color: var(--err); }
.verdict-box--miss .verdict-box__word { color: var(--err); }
.verdict-box--ok .verdict-box__word::before { content: "✓ "; }
.verdict-box--miss .verdict-box__word::before { content: "✕ "; }
.verdict-box { animation: rise .15s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mark-model { display: inline-block; margin: .3rem 0 .6rem; padding: .15rem .5rem;
  border: 1px dashed var(--accent-deep); color: var(--accent-deep); border-radius: 2px;
  font: 600 .66rem/1.4 var(--caps); letter-spacing: .1em; text-transform: uppercase; }
.layer--authored { border-left: 3px solid var(--ink-soft); padding-left: .6rem; }

/* ── Главная: один следующий шаг ─────────────────────────────────────────── */
.next { background: var(--ink-deep); color: var(--paper-warm); border-left: 3px solid var(--accent);
  border-radius: 2px; padding: 1.2rem 1rem 1.1rem; margin: 0 0 1rem; }
.next__label { font: 600 .66rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft); }
.next__title { margin: .55rem 0 .3rem; font: 500 1.6rem/1.2 var(--display); color: #fff; }
.next__text { margin: 0 0 1rem; color: rgba(246, 241, 232, .9); }
.next .btn--primary { background: var(--paper-warm); color: var(--ink-deep); border-color: var(--paper-warm); }
.next .btn--primary:hover { background: #fff; }
.next .btn { color: var(--paper-warm); border-color: rgba(246, 241, 232, .5); }
.next .flags { color: var(--paper-warm); }

.cards { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 0 0 1.4rem; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: 1rem; }
.card__label { font: 600 .66rem/1.4 var(--caps); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: .35rem; }
.card__title { margin: 0 0 .3rem; font-weight: 600; color: var(--ink-deep); }
.card__big { margin: .1rem 0 .2rem; font: 500 2rem/1.1 var(--display); color: var(--ink-deep);
  font-variant-numeric: tabular-nums; }
.card__big span { font: 400 .95rem var(--sans); color: var(--text-mute); }
.card .actions { margin-top: .5rem; }
.notice { background: var(--ok-wash); border-left: 3px solid var(--ok); padding: .6rem .8rem;
  margin: 0 0 1rem; }
.conf--confirmed { color: var(--ok); }
.conf--expected, .conf--announced { color: var(--accent-deep); }

.more { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin-bottom: 1.5rem; }
.more a { padding: .8rem .2rem; border-bottom: 1px solid var(--rule); color: var(--ink-deep);
  text-decoration: none; min-height: 48px; display: flex; align-items: center; gap: .3rem; }
.more a::after { content: "›"; margin-left: auto; color: var(--text-mute); }
.more a:hover { background: var(--paper-cool); }

.cat__row--link { text-decoration: none; color: inherit; cursor: pointer; }
.cat__row--link:hover { background: var(--paper-cool); }
.cat__acts { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* ── Теория ─────────────────────────────────────────────────────────────── */
.guide { max-width: 68ch; }
.guide__title { font: 500 1.65rem/1.2 var(--display); color: var(--ink-deep); margin: .2rem 0 .3rem; }
.guide__body { font-size: 1rem; line-height: 1.6; }
.guide__body h3, .guide__h { font: 600 1.05rem/1.3 var(--sans); color: var(--ink-deep);
  margin: 1.4rem 0 .4rem; }
.guide__body ol, .guide__body ul { padding-left: 1.3rem; }
.guide__body li { margin: .25rem 0; }
.guide__body code { background: var(--paper-cool); padding: 0 .25rem; border-radius: 2px; font-size: .9em; }
.guide__body details { background: var(--paper-cool); padding: .3rem .6rem; border-radius: 2px; margin: .3rem 0; }

/* ── Письмо и устная речь ───────────────────────────────────────────────── */
.work__title { font: 500 1.5rem/1.2 var(--display); color: var(--ink-deep); margin: .5rem 0 .2rem; }
.work__prompt, .work__fact { background: #fff; border: 1px solid var(--rule); padding: .9rem 1rem;
  border-radius: 2px; line-height: 1.6; max-width: 68ch; }
.work__fact { background: var(--paper-cool); }
.plan-points { padding-left: 1.3rem; }
.plan-points li { margin: .25rem 0; }
.field--area textarea { width: 100%; min-height: 16rem; padding: .7rem; border: 1px solid var(--rule);
  border-radius: 2px; background: #fff; font: 400 var(--read)/1.6 var(--sans); color: var(--text); resize: vertical; }
.wc { margin: .4rem 0; font-variant-numeric: tabular-nums; }
.wc--ok { color: var(--ok); }
.wc--low { color: var(--accent-deep); }
.wc--high { color: var(--err); }
.flags { padding-left: 1.2rem; }
.stage { border: 1px solid var(--rule); background: #fff; border-radius: 2px; padding: 1rem; margin: 1rem 0;
  text-align: center; }
.stage__label { font: 600 .7rem/1.4 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.stage__clock { font: 500 3rem/1.1 var(--display); color: var(--ink-deep); font-variant-numeric: tabular-nums; margin: .4rem 0; }
.stage .actions { justify-content: center; }
.check { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0; min-height: 44px; }
.check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.essay-text { background: #fff; border: 1px solid var(--rule); padding: 1rem; line-height: 1.7;
  font-size: var(--read); white-space: normal; border-radius: 2px; }
.comment { margin: .5rem 0; padding: .6rem .8rem; border-left: 3px solid var(--ink-soft); background: var(--paper-cool); }
.warn-text { color: var(--err); }
.ok-text { color: var(--ok); }

/* ── Проверка учителем ──────────────────────────────────────────────────── */
.grade { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.crit { border: 1px solid var(--rule); border-radius: 2px; padding: .6rem .8rem; margin: 0 0 .6rem; background: #fff; }
.crit legend { font-weight: 600; color: var(--ink-deep); padding: 0 .3rem; }
.crit__scores { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0; }
.score input { position: absolute; opacity: 0; }
.score span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; font-variant-numeric: tabular-nums; }
.score input:checked + span { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }
.score input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.total { font-size: 1.1rem; }

.form { max-width: 28rem; }

@media (min-width: 52rem) {
  .brand__logo { width: 8.5rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .next { padding: 1.5rem 1.4rem; }
  .next__title { font-size: 2rem; }
  .btn--wide { width: auto; }
  .grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .grade__rubric { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow: auto; }
  .stim__body { font-size: 1.125rem; line-height: 1.7; }
}
.next { display: block; }
.next .btn.btn--primary { color: var(--ink-deep); background: var(--paper-warm); border-color: var(--paper-warm); }
.who__note { padding-left: 16px; }
.who__note.shell { margin: 0 auto; padding: 0 0 .5rem; }
.tabs__inner { max-width: var(--shell); margin: 0 auto; }
.who__note.shell { padding: 0 1rem .5rem; }
/* На телефоне шесть разделов роли — две строки по три: прокрутка вбок прятала «Теорию» и
   «Прогресс» за краем, и узнать о них было не из чего. */
@media (max-width: 51.99rem) {
  .tabs__inner { flex-wrap: wrap; overflow: visible; }
  .tabs button { flex: 1 1 30%; min-height: 42px; padding: 0 .4rem; font-size: .84rem; }
}
.work__prompt p, .work__fact p { margin: 0 0 .6rem; }
.work__prompt ul, .work__fact ul { margin: 0 0 .6rem; padding-left: 1.2rem; }

/* Задание с текстом: на телефоне — кнопка «к вопросу», на компьютере — две колонки. */
.to-question { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30;
  box-shadow: 0 2px 10px rgba(10, 35, 72, .25); }
.to-question[hidden] { display: none; }
.to-text { display: inline-block; margin: .3rem 0 .6rem; }
.task__q { scroll-margin-top: 7rem; }
@media (min-width: 52rem) {
  .task--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0 1.4rem; align-items: start; }
  .task--split > .task__top, .task--split > .task__src { grid-column: 1 / -1; }
  .task--split .task__q { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: auto; }
  .to-question, .to-text { display: none !important; }
  :root { --shell: 60rem; }
}

/* Самосверка трансформации: ключ напечатан один, верных перефразов больше. */
.selfcheck { margin: .75rem 0; padding: .75rem 1rem; background: var(--accent-wash);
  border-left: 3px solid var(--accent); }
.selfcheck p { margin: 0 0 .5rem; }
.mark-model--ok { border-style: solid; border-color: var(--ok); color: var(--ok); }

/* ── Приёмка материалов ИИ ───────────────────────────────────────────────── */
.rv { border-top: 1px solid var(--rule); padding: 1rem 0; }
.rv--done { opacity: .55; }
.rv__head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.rv__prompt { font-weight: 500; margin: .5rem 0 .25rem; }
.rv__opts { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.rv__ok { color: var(--ok); }
.rv__focus { background: var(--accent-wash); }
.rv__body { margin: .25rem 0 .75rem; padding: .5rem .75rem; border-left: 3px solid var(--accent);
  background: var(--paper-warm); }
.rv__text { white-space: pre-wrap; font: inherit; max-height: 22rem; overflow: auto; margin: .25rem 0; }
.rv__stim summary { cursor: pointer; color: var(--link); }
.rv__acts { flex-wrap: wrap; align-items: center; }
.rv__tabs { flex-wrap: wrap; gap: .4rem; }
.rv__fix textarea { width: 100%; font: inherit; }

/* ── Бумажный тур: лист для печати ───────────────────────────────────────── */
.printdoc { font: 400 11.5pt/1.45 Georgia, 'Times New Roman', serif; color: #000; background: #fff;
  padding: 1rem; max-width: 46rem; }
.printdoc h1 { font-size: 15pt; margin: 0 0 .3rem; }
.printdoc h2 { font-size: 12.5pt; margin: 1.2rem 0 .4rem; }
.printdoc h3 { font-size: 11pt; margin: .8rem 0 .3rem; }
.pd__src { font-size: 9pt; color: #444; }
.pd__stim { border-left: 2px solid #999; padding-left: .7rem; margin: .5rem 0; }
.pd__item { margin: .45rem 0; break-inside: avoid; }
.pd__opts { margin: .2rem 0 0 1.2rem; padding: 0; list-style: none; }
.pd__sheet { border-collapse: collapse; width: 100%; }
.pd__sheet td { border: 1px solid #555; padding: .25rem .5rem; height: 1.6rem; }
.pd__sheet td:first-child { width: 4rem; }
.pd__answers { break-before: page; }
@media print {
  .printdoc { padding: 0; max-width: none; }
  main, #view { padding: 0 !important; margin: 0 !important; }
}