/* Страницы с боковым оглавлением: туториалы и юридические тексты. */

.docs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--gap-l);
  align-items: start;
  padding-block: var(--gap-l);
}

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: var(--gap-m); }
  .toc { position: static !important; }
}

/* --- Оглавление --- */

.toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--gap-m));
  padding: var(--gap-s);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.toc__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem var(--gap-s);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 600;
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  padding: var(--gap-xs) 0 0;
  margin: 0;
}

.toc__list a {
  display: block;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-s);
  color: var(--faint);
  font-size: var(--step--1);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

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

.toc__list a.is-active {
  background: var(--card-hi);
  color: var(--text);
}

.toc__progress {
  height: 3px;
  margin: var(--gap-s) 0.5rem 0.4rem;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.toc__bar {
  height: 100%;
  width: 0;
  background: var(--text);
  transition: width 0.15s linear;
}

.toc__percent {
  padding-left: 0.5rem;
  color: var(--dim);
  font-size: var(--step--2);
}

/* --- Содержимое --- */

.doc-section { scroll-margin-top: calc(var(--nav-h) + var(--gap-m)); }
.doc-section + .doc-section { margin-top: var(--gap-l); }

.doc-section h2 { font-size: var(--step-2); margin-bottom: var(--gap-s); }
.doc-section h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.doc-section p { color: var(--muted); line-height: 1.7; }
.doc-section p + p { margin-top: var(--gap-s); }

.doc-section ul {
  margin-top: var(--gap-s);
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.8;
}

/* Пронумерованные шаги туториала */

.tut-steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  list-style: none;
  padding: 0;
  margin-top: var(--gap-m);
}

.tut-step {
  display: flex;
  gap: var(--gap-s);
  padding: var(--gap-m);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.tut-step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 700;
}

.tut-step__title { font-size: var(--step-0); font-weight: 600; margin-bottom: 0.25rem; }
.tut-step__text { color: var(--faint); font-size: var(--step--1); line-height: 1.6; }

/* Выделенная заметка */

.callout {
  display: flex;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--info) 9%, transparent);
}

.callout svg { color: var(--info); flex: none; }
.callout__title { font-size: var(--step-0); font-weight: 600; margin-bottom: 0.25rem; }
.callout__text { color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.callout a { text-decoration: underline; }

/* ============ Мобильные ============ */

@media (max-width: 900px) {
  /* Оглавление становится обычным блоком сверху — липкий сайдбар
     на узком экране просто съедал бы половину высоты. */
  .toc { position: static; }

  .toc__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }
}

@media (max-width: 720px) {
  .docs { padding-block: var(--gap-m); }

  .toc__list { grid-template-columns: 1fr; }

  .doc-section + .doc-section { margin-top: var(--gap-m); }
  .doc-section ul { padding-left: 1rem; }

  .tut-step { padding: var(--gap-s); }
  .callout { padding: var(--gap-s); }
}