/* Гайд-система DSM (ADR 023). Токены и шрифты — те же, что у лендингов ADR 022
   (apps/landing/main/index.html), включая пути к Fixel: гайд отдаётся с базового
   домена, где /l/main/ уже смонтирован — вторая копия шрифтов не нужна.
   Файл общий для 17 страниц: править здесь, не в сгенерированном HTML. */

@font-face{font-family:'Fixel Display';src:url('/l/main/assets/fonts/FixelDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('/l/main/assets/fonts/FixelDisplay-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fixel Display';src:url('/l/main/assets/fonts/FixelDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('/l/main/assets/fonts/FixelText-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('/l/main/assets/fonts/FixelText-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('/l/main/assets/fonts/FixelText-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fixel Text';src:url('/l/main/assets/fonts/FixelText-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#0C0C0E; --bg2:#101014; --surf:#1A1A1F; --surf2:#202027; --line:#2A2A31;
  --ink:#F4F1EA; --ink2:#A6A29B; --gold:#D4AF37; --gold-hi:#E3C36A;
  --ok:#57b06a; --warn:#E3C36A;
  --fd:'Fixel Display','Fixel Text',system-ui,'Segoe UI',sans-serif;
  --fb:'Fixel Text',system-ui,'Segoe UI',sans-serif;
  --nav-h:60px;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#EFEBE1; --bg2:#E7E2D6; --surf:#FFFFFF; --surf2:#FBF9F4; --line:#DAD3C4;
  --ink:#1B1A16; --ink2:#5C564A; --gold:#8A5D0E; --gold-hi:#7A520A;
  --ok:#2E7D46; --warn:#8A5D0E;
}}
:root[data-theme="light"]{
  --bg:#EFEBE1; --bg2:#E7E2D6; --surf:#FFFFFF; --surf2:#FBF9F4; --line:#DAD3C4;
  --ink:#1B1A16; --ink2:#5C564A; --gold:#8A5D0E; --gold-hi:#7A520A;
  --ok:#2E7D46; --warn:#8A5D0E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--fb);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surf);padding:10px 16px;border-radius:8px;z-index:60}
.skip:focus{left:8px}

/* ---------- шапка ---------- */
.gnav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:16px;
  padding:0 clamp(14px,3vw,28px);background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:.95rem;text-decoration:none;white-space:nowrap}
.brand img{width:28px;height:28px;object-fit:contain}
.brand b{font-weight:700}
.gnav-t{margin-left:auto;color:var(--ink2);font-size:.88rem;text-decoration:none}
.gnav-t:hover{color:var(--gold)}
.gnav-a{display:flex;align-items:center;gap:8px}
.theme-btn,.toc-btn,.pr-btn{font:500 .84rem var(--fb);color:var(--ink);background:var(--surf);
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer}
.theme-btn{padding:7px;width:34px;height:34px;display:grid;place-items:center}
.theme-btn svg{width:17px;height:17px}
.theme-btn:hover,.toc-btn:hover,.pr-btn:hover{border-color:var(--gold);color:var(--gold)}
.toc-btn{display:none}

/* ---------- каркас ---------- */
.shell{display:grid;grid-template-columns:288px minmax(0,1fr);gap:clamp(20px,4vw,52px);
  max-width:1240px;margin:0 auto;padding:26px clamp(14px,3vw,28px) 60px}
.shell-1{grid-template-columns:minmax(0,760px);justify-content:center}

/* ---------- боковое оглавление ---------- */
.toc{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;max-height:calc(100vh - var(--nav-h) - 40px);
  overflow:auto;font-size:.87rem;padding-right:6px}
.toc-home{display:inline-block;font-family:var(--fd);font-weight:600;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;margin-bottom:12px}
.toc-home:hover{color:var(--gold)}
.toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc-list>li>a{display:block;padding:7px 12px;color:var(--ink2);text-decoration:none;
  border-left:2px solid transparent;margin-left:-1px}
.toc-list>li>a:hover{color:var(--ink)}
.toc-list>li.on>a{color:var(--gold);border-left-color:var(--gold);font-weight:600}
.subs{list-style:none;margin:2px 0 8px;padding:0 0 0 12px}
.subs a{display:block;padding:4px 12px;color:var(--ink2);text-decoration:none;font-size:.83rem;line-height:1.4}
.subs a:hover{color:var(--gold)}
.subs a[aria-current="location"]{color:var(--ink);font-weight:500}

/* ---------- контент ---------- */
main{min-width:0}
.crumbs{font-size:.8rem;color:var(--ink2);margin:0 0 14px}
.crumbs a{color:var(--ink2)}
.crumbs a:hover{color:var(--gold)}
.h-head{margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--fd);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h1{font-family:var(--fd);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1.18;margin:0 0 12px;letter-spacing:-.01em}
.sub{font-size:1.05rem;color:var(--ink2);margin:0 0 14px}
.h-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0;font-size:.82rem;color:var(--ink2)}
.h-meta>span:first-child{font-family:var(--fd);font-weight:600;color:var(--gold)}

.body h2{font-family:var(--fd);font-weight:600;font-size:clamp(1.22rem,2.4vw,1.55rem);line-height:1.25;
  margin:42px 0 14px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.body h3{font-family:var(--fd);font-weight:600;font-size:1.06rem;margin:28px 0 10px;color:var(--gold-hi);
  scroll-margin-top:calc(var(--nav-h) + 16px)}
.body p{margin:0 0 14px}
.blk>ul,.blk>ol{margin:0 0 16px;padding-left:22px}
.body li{margin:0 0 8px}
.body ul li::marker{color:var(--gold)}

/* врезки из docx (таблицы в одну колонку) */
/* Отличается фоном и золотым заголовком, БЕЗ толстой цветной полосы слева: врезок в тексте
   десятки на страницу, и полоса превращала их в самый «шаблонный» элемент сайта. */
.note{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 18px}
.note p{margin:0 0 8px;font-size:.95rem}
.note-h{font-family:var(--fd);font-weight:600;font-size:.88rem !important;letter-spacing:.05em;color:var(--gold)}
.note p:last-child{margin:0}
.note ul{margin:8px 0 0;padding-left:20px;font-size:.94rem}
.note li{margin:0 0 6px}

/* таблицы: на узком экране скроллятся своим контейнером, страница не едет вбок.
   `tabindex` ставит генератор — иначе к правым колонкам не добраться с клавиатуры.
   ponytail: тень-аффорданс скролла пробовали — трюк с background-attachment:local
   рисует её и когда скроллить нечего; ширина по числу колонок закрывает проблему проще. */
.tw{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--surf)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
/* Ширина по числу колонок: раньше двухколоночная таблица на 3 строки уезжала в скролл
   наравне с пятиколоночной, хотя спокойно помещалась. */
.tw-2 table{min-width:0}
.tw-3 table{min-width:440px}
.tw-4 table{min-width:560px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
td{font-variant-numeric:tabular-nums} /* колонки сум у бюджеті читаються стовпчиком */
th{font-family:var(--fd);font-weight:600;font-size:.83rem;letter-spacing:.02em;color:var(--gold);
  background:var(--surf2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surf2)}

/* ---------- motion входа (Ф3б) ----------
   Единица анимации — секция `.blk` (один подраздел), а не абзац: на среднем Android
   десятки наблюдаемых узлов заикают скролл. Класс `anim` ставит inline-скрипт шапки
   и только при отсутствии prefers-reduced-motion — без него и без JS всё видно сразу.
   `content-visibility` держит вес прокрутки на длинных разделах (09 — 28 КБ). */
.blk{content-visibility:auto;contain-intrinsic-size:auto 520px}
.anim .blk{opacity:0;transform:translateY(16px)}
.anim .blk.in{opacity:1;transform:none;
  transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1)}
/* Таймлайн (розділ 0), бюджет (додаток А) и чек-листы проявляются построчно — но не более
   восьми строк: дальше выигрыш незаметен, а число анимируемых узлов растёт. */
.anim .blk tbody tr:nth-child(-n+8),.anim .blk .checks li:nth-child(-n+8){opacity:0}
.anim .blk .checks li:nth-child(-n+8){transform:translateY(8px)}
.anim .blk.in tbody tr:nth-child(-n+8),.anim .blk.in .checks li:nth-child(-n+8){
  opacity:1;transform:none;transition:opacity .34s ease-out .1s,transform .34s ease-out .1s}
.anim .blk.in tbody tr:nth-child(2),.anim .blk.in .checks li:nth-child(2){transition-delay:.14s}
.anim .blk.in tbody tr:nth-child(3),.anim .blk.in .checks li:nth-child(3){transition-delay:.18s}
.anim .blk.in tbody tr:nth-child(4),.anim .blk.in .checks li:nth-child(4){transition-delay:.22s}
.anim .blk.in tbody tr:nth-child(5),.anim .blk.in .checks li:nth-child(5){transition-delay:.26s}
.anim .blk.in tbody tr:nth-child(6),.anim .blk.in .checks li:nth-child(6){transition-delay:.3s}
.anim .blk.in tbody tr:nth-child(7),.anim .blk.in .checks li:nth-child(7){transition-delay:.34s}
.anim .blk.in tbody tr:nth-child(8),.anim .blk.in .checks li:nth-child(8){transition-delay:.38s}
/* Пока стоит `boot` (первый кадр), переходов нет: блоки первого экрана показываются
   мгновенно, а не выезжают снизу под глазами читателя. Снимает класс guide.js. */
.anim.boot .blk,.anim.boot .blk tbody tr,.anim.boot .blk .checks li{transition:none}
@media (prefers-reduced-motion:reduce){
  .anim .blk,.anim .blk tbody tr,.anim .blk .checks li{opacity:1;transform:none;transition:none}
}

/* ---------- дисклеймер ---------- */
.disc{background:var(--surf2);border:1px solid var(--line);border-radius:14px;margin:0 0 24px}
details.disc>summary{cursor:pointer;padding:14px 18px;font-family:var(--fd);font-weight:600;font-size:.92rem;
  color:var(--warn);list-style:none;display:flex;align-items:center;gap:10px}
details.disc>summary::-webkit-details-marker{display:none}
details.disc>summary::before{content:"⚠";font-size:1rem}
details.disc>summary::after{content:"▾";margin-left:auto;transition:transform .2s}
details.disc[open]>summary::after{transform:rotate(180deg)}
details.disc .disc-b{padding:0 18px 16px}
section.disc{padding:18px}
.disc-t{font-family:var(--fd);font-size:1.02rem;margin:0 0 10px;color:var(--warn)}
.disc-b p{margin:0 0 10px;font-size:.92rem;color:var(--ink2)}
.disc-m{font-size:.8rem !important;color:var(--ink2) !important;opacity:.85;margin:12px 0 0 !important}

/* ---------- чек-листы ---------- */
.ck-note{font-size:.82rem;color:var(--ink2);background:var(--surf);border:1px dashed var(--line);
  border-radius:10px;padding:9px 13px;margin:0 0 18px}
.checks{list-style:none;margin:0 0 18px;padding:0}
.checks li{margin:0 0 6px}
.checks label{display:flex;gap:11px;align-items:flex-start;padding:10px 13px;background:var(--surf);
  border:1px solid var(--line);border-radius:10px;cursor:pointer}
.checks label:hover{border-color:var(--gold)}
.checks input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--gold);flex:none}
.checks input:checked+span{color:var(--ink2);text-decoration:line-through}
.ck-sum{font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--gold)}

/* ---------- пагинация ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.pg{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--surf);
  border:1px solid var(--line);border-radius:12px;text-decoration:none}
.pg:hover{border-color:var(--gold)}
.pg span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pg b{font-family:var(--fd);font-weight:600;font-size:.94rem;line-height:1.3}
.pg-n{text-align:right}

/* ---------- титульная ---------- */
.zm{font-family:var(--fd);font-size:1.35rem;margin:38px 0 16px}
.cards{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.cards a{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;padding:13px 16px;
  background:var(--surf);border:1px solid var(--line);border-radius:12px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.cards a:hover{border-color:var(--gold);transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.cards a:hover{transform:none}}
.c-n{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surf2);
  border:1px solid var(--line);font-family:var(--fd);font-weight:700;font-size:.9rem;color:var(--gold)}
.c-t{font-size:.95rem;line-height:1.4}
.c-ck{font-size:.8rem;color:var(--gold);white-space:nowrap}
.cta{display:inline-block;font-family:var(--fd);font-weight:600;padding:13px 24px;border-radius:12px;
  background:linear-gradient(100deg,var(--gold-hi),var(--gold));color:#141210;text-decoration:none}
.intro .blk:first-child>p:first-child{font-size:1.05rem}

/* ---------- подвал ---------- */
.gfoot{border-top:1px solid var(--line);background:var(--bg2);padding:30px clamp(14px,3vw,28px)}
.gfoot-in{max-width:1240px;margin:0 auto;font-size:.86rem;color:var(--ink2)}
.gfoot-in nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0}
.gfoot-in a{text-decoration:none}
.gfoot-in a:hover{color:var(--gold)}
.gfoot-m{font-size:.8rem;margin:0}

/* ---------- мобильный ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);padding-top:18px}
  .gnav-t{display:none}
  .toc-btn{display:block}
  .toc{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:35;max-height:calc(100dvh - var(--nav-h));
    background:var(--bg);border-bottom:1px solid var(--line);padding:16px clamp(14px,3vw,28px) 24px;display:none}
  .toc.open{display:block}
  .pager{grid-template-columns:1fr}
  .pg-n{text-align:left}
  /* Единственные способы сменить тему, открыть зміст и напечатать додаток на телефоне —
     они обязаны быть 44px, иначе промах пальцем. */
  .theme-btn{width:44px;height:44px}
  .toc-btn,.pr-btn{min-height:44px;padding:10px 14px}
  .brand{align-self:stretch;align-items:center}
}

/* ---------- печать (додатки, А4) ---------- */
@media print{
  @page{size:A4;margin:14mm}
  :root{--bg:#fff;--surf:#fff;--surf2:#fff;--line:#c9c9c9;--ink:#000;--ink2:#333;--gold:#6b4f0a;--gold-hi:#6b4f0a}
  body{background:#fff;color:#000;font-size:11pt}
  /* Не увиденный блок остался бы `opacity:0` и напечатался ПУСТЫМ — как свёрнутый
     <details>. content-visibility на печати тоже снимаем: скрытое не попадает на бумагу.
     `!important`: иначе более специфичное `.anim .blk.in` оставляет свой transition, и на
     бумагу попадает промежуточный кадр анимации. */
  .blk,.anim .blk,.anim .blk tbody tr,.anim .blk .checks li{
    content-visibility:visible !important;opacity:1 !important;transform:none !important;transition:none !important}
  .gnav,.toc,.pager,.crumbs,.gfoot nav,.pr-btn,.skip,.ck-note{display:none !important}
  .shell{display:block;max-width:none;padding:0}
  details.disc{border:1px solid #c9c9c9}
  details.disc>summary::after{content:""}
  .body h2,.body h3{break-after:avoid}
  .tw{overflow:visible;break-inside:auto}
  table{min-width:0;font-size:9.5pt}
  tr,.note,.checks li{break-inside:avoid}
  .checks label{border:1px solid #c9c9c9}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}