/* ─────────────────────────────────────────────────────────────────────────
   Статьи. Подключается ПОСЛЕ styles.css и опирается только на его токены —
   своих цветов здесь нет, поэтому тёмная тема работает без единой правки.

   Чем статья отличается от главной: она читается, а не листается. Отсюда
   узкая колонка (~70 знаков в строке), спокойный ритм и ноль анимаций.
   Скрипта на страницах статей нет вовсе: ни появления по прокрутке, ни
   холста в знаке — знак берётся готовым SVG. Робот, который не исполняет
   скрипты, видит ровно то же, что человек.
   ───────────────────────────────────────────────────────────────────────── */

/* Шапка на главной становится сплошной по скрипту (`is-stuck`). Здесь
   скрипта нет, поэтому сплошная сразу — иначе текст просвечивал бы под ней. */
.nav--solid {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line-2);
}
.brand__mark--img { background: none; }
.brand__mark--img img { width: 100%; height: 100%; }

.post {
  max-width: 760px; margin-inline: auto;
  padding: calc(76px + clamp(28px, 5vw, 56px)) var(--gut) clamp(40px, 6vw, 72px);
}

/* ═══ Хлебные крошки ═══ */
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Голова статьи ═══ */
.post__title {
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -.03em;
  font-weight: 650; text-wrap: balance;
}
.post__lead {
  margin-top: 18px; font-size: clamp(18px, 2.1vw, 20.5px); line-height: 1.55;
  color: var(--ink-2); text-wrap: pretty;
}
.post__meta {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 14px; color: var(--ink-3);
}

/* Короткий ответ сразу под заголовком. Тот, кто пришёл из поиска с вопросом,
   получает ответ за пять секунд — а поисковики и ассистенты берут именно
   такой абзац в готовый ответ. */
.answer {
  margin-top: 28px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg-2);
}
.answer__label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink);
}

/* ═══ Текст ═══ */
.prose { margin-top: 36px; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  margin-top: 2.1em; font-size: clamp(23px, 2.8vw, 28px); line-height: 1.25;
  letter-spacing: -.02em; font-weight: 650; scroll-margin-top: 90px;
}
.prose h3 {
  margin-top: 1.7em; font-size: 19.5px; line-height: 1.35; letter-spacing: -.01em;
  font-weight: 620; scroll-margin-top: 90px;
}
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose p, .prose li { text-wrap: pretty; }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose b, .prose strong { font-weight: 620; }

/* Сброс в styles.css снимает маркеры со всех списков — в тексте они нужны. */
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--ink-3); }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  padding: .12em .38em; border-radius: 6px; background: var(--bg-3);
}
.prose kbd {
  font-family: inherit; font-size: .86em; font-weight: 550;
  padding: .1em .45em; border-radius: 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface);
  white-space: nowrap;
}

/* Путь в меню: «Системные настройки › Клавиатура › Диктовка». */
.path { font-weight: 550; }

/* ═══ Врезки ═══ */
.note {
  padding: 16px 20px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--brand) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.note--warn {
  background: color-mix(in srgb, var(--bad) 7%, var(--bg));
  border-color: color-mix(in srgb, var(--bad) 22%, transparent);
}
.note > * + * { margin-top: .6em; }
.note__title { font-weight: 620; }

/* ═══ Шаги ═══ */
.steps { counter-reset: step; list-style: none !important; padding-left: 0 !important; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 46px; min-height: 32px;
}
.steps > li + li { margin-top: 18px !important; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 650; color: #fff; background: var(--grad);
}

/* ═══ Таблицы ═══ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45;
}
.prose th, .prose td {
  text-align: left; vertical-align: top; padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}
.prose th { font-weight: 620; color: var(--ink-2); font-size: 14px; border-bottom-color: var(--line); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yes { color: var(--good); font-weight: 600; }
.no  { color: var(--bad);  font-weight: 600; }

/* ═══ Иллюстрации ═══ */
.prose figure { margin-top: 1.8em; margin-bottom: 1.8em; }
.prose figure img, .prose figure video, .prose figure svg {
  width: 100%; height: auto; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface);
}
.prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* Настоящий вывод программы: моноширинно и без правок. Подпись обязана
   сказать, чем и когда это получено. */
.sample {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  padding: 16px 18px; border-radius: var(--r-m);
  background: var(--bg-2); border: 1px solid var(--line);
}
.sample__label {
  display: block; margin-bottom: 6px; font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.sample mark { background: color-mix(in srgb, var(--bad) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ═══ Вопросы ═══ */
.qa { margin-top: 1.2em; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-weight: 600; font-size: 17px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px; font-size: 22px; font-weight: 400;
  color: var(--ink-3);
}
.qa details[open] summary::after { content: "−"; }
.qa details > p { padding-bottom: 16px; color: var(--ink-2); }

/* ═══ Призыв в конце ═══ */
.post__cta {
  margin-top: clamp(44px, 6vw, 64px); padding: clamp(26px, 4vw, 38px);
  border-radius: var(--r-l); color: #fff; text-align: center;
  background: linear-gradient(140deg, #5C8BFF 0%, #4A70F5 42%, #6A46E8 100%);
  box-shadow: 0 24px 60px -28px rgba(60, 80, 220, .7);
}
.post__cta h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; letter-spacing: -.02em; font-weight: 650; }
.post__cta p { margin-top: 10px; color: rgba(255,255,255,.86); }
.post__cta .cta__buttons { margin-top: 22px; }
.post__cta .btn { margin-top: 0; }
.post__cta .cta__meta { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.72); }

/* ═══ Читать дальше ═══ */
.related { margin-top: clamp(44px, 6vw, 64px); }
.related h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.cards { margin-top: 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  display: block; padding: 18px 20px; border-radius: var(--r-m); text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-1px); }
.card__title { font-weight: 620; line-height: 1.35; }
.card__text { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ═══ Список статей ═══ */
.hub { margin-top: 40px; }
.hub + .hub { margin-top: 48px; }
.hub__title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.hub__text { margin-top: 6px; color: var(--ink-2); }

.post__updated { margin-top: 40px; font-size: 14px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ═══ Схемы прямо в разметке ═══
   Цвета задаются здесь, а не атрибутами в SVG: так схема сама следует
   за тёмной темой. Атрибут style внутри SVG запрещён политикой
   безопасности страницы — только классы. */
.prose figure svg.flow {
  display: block; max-width: 420px; margin-inline: auto;
  border: none; background: none; border-radius: 0;
}
.flow rect { fill: var(--bg-2); stroke: var(--line); stroke-width: 1.2; }
.flow .accent rect { fill: color-mix(in srgb, var(--brand) 9%, var(--bg)); stroke: var(--brand); stroke-width: 1.6; }
.flow text { fill: var(--ink); font-size: 15px; font-weight: 600; }
.flow text.sub { fill: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.flow path { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }

/* ═══ «Для дотошных» ═══
   Подробности, которые нужны бывалому читателю и мешают остальным:
   условия опыта, механизм, оговорки. Свёрнуты по умолчанию — основной
   текст остаётся лёгким, а проверить каждое утверждение всё равно можно. */
.more {
  margin-top: 2.4em; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg-2); padding: 0 20px;
}
.more > summary {
  cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative;
  font-weight: 620; color: var(--ink-2);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-size: 22px; font-weight: 400; color: var(--ink-3); }
.more[open] > summary::after { content: "−"; }
.more[open] { padding-bottom: 18px; }
.more > * + * { margin-top: .9em; }
.more h3 { margin-top: 1.4em; font-size: 17px; }
.more p, .more td { font-size: 15.5px; color: var(--ink-2); }