/* stylelint-disable scss/at-else-empty-line-before */
/* stylelint-disable at-rule-empty-line-before */

/*
 * markdown-viewer.scss — optimized/refactored
 *
 * Стратегия:
 *  - shared Veela layer registry; no local prelude
 *  - light-dark() + color-scheme: inherit — вместо двух @media prefers-color-scheme
 *  - @each по SCSS-map для heading-размеров (одно место правды)
 *  - %img-align placeholder — устраняет 7-кратный повтор [align] / [width] / [height]
 *  - @mixin img-base / code-reset / print-reset — DRY для print/screen
 *  - container queries вместо @media width там, где поддерживается
 *  - logical properties везде (inline-size, block-size, inset-*)
 *  - color-mix(in oklab, …) для полупрозрачных границ
 *  - print: grayscale через filter: grayscale(1) только на img/svg
 *  - !important только там, где реально нужно бороться с внешним JS-стилем
 */

@use "sass:map";
@use "sass:list";
@use "../layers";
@use "../core/config" as config;
@use "../core/tokens" as tokens;
@use "../core/mixins" as mixins;
@use "./code-highlight";

/* ─── Animations ──────────────────────────────────────────────────────────── */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        translate: 0 10px;
    }

    to {
        opacity: 1;
    }
}

/* ─── Page ────────────────────────────────────────────────────────────────── */

@page {
    size: a4;
    margin: #{config.md-config("page", "margin")};

    @bottom-center {
        content: counter(page);
        font-family: var(--print-font-family-sans);
        font-size: 10pt;
    }

    @top-right {
        content: "UC";
        font-family: var(--print-font-family-sans);
        font-size: 10pt;
    }
}

@page :first {
    margin-block: 2cm 2.5cm;
    margin-inline: 2cm;
}

@page :left {
    margin-inline: 2cm;
}

@page :right {
    margin-inline: 2cm;
}

/* Named pages */
@page narrow {
    size: a5 portrait;
    margin: 1.5cm;
}

@page wide {
    size: a4 landscape;
    margin: 2cm;
}

@page letter {
    size: letter;
    margin: 2.5cm 2cm;
}

@page legal {
    size: legal;
    margin: 2.5cm 2cm;
}

@page professional {
    size: a4;
    margin: 2.5cm 2cm;
    marks: crop cross;
    bleed: .25cm;
}

@page booklet {
    size: a5;
    margin: 1.5cm;
}

@page draft {
    size: a4;
    margin: 2cm 1.5cm;
}

/* ─── Local helpers (file-scope) ──────────────────────────────────────────── */

/* Heading sizes: одна точка правды */
$_h-sizes: (
    h1: (screen: 2em, print: 2em),
    h2: (screen: 1.5em, print: 1.5em),
    h3: (screen: 1.25em, print: 1.25em),
    h4: (screen: 1em, print: 1em),
    h5: (screen: .875em, print: .875em),
    h6: (screen: .85em, print: .85em),
);

/* Placeholder: img [align] / [width] / [height] */
%img-align {
    &[align="right"] {
        margin-inline-start: auto;
        padding-inline-start: 20px;
    }

    &[align="left"] {
        margin-inline-end: auto;
        padding-inline-end: 20px;
    }

    &[align="center"] {
        margin-inline: auto;
    }

    &[width] {
        inline-size: attr(width px, auto);
    }

    &[height] {
        block-size: attr(height px, auto);
    }
}

/* Mixin: базовые img-свойства */
@mixin img-base($margin: var(--space-lg) 0, $radius: var(--radius-md)) {
    max-inline-size: stretch;
    inline-size: fit-content;
    block-size: auto;
    object-fit: contain;
    object-position: center;
    margin: $margin;
    border-radius: $radius;

    @extend %img-align;
}

/* Mixin: сброс code внутри pre */
@mixin code-in-pre {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    display: block;
    white-space: pre;
    word-wrap: normal;
    block-size: max-content !important;
    max-block-size: none !important;
    inline-size: stretch;
    max-inline-size: stretch;
    min-inline-size: fit-content;
    overflow: hidden !important;
    overflow-inline: hidden !important;
    overflow-block: hidden !important;
    content-visibility: visible !important;
    contain: none !important;
    position: relative !important;
}

/* Mixin: md-vars (CSS custom properties для цветовой схемы) */
@mixin md-vars($mode: auto) {
    @if $mode == auto {
        --md-fg-default: #{config.md-light-dark("text")};
        --md-fg-muted: #{config.md-light-dark("text-muted")};
        --md-fg-accent: #{config.md-light-dark("accent")};
        --md-bg-default: #{config.md-light-dark("bg")};
        --md-bg-subtle: #{config.md-light-dark("bg-subtle")};
        --md-bg-code: #{config.md-light-dark("code-bg")};
        --md-border-default: #{config.md-light-dark("border")};
        --md-border-subtle: #{config.md-light-dark("border-subtle")};
    }

    @else {
        --md-fg-default: #{config.md-color("text",        $mode)};
        --md-fg-muted: #{config.md-color("text-muted",  $mode)};
        --md-fg-accent: #{config.md-color("accent",      $mode)};
        --md-bg-default: #{config.md-color("bg",          $mode)};
        --md-bg-subtle: #{config.md-color("bg-subtle",   $mode)};
        --md-bg-code: #{config.md-color("code-bg",     $mode)};
        --md-border-default: #{config.md-color("border",      $mode)};
        --md-border-subtle: #{config.md-color("border-subtle", $mode)};
    }

    --md-font-body: #{config.md-config("font", "body")};
    --md-font-mono: #{config.md-config("font", "mono")};
    --md-radius: #{config.md-config("shape", "border-radius")};
}

/* ═══════════════════════════════════════════════════════════════════════════
    LAYER: tokens
    ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens {

    :root,
    :host,
    :scope {
        --print-font-family: var(--font-family-serif,
                "Times New Roman", "Liberation Serif", "Noto Serif", serif);
        --print-font-family-sans: var(--font-family-sans,
                "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
        --print-font-mono: var(--font-family-mono,
                "Monaco", "Menlo", "Ubuntu Mono", "Liberation Mono", monospace);

        --print-text-color: light-dark(#1a1a1a, #f3f4f6);
        --print-bg: light-dark(#fff, #111827);
        --print-border-color: light-dark(#d1d5db, #374151);
        --print-link-color: light-dark(#2563eb, #60a5fa);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
    LAYER: markdown  (screen + shared)
    ═══════════════════════════════════════════════════════════════════════════ */

@layer components {

    /* Токены корневого элемента */
    @include tokens.markdown-root-props();

    @media print {
        /* ── html / body ── */
        :where(html, body):has(:where(#{tokens.$selectors}):not([hidden])) {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            inline-size: 100%;
            block-size: max-content;
            min-block-size: max(100%, 100cqb);
            max-block-size: none;
            overflow: auto;
            background-color: transparent;
            color-scheme: inherit;
            display: block;
            container-type: inline-size;
            touch-action: manipulation;
            user-select: text;

            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }
        }
    }

    /* ── Корневой markdown-контейнер ── */
    :where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) {
        @include md-vars(auto);
        @include mixins.md-surface-root(start);
        @include mixins.md-scrollbars();

        color-scheme: inherit;
        font-family: var(--md-font-body, var(--print-font-family));
        font-size: #{config.md-config("font", "size-base")};
        line-height: #{config.md-config("layout", "line-height")};
        font-weight: 400;
        color: var(--md-fg-default);

        display: flex;
        flex: 1;
        flex-direction: column;
        block-size: stretch;
        overflow: auto;
        padding: var(--space-2xl) var(--space-xl);
        background: var(--color-surface-container-low);
        box-shadow: none;
        transition: box-shadow var(--motion-normal);
        overflow-wrap: break-word;
        word-wrap: break-word;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: start;
        contain: inline-size layout paint style;
        container-type: inline-size;
        isolation: isolate;
        box-shadow: none !important;

        &, & * {
            user-select: auto;
            -webkit-user-drag: none;
            -webkit-touch-callout: default;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        &:hover {
            box-shadow: var(--elev-2);
        }

        &:focus-within {
            outline: none;
            box-shadow: var(--focus-ring, var(--elev-2));
        }

        @container (max-inline-size: 768px) {
            border-radius: var(--radius-lg);
            box-shadow: none;
            padding: var(--space-xl) var(--space-lg);
        }

        /* ── Headings ── */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-block: 1.5em .5em;
            font-weight: 600;
            line-height: 1.25;
            color: var(--md-fg-default);
            letter-spacing: -.015em;

            &:first-child {
                margin-block-start: 0;
            }

            tt,
            code {
                font-size: inherit;
                font-family: var(--md-font-mono);
            }
        }

        /* Генерируем font-size для каждого уровня из одной map */
        @each $tag, $sizes in $_h-sizes {
            #{$tag} {
                font-size: map.get($sizes, screen);
            }
        }

        h1,
        h2 {
            padding-block-end: .3em;
            border-block-end: 1px solid var(--md-border-subtle);
        }

        h6 {
            color: var(--md-fg-muted);
        }

        /* ── Paragraph ── */
        p {
            margin-block: 0 1rem;

            &:last-child {
                margin-block-end: 0;
            }
        }

        /* ── Links ── */
        a {
            color: var(--md-fg-accent);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
            background-color: transparent;
            transition: color var(--motion-fast), text-decoration-thickness var(--motion-fast);

            &:hover {
                text-decoration-thickness: 2px;
            }

            &:not([href]) {
                color: inherit;
                text-decoration: none;
            }

            &:focus-visible {
                outline: none;
                border-radius: var(--radius-sm);
                box-shadow: var(--focus-ring);
            }
        }

        /* ── Lists ── */
        ul,
        ol {
            margin-block: 0 1rem;
            padding-inline-start: 2em;

            ol,
            ul {
                margin-block: 0;
            }

            @container (max-inline-size: 480px) {
                padding-inline-start: var(--space-xl);
            }
        }

        li {
            word-break: normal;
            overflow-wrap: break-word;
            margin-block-end: .25em;

            &:last-child {
                margin-block-end: 0;
            }

            & + li {
                margin-block-start: .25em;
            }

            & > p {
                margin-block-start: 1rem;
            }
        }

        ul {
            list-style-type: disc;

            ul {
                list-style-type: circle;

                ul {
                    list-style-type: square;
                }
            }
        }

        ol {
            list-style-type: decimal;

            &[type="a"] {
                list-style-type: lower-alpha;
            }

            &[type="A"] {
                list-style-type: upper-alpha;
            }

            &[type="i"] {
                list-style-type: lower-roman;
            }

            &[type="I"] {
                list-style-type: upper-roman;
            }
        }

        /* ── Blockquote ── */
        blockquote {
            margin: 0 0 1rem;
            padding: 0 1em;
            color: var(--md-fg-muted);
            border-inline-start: .25em solid var(--md-border-default);
            font-style: italic;

            & > :first-child {
                margin-block-start: 0;
            }

            & > :last-child {
                margin-block-end: 0;
            }
        }

        /* ── Code & Pre ── */
        code,
        kbd,
        pre,
        samp,
        tt {
            font-family: var(--md-font-mono);
            font-size: 1em;
        }

        :not(pre) > code,
        :not(pre) > tt,
        :not(pre) > samp {
            padding: .2em .4em;
            font-size: 85%;
            background-color: var(--md-bg-code);
            border-radius: 6px;
        }

        pre {
            flex-grow: 1 !important;
            flex-shrink: 0 !important;
            flex-basis: max-content !important;
            margin-block: 0 1rem;
            padding: 1rem;
            font-size: 85%;
            line-height: 1.45;
            background-color: var(--md-bg-code);
            border-radius: 6px;
            inline-size: stretch;
            max-inline-size: stretch;
            block-size: max-content !important;
            max-block-size: none !important;
            min-block-size: max(100%, 100cqb) !important;
            min-inline-size: fit-content;
            overflow: hidden !important;
            overflow-inline: hidden !important;
            overflow-block: hidden !important;
            content-visibility: visible !important;
            position: relative !important;

            code,
            tt {
                @include code-in-pre;
            }
        }

        /* ── Table ── */
        table {
            display: table;
            inline-size: fit-content;
            max-inline-size: stretch;
            margin-block-end: 1rem;
            border-spacing: 0;
            border-collapse: collapse;
            overflow: auto;
            contain: inline-size layout paint style;
            container-type: inline-size;
            block-size: max-content;

            tbody,
            thead {
                inline-size: fit-content;
                max-inline-size: stretch;
                block-size: max-content;
            }

            th,
            td {
                padding: 6px 13px;
                border: 1px solid var(--md-border-default);
                text-align: start;
                vertical-align: top;
                overflow-wrap: break-word;
                overflow: hidden;
                inline-size: fit-content;
                max-inline-size: stretch;
                block-size: max-content;
            }

            th {
                font-weight: 600;
                background-color: var(--md-bg-subtle);
                block-size: max-content;
            }

            tr {
                background-color: var(--md-bg-default);
                border-block-start: 1px solid var(--md-border-subtle);
                block-size: max-content;
                &:nth-child(2n) {
                    background-color: var(--md-bg-subtle);
                }
            }

            img {
                @include img-base(0, 0);

                background-color: transparent;
            }
        }

        /* ── HR ── */
        hr {
            box-sizing: content-box;
            overflow: hidden;
            margin-block: 24px;
            block-size: .25em;
            padding: 0;
            border: 0;
            background-color: var(--md-border-default);

            &::before {
                display: table;
                content: "";
            }

            &::after {
                display: table;
                clear: both;
                content: "";
            }
        }

        /* ── Images ── */
        img {
            @include img-base();

            box-sizing: content-box;
            background-color: transparent;
            border-style: none;
        }

        /* ── KBD ── */
        kbd {
            display: inline-block;
            padding: 3px 5px;
            font-size: 11px;
            line-height: 10px;
            color: var(--md-fg-default);
            vertical-align: middle;
            background-color: var(--md-bg-subtle);
            border: 1px solid var(--md-border-default);
            border-radius: 6px;
            box-shadow: inset 0 -1px 0 var(--md-border-default);
        }

        /* ── DL ── */
        dl {
            padding: 0;
            margin-block: var(--space-lg) 0;

            dt {
                padding: 0;
                margin-block-start: 1rem;
                font-size: 1em;
                font-style: italic;
                font-weight: 600;
                color: var(--md-fg-default);
            }

            dd {
                padding: 0 1rem;
                margin-block-end: 1rem;
                margin-inline-start: 0;
                color: var(--color-on-surface-variant, var(--md-fg-muted));
            }
        }

        /* ── Details / Summary ── */
        details {
            display: block;

            summary {
                display: list-item;
                cursor: pointer;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0;
                    padding-block-end: 0;
                    border-block-end: 0;
                }
            }
        }

        /* ── Math ── */
        math {
            math-style: compact;
            math-shift: compact;
            math-depth: auto-add;
            inline-size: fit-content;
            max-inline-size: stretch;
        }

        /* ── Span / SVG ── */
        span {
            inline-size: fit-content;
            max-inline-size: stretch;
        }

        svg {
            inline-size: fit-content !important;
            max-inline-size: stretch !important;
            contain: strict;
        }

        /* ── Checkbox ── */
        input[type="checkbox"] {
            margin-inline-end: var(--space-sm);
            accent-color: var(--color-primary, var(--md-fg-accent));
        }

        /* ── Task list ── */
        .task-list-item {
            list-style-type: none;

            input[type="checkbox"] {
                margin: 0 .2em .25em -1.6em;
                vertical-align: middle;
            }
        }

        /* ── Footnotes ── */
        .footnotes {
            margin-block-start: 2rem;
            font-size: .75em;
            color: var(--md-fg-muted);
            border-block-start: 1px solid var(--md-border-default);

            ol {
                padding-inline-start: 1.5em;
            }

            li {
                position: relative;

                &:target {
                    color: var(--md-fg-default);
                }

                &:target::before {
                    content: "";
                    pointer-events: none;
                    position: absolute;
                    inset: -8px -8px -8px -24px;
                    border: 2px solid var(--md-fg-accent);
                    border-radius: 6px;
                }
            }
        }

        .footnote-ref a {
            color: var(--md-fg-accent);
            font-size: .8em;
            vertical-align: super;
        }

        /* ── Markdown Alerts ── */
        .markdown-alert {
            margin-block-end: 1rem;
            padding: .5rem 1rem;
            border-inline-start: .25em solid var(--md-border-default);

            &.markdown-alert-note { border-color: var(--md-fg-accent); }
            &.markdown-alert-important { border-color: #8250df; }
            &.markdown-alert-warning { border-color: #bf8700; }
            &.markdown-alert-tip { border-color: #1a7f37; }
            &.markdown-alert-caution { border-color: #d1242f; }
            
            &.markdown-alert-title,
            .markdown-alert-title{
                display: flex;
                align-items: center;
                margin-block-end: .5rem;
                font-weight: 600;
                line-height: 1;

                .octicon {
                    margin-inline-end: .5rem;
                }
            }
        }

        /* ── Octicon / g-emoji ── */
        .octicon {
            display: inline-block;
            fill: currentColor;
            vertical-align: text-bottom;
        }

        g-emoji {
            display: inline-block;
            min-inline-size: 1ch;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            font-size: 1em;
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            vertical-align: -.075em;

            img {
                inline-size: 1em;
                block-size: 1em;
                object-fit: contain;
            }
        }

        /* ── Anchor links ── */
        .anchor {
            float: inline-start;
            padding-inline-end: 4px;
            margin-inline-start: -20px;
            line-height: 1;

            &:focus {
                outline: none;
            }
        }

        .octicon-link {
            visibility: hidden;
            color: var(--md-fg-muted);
            opacity: .5;

            &:hover {
                opacity: 1;
            }
        }

        :is(h1, h2, h3, h4, h5, h6):hover .anchor .octicon-link {
            visibility: visible;
        }

        /* ── Prettylights (light) ── */
        .pl-c { color: #6e7781; }
        .pl-c1 { color: #0550ae;  }
        .pl-k { color: #cf222e; }
        .pl-s { color: #0a3069; }
        .pl-v { color: #953800; }
        .pl-en { color: #8250df; }

        /* ── KaTeX ── */
        .katex {
            color: var(--md-fg-default);
            font-size: 1.1em;
            text-align: start;
        }

        /* ── Viewer UI ── */
        .viewer-header {
            display: none;
        }

        /* скрыт по умолчанию, показывается только на screen */
    }

    /* ── Viewer components (вне markdown-selector) ── */
    .markdown-viewer-content {
        animation: fade-in .3s ease-out;
        min-block-size: 100%;
    }

    .markdown-viewer-raw {
        margin: 0px !important;
        padding: var(--space-xl);
        overflow: auto;
        background: var(--color-surface-container-low);
        color: var(--color-on-surface);
        font-family: var(--print-font-mono);
        font-size: var(--text-sm, .875rem);
        line-height: 1.5;
        white-space: pre;
        tab-size: 2;
        margin-block: 0px !important;
        margin-block-start: 0px !important;
        margin-block-end: 0px !important;
    }

    .viewer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-xl);
        background: var(--color-surface-container-high);

        @container (max-inline-size: 768px) {
            gap: var(--space-md);
            padding: var(--space-md) var(--space-lg);
        }

        @container (max-inline-size: 480px) {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-sm);
        }

        h3 {
            margin: 0;
            font-size: var(--text-xl, 1.25rem);
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: -.025em;
        }

        .viewer-actions {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-wrap: wrap;

            @container (max-inline-size: 360px) {
                overflow-inline: auto;
                overflow-block: hidden;
                padding-block-end: var(--space-xs);
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }

    .viewer-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-block-size: 44px;
        padding: 0px;
        border: none;
        border-radius: var(--radius-lg);
        background: var(--color-surface-container);
        color: var(--color-on-surface);
        font-size: var(--text-sm, .875rem);
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--motion-fast), box-shadow var(--motion-fast), translate var(--motion-fast);

        &:hover {
            background: var(--color-surface-container-highest);
            translate: 0 -1px;
            box-shadow: var(--elev-1);
        }

        &:active {
            translate: 0;
            box-shadow: none;
        }

        &:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        &.btn-icon {
            padding: var(--space-sm);

            ui-icon {
                flex-shrink: 0;
                transition: color var(--motion-fast);
            }

            &:hover ui-icon {
                color: var(--color-primary);
            }

            @container (max-inline-size: 640px) {
                padding: var(--space-xs);

                .btn-text {
                    display: none;
                }
            }
        }

        &.loading {
            opacity: .7;
            pointer-events: none;

            &::after {
                content: "";
                inline-size: 16px;
                block-size: 16px;
                margin-inline-start: var(--space-xs);
                border: 2px solid transparent;
                border-block-start-color: currentColor;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
        }
    }

    /* Prettylights dark */
    @media (prefers-color-scheme: dark) {
        :where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) {
            .pl-c {  color: #8b949e; }
            .pl-c1 { color: #79c0ff; }
            .pl-k { color: #ff7b72; }
            .pl-s { color: #a5d6ff; }
            .pl-v { color: #ffa657; }
            .pl-en { color: #d2a8ff; }
        }
    }

    /* ── content-visibility для скрытых/dragging ── */
    [data-hidden] :where(#{tokens.$selectors}),
    [data-dragging] :where(#{tokens.$selectors}) {
        color-scheme: inherit;
        content-visibility: auto !important;
    }

    [data-dragging] :where(#{tokens.$selectors}) :where(*) {
        content-visibility: auto !important;
    }

    /* ── Наследование children ── */
    @include mixins.md-children-inherit(":where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) *");

    /* ── Screen: viewer-header показываем ── */
    @media screen {
        :where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) {
            .viewer-header {
                display: flex;
            }
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
    LAYER: overrides  (screen-specific code colors + KaTeX)
    ═══════════════════════════════════════════════════════════════════════════ */

@layer overrides {

    /* KaTeX — вне media, всегда */
    :is(.katex, .katex:not(:has(math)) *, .katex :not(math) *:not(math)) {
        font-variant: normal;
        font-variant-caps: normal;
        font-variant-ligatures: normal;
        text-transform: none;
        font-family: "Noto Sans Math", "Cambria Math", "STIX Two Math", "Latin Modern Math",
            var(--print-font-family), serif;
    }

    .katex math {
        font-variant: normal;
        font-variant-caps: normal;
        font-variant-ligatures: normal;
        text-transform: none;
        math-style: compact;
        math-shift: compact;
        math-depth: auto-add;
    }

    .footnote-ref,
    .footnote-backref {
        font-variant-emoji: text;
        font-variant-numeric: tabular-nums;
        font-variant-ligatures: common-ligatures;
        font-variant-caps: normal;
        inline-size: fit-content;
        max-inline-size: stretch;
        text-align: start;

        * {
            inline-size: fit-content;
            max-inline-size: stretch;
            text-align: start;
        }
    }

    @media screen {
        :where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) {
            --md-code-inline-bg: color-mix(in oklab, var(--md-bg-code) 88%, var(--md-bg-default));
            --md-code-inline-fg: var(--md-fg-default);
            --md-code-block-bg: var(--md-bg-code);
            --md-code-block-fg: var(--md-fg-default);
            --md-code-block-border: color-mix(in oklab, var(--md-border-default) 60%, transparent);

            text-rendering: auto;
            -webkit-font-smoothing: auto;
            -moz-osx-font-smoothing: auto;
            color-scheme: inherit !important;

            &, & * {
                user-select: auto;
                -webkit-user-drag: none;
                -webkit-touch-callout: default;
                -webkit-tap-highlight-color: transparent;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            p,
            li,
            blockquote,
            td,
            th {
                text-align: start;
                hyphens: manual;
            }

            :not(pre) > code,
            :not(pre) > tt,
            :not(pre) > samp {
                background: var(--md-code-inline-bg);
                color: var(--md-code-inline-fg);
                border: 0;
                box-shadow: none;
            }

            pre {
                background: var(--md-code-block-bg);
                color: var(--md-code-block-fg);
                border: 1px solid var(--md-code-block-border);
                box-shadow: none;

                code,
                tt,
                samp {
                    background: transparent;
                    border: 0;
                    box-shadow: none;
                    color: inherit;
                }
            }
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
    LAYER: print
    ═══════════════════════════════════════════════════════════════════════════ */

@layer print {
    @media print {
        /* html / body reset */
        :where(:root, html, body) {
            color-scheme: light;
            container-type: normal;
            contain: none;
            background-color: #fff !important;
            font-family: var(--print-font-family);
            font-variant-emoji: text;
            font-size: 12pt;
            line-height: 1.4;
            color: #111;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            -webkit-print-color-adjust: economy;
            print-color-adjust: economy;
            scrollbar-width: none;
            overflow: visible !important;
        }

        body {
            block-size: max-content !important;
            max-block-size: none !important;
            min-block-size: max(100%, 100cqb) !important;
            inline-size: 100% !important;
            max-inline-size: 100% !important;
            zoom: 1 !important;
            scale: 1 !important;
            transform: none !important;
            text-align: start;
        }

        /* KaTeX в print */
        :is(.katex, .katex:not(:has(math)) *, .katex :not(math) *:not(math)) {
            font-family: "Noto Sans Math", "Cambria Math", "STIX Two Math", "Latin Modern Math",
                var(--print-font-family), serif;
            font-variant: normal;
            font-variant-caps: normal;
            font-variant-ligatures: normal;
            text-transform: none;
        }

        /* ── Markdown root в print ── */
        :where(#{tokens.$selectors}):not(.katex, .footnote-ref, .footnote-backref) {
            @include md-vars(light);

            color-scheme: light;
            color: #111;
            background: #fff;
            font-family: var(--print-font-family);
            font-variant-emoji: text;
            display: block !important;
            flex: none !important;
            block-size: max-content !important;
            min-block-size: max(100%, 100cqb) !important;
            max-block-size: none !important;
            inline-size: 100%;
            max-inline-size: 100%;
            contain: none;
            container-type: normal;
            overflow: visible !important;
            scrollbar-width: none;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            /* Сброс фонов/теней для всех дочерних */
            * {
                background-color: transparent;
                box-shadow: none;
                text-shadow: none;
                font-variant-emoji: text;
                max-inline-size: 100%;
                box-sizing: border-box;
            }

            /* Скрываем UI */
            .viewer-header,
            .viewer-btn,
            .btn {
                display: none !important;
            }

            /* ── Headings ── */
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: #111;
                font-weight: 700;
                line-height: 1.25;
                orphans: 2;
                widows: 2;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;

                &:first-child {
                    margin-block-start: 0;
                }
            }

            /* Размеры heading в print — те же em, база 12pt */
            @each $tag, $sizes in $_h-sizes {
                #{$tag} {
                    font-size: map.get($sizes, print);
                }
            }

            h1,
            h2 {
                padding-block-end: .3em;
                border-block-end: 1px solid #ccc;
            }

            h6 {
                color: #555;
            }

            /* ── Paragraph / inline ── */
            p,
            li {
                color: #111;
                orphans: 3;
                widows: 3;
                text-align: justify;
                hyphens: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            strong,
            b {
                font-weight: 700 !important;
                color: #111 !important;
                filter: none;
            }

            em,
            i {
                font-style: italic !important;
                color: #111 !important;
                filter: none;
            }

            a {
                color: #333 !important;
                text-decoration: underline !important;
                word-break: break-word;
                overflow-wrap: break-word;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;

                &[href]::after {
                    content: none !important;
                }

                /* не печатаем URL */
            }

            /* ── Code / Pre ── */
            code,
            pre,
            pre code,
            tt,
            samp {
                font-family: var(--print-font-mono);
                background: #f5f5f5;
                color: #111;
                filter: grayscale(1);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            :not(pre) > code {
                padding: .125em .25em;
                border-radius: .25em;
                border: 1px solid #ddd;
                word-break: break-word;
                overflow-wrap: break-word;
                hyphens: none;
                inline-size: stretch;
                max-inline-size: stretch;
                block-size: max-content !important;
                max-block-size: none !important;
                min-inline-size: fit-content;
                overflow: hidden !important;
                overflow-inline: hidden !important;
                overflow-block: hidden !important;
                content-visibility: visible !important;
                contain: none !important;
                position: relative !important;
            }

            pre {
                flex-grow: 1 !important;
                flex-shrink: 0 !important;
                flex-basis: max-content !important;
                padding: 1rem;
                border: 1px solid #ccc;
                border-radius: .5rem;
                white-space: pre-wrap;
                word-wrap: break-word;
                orphans: 1;
                widows: 1;
                margin-block: 1.2em;
                inline-size: stretch;
                max-inline-size: stretch;
                block-size: max-content !important;
                max-block-size: none !important;
                min-inline-size: fit-content;
                overflow: hidden !important;
                overflow-inline: hidden !important;
                overflow-block: hidden !important;
                content-visibility: visible !important;
                position: relative !important;

                code {
                    @include code-in-pre;

                    background: transparent;
                    border: 0;
                }
            }

            /* ── Blockquote ── */
            blockquote {
                background: #fafafa;
                border-inline-start: 4px solid #999;
                color: #333;
                padding: .8em 1.2em;
                margin-block: 1.2em;
                font-style: italic;
                orphans: 2;
                widows: 2;
                filter: grayscale(1);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* ── Table ── */
            table {
                display: table;
                inline-size: 100% !important;
                max-inline-size: 100%;
                border-collapse: collapse;
                border: 1px solid #999;
                table-layout: fixed;
                word-wrap: break-word;
                overflow-wrap: break-word;
                margin-block: 1.2em;
                orphans: 1;
                widows: 1;
                filter: grayscale(1);
            }

            th,
            td {
                border: 1px solid #999;
                padding: .5em .75em;
                text-align: start;
                vertical-align: top;
                color: #111;
                overflow-wrap: break-word;
                overflow: hidden;
                inline-size: fit-content;
                max-inline-size: stretch;
                block-size: max-content;
            }

            th {
                background: #e5e5e5;
                font-weight: 600;
                color: #333;
            }

            /* ── HR ── */
            hr {
                border: none;
                border-block-start: 1px solid #ccc;
                margin-block: 2em;
                block-size: 0;
                filter: grayscale(1);
            }

            /* ── Images ── */
            img {
                @include img-base(1em auto, 0);
                display: block;
                filter: grayscale(1);
                image-rendering: pixelated;
            }

            /* ── SVG ── */
            svg {
                filter: grayscale(1);

                * {
                    fill: currentColor !important;
                    stroke: currentColor !important;
                }
            }

            /* ── Lists ── */
            ul,
            ol {
                padding-inline-start: 1.5rem;
                list-style-position: outside;
                orphans: 2;
                widows: 2;
                margin-block-end: 1em;
            }

            li::marker {
                color: #666 !important;
            }

            /* ── Misc ── */
            input,
            textarea,
            select {
                border: 1px solid #999 !important;
                background: #fff !important;
                color: #111 !important;
                filter: grayscale(1);
            }

            .highlight,
            .mark {
                background: #e6e6e6 !important;
                filter: grayscale(1);
            }

            .footnote,
            .reference {
                border-block-start: 1px solid #ccc !important;
                background: transparent !important;
            }

            .katex {
                color: #111 !important;
                filter: grayscale(1);
            }

            pre[class*="language-"] {
                background: #f8f8f8 !important;
                filter: grayscale(1);

                * {
                    filter: grayscale(1);
                }
            }

            /* ── Named pages ── */
            .print-narrow {
                page: narrow;
            }

            .print-wide {
                page: wide;
            }

            .print-letter {
                page: letter;
            }

            .print-legal {
                page: legal;
            }

            .print-professional {
                page: professional;
            }

            .print-booklet {
                page: booklet;
            }

            .print-draft {
                page: draft;
            }

            /* ── First/last child margins ── */
            & > *:first-child {
                margin-block-start: 0;
            }

            & > *:last-child {
                margin-block-end: 0;
            }
        }

        /* print-view / print-content */
        .print-view {
            inline-size: 100%;
            block-size: 100cqb;
            margin: 0;
            padding: 0;
            overflow-inline: hidden;
        }

        .print-content {
            inline-size: 100%;
            box-sizing: border-box;
            padding: 2rem;
            margin: 0;
            font-size: 14pt;
            line-height: 1.6;
            text-align: justify;
            hyphens: auto;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
    LAYER: print-breaks
    ═══════════════════════════════════════════════════════════════════════════ */

@layer print {
    @media print {
        /* Базовые правила для всех блочных элементов */
        :where(h1, h2, h3, h4, h5, h6, p, pre, table, img, blockquote, hr) {
            break-before: auto;
            break-after: auto;
            break-inside: avoid;
        }

        /* Строки и ячейки — не разрывать */
        li,
        tr {
            break-inside: avoid;
        }

        /* Заголовки не отрываются от следующего контента */
        :where(h1, h2, h3, h4, h5, h6) {
            &:has(+ :where(p, ul, ol, li, table, blockquote, pre, code)) {
                break-after: avoid;
            }
        }

        /* Параграфы/списки держатся вместе */
        :where(p, :is(h1, h2, h3, h4, h5, h6)):has(+ :where(ul, ol)) {
            break-after: avoid !important;
        }

        :where(p, :is(h1, h2, h3, h4, h5, h6)) + :where(ul, ol) {
            break-before: avoid !important;
        }

        :where(h1, h2, h3, h4, h5, h6):has(+ :where(table, pre, code, blockquote)) {
            break-after: avoid !important;
        }

        :where(h1, h2, h3, h4, h5, h6) + :where(table, pre, code, blockquote) {
            break-before: avoid !important;
        }

        /* HR перед заголовком → разрыв страницы */
        hr:has(+ :where(h1, h2, h3, h4, h5, h6, p, pre, table, img, blockquote)) {
            break-after: page !important;
        }

        /* Первый h1 не разрывается перед собой */
        h1:first-of-type {
            break-before: avoid;
        }

        /* Утилиты ручного разрыва */
        :where(.pb, .np, .pagebreak, .newpage, .page-break, .new-page) {
            background-color: transparent;
            
            @include mixins.md-break(auto, auto, page);
        }

        .print-chapter {
            break-before: page;
        }

        .print-section {
            break-before: avoid;
        }

        /* Первый/последний дочерний */
        :where(:heading, p, ol, ul) > :first-child {
            margin-block-start: 0;
        }

        :where(:heading, p, ol, ul) > :last-child {
            margin-block-end: 0;
        }
    }
}