/* Общая оболочка сайта: палитра, гарнитуры, шапка, подвал, кнопки, фокус,
 * печать. Подключается первым файлом на static/*.html и legal/*.html; всё,
 * что специфично для страницы, остаётся в её собственном <style> ниже и
 * переопределяет отсюда что нужно.
 *
 * ⛔ Зачем один файл. Аудит 24.09 нашёл четыре варианта шапки, три пары
 * гарнитур, три стиля кнопок и четыре подвала на одном пути «лендинг → касса
 * → спасибо → оферта». Покупатель за четыре экрана видел четыре разных имени
 * бренда. Пока оболочка лежала инлайном в каждом файле, расхождение было
 * вопросом времени, а не аккуратности.
 *
 * ⛔ Стиль — книжный: латунь по чернильному, линейки вместо карточек,
 * ровный кегль. Ни градиентных заливок, ни свечений, ни бегущих бликов:
 * тест книги (tests/test_render.py) роняет сборку на linear-gradient, и на
 * сайте держится та же строгость.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Prata&display=swap');

:root{
  --void:#05070E;
  --abyss:#070A14;
  --midnight:#0A0F1A;
  --slate-2:#0E1522;
  --ice:#EAF0F8;
  --ice-dim:#AEB9CC;
  /* ⛔ Было #5C6B84 — контраст 2.7:1 на чернильном фоне. Этим цветом набраны
     подписи реквизитов, даты редакций и подсказки полей: норма 4.5:1. */
  --ice-faint:#8391A8;
  /* Одна латунь на весь сайт — та, что на витрине (editorial.css:2).
     До 24.09 внутренние страницы держали свою, #C69A5B, и на переходе
     «лендинг → касса» менялся цвет всех акцентов разом. */
  --brass:#C5A773;
  --brass-lt:#DFC89E;
  --brass-dim:#8A7048;
  --line:rgba(197,167,115,.22);
  --line-soft:rgba(157,170,192,.14);

  /* Одна пара на весь сайт. Manrope — текст и интерфейс, Prata — только
     крупные числа и знаковые заголовки, как на витрине. */
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"Prata","Iowan Old Style","Palatino Linotype",Georgia,serif;
}

/* ⛔ Кнопки и поля не наследуют гарнитуру: без этой строки <button> брал
   системный Arial, и на /obrazec пульт страниц, а в статьях «Посчитать»
   были набраны третьим шрифтом. */
button,input,select,textarea{font:inherit}

/* Один контейнер у шапки и подвала на всех страницах. Ширина основной
   колонки у страниц разная (чекаут 720, кабинет 780, образец 880), и пока
   шапка наследовала её, логотип стоял на разном расстоянии от края: в
   юрдоках x=84, в чекауте x=304. */
.topbar .wrap, footer .wrap{max-width:880px}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line-soft);background:var(--void)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
/* Бренд один на всех страницах — как на лендинге (редакция V4, 26.09):
   знак из двух восьмиугольников и «OKTAGRAM / расчётная система». */
.brand-mark{width:34px;height:34px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1;stroke-linejoin:miter}
.brand-mark .dot{fill:var(--brass);stroke:none}
.brand .tx{display:grid;line-height:1.1}
.brand .nm{font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.brand .sub{margin-top:5px;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ice-faint)}
.topbar .back{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ice-dim);text-decoration:none;
  white-space:nowrap;border:1px solid var(--line-soft);background:transparent;
  padding:10px 16px;cursor:pointer;transition:border-color .25s,color .25s}
.topbar .back:hover{color:var(--brass-lt);border-color:var(--brass)}
.topbar .links{display:flex;align-items:center;gap:10px}

/* ── подвал ────────────────────────────────────────────────────────────── */
/* Всё внутри .wrap: до 24.09 строка реквизитов лежала в <footer> снаружи
   контейнера и на телефоне упиралась в самый край экрана. */
footer{border-top:1px solid var(--line-soft);padding:34px 0 44px;
  font-family:var(--sans);font-size:13px;color:var(--ice-faint);
  background:var(--abyss)}
footer a{color:var(--ice-dim);text-decoration:none}
footer a:hover{color:var(--brass-lt)}
footer .links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:16px}
footer .note{margin:0 0 12px;color:var(--ice-dim)}
footer .disc,footer .req{margin:0;max-width:74ch;line-height:1.6;font-size:12px}
footer .req{margin-top:10px}

/* ── кнопки ────────────────────────────────────────────────────────────── */
/* Один стиль: латунная обводка по тёмному, заливка при наведении. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 26px;cursor:pointer;
  border:1px solid var(--brass);background:transparent;color:var(--brass-lt);
  text-decoration:none;border-radius:0;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover:not([disabled]){background:var(--brass-lt);color:#1a1206;
  border-color:var(--brass-lt)}
.btn-ghost{border-color:var(--line-soft);color:var(--ice-dim);background:transparent}
.btn-ghost:hover{color:var(--brass-lt);border-color:var(--brass);background:transparent}
/* Выключенная кнопка обязана читаться: до 24.09 «Перейти к оплате» в
   неактивном виде давала контраст 2.6:1 и выглядела как пустое место. */
.btn[disabled]{border-color:rgba(157,170,192,.3);color:#97A3B6;
  background:transparent;cursor:not-allowed}

/* ── фокус ─────────────────────────────────────────────────────────────── */
/* Один видимый фокус на весь сайт. Синяя рамка браузера на половине страниц
   и outline:none на полях ввода — это две разные ошибки с одним следствием:
   человек с клавиатуры не видит, где он находится. */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brass);outline-offset:2px}
/* ⛔ У input[type=date] фокус уходит на внутренние сегменты ДД/ММ/ГГГГ, и
   :focus-visible на самом поле не срабатывает — кольца не видно вообще.
   Для него рисуем по обычному :focus. */
/* :focus-within — потому что при переходе по Tab браузер отдаёт фокус
   внутреннему сегменту ДД/ММ/ГГГГ, и сам input под :focus не попадает. */
input[type="date"]:focus,input[type="date"]:focus-within{
  outline:2px solid var(--brass);outline-offset:2px}

/* ── печать ────────────────────────────────────────────────────────────── */
/* Оферту и политику печатают чаще всего остального. Без этого блока браузер
   печатает светлый текст без фона — то есть белое по белому. */
@page{margin:16mm 14mm}
@media print{
  :root{--ice:#111;--ice-dim:#333;--ice-faint:#555;--brass:#6b5326;
        --brass-lt:#6b5326;--line:#bbb;--line-soft:#ddd}
  html,body{background:#fff!important;color:#111!important;font-size:11pt}
  .topbar,footer,.btn,.back,.no-print{display:none!important}
  a{color:#111!important;text-decoration:none}
  /* Ссылка на бумаге бесполезна, если не видно, куда она ведёт. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h1,h2,h3{color:#111!important;page-break-after:avoid}
  h2,h3{margin-top:14pt}
  p,li{orphans:3;widows:3}
  /* Поля даёт @page; контейнер только перестаёт ограничивать ширину.
     ⛔ padding:0 обнулял и левый отступ списков — номера пунктов уезжали
     за край листа и печатались обрезанными («10.» превращалось в «0.»). */
  .wrap{max-width:none!important;padding-inline:4mm!important}
  main,main.legal{padding:0!important}
  .legal .doc{max-width:none}
  .legal .card,.legal .todo{border:1px solid #bbb;background:#fff}
  table{page-break-inside:avoid}
}

@media(max-width:520px){
  .topbar .row{min-height:58px;gap:10px}
  .brand-mark{width:26px;height:26px}
  .brand .nm{font-size:11px;letter-spacing:.2em}
  .brand .sub{display:none}
  .topbar .back{padding:9px 12px;font-size:11px;letter-spacing:.06em}
}
/* На 390 шапка юрдоков вставала в две строки — логотип, под ним «← НА
   ГЛАВНУЮ» — и съедала 100 пикселей высоты. Стрелки достаточно. */
@media(max-width:430px){
  .topbar .back .bk{display:none}
}