@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/ui/_markdown.scss

@@ -0,0 +1,1634 @@
+/* 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;
+
+/* ─── 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;
+    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);
+        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;
+        }
+
+        code:not(pre code),
+        tt:not(pre tt),
+        samp: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: 0;
+        padding: var(--space-xl);
+        overflow: auto;
+        background: var(--color-surface);
+        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;
+    }
+
+    .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;
+            }
+
+            code:not(pre code),
+            tt:not(pre tt),
+            samp: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;
+            }
+
+            code: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;
+        }
+    }
+}