/* ============================================================
   static/css/legal.css   — НОВЫЙ ФАЙЛ
   ------------------------------------------------------------
   Оформление юридического слоя: тонкий подвал, баннер cookie,
   галочки согласий на входе, страница документа.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ДОПИСКА В app.css / skin.css.
   Правило проекта: перенос CSS «по смыслу» уже стоил потерянных
   правил и разъехавшейся вёрстки (D-85). Самый надёжный способ
   ничего не сломать — не открывать существующие файлы вовсе.
   Откат всего оформления = удалить одну строку <link> в base.html.

   ПОРЯДОК ЗАГРУЗКИ. Файл подключается ПОСЛЕ skin.css, значит при
   равном весе селектора сильнее его. Ни один селектор отсюда не
   пересекается с существующими: все классы начинаются с site-foot,
   ckb, legal или auth__consent.

   ЗАВИСИМОСТЬ ОТ .pico. Её нет намеренно. Страница пометок и
   читалка конспектов класса .pico не получают (D-51), а подвал
   обязан выглядеть одинаково везде.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1 · ТОНКИЙ ПОДВАЛ
   Требование было буквальным: он не должен мешать. Отсюда три
   решения — не position:fixed (не отъедает высоту), мелкий кегль
   приглушённым цветом (не спорит с содержимым) и волосяная линия
   сверху вместо панели (не добавляет ещё один слой стекла).
   ══════════════════════════════════════════════════════════════ */
.site-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:.35rem 1rem;
  margin:1.6rem 0 .9rem;padding-top:.55rem;
  border-top:1px solid var(--aa-hair);
  font-size:.72rem;line-height:1.4;
  color:var(--pico-muted-color);
}
.site-foot__brand{opacity:.75;white-space:nowrap}

/* margin-left:auto прижимает ссылки вправо. На узком экране блок
   переносится целиком и прижимается уже к левому краю — см. §1b. */
.site-foot__links{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-left:auto;
}

/* Селектор из двух классов (вес 0,2,0) обязателен: у Pico есть
   правило на голый a внутри .pico, и однокласcовый .site-foot a
   ему уступал бы по весу на всех обычных страницах. */
.site-foot .site-foot__links a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .12s, border-color .12s;
}
.site-foot .site-foot__links a:hover,
.site-foot .site-foot__links a:focus-visible{
  color:var(--aa-accent);border-bottom-color:currentColor;
}

/* 1b · Телефон: подпись сверху, ссылки строкой под ней. */
@media (max-width:640px){
  .site-foot{gap:.3rem .8rem;font-size:.7rem}
  .site-foot__links{margin-left:0;width:100%}
}

/* Печать: подвал на бумаге — три ссылки, по которым не кликнуть. */
@media print{ .site-foot{display:none} }


/* ══════════════════════════════════════════════════════════════
   2 · БАННЕР COOKIE
   Во всю ширину окна, снизу, полупрозрачный. Полупрозрачность
   здесь не украшение: сквозь баннер видно, что под ним, и он
   меньше похож на модальное окно, которое нужно «пройти».
   ══════════════════════════════════════════════════════════════ */
.ckb{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--gl-fill);
  -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(180%);
  backdrop-filter:blur(var(--gl-blur)) saturate(180%);
  border-top:1px solid var(--gl-edge);
  box-shadow:0 -10px 30px -18px rgba(16,24,40,.35);
}
/* Блик по верхней грани — тот же приём, что у шапки сайта. */
.ckb::after{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gl-hi),transparent);
  pointer-events:none;opacity:.9;
}

/* Внутренняя колонка повторяет ширину контента сайта, но сама
   полоса при этом остаётся во всю ширину окна — так и просили. */
.ckb__in{
  max-width:74rem;margin-inline:auto;
  padding:.7rem 1.1rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}

.ckb__txt{
  margin:0;flex:1 1 22rem;min-width:0;
  font-size:.78rem;line-height:1.45;
  color:var(--pico-color);
}
.ckb .ckb__txt a{color:var(--aa-accent);text-decoration:underline}

.ckb__btns{display:flex;gap:.5rem;margin:0;flex:0 0 auto}

/* Кнопки описаны полностью, без опоры на Pico: баннер выводится
   и на страницах без класса .pico. */
.ckb .ckb__b{
  font:inherit;font-size:.78rem;line-height:1;
  padding:.5rem 1rem;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  width:auto;margin:0;
  transition:border-color .12s, background-color .12s, color .12s;
}
/* Отказ и согласие выглядят одинаково заметно. Приглушить «Только
   необходимые» до серого текста без рамки — распространённый приём,
   и он же превращает свободный выбор в подталкивание. */
.ckb .ckb__b--ghost{
  background:var(--pill-fill);
  border:1px solid var(--pill-edge);
  color:var(--pico-color);
}
.ckb .ckb__b--ghost:hover{border-color:var(--aa-accent);color:var(--aa-accent)}

.ckb .ckb__b--main{
  background:var(--aa-accent);
  border:1px solid var(--aa-accent);
  color:#fff;font-weight:600;
}
.ckb .ckb__b--main:hover{filter:brightness(1.08)}

/* Распорка. Баннер закреплён и накрыл бы низ страницы, включая
   ссылки подвала. Пустой блок такой же высоты возвращает прокрутку. */
.ckb-spacer{height:5.5rem}

@media (max-width:640px){
  .ckb__in{padding:.65rem .8rem;gap:.6rem}
  .ckb__txt{flex-basis:100%;font-size:.74rem}
  .ckb__btns{width:100%}
  .ckb .ckb__b{flex:1 1 0;text-align:center;padding:.55rem .6rem}
  .ckb-spacer{height:9rem}
}

@media print{ .ckb,.ckb-spacer{display:none} }


/* ══════════════════════════════════════════════════════════════
   3 · ГАЛОЧКИ СОГЛАСИЙ НА ФОРМЕ ВХОДА
   ══════════════════════════════════════════════════════════════ */
.auth__consent{margin:.2rem 0 .3rem}

/* Вся строка — это <label>, поэтому клик по тексту переключает
   галочку. Так задумано: попасть в квадратик 16×16 с телефона
   заметно труднее, чем в строку. */
.auth .auth__chk{
  display:flex;align-items:flex-start;gap:.55rem;
  margin:0 0 .5rem;
  font-size:.8rem;line-height:1.35;font-weight:400;
  color:var(--pico-muted-color);cursor:pointer;
}

/* Селектор начинается с .auth: у Pico правило .pico input весом
   0,1,1 задаёт полям margin-bottom:1rem, и голая галочка уезжала
   бы вниз относительно своей подписи. */
.auth .auth__chk input[type=checkbox]{
  flex:0 0 auto;margin:.1rem 0 0;width:1rem;height:1rem;
}
.auth .auth__chk a{color:var(--aa-accent);text-decoration:underline}

/* Ошибка про галочки — своим цветом. Красная плашка «неверный
   логин или пароль» и «поставьте галочку» — разные по смыслу вещи,
   и путать их не надо: во втором случае с паролем всё в порядке. */
.auth__error--consent{
  border-left-color:var(--aa-wait);
  background:var(--aa-wait-bg);
  margin-top:.15rem;
}


/* ══════════════════════════════════════════════════════════════
   4 · СТРАНИЦА ДОКУМЕНТА
   ══════════════════════════════════════════════════════════════ */
.legal__h1{margin-bottom:.2rem}
.legal__meta{
  margin:0 0 1.4rem;font-size:.78rem;color:var(--pico-muted-color);
}

/* Плашка «это заглушка». Жёлтая и заметная намеренно: её задача —
   попасться на глаза раньше, чем документ увидит ученик. */
.legal__stub{
  border-left:3px solid var(--aa-wait);
  background:var(--aa-wait-bg);
  border-radius:0 10px 10px 0;
  padding:.6rem .85rem;margin:0 0 1.6rem;
  font-size:.85rem;line-height:1.5;
}

/* Длинный текст читается в узкой мере — класс .measure из app.css
   уже стоит в шаблоне, здесь только межстрочный интервал. */
.legal__body{line-height:1.65}
.legal__body h2{font-size:1.05rem;margin-top:1.8rem}
.legal__body h2:first-child{margin-top:0}
.legal__body ul{margin-left:1.1rem}
.legal__body table{font-size:.85rem}

.legal__nav{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  margin-top:2.2rem;padding-top:.7rem;
  border-top:1px solid var(--aa-hair);
  font-size:.8rem;
}