/* Документы — модель угроз, протокол, справка по плагинам.
 *
 * Оболочка страницы общая с планом (read.css); здесь — сам текст. Длинный
 * технический документ читают кусками и возвращаются к нему по ссылке,
 * поэтому у каждого раздела свой якорь, строка держит около 72 знаков,
 * а код и таблицы прокручиваются внутри себя, не расширяя страницу.
 */

.doc {
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.doc > p:first-child {
  margin-top: 0;
}

.doc-part {
  margin: 0 0 72px;
  scroll-margin-top: 32px;
}

.doc-sub {
  margin: 40px 0 0;
  scroll-margin-top: 32px;
}

.doc h2 {
  margin: 0 0 20px;
  max-width: 24ch;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 250;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.doc h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.doc h4 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 14px;
}

.doc ul,
.doc ol {
  padding-left: 22px;
}

.doc li {
  margin-bottom: 6px;
}

.doc li::marker {
  color: var(--lavender);
}

.doc strong {
  font-weight: 500;
  color: var(--ink);
}

.doc a {
  color: var(--ink);
  text-decoration-color: rgb(185 168 255 / 0.5);
  text-underline-offset: 3px;
}

.doc a:hover {
  text-decoration-color: var(--lavender);
}

.doc code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgb(236 234 246 / 0.07);
  font: 400 13.5px/1.5 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Ссылка на задачу, угрозу или файл — код, который ведёт дальше. */
.doc a.ref {
  text-decoration: none;
}

.doc a.ref code {
  box-shadow: inset 0 -1px 0 rgb(185 168 255 / 0.45);
  transition: background-color 160ms var(--ease-out);
}

.doc a.ref:hover code {
  background: rgb(185 168 255 / 0.16);
}

.doc pre {
  margin: 0 0 18px;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 14px;
  background: rgb(12 10 22 / 0.72);
  border: 1px solid var(--glass-edge);
  font: 400 14px/1.7 var(--mono);
  color: var(--ink);
  tab-size: 4;
}

.doc pre code {
  padding: 0;
  background: none;
  font: inherit;
  overflow-wrap: normal;
}

.doc hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

.doc blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--glass-edge-high);
}

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

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.doc th,
.doc td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.doc th {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-faint);
}

/* In a table a code span keeps its words whole: breaking anywhere lets a
   narrow column shrink to one letter. A table too wide scrolls instead. */
.doc td code {
  overflow-wrap: normal;
}

.doc td:first-child code {
  white-space: nowrap;
}

.doc .kind {
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* Сигнатура хука или функции — одна строка кода над описанием. */
.doc .sig {
  margin: 0 0 8px;
  padding: 10px 14px;
  font-size: 13.5px;
}

/* В модели угроз у каждой угрозы две служебные строки: «Чем» — задача,
   файл и проверка — и «Остаток». Первая — мелкая сводка ссылок, вторая
   отделена чертой: это то, что защита оставляет открытым. */
.doc .doc-refs {
  font-size: 14px;
  color: var(--ink-faint);
}

.doc .doc-rest {
  padding-left: 16px;
  border-left: 2px solid rgb(185 168 255 / 0.4);
}

/* Короткие факты о версии в шапке справки. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-soft);
}

.facts b {
  font-weight: 500;
  color: var(--ink);
}

/* Оглавление там, где колонки слева нет. */
.toc {
  display: none;
  margin: 0 0 40px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgb(12 10 22 / 0.6);
  border: 1px solid var(--glass-edge);
}

.toc summary {
  min-height: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.toc ol {
  margin: 12px 0 4px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.toc li {
  margin-bottom: 8px;
}

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

/* Вход для разработчиков: две дороги рядом. */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}

.paths a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 22px 22px 24px;
  border-radius: 20px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.paths a:hover {
  border-color: var(--glass-edge-high);
  background: var(--glass-high);
}

.paths b {
  display: block;
  margin: 6px 0 8px;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}

.paths .when {
  font-size: 13.5px;
  color: var(--ink-faint);
}

@media (max-width: 1040px) {
  .toc {
    display: block;
  }
}

@media (max-width: 760px) {
  .doc {
    font-size: 15.5px;
  }

  /* A row becomes a card: the first cell leads, the others follow under
     it, each with its column's name. Three or four columns side by side
     do not fit a phone, and a table scrolled sideways hides the column
     that explains the rest. */
  .doc .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .doc .table table,
  .doc .table tbody,
  .doc .table tr,
  .doc .table td {
    display: block;
  }

  .doc .table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .doc .table td {
    padding: 3px 0;
    border: 0;
  }

  .doc .table td:first-child {
    color: var(--ink);
  }

  .doc .table td:not(:first-child)[data-label]:not([data-label=""])::before {
    content: attr(data-label) ": ";
    font-size: 13.5px;
    color: var(--ink-faint);
  }

  .doc td:first-child code {
    white-space: normal;
  }

  .doc pre {
    padding: 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc a.ref code,
  .paths a {
    transition: none;
  }
}