/*
 * Общая область статьи. Правила применяются только к содержимому внутри
 * .article-content, поэтому авторская разметка не меняет интерфейс сайта.
 */
.article-content,
.article-content * {
    box-sizing: border-box;
}
.article-content {
    color: var(--color-text);
    line-height: var(--article-line-height, 1.75);
    overflow-wrap: break-word;
}

/* Псевдоэлемент удерживает float, если иллюстрация завершает статью. */
.article-content::after {
    display: table;
    clear: both;
    content: "";
}

/* Ссылки <a> внутри статьи: фирменный цвет и заметное состояние наведения. */
.article-content a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.article-content a:hover {
    text-decoration-thickness: 2px;
}

/*
 * Заголовки <h1>–<h6>: компактная иерархия без больших разрывов между
 * заголовком и следующим абзацем. Первый элемент статьи не получает отступ сверху.
 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    line-height: var(--line-heading);
    text-wrap: balance;
}

.article-content > :first-child {
    margin-top: 0;
}

.article-content h1 {
    margin-block: 0 .6rem;
    font-size: 1em;
    letter-spacing: -.025em;
}

.article-content h2 {
    margin-block: 1.05rem .5rem;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    letter-spacing: -.015em;
}

.article-content h3 {
    margin-block: .75rem .5rem;
    font-size: .9em;
    line-height: 1.25;
}

.article-content h4,
.article-content h5,
.article-content h6 {
    margin-block: .65rem .5rem;
}

/*
 * Абзацы <p> начинаются после одной текущей строки; остальные блоки используют
 * настраиваемый читателем --article-block-spacing.
 */
.article-content p {
    margin-block: 1lh var(--article-block-spacing, .75rem);
}

.article-content ul,
.article-content ol,
.article-content blockquote,
.article-content table {
    margin-block: 0 var(--article-block-spacing, .75rem);
}

.article-content ul,
.article-content ol {
    margin-top: .375rem;
    padding-top: .25rem;
    padding-left: 1.4em;
}

.article-content li + li {
    margin-top: .18em;
}

/* Секции <section> дают якорям место под шапку, но не добавляют скрытый отступ. */
.article-content section {
    padding-top: 0;
    scroll-margin-top: 1.5rem;
}

/* Цитаты <blockquote>: акцентная линия слева и приглушённый текст. */
.article-content blockquote {
    margin-inline: 0;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-5);
    color: var(--color-text-muted);
}

/*
 * Резюме .article-summary и оглавление .article-toc: компактные служебные
 * карточки. Внутренние первый и последний элементы не создают лишних полей.
 */
.article-content .article-summary,
.article-content .article-toc {
    margin-block: .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.125rem;
    background: var(--color-surface-subtle);
}

.article-content .article-summary > :first-child,
.article-content .article-toc > :first-child {
    margin-top: 0;
}

.article-content .article-summary > :last-child,
.article-content .article-toc > :last-child {
    margin-bottom: 0;
}

.article-content .article-toc h2 {
    margin-block: 0 .3rem;
}

.article-content .article-toc a {
    color: var(--color-text);
    text-decoration-color: var(--color-border-strong);
}

.article-content .article-toc a:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

/*
 * Примеры .article-example: отдельный учебный блок с акцентной линией.
 * .article-example__title оформляет короткую метку вида «Пример».
 */
.article-content .article-example {
    margin-block: .65rem;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1rem 1.125rem;
    background: var(--color-surface-subtle);
}

.article-content .article-example__title {
    margin: 0 0 .3rem;
    color: var(--color-accent);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.article-content .article-example > :first-child {
    margin-top: 0;
}

.article-content .article-example > :last-child {
    margin-bottom: 0;
}

.article-content .article-example h3 {
    margin-block: 0 .3rem;
}

/*
 * Врезки .article-callout: базовая карточка и смысловые модификаторы цвета.
 * Доступны --note, --important, --tip, --deep и прежние --info/--warning/--danger.
 */
.article-content .article-callout {
    margin-block: .65rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1rem 1.125rem;
    background: var(--color-surface-subtle);
}

.article-content .article-callout > :first-child {
    margin-top: 0;
}

.article-content .article-callout > :last-child {
    margin-bottom: 0;
}

.article-content .article-callout h3 {
    margin-block: 0 .3rem;
}

/* В обычном абзаце вместо точной метки «Важно:» показывается значок того же масштаба. */
.article-content p > .article-importance-label {
    position: relative;
    display: inline-block;
    inline-size: 1.4em;
    block-size: 1.4em;
    margin-inline-end: .2em;
    overflow: hidden;
    border: .12em solid currentColor;
    border-radius: 50%;
    color: var(--color-text);
    font-size: 1em;
    line-height: 1;
    text-indent: -10000px;
    vertical-align: middle;
    white-space: nowrap;
}

.article-content p > .article-importance-label::before {
    content: "!";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    text-indent: 0;
}

.article-content .article-callout--note {
    background: var(--color-surface-subtle);
}

.article-content .article-callout--info {
    border-color: var(--color-accent);
    background: var(--color-surface-accent);
}

.article-content .article-callout--important,
.article-content .article-callout--warning {
    position: relative;
    border-color: #d69e2e;
    padding-inline-start: 3em;
    background: color-mix(in srgb, #d69e2e 12%, var(--color-surface));
}

/* Значок масштабируется с текстом статьи; исходная метка остаётся доступной экранным дикторам. */
.article-content .article-callout--important::before,
.article-content .article-callout--warning::before {
    content: "!";
    position: absolute;
    inset-block-start: 1em;
    inset-inline-start: .85em;
    display: grid;
    place-items: center;
    width: 1.4em;
    height: 1.4em;
    border: .12em solid currentColor;
    border-radius: 50%;
    color: var(--color-text);
    font-size: 1em;
    font-weight: 800;
    line-height: 1;
}

.article-content .article-callout--important .article-importance-label,
.article-content .article-callout--warning .article-importance-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.article-content .article-callout--tip {
    border-color: #56a66c;
    background: color-mix(in srgb, #56a66c 12%, var(--color-surface));
}

.article-content .article-callout--deep {
    border-color: #8064d9;
    background: color-mix(in srgb, #8064d9 12%, var(--color-surface));
}

.article-content .article-callout--danger {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

/*
 * Формулы .article-formula/.math и блочный вывод MathJax CHTML: горизонтальная
 * прокрутка защищает узкие экраны. --accent добавляет акцентную подложку.
 * --large увеличивает выбранную формулу целиком, включая индексы корней.
 */
.article-content .article-formula,
.article-content .math,
.article-content mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.article-content .article-formula {
    margin-block: .625rem;
    text-align: center;
}

.article-content .article-formula--accent {
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
    border-radius: var(--radius-md);
    padding: .625rem .875rem;
    background: var(--color-surface-accent);
}

.article-content .article-formula--large > mjx-container[display="true"] > mjx-math {
    /* MathJax sets its baseline font size on the container, so scale its child. */
    font-size: 1.4em !important;
}

.article-content mjx-container[display="true"] {
    margin-block: .625rem !important;
    padding-block: 0;
}

.article-content .article-formula > mjx-container[display="true"] {
    margin-block: 0 !important;
}

/*
 * Код <code>/<pre> и клавиши <kbd>: inline-код остаётся в строке, а <pre>
 * получает компактную панель с горизонтальной прокруткой.
 */
.article-content code,
.article-content pre,
.article-content kbd {
    font-family: var(--font-mono);
}

.article-content :not(pre) > code,
.article-content kbd {
    border-radius: var(--radius-sm);
    padding: .12em .35em;
    background: var(--color-surface-subtle);
    font-size: .9em;
}

.article-content pre {
    margin-block: .65rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .8rem 1rem;
    background: var(--color-surface-subtle);
    line-height: 1.45;
}

.article-content pre code {
    display: block;
    padding: 0;
    background: transparent;
    font-size: inherit;
}

/* The copied-code control is added only to published block code by article-assets.js. */
.article-content .article-code-block {
    position: relative;
    width: 100%;
    margin-block: .65rem;
}

.article-content .article-code-block > pre {
    margin-block: 0;
    padding-inline-end: 4rem;
    font-size: .8rem;
}

.article-content .article-code-copy {
    position: absolute;
    z-index: 1;
    top: .45rem;
    right: .45rem;
    display: inline-grid;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.article-content .article-code-copy:hover {
    color: var(--color-accent);
}

.article-content .article-code-copy:focus-visible {
    outline-offset: 2px;
}

.article-content .article-code-copy svg {
    width: 1.25rem;
    height: 1.25rem;
}

.article-content .article-code-copy[data-copy-state="success"] {
    color: #39794c;
}

.article-content .article-code-copy[data-copy-state="error"] {
    color: var(--color-danger);
}

.article-content .article-code-copy[data-copy-state]::after {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    padding: .3rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-background);
    content: attr(data-copy-feedback);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Таблицы <table>: ячейки читаемы, а широкая таблица прокручивается по горизонтали. */
.article-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.article-content th,
.article-content td {
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
}

/* Обычные изображения <img> не выходят за ширину статьи и сохраняют пропорции. */
.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.article-content figure {
    margin-block: .8rem;
    margin-inline: 0;
}

/*
 * Иллюстрации .article-figure: компактный рисунок с подписью <figcaption>.
 * --left/--right включают обтекание, --small и --wide задают размер, --center
 * выравнивает иллюстрацию без обтекания. __canvas и __index оформляют макет
 * рисунка и номер иллюстрации.
 */
.article-content .article-figure {
    margin-inline: auto;
}

.article-content .article-figure--placeholder {
    max-width: 42.5rem;
}

.article-content .article-figure--left,
.article-content .article-figure--right {
    width: min(45%, 22rem);
    max-width: min(45%, 22rem);
}

.article-content .article-figure--left {
    float: left;
    margin-inline: 0 1.25rem;
}

.article-content .article-figure--right {
    float: right;
    margin-inline: 1.25rem 0;
}

.article-content .article-figure--small {
    width: min(100%, 18rem);
}

.article-content .article-figure--wide {
    width: 100%;
    max-width: 47.5rem;
}

.article-content .article-figure--left > img,
.article-content .article-figure--right > img,
.article-content .article-figure--small > img,
.article-content .article-figure--wide > img,
.article-content .article-figure--left > svg,
.article-content .article-figure--right > svg,
.article-content .article-figure--small > svg,
.article-content .article-figure--wide > svg {
    width: 100%;
}

.article-content .article-figure--center > :is(img, svg) {
    margin-inline: auto;
}

.article-content svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.article-content .article-figure figcaption {
    margin-top: .45rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.article-content .article-figure--placeholder figcaption {
    text-align: center;
}

/* Применяется к следующему элементу, когда текст больше не должен обтекать рисунок. */
.article-content .article-clear {
    clear: both;
}

.article-content .article-figure__canvas {
    display: grid;
    min-height: 15rem;
    place-items: center;
    align-content: center;
    gap: .625rem;
    border: 2px dashed var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-md);
    padding: 2.125rem;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 4%, transparent),
        color-mix(in srgb, var(--color-accent) 8%, transparent));
    color: var(--color-text-muted);
    text-align: center;
}

.article-content .article-figure__canvas strong {
    color: var(--color-text);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.article-content .article-figure__index {
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/*
 * .article-next оформляет рекомендацию следующей статьи;
 * .article-next__eyebrow — её короткую надпись над заголовком.
 */
.article-content .article-next {
    margin-block: .8rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--color-surface-accent);
}

.article-content .article-next > :first-child {
    margin-top: 0;
}

.article-content .article-next > :last-child {
    margin-bottom: 0;
}

.article-content .article-next__eyebrow {
    margin: 0 0 .3rem;
    color: var(--color-accent);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-content .article-next h2 {
    margin-block: 0 .3rem;
}

/* Цвета токенов highlight.js; без подсветчика обычный код остаётся читаемым. */
.article-content .hljs-keyword,
.article-content .hljs-selector-tag,
.article-content .hljs-title.function_ {
    color: var(--color-code-keyword);
}

.article-content .hljs-string,
.article-content .hljs-attr,
.article-content .hljs-template-variable {
    color: var(--color-code-string);
}

.article-content .hljs-number,
.article-content .hljs-literal {
    color: var(--color-code-number);
}

.article-content .hljs-comment {
    color: var(--color-code-comment);
    font-style: italic;
}

/* На узких экранах уменьшаются внутренние поля крупных авторских блоков. */
@media (max-width: 45rem) {
    .article-content .article-summary,
    .article-content .article-toc,
    .article-content .article-callout,
    .article-content .article-example,
    .article-content .article-next {
        padding: 1rem;
    }

    .article-content .article-callout--important,
    .article-content .article-callout--warning {
        padding-inline-start: 3em;
    }

    .article-content .article-figure__canvas {
        min-height: 11.875rem;
        padding: 1.5rem 1.125rem;
    }

    .article-content .article-figure--left,
    .article-content .article-figure--right {
        float: none;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/*
 * Печать/PDF: значимые блоки не разрываются между страницами, а длинный код
 * переносится вместо обрезания. Цвета продолжают задаваться печатной темой страницы.
 */
@media print {
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4 {
        break-after: avoid-page;
    }

    .article-content :is(img, svg),
    .article-content pre,
    .article-content table,
    .article-content blockquote,
    .article-content .article-callout,
    .article-content .article-example,
    .article-content .article-formula--accent,
    .article-content .article-figure__canvas,
    .article-content .article-next,
    .article-content mjx-container {
        break-inside: avoid-page;
    }

    .article-content pre {
        overflow: visible;
        white-space: pre-wrap;
    }

    .article-content .article-code-copy {
        display: none;
    }

    .article-content .article-toc a {
        color: var(--color-text);
        text-decoration: none;
    }
}