/* Оформление документации и статей.
   Колонка уже, чем на остальном сайте: это тексты для чтения, а не витрина. */

.doc .wrap { max-width: 780px; }

.doc header {
  padding: 54px 0 26px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 34px;
}
.doc header .logo { width: 52px; height: 52px; border-radius: 12px; display: block; margin-bottom: 18px; }
.doc h1 { font-size: clamp(30px, 4.4vw, 40px); margin: 0 0 10px; max-width: none; }
.doc .sub { font-family: "IBM Plex Serif", Georgia, serif; color: var(--muted); font-size: 19px; margin: 0; }

.doc h2 { font-size: 25px; margin: 44px 0 12px; }
.doc h3 { font-size: 18px; margin: 26px 0 8px; }
.doc p, .doc li { font-family: "IBM Plex Serif", Georgia, serif; line-height: 1.7; }
.doc li { margin: 7px 0; }
.doc ul, .doc ol { padding-left: 22px; max-width: 66ch; }

.doc code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  background: #eef2f6; padding: 2px 6px; border-radius: 3px; font-size: 14.5px;
}

.doc .note {
  background: #f6f8fb; border-left: 3px solid var(--indigo);
  padding: 15px 18px; border-radius: 0 3px 3px 0; margin: 22px 0;
}
.doc .note p { margin: 0; }

.doc table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15.5px; }
.doc th, .doc td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.doc th { color: var(--muted); font-weight: 500; font-size: 13.5px; }
.doc td { font-family: "IBM Plex Serif", Georgia, serif; }

.doc .cards { display: grid; gap: 12px; margin: 22px 0; }
.doc .card { border: 1px solid var(--rule); border-radius: 3px; padding: 16px 18px; background: var(--sheet); }
.doc .card b { display: block; margin-bottom: 4px; font-weight: 600; }

.doc main { padding-bottom: 20px; }
.doc nav.inline a { display: inline-block; margin-right: 18px; }

/* таблицы на узком экране не должны рвать страницу */
@media (max-width: 700px) {
  .doc table { display: block; overflow-x: auto; }
}