/* blox37 #6 — экран согласия на обработку персональных данных.
   Это ЭКРАН (живёт в #view), а не модалка: тем самым он не может «не поместиться» — самый
   переподанный баг проекта (skill §3, G1v) относится к окнам, а страница просто прокручивается.
   Прокручивается страница, но НЕ текст согласия: у текста своя ограниченная область (.cs-scroll),
   потому что именно её докрутка до конца открывает кнопку «Согласен». */

.cs-wrap{max-width:760px;margin:0 auto;padding:14px 12px 40px}

.cs-head{margin-bottom:12px}
.cs-title{font-size:var(--fs-xl);font-weight:800;line-height:1.25;color:var(--ink-strong);text-wrap:balance}
.cs-sub{margin-top:6px;font-size:var(--fs-md);font-weight:600;color:var(--muted-strong);line-height:1.45}
.cs-ver{margin-top:4px;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}

/* Ограниченная область чтения. dvh (не vh) — иначе адресная строка мобильного браузера
   съедает низ и «конец текста» оказывается недостижим. min() держит её разумной на десктопе. */
/* ЭТО ЛИСТ, А НЕ КОЛОДЕЦ (blox52 #4, п.1). Стояла внутренняя тень --sh-inset — пятый по счёту
   рецепт на ту же роль и вдобавок неверный по смыслу: вдавленной рисуют ВЫЕМКУ в бумаге, а
   тут белый лист лежит прямо на столе (у .cs-wrap своей заливки нет). Общий рецепт листа. */
.cs-scroll{
  height:min(52dvh, 460px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);
  background:var(--card);
  padding:16px 18px 0;
  box-shadow:var(--sheet-1);
}
/* Длинные слова, адреса и реквизиты не должны распирать страницу вбок (skill §3). */
.cs-scroll,.cs-scroll *{overflow-wrap:anywhere}

/* ХВОСТ ТЕКСТА ЗАТУХАЕТ (blox52 #7, п.1). Строка у нижней кромки обрывалась НАПОЛОВИНУ — ровный
   горизонтальный срез посреди букв, без единого признака, что ниже есть продолжение. А от того,
   долистает человек текст или нет, здесь зависит появление кнопки «Согласен»: экран, который не
   говорит «листай», — это экран, на котором кнопки просто нет и непонятно почему.
   Полоса затухания — ПСЕВДОЭЛЕМЕНТ В ПОТОКЕ, приклеенный к нижней кромке через position:sticky:
     · sticky, а не absolute — не нужен второй слой разметки, а окно с текстом остаётся ровно тем
       же листом (рецепт --sheet-1 не трогаем; mask-image здесь нельзя: маска срезала бы вместе с
       текстом и тень листа, то есть сам «обрезной край» из blox52 #4);
     · В ПОТОКЕ (без отрицательного margin) — и это главное. Прилипающий блок можно сдвинуть
       только внутри его контейнера, поэтому у самого конца прокрутки полоса встаёт на своё
       обычное место в потоке. Значит, место в потоке ОБЯЗАНО быть пустым: 36px в конце текста и
       есть та пустота, за которую полоса заходит вместо последней строки. Иначе получилось бы
       ровно то, чем судья и предостерегал: затухание съело бы последнюю строку у дочитавшего.
       Плата за это — те же 36px в scrollHeight (нижний отступ убран из padding, чистая прибавка
       ~20px). Механики «долистал → кнопка» это не меняет: она считает scrollTop относительно
       scrollHeight, и обе величины растут вместе. Стережёт пробой «затухание хвоста» в
       tools/interaction-dom.js — она же проверяет, что кнопка после долистывания появляется.
   Цвет — ТОТ ЖЕ var(--card), которым залит лист, поэтому ни в одной из четырёх схем полоса не
   может стать грязным пятном: она по определению того же цвета, что и бумага под ней. Средняя
   остановка на 60% — чтобы ослабление шло мягко, а не одной прямой. */
.cs-scroll::after{
  content:'';
  display:block;
  height:36px;
  position:sticky;
  bottom:0;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--card) 55%, transparent) 60%, var(--card));
}

/* ПЕРЕНОСЫ — ТОЛЬКО ЗДЕСЬ И ТОЛЬКО ПОТОМУ, ЧТО ТЕКСТ ТОЧНО РУССКИЙ (blox52 #6, п.2).
   На 375px абзац согласия рвался на восемь рваных строк с провалами до трети ширины: юридический
   текст состоит из длинных слов («персональных», «несовершеннолетнего», «законодательства»), и
   без переносов каждое такое слово целиком уезжает на следующую строку. hyphens:auto работает
   ТОЛЬКО когда браузер знает язык — язык задан один раз в <html lang="ru">.
   Почему то же самое НЕ роздано объявлению, чату и тексту задания: там пишет учитель, и пишет он
   в основном по-английски, а словарь переносов взялся бы русский — английские слова резались бы
   по чужим правилам. Согласие же приходит из db/consent_seed.sql и по-русски всегда.
   text-wrap:pretty — про другое: не даёт последней строке абзаца остаться из одного слова. Оно
   безопасно для любого языка, поэтому стоит у всего читаемого текста. Где ни того ни другого нет
   (старый браузер) — строка ломается ровно как раньше. */
.cs-scroll h3{margin:18px 0 6px;font-size:var(--fs-md);font-weight:800;color:var(--ink-strong);line-height:1.3;
  text-wrap:balance}
.cs-scroll h3:first-child{margin-top:0}
.cs-scroll p{margin:0 0 10px;font-size:var(--fs-md);line-height:1.55;color:var(--ink);
  font-weight:var(--fw-read);text-wrap:pretty;hyphens:auto}
.cs-scroll ul{margin:0 0 10px;padding-left:20px}
.cs-scroll li{font-size:var(--fs-md);line-height:1.55;color:var(--ink);margin-bottom:4px;
  font-weight:var(--fw-read);text-wrap:pretty;hyphens:auto}
.cs-scroll strong{font-weight:800;color:var(--ink-strong)}

/* ЛИНИЯ ДЛЯ ЗАПОЛНЕНИЯ ИДЁТ ЗА ПОДПИСЬЮ, А НЕ УЕЗЖАЕТ ОТ НЕЁ (blox52 #7, п.2).
   Незаполненный реквизит школы приходит из helpers/consent.js прочерком в 20 подчёркиваний
   (константа BLANK). Двадцать подчёркиваний — это ОДНО длинное слово: на 375px оно не влезало
   в остаток строки после «Электронная почта:» и целиком уезжало вниз, так что подпись висела
   на одной строке, а линия — на следующей. В настоящем бланке линия идёт СРАЗУ за подписью и
   тянется до правого края.
   ТЕКСТ ПРИ ЭТОМ НЕ ТРОНУТ — и это здесь не вкус, а требование: в consents.text_snapshot
   ложится текст, собранный СЕРВЕРОМ (routes/consent.js → consentPacket), и он обязан совпадать
   с показанным. Поэтому подчёркивания остаются в разметке как есть — они лежат ВНУТРИ .cs-fill,
   просто выкрашены в прозрачный и обрезаны; выделение мышью и чтение экранной читалкой отдают
   тот же текст, что и раньше. Рисуется линия волоском-границей (шкала линий: 1px). */
.cs-fill{display:inline-block;width:8ch;overflow:hidden;white-space:nowrap;color:transparent;
  vertical-align:baseline;border-bottom:1px solid var(--line-strong)}
/* Строка-реквизит целиком: «подпись: линия». Флексом, потому что линия обязана СЪЕСТЬ остаток
   строки — обычному inline-block ширину «до края» не задать. Строк такого вида в тексте всего
   несколько (адрес, почта, телефон оператора), и распознаются они по форме самой строки:
   абзац КОНЧАЕТСЯ прочерком (public/consent.js, md()). */
.cs-scroll .cs-row{display:flex;align-items:baseline;gap:6px}
.cs-scroll .cs-row .cs-fill{flex:1 1 4ch;width:auto;min-width:0}

/* Подсказка «долистайте» — гаснет, как только текст дочитан. Прячем классом с display:none,
   а не атрибутом hidden (skill §7: display в CSS сильнее hidden). */
/* ЦВЕТ ПОДСКАЗКИ — --alert-ink, а не --alert. Обе красные строки этого экрана («пролистайте
   текст до конца» и ошибка формы) лежат НЕ на карточке, а прямо на столе: у .cs-wrap своей
   заливки нет. Яркий грейпфрут --alert (gf-500) давал на столе 2.56:1 — ниже нормы читаемости
   для мелкого жирного текста, а это единственная строка, которая объясняет, почему кнопка
   «Согласен» ещё не появилась. Тёмный красный --alert-ink (gf-700) даёт 5.11:1 на бумажном
   столе, 5.39 на холодном и 9.59 на ночном. Значок рядом наследует тот же цвет. */
.cs-note{margin-top:8px;font-size:var(--fs-sm);font-weight:700;color:var(--alert-ink);
  display:flex;align-items:center;gap:6px;min-height:20px}
.cs-note.cs-off{display:none}
.cs-note svg{width:16px;height:16px}

/* Форма подписанта. Появляется вместе с кнопкой — до конца текста подписывать нечего. */
.cs-form{margin-top:14px;display:none}
.cs-form.cs-on{display:block}
.cs-form .mgr-field{max-width:none}
/* ≥16px обязательно: ниже этого iOS Safari зумит страницу и обратно уже не отматывает (skill §3). */
.cs-form .mgr-field input{font-size:var(--fs-input);padding:10px 12px;border-radius:var(--r-sm);min-height:44px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){ .cs-grid{grid-template-columns:1fr} }

.cs-err{margin:4px 0 10px;font-size:var(--fs-sm);font-weight:700;color:var(--alert-ink);
  display:flex;align-items:center;gap:6px}
.cs-err svg{width:16px;height:16px}

/* 24px между «Согласен» и «Не согласен» — это не вкус, а WCAG 2.5.8 (G8): у двух соседних
   целей с ПРОТИВОПОЛОЖНЫМ смыслом промах пальцем стоит дорого. */
.cs-actions{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cs-no{background:none;border:none;padding:8px 4px;min-height:44px;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--muted-strong);text-decoration:underline}
@media (hover:hover){.cs-no:hover{color:var(--ink)}}

/* blox38 #1 — ворота стали двухшаговыми: сперва данные ребёнка, потом текст. Номер шага говорит,
   что экран не последний, и объясняет, почему кнопки «Согласен» тут ещё нет. */
.cs-step{font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* «Исправить данные ребёнка» — 44px высоты (G8): промах по ней уводит с прочитанного текста. */
.cs-fix{margin-top:8px;background:none;border:none;padding:8px 0;min-height:44px;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--muted-strong);text-decoration:underline}
@media (hover:hover){.cs-fix:hover{color:var(--ink)}}

/* Экран после отказа — тот же контейнер, только текст и одна кнопка «назад». */
/* Текст отказа лежит НА СТОЛЕ (у .cs-wrap своей заливки нет) — тот самый случай, о котором
   предупреждал судья: тонкая буква на фоне темнее бумаги. Замер держит: --ink к столу даёт
   9.17:1 в базовой, 10.45 в обеих синих и 16.15 в ночной — вдвое выше нормы AA (4.5) в самой
   слабой схеме. Соседний .cs-sub лежит на том же столе и оставлен на 600 намеренно: это не
   абзац, а строка-инструкция, и она обязана читаться как указание, а не как проза. */
.cs-bye{margin-top:10px;font-size:var(--fs-md);line-height:1.55;color:var(--ink);
  font-weight:var(--fw-read);text-wrap:pretty;hyphens:auto}