/*
 * docs.css — документация, цены и правовые страницы.
 *
 * Раньше эти правила жили инлайн-блоком <style> внутри src/server.ts и тянули
 * за собой style.css предыдущего лендинга вместе с его палитрой и IBM Plex
 * Sans. Теперь страницы собраны на components.css и общих токенах.
 *
 * Подключать после components.css.
 */

.docs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--w-prose));
  gap: 48px;
  max-width: var(--w-wrap);
  margin: 0 auto;
  padding: 48px 20px 72px;
}
@media (min-width: 768px) {
  .docs-shell { padding-inline: 32px; }
}

/* ==========================================================================
   Боковая навигация по разделам
   ========================================================================== */

.docs-nav {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding-right: 8px;
}
.docs-nav strong {
  margin: 0 0 10px;
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.docs-nav a {
  padding: 7px 10px;
  border-left: 1px solid transparent;
  color: var(--fog);
  font-size: 13px;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.docs-nav a:hover { color: var(--paper); }
.docs-nav a[aria-current="page"] {
  border-left-color: var(--mint);
  background: var(--film);
  color: var(--paper);
}

/* ==========================================================================
   Шапка документа
   ========================================================================== */

.doc-wrap { min-width: 0; }

.doc-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.doc-header .back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 12px;
}
.doc-header .back:hover { color: var(--mint-lift); }
.doc-meta { color: var(--fog); font-size: 13px; }

/** Переключатель языка. */
.doc-language { display: flex; gap: 8px; margin-bottom: 14px; }
.doc-language a {
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-language a[aria-current="page"] { border-color: var(--mint); color: var(--mint); }

/* ==========================================================================
   Тело документа
   ========================================================================== */

.doc-body { color: var(--smoke); font-size: 15px; line-height: 1.75; }

.doc-body h1,
.doc-body h2,
.doc-body h3 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  color: var(--paper);
}
.doc-body h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 16px; }
.doc-body h2 { font-size: 22px; margin: 40px 0 14px; }
.doc-body h3 { font-size: 17px; margin: 28px 0 10px; }
.doc-body p { margin: 0 0 16px; }
.doc-body strong { color: var(--paper); }

.doc-body a { color: var(--mint); }
.doc-body a:hover { color: var(--mint-lift); text-decoration: underline; }

.doc-body ul,
.doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; }

.doc-body code {
  padding: 2px 7px;
  background: var(--panel-2);
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 13px;
}
.doc-body pre {
  overflow-x: auto;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--ink-sunken);
}
.doc-body pre code {
  padding: 0;
  background: none;
  color: var(--smoke);
  font-size: 13px;
}
/* Блок ```text — это промпт или готовый текст, его читают целиком, а не
   листают вбок: строки переносятся. Код в остальных блоках не трогаем. */
.doc-body pre code.language-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.doc-code { position: relative; min-width: 0; margin: 18px 0; }
.doc-code pre { margin: 0; padding-top: 54px; }
.doc-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
}
.doc-copy:hover { border-color: var(--mint); color: var(--paper); }
.doc-copy:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.doc-media { min-width: 0; margin: 18px 0; }
.doc-media img,
.doc-media video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
}
.doc-media figcaption { margin-top: 8px; color: var(--fog); font-size: 12px; line-height: 1.5; }

.doc-body blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 1px solid var(--mint);
  background: var(--success-film);
  color: var(--fog);
}

.doc-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }

/* ==========================================================================
   Таблицы
   ========================================================================== */

.doc-table-scroll { overflow-x: auto; margin: 18px 0; }

.doc-body table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.doc-body th,
.doc-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.doc-body th {
  background: var(--panel-2);
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doc-body tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Регистрация в шапке
   ========================================================================== */

/*
 * Блок живёт рядом с .nav-links, а не внутри неё: components.css на ширине
 * до 960px прячет .nav-links и возвращает её классом .open, который ставит
 * кнопка-гамбургер. На контентных страницах ни кнопки, ни скрипта меню нет,
 * поэтому всё, что попадёт внутрь .nav-links, на телефоне исчезнет навсегда.
 * Путь к регистрации исчезать не имеет права — это единственный выход
 * из SEO-страницы в продукт.
 */
.nav-auth {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
}
.nav-login {
  color: var(--fog);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--motion-fast) ease;
}
.nav-login:hover { color: var(--paper); }

@media (max-width: 960px) {
  /* .nav-links вынесена из потока — вправо кнопки двигает уже сам .nav-auth. */
  .nav-auth { margin-left: auto; }
}
@media (max-width: 480px) {
  /* Вход остаётся доступным со страницы кабинета; регистрация — нет. */
  .nav-login { display: none; }
}

/* ==========================================================================
   Призыв под статьёй
   ========================================================================== */

.doc-cta {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--veil);
}
.doc-cta strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--paper);
}
.doc-cta p {
  margin: 0 0 18px;
  max-width: 52ch;
  color: var(--fog);
  font-size: 14px;
  line-height: 1.6;
}
.doc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Ссылки внизу документа
   ========================================================================== */

.doc-links {
  display: flex;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.doc-links a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  color: var(--fog);
  font-size: 13px;
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.doc-links a:hover { border-color: var(--mint); color: var(--paper); }

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 820px) {
  .docs-shell {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
  }
  .docs-nav {
    position: static;
    display: flex;
    max-height: none;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .docs-nav strong { display: none; }
  .docs-nav a { flex: 0 0 auto; border-left: 0; border-bottom: 1px solid transparent; }
  .docs-nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--mint); }
}