/* =============================================================================
   uncens.ai — СЛОЙ ДОКУМЕНТАЦИИ
   -----------------------------------------------------------------------------
   Подключается ПОСЛЕ style.css и только на страницах доков:

     <link rel="stylesheet" href="shared/style.css">
     <link rel="stylesheet" href="shared/docs.css">

   Каркас страницы:

     <div class="container container--wide">
       <div class="docs">
         <aside class="docs__sidebar">
           <button class="docs__nav-toggle" type="button"
                   aria-expanded="false" aria-controls="docs-nav">содержание</button>
           <nav class="docs-nav" id="docs-nav"> … </nav>
         </aside>
         <main class="docs__content prose" id="content"> … </main>
       </div>
     </div>

   Содержание:
     01 / каркас
     02 / боковое меню
     03 / шапка страницы и заголовки с якорями
     04 / блок «на этой странице»
     05 / таблицы параметров
     06 / выноски: подсказка / предупреждение / заметка
     07 / эндпоинты и методы
     08 / шаги, вкладки-«файлы», прочая мелочь
     09 / переход к соседним страницам
     10 / адаптивность (900px / 600px)
     11 / вкладки примеров кода
   ========================================================================== */


/* =============================================================================
   01 / каркас — две колонки: липкое меню слева, контент справа
   ========================================================================== */

.docs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);   /* minmax(0,…) не даёт
                                                    контенту распирать сетку */
  gap: var(--sp-7);
  align-items: start;
}

/* Вариант с правой колонкой «на этой странице» (только очень широкие экраны). */
.docs--with-toc {
  grid-template-columns: 240px minmax(0, 1fr) 180px;
}

.docs__sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  max-height: calc(100vh - var(--header-h) - var(--sp-7));
  overflow-y: auto;
  padding-block: var(--sp-6) var(--sp-5);
  padding-right: var(--sp-3);
  min-width: 0;
}

.docs__content {
  min-width: 0;                 /* обязательный предохранитель от горизонтали */
  padding-block: var(--sp-6) var(--sp-9);
  max-width: 760px;
}

/* Абзацы в доках чуть уже — так легче читать. */
.docs__content p {
  max-width: 68ch;
}

.docs__content > * + * {
  margin-top: var(--sp-5);
}


/* =============================================================================
   02 / боковое меню
   ========================================================================== */

.docs-nav {
  display: block;
}

.docs-nav__group + .docs-nav__group {
  margin-top: var(--sp-6);
}

/* Заголовок группы — в фирменном стиле «01 / модели». */
.docs-nav__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.docs-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border);
}

.docs-nav__list li {
  margin: 0;
}

.docs-nav__link {
  display: block;
  padding: 6px 0 6px var(--sp-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-dim);
  transition: color var(--t), border-color var(--t);
}

.docs-nav__link:hover {
  color: var(--text);
  border-left-color: var(--border-hover);
}

/* Активный пункт: зелёная засечка слева. */
.docs-nav__link.is-active {
  color: var(--text);
  border-left-color: var(--text);
}

/* Вложенный уровень (подзаголовки внутри страницы). */
.docs-nav__list .docs-nav__list {
  border-left: 0;
  margin-left: var(--sp-4);
}

.docs-nav__list .docs-nav__link--sub {
  padding-left: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* Кнопка раскрытия меню — видна только на узких экранах. */
.docs__nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}

.docs__nav-toggle:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* Шеврон справа от подписи. */
.docs__nav-toggle::after {
  content: '▾';
  color: var(--text-dim);
  transition: transform var(--t);
}

.docs__sidebar.is-open .docs__nav-toggle::after {
  transform: rotate(180deg);
}


/* =============================================================================
   03 / шапка страницы и заголовки с якорями
   ========================================================================== */

.docs__header {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-7);
}

.docs__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.docs__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--sp-4);
}

.docs__intro {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* Хлебные крошки. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}

.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs__sep { color: var(--border-hover); }

/* --- заголовки внутри контента ------------------------------------------- */

.docs__content h2 {
  margin-top: var(--sp-9);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

.docs__content h3 {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

.docs__content h4 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

/* Первый заголовок после шапки не нуждается в верхней черте. */
.docs__content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Нумерация разделов доков тем же приёмом, что и на лендинге:
   <h2 data-num="03">токены</h2> */
.docs__content h2[data-num]::before,
.docs__content h3[data-num]::before {
  content: attr(data-num) ' / ';
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-weight: 400;
  color: var(--text-dim);
}

/* Якорная ссылка «#» справа от заголовка. */
.anchor {
  margin-left: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}

.anchor::before {
  content: '#';
}

h1:hover > .anchor,
h2:hover > .anchor,
h3:hover > .anchor,
h4:hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}

.anchor:hover {
  color: var(--text);
  opacity: 1;
}

/* Подсветка блока, на который перешли по якорю. */
.docs__content :target {
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

/* На тач-устройствах наведения нет — показываем якоря всегда приглушённо. */
@media (hover: none) {
  .anchor { opacity: 0.45; }
}


/* =============================================================================
   04 / блок «на этой странице»
   ========================================================================== */

.toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2) var(--sp-5);
}

.toc__list li { margin: 0; }

.toc__link {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.toc__link:hover { color: var(--text); }

/* Моноширинный номер пункта: <span class="toc__num">01</span> */
.toc__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  flex: none;
}

/* Вариант в правой колонке .docs--with-toc — узкий и липкий. */
.toc--aside {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  padding-top: var(--sp-6);
}

.toc--aside .toc__list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}

.toc--aside .toc__link {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.toc--aside .toc__link.is-active {
  color: var(--text);
}


/* =============================================================================
   05 / таблицы параметров
   -----------------------------------------------------------------------------
     <div class="table-wrap">
       <table class="params">
         <thead><tr>
           <th>параметр</th><th>тип</th><th>диапазон</th><th>описание</th>
         </tr></thead>
         <tbody><tr>
           <td class="p-name">max_tokens <span class="p-req">req</span></td>
           <td class="p-type">integer</td>
           <td class="p-range">1 … 32768</td>
           <td class="p-desc">Верхняя граница ответа.</td>
         </tr></tbody>
       </table>
     </div>
   ========================================================================== */

.params {
  width: 100%;
  font-size: var(--fs-sm);
}

/* Имя параметра — моноширинный, светлый, не переносится. */
.params .p-name,
.params tbody td:first-child {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: nowrap;
}

/* Тип — моноширинный приглушённый. */
.params .p-type {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  white-space: nowrap;
}

/* Диапазон / значение по умолчанию. */
.params .p-range {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}

/* Описание занимает всё оставшееся место. */
.params .p-desc {
  color: var(--text-secondary);
  min-width: 260px;
}

.params .p-desc code {
  font-size: 0.85em;
}

/* Пометки «обязательный» / «необязательный». */
.p-req,
.p-opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.p-req {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.p-opt {
  border: 1px solid var(--border-hover);
  color: var(--text-dim);
}

/* Значение по умолчанию внутри описания. */
.p-default {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  color: var(--text-dim);
}


/* =============================================================================
   06 / выноски — подсказка, предупреждение, нейтральная заметка
   -----------------------------------------------------------------------------
     <div class="note note--tip">
       <div class="note__title">совет</div>
       <p>Текст.</p>
     </div>
   ========================================================================== */

.note {
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-hover);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
}

.note > * + * {
  margin-top: var(--sp-3);
}

.note p {
  color: var(--text-secondary);
  max-width: none;
  margin: 0;
}

.note p + p {
  margin-top: var(--sp-3);
}

.note__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

/* --- подсказка: зелёная ---------------------------------------------------- */
.note--tip {
  border-left-color: var(--text);
  background: var(--surface-2);
}

.note--tip .note__title {
  color: var(--text);
}

.note--tip .note__title::before {
  content: '✓';
  font-size: 0.95rem;
}

/* --- предупреждение: жёлтое ------------------------------------------------ */
.note--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.note--warn .note__title {
  color: var(--warn);
}

.note--warn .note__title::before {
  content: '!';
  font-size: 0.95rem;
}

/* --- нейтральная заметка --------------------------------------------------- */
.note--info {
  border-left-color: var(--text-dim);
}

.note--info .note__title::before {
  content: 'i';
  font-style: italic;
}

/* --- опасность: красная кайма (использовать редко) ------------------------- */
.note--danger {
  border-left-color: var(--danger);
}

.note--danger .note__title {
  color: var(--danger);
}

.note--danger .note__title::before {
  content: '×';
  font-size: 1rem;
}

/* Компактная однострочная выноска. */
.note--inline {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
}

.note--inline .note__title {
  margin-bottom: 0;
  display: inline-flex;
  margin-right: var(--sp-3);
}


/* =============================================================================
   07 / эндпоинты и методы
   -----------------------------------------------------------------------------
     <div class="endpoint">
       <span class="method method--post">POST</span>
       <code class="endpoint__path">/v1/chat/completions</code>
     </div>
   ========================================================================== */

.endpoint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.endpoint__path {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  word-break: break-all;
}

.method {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.method--get    { border-color: var(--border-hover); color: var(--text); }
.method--post   { border-color: var(--border-hover); color: var(--text); }
.method--delete { border-color: rgba(248, 113, 113, 0.3); color: var(--danger); }
.method--patch,
.method--put    { border-color: var(--warn-line); color: var(--warn); }


/* =============================================================================
   08 / шаги, метки файлов, прочая мелочь
   ========================================================================== */

/* Нумерованные шаги инструкции. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-left: var(--sp-7);
  padding-bottom: var(--sp-6);
  margin-top: 0;
  border-left: 1px solid var(--border);
  margin-left: 12px;
}

.steps > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-dim);
}

.steps__title {
  font-size: var(--fs-h4);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

/* Метка имени файла над блоком кода. */
.file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
}

/* Ряд «запрос / ответ» с подписями. */
.io {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* Список кодов ответа. */
.codes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.codes li {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.codes__code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
  flex: none;
  min-width: 46px;
}

.codes__code--ok   { color: var(--accent); }
.codes__code--warn { color: var(--warn); }
.codes__code--err  { color: var(--danger); }


/* =============================================================================
   09 / переход к соседним страницам
   ========================================================================== */

/* Это служебная навигация, а не содержание страницы: одна строка, никаких
   карточек. Рамка с фоном раздувала её до половины экрана ради двух слов. */
.pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.pager__link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.pager__dir {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--t);
}

.pager__title {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  transition: color var(--t);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pager__link:hover .pager__title { color: var(--text); }
.pager__link:hover .pager__dir   { color: var(--text-secondary); }

/* «Вперёд» читается как «название → метка», поэтому порядок обратный.
   margin-left держит ссылку справа, даже когда соседа слева нет. */
.pager__link--next {
  flex-direction: row-reverse;
  margin-left: auto;
  text-align: right;
}


/* =============================================================================
   10 / адаптивность
   ========================================================================== */

/* --- до 900px: меню превращается в раскрывающийся блок сверху ------------- */
@media (max-width: 900px) {
  .docs,
  .docs--with-toc {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Меню больше не липкое и стоит над контентом. */
  .docs__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: var(--sp-5) 0 0;
    order: -1;
  }

  .docs__nav-toggle {
    display: flex;
  }

  /* Свёрнуто по умолчанию; JS вешает .is-open на .docs__sidebar. */
  .docs-nav {
    display: none;
    margin-top: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    max-height: 60vh;
    overflow-y: auto;
  }

  .docs__sidebar.is-open .docs-nav {
    display: block;
  }

  .docs__content {
    padding-top: var(--sp-6);
    max-width: none;
  }

  /* Правая колонка «на этой странице» становится обычным блоком. */
  .toc--aside {
    position: static;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: var(--sp-6);
  }

  .io {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- до 600px ------------------------------------------------------------- */
@media (max-width: 600px) {
  .docs__content h2 {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
  }

  .docs__header {
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
  }

  .toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .note {
    padding: var(--sp-4);
  }

  /* Описание параметра может быть узким — таблица скроллится по горизонтали. */
  .params .p-desc {
    min-width: 200px;
  }

  .steps > li {
    padding-left: var(--sp-6);
  }

  /* На узком экране две ссылки в строку не помещаются — переносим в столбик. */
  .pager {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .pager__link--next {
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Якоря на телефоне не нужны — места мало. */
  .anchor {
    display: none;
  }
}


/* =============================================================================
   11 / вкладки примеров кода (curl / python / node)
   -----------------------------------------------------------------------------
   Общий компонент для всех страниц документации. Разметка:

     <div class="tabs" data-tabs>
       <div class="tabs__bar">
         <div class="tabs__btns" role="tablist"> <button class="tabs__btn is-active" …> </div>
         <button class="code__copy" type="button">copy</button>
       </div>
       <div class="tabs__panel is-active" role="tabpanel"><pre><code>…</code></pre></div>
     </div>

   Переключение — shared/site.js. Полоса кнопок скроллится по горизонтали,
   страница при этом не едет.
   ========================================================================== */

.tabs {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t);
}

.tabs:hover { border-color: var(--border-hover); }

.tabs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-right: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.tabs__btns {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.tabs__btns::-webkit-scrollbar { display: none; }

.tabs__btn {
  flex: none;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}

.tabs__btn:hover { color: var(--text); }

.tabs__btn.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

.tabs pre {
  border: 0;
  border-radius: 0;
  background: transparent;
}