/* документы ХОЛОД’ОК по образцу «Правовых документов» Яндекса: шапка одним словом без логотипа,
   слева текст, справа навигация по статье, которая едет вместе со страницей и подсвечивает текущий раздел.
   настройки читателя (широкий формат, навигация, тёмная тема, размер текста) и режим чтения ставит docs.js
   классами на html. файл общий для xolodok.pro и pro.xolodok.pro, поэтому сброс и токены здесь свои */

html.doc-html {
  --d-bg: #FBFCFD;
  --d-text: #1A2228;
  --d-muted: #5F6B73;                 /* подписи и неактивные пункты навигации, 5 к 1 на фоне */
  --d-line: rgba(20, 27, 32, .1);
  --d-rail: rgba(20, 27, 32, .1);     /* тонкая полоса слева у навигации */
  --d-hover: rgba(20, 27, 32, .06);
  --d-soft: rgba(20, 27, 32, .045);   /* подложка заметок в тексте */
  --d-link: #0A7EA4;
  --d-pop: #FFFFFF;
  --d-pop-shadow: 0 0 0 1px rgba(20, 27, 32, .08), 0 8px 20px 1px rgba(20, 27, 32, .14);
  --d-switch-off: rgba(20, 27, 32, .2);
  --d-switch-on: #0A7EA4;
  --d-knob: #FFFFFF;
  --d-cta-bg: #5FD0EE;
  --d-cta-text: #141B20;
  --d-ease: cubic-bezier(.22, 1, .36, 1);
  --d-fs: 16px;
  --d-lh: 24px;
  --d-pad: 40px;
  --d-bar: 52px;                      /* липкая строка навигации на телефоне */
  scroll-padding-top: 24px;
  background: var(--d-bg);
}
/* тёмная только по выбору читателя: спокойный графит, ссылки и переключатели приглушённые, без яркого голубого */
html.doc-html.doc-dark {
  --d-bg: #1E2327;
  --d-text: #E3E8EB;
  --d-muted: #A2ADB4;
  --d-line: rgba(255, 255, 255, .1);
  --d-rail: rgba(255, 255, 255, .13);
  --d-hover: rgba(255, 255, 255, .07);
  --d-soft: rgba(255, 255, 255, .05);
  --d-link: #8BC0D4;
  --d-pop: #292F34;
  --d-pop-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .5);
  --d-switch-off: rgba(255, 255, 255, .24);
  --d-switch-on: #4D93AD;
  --d-knob: #F4F7F9;
  --d-cta-bg: #2C7690;
  --d-cta-text: #F4F8FA;
  color-scheme: dark;
}
/* свой сброс: на xolodok.pro у страниц документов нет общих стилей сайта. в :where, чтобы сброс
   ничего не перебивал: любое правило ниже сильнее его */
html.doc-html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.doc-html { scroll-behavior: auto; } }
html.doc-html *, html.doc-html *::before, html.doc-html *::after { box-sizing: border-box; }
:where(.dp) :is(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.dp) :is(ul, ol) { padding: 0; list-style: none; }
:where(.dp) a { color: inherit; text-decoration: none; }
:where(.dp) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
:where(.dp) svg { display: block; flex: none; }
.dp [hidden] { display: none !important; }
.dp :focus-visible { outline: 2px solid #0A7EA4; outline-offset: 2px; }
:where(.dp) :is(p, li) { text-wrap: pretty; }
html.doc-fs-s { --d-fs: 14px; --d-lh: 21px; }
html.doc-fs-l { --d-fs: 18px; --d-lh: 27px; }

body.dp {
  margin: 0;
  min-height: 100svh;
  font: 400 16px/24px Onest, system-ui, sans-serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column;
  background: var(--d-bg); color: var(--d-text);
  transition: background-color .2s, color .2s;
}

/* кнопки-значки: шестерёнка в шапке, режим чтения и меню у навигации */
.dbtn {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--d-muted);
  transition: background-color .15s, color .15s;
}
.dbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dbtn--s { width: 28px; height: 28px; }
.dbtn--s svg { width: 16px; height: 16px; stroke-width: 1.7; }
.dbtn[aria-expanded="true"] { background: var(--d-hover); color: var(--d-text); }
@media (hover: hover) { .dbtn:hover { background: var(--d-hover); color: var(--d-text); } }
/* на тачскрине кнопки крупнее, чтобы попадать пальцем */
@media (pointer: coarse) { .dbtn { width: 44px; height: 44px; } .dbtn--s { width: 40px; height: 40px; } }

/* шапка: только слово, без логотипа, как у документов Яндекса */
.dh {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 var(--d-pad);
  border-bottom: 1px solid var(--d-line);
}
.dh__brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--d-text); font-size: 24px; line-height: 28px; letter-spacing: -0.02em; white-space: nowrap;
  border-radius: 6px;
}
.dh__brand b { font-weight: 700; }
.dh__brand span { font-weight: 500; }
.dh__tools { display: none; align-items: center; gap: 4px; margin-left: auto; }
.doc-js .dh__tools { display: flex; }
/* на компьютере режим чтения и меню Markdown живут у навигации, в шапке только шестерёнка.
   выключили навигацию: эти две кнопки переезжают в шапку */
.dh__more, .dh__read { display: none; }
.doc-nonav .dh__more { display: inline-grid; }
@media (min-width: 901px) { .doc-nonav .dh__read { display: inline-grid; } }

/* лист: слева статья, справа навигация. широкий формат растягивает на всю ширину окна */
.dl {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0 56px; align-items: start;
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 36px var(--d-pad) 80px;
}
.doc-wide .dl { max-width: none; }
.doc-nonav .dl { grid-template-columns: minmax(0, 1fr); }

/* статья */
.da { min-width: 0; font-size: var(--d-fs); line-height: var(--d-lh); }
.da h1 { font-weight: 500; font-size: 34px; line-height: 42px; letter-spacing: -0.02em; text-wrap: balance; }
.da h2 { margin-top: 44px; font-weight: 500; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; text-wrap: balance; }
.da h1 + p { margin-top: 24px; }
.da p, .da ul, .da ol, .da__note, .da__cta { margin-top: 14px; }
.da h2 + p, .da h2 + ul, .da h2 + ol { margin-top: 12px; }
.da ul, .da ol { padding-left: 1.5em; }
.da ul { list-style: disc; }
.da ol { list-style: decimal; }
.da li + li { margin-top: 8px; }
.da li::marker { color: var(--d-muted); }
.da a:not(.btn) { color: var(--d-link); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) { .da a:not(.btn):hover { text-decoration: underline; } }
.da__note { padding: 16px 20px; border-radius: 12px; background: var(--d-soft); }
.da__note p { margin: 0; }
/* кнопка в конце инструкции: лёд с тёмным текстом, как кнопки сайта */
.da__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; margin-top: 20px; padding: 0 28px; border-radius: 16px;
  background: var(--d-cta-bg); color: var(--d-cta-text);
  font-weight: 500; font-size: 17px; line-height: 22px; white-space: nowrap;
  transition: background-color .15s, transform .15s var(--d-ease);
}
.da__cta:active { transform: scale(.985); }
@media (hover: hover) { .da__cta:hover { background: #45C4E6; } }
.doc-dark .da__cta { background: var(--d-cta-bg); color: var(--d-cta-text); }
@media (hover: hover) { .doc-dark .da__cta:hover { background: #317F9A; } }
.da__version { margin-top: 40px; color: var(--d-muted); font-size: 14px; line-height: 20px; }

/* навигация по статье: едет вместе со страницей, текущий раздел темнее, слева бегунок */
.dt {
  display: none;
  position: sticky; top: 20px;
  flex-direction: column;
  max-height: calc(100svh - 40px);
}
.doc-js .dt { display: flex; }
.doc-nonav .dt { display: none; }
.dt__tools { display: flex; gap: 8px; margin: -2px 0 14px -6px; }
.dt__title { margin-bottom: 12px; font-weight: 500; font-size: 15px; line-height: 20px; }
.dt__list {
  position: relative; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--d-rail) transparent;
  padding-right: 6px;
}
.dt__link {
  display: block;
  padding: 6px 6px 6px 14px;
  border-left: 2px solid var(--d-rail);
  color: var(--d-muted); font-size: 14px; line-height: 20px;
  transition: color .2s;
}
.dt__link.is-active { color: var(--d-text); }
@media (hover: hover) { .dt__link:hover { color: var(--d-text); } }
.dt__link:focus-visible { outline-offset: -2px; border-radius: 4px; }
/* бегунок: тёмная полоска поверх серой, плавно переезжает к текущему разделу */
.dt__bar {
  position: absolute; left: 0; top: 0;
  width: 2px; height: 0; border-radius: 1px;
  background: var(--d-text);
  pointer-events: none;
}
.dt__bar.is-ready { transition: transform .3s var(--d-ease), height .3s var(--d-ease); }

/* меню Markdown и настройки: всплывают под кнопкой, уходят быстрее, чем приходят */
.dpop {
  position: fixed; z-index: 70; left: 0; top: 0;
  min-width: 220px; max-width: calc(100vw - 16px);
  padding: 4px 0; border-radius: 8px;
  background: var(--d-pop); color: var(--d-text);
  box-shadow: var(--d-pop-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease-in, transform .12s ease-in, visibility 0s .12s;
}
.dpop.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--d-ease), transform .18s var(--d-ease), visibility 0s;
}
.dpop__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 36px; padding: 0 14px;
  color: var(--d-text); font-size: 14px; line-height: 20px; text-align: left; white-space: nowrap;
}
.dpop__item svg { width: 16px; height: 16px; fill: none; stroke: var(--d-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dpop__item:focus-visible { outline: none; background: var(--d-hover); }
@media (hover: hover) { .dpop__item:hover { background: var(--d-hover); } }
@media (pointer: coarse) { .dpop__item { min-height: 44px; } }

/* настройки: строка с подписью и состоянием, справа переключатель */
.dpop--set { width: 260px; padding: 8px 0; }
.dset {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 8px 16px; text-align: left;
}
.dset:focus-visible { outline: none; background: var(--d-hover); }
@media (hover: hover) { button.dset:hover { background: var(--d-hover); } }
.dset__t { display: block; color: var(--d-text); font-size: 14px; line-height: 20px; }
.dset__s { display: block; color: var(--d-muted); font-size: 13px; line-height: 18px; }
.dsw {
  position: relative; flex: none;
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--d-switch-off);
  transition: background-color .2s;
}
.dsw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--d-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s var(--d-ease);
}
[aria-checked="true"] > .dsw { background: var(--d-switch-on); }
[aria-checked="true"] > .dsw::after { transform: translateX(16px); }
.dsize { display: flex; align-items: center; gap: 2px; flex: none; }
.dsize button {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--d-text); line-height: 1;
}
.dsize button[aria-checked="true"] { color: var(--d-link); background: var(--d-hover); }
@media (hover: hover) { .dsize button:hover { background: var(--d-hover); } }
.dsize button:nth-child(1) { font-size: 13px; }
.dsize button:nth-child(2) { font-size: 16px; }
.dsize button:nth-child(3) { font-size: 19px; }

/* режим чтения: без шапки, навигации и подвала, текст на всё окно, кнопки выхода и меню справа сверху */
.dr { display: none; }
.doc-reading .dh, .doc-reading .dt, .doc-reading .dm, .doc-reading .df { display: none; }
.doc-reading .dl { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 32px 72px 80px var(--d-pad); }
.doc-reading .dr { position: fixed; z-index: 50; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }

/* «Скопировано» внизу по центру */
.dtoast {
  position: fixed; z-index: 80; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  padding: 10px 16px; border-radius: 10px;
  background: #1A2228; color: #F4F7F9;
  font-size: 14px; line-height: 20px; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .15s ease-in, transform .15s ease-in, visibility 0s .15s;
}
.dtoast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s var(--d-ease), transform .2s var(--d-ease), visibility 0s; }
.doc-dark .dtoast { background: #E3E8EB; color: #1A2228; }

/* подвал документа: тихий, ссылки на другие документы и реквизиты */
.df {
  padding: 20px var(--d-pad) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--d-line);
  color: var(--d-muted); font-size: 13px; line-height: 18px;
}
.df__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; max-width: calc(1120px - 2 * var(--d-pad)); margin: 0 auto; }
.doc-wide .df__in { max-width: none; }
.df nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.df a { display: inline-flex; align-items: center; min-height: 36px; color: var(--d-muted); transition: color .15s; }
.df a[aria-current="page"] { color: var(--d-text); }
@media (hover: hover) { .df a:hover { color: var(--d-text); } }
.df__legal p + p { margin-top: 2px; }

/* строка навигации на телефоне: текущий раздел, по нажатию весь список */
.dm { display: none; }
.dm__toc {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; height: 44px;
  color: var(--d-text); font-weight: 500; font-size: 15px; line-height: 20px; text-align: left;
}
.dm__toc span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dm__toc svg { width: 16px; height: 16px; fill: none; stroke: var(--d-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--d-ease); }
.dm__toc[aria-expanded="true"] svg { transform: rotate(180deg); }
.dm__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: min(60svh, 440px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--d-pad) 16px;
  background: var(--d-bg);
  border-bottom: 1px solid var(--d-line);
  box-shadow: 0 16px 24px -16px rgba(20, 27, 32, .3);
}
.dm__panel .dt__link { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }

@media (max-width: 900px) {
  html.doc-html { --d-pad: 16px; scroll-padding-top: calc(var(--d-bar) + 16px); }
  .dh { height: 56px; gap: 8px; }
  .dh__brand { font-size: 20px; line-height: 24px; gap: 6px; }
  .dl { display: block; padding-top: 24px; padding-bottom: 56px; }
  .doc-js .dt { display: none; }
  .doc-js .dm {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center;
    height: var(--d-bar); padding: 0 6px 0 var(--d-pad);
    background: var(--d-bg); border-bottom: 1px solid var(--d-line);
  }
  .doc-nonav .dm { display: none; }
  .da h1 { font-size: 28px; line-height: 34px; }
  .da h2 { margin-top: 36px; font-size: 22px; line-height: 28px; }
  .da__cta { display: flex; width: 100%; }
  .doc-reading .dl { padding: 64px var(--d-pad) 56px; }
  .df__in { flex-direction: column; align-items: flex-start; }
  .df nav { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .dt__bar.is-ready, .dpop, .dpop.is-open, .dtoast, .dtoast.is-on, .dsw, .dsw::after, .dm__toc svg, body.dp { transition: none; }
}

@media print {
  .dh, .dt, .dm, .df, .dr, .dpop, .dtoast { display: none !important; }
  html.doc-html, html.doc-html.doc-dark { --d-bg: #FFFFFF; --d-text: #000000; --d-muted: #444444; --d-link: #000000; }
  .dl { display: block; max-width: none; padding: 0; }
}