/* ── ШАР ЧИТАБЕЛЬНОСТІ ДЛЯ ДОВГИХ СТОРІНОК ─────────────────────────
   Сторінки перетворювалися на суцільний текст: заголовок, абзац,
   заголовок, абзац. Нижче — засоби, які дають оку за що зачепитися:
   нумеровані розділи, виділені факти, виноски, липкий зміст і поява
   блоків при прокручуванні. Усе вимикається в режимі доступності
   й при системному «менше руху». */

/* Смужка прогресу читання — тільки на документних сторінках */
.readbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--teal,#5CB4A8),var(--navy,#16395B));
  transition:width .1s linear}

/* Липкий зміст збоку */
.doc-layout{display:grid;gap:38px}
@media(min-width:1060px){
  .doc-layout{grid-template-columns:230px minmax(0,1fr);align-items:start}
  .doc-toc{position:sticky;top:96px}
}
.doc-toc{font-size:14px;line-height:1.5}
.doc-toc .t{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted,#5b6873);margin-bottom:12px}
.doc-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.doc-toc li{counter-increment:toc;margin:0}
.doc-toc a{display:flex;gap:10px;padding:7px 0;color:var(--muted,#5b6873);
  text-decoration:none;border-left:2px solid transparent;padding-left:12px;
  margin-left:-12px;transition:color .18s,border-color .18s}
.doc-toc a::before{content:counter(toc);font-family:ui-monospace,monospace;font-size:11.5px;
  color:var(--teal,#5CB4A8);flex:0 0 16px}
.doc-toc a:hover{color:var(--ink,#16395B)}
.doc-toc a.on{color:var(--navy,#16395B);font-weight:600;border-left-color:var(--teal,#5CB4A8)}
@media(max-width:1059px){.doc-toc{display:none}}

/* Нумерація розділів: цифра збоку від заголовка */
.numbered{counter-reset:sect}
.numbered > h2{counter-increment:sect;position:relative;padding-left:52px}
.numbered > h2::before{content:counter(sect,decimal-leading-zero);position:absolute;left:0;top:.28em;
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;font-weight:400;
  letter-spacing:.06em;color:var(--teal,#5CB4A8)}
@media(max-width:640px){
  .numbered > h2{padding-left:0}
  .numbered > h2::before{position:static;display:block;margin-bottom:6px}
}

/* Виноска: ключова думка розділу, витягнута з тексту */
.pull{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--teal,#5CB4A8);
  font-family:'Lora',Georgia,serif;font-size:clamp(18px,2.2vw,22px);line-height:1.55;
  color:var(--navy,#16395B);max-width:60ch}
.pull cite{display:block;margin-top:8px;font-family:'Archivo',sans-serif;font-style:normal;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5b6873)}

/* Ряд ключових фактів */
.facts{display:grid;gap:14px;margin:24px 0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fact{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.5)}
.fact b{display:block;font-family:'Archivo',sans-serif;font-size:clamp(20px,2.6vw,26px);
  line-height:1.1;color:var(--navy,#16395B)}
.fact span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--muted,#5b6873)}

/* Підкреслення ключового слова просто в тексті */
.key{background:linear-gradient(transparent 62%,rgba(92,180,168,.38) 62%);padding:0 1px}

/* Поява при прокручуванні */
.fx{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.fx.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}
html.a11y .fx{opacity:1!important;transform:none!important;transition:none!important}
html.a11y .readbar{display:none}

/* У режимі доступності акценти лишаються, але спокійніші */
html.a11y .key{background:none;border-bottom:3px solid var(--teal,#5CB4A8)}
html.a11y .pull{font-size:21px;color:#12222e}
html.a11y .doc-toc a{font-size:16px}