/* Markdown в текстах сайта: разметка .md-* из include/functions_markdown.php (format_comment).
   Белая и чёрно-синяя тема (data-tp-theme="dark") — через токены --tp-*. Подключается в themes/BTPro_v24/head_nav.php */

.md-h {
    margin: .7em 0 .35em;
    padding: 0;
    color: var(--tp-text, #0f172a);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.md-h:first-child { margin-top: .15em; }
.md-h1 { font-size: 1.6em; padding-bottom: .25em; border-bottom: 1px solid var(--tp-border, #e3e8ef); }
.md-h2 { font-size: 1.35em; padding-bottom: .2em; border-bottom: 1px solid var(--tp-border, #e3e8ef); }
.md-h3 { font-size: 1.18em; }
.md-h4 { font-size: 1.05em; }
.md-h5 { font-size: .95em; }
.md-h6 { font-size: .88em; color: var(--tp-muted, #64748b); }

.md-hr { height: 0; margin: .8em 0; border: 0; border-top: 1px solid var(--tp-border-strong, #cfd7e3); opacity: 1; }

/* списки: в старых стилях сайта у ul/li сброшены маркеры */
ul.md-ul, ol.md-ol { display: block; margin: .35em 0 .5em; padding: 0 0 0 1.6em; }
ul.md-ul { list-style: disc outside; }
ul.md-ul ul.md-ul { list-style-type: circle; margin: .15em 0; }
ul.md-ul ul.md-ul ul.md-ul { list-style-type: square; }
ol.md-ol { list-style: decimal outside; }
ol.md-ol ol.md-ol { list-style-type: lower-alpha; margin: .15em 0; }
ul.md-ul > li, ol.md-ol > li { display: list-item; margin: .15em 0; padding: 0; float: none; background: none; }
ul.md-ul > li.md-task { list-style: none; margin-left: -1.35em; }
.md-check { width: auto; height: auto; margin: 0 .5em 0 0; vertical-align: -.1em; pointer-events: none; accent-color: var(--tp-accent, #2563eb); }

/* цитата как в Telegram: цветная полоса слева, лёгкая заливка, кавычка в углу */
.md-quote {
    position: relative;
    margin: .5em 0;
    padding: .4em 2em .45em .8em;
    border: 0;
    border-left: 3px solid var(--tp-accent, #2563eb);
    border-radius: 4px 8px 8px 4px;
    background: var(--tp-accent-soft, #e8f0ff);
    color: var(--tp-text, #0f172a);
    font-size: inherit;
}
.md-quote::after {
    content: "\201D";
    position: absolute;
    top: .05em;
    right: .4em;
    color: var(--tp-accent, #2563eb);
    font: 700 1.6em/1 Georgia, serif;
    opacity: .55;
}
.md-quote .md-quote { margin: .35em 0; }

/* код */
code.md-c {
    padding: .1em .38em;
    border-radius: 5px;
    background: var(--tp-surface-3, #edf1f7);
    color: inherit;
    font: .88em/1.4 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    overflow-wrap: anywhere;
}
.md-code {
    position: relative;
    margin: .5em 0;
    border: 1px solid var(--tp-border, #e3e8ef);
    border-radius: 10px;
    background: var(--tp-surface-2, #f6f8fb);
    text-align: left;
    overflow: hidden;
}
.md-code pre {
    max-height: 600px;
    margin: 0;
    padding: .75em 1em;
    overflow: auto;
    border: 0;
    background: none;
    color: var(--tp-text, #0f172a);
    font: .85em/1.55 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre;
    tab-size: 4;
}
.md-code pre code { padding: 0; background: none; color: inherit; font: inherit; }
/* шапка блока кода как в Telegram: язык слева, «Копировать» справа */
.md-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    padding: 2px 4px 2px 12px;
    border-bottom: 1px solid var(--tp-border, #e3e8ef);
    background: var(--tp-surface-3, #edf1f7);
}
.md-code-lang { color: var(--tp-accent, #2563eb); font: 600 11.5px/1.5 var(--tp-font, sans-serif); }
.md-code .md-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    color: var(--tp-muted, #64748b);
    font: 500 11.5px/1 var(--tp-font, sans-serif);
    cursor: pointer;
}
.md-code .md-copy:hover { background: var(--tp-surface-2, #f6f8fb); color: var(--tp-text, #0f172a); }
.md-code .md-copy.is-done { color: #16a34a; }
/* [code] в одну строку: код + иконка «Копировать» справа */
.md-cc { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; vertical-align: baseline; }
.md-cc code.md-c { padding-right: .3em; border-radius: 5px 0 0 5px; }
.md-cc .md-cc__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: stretch;
    min-width: 1.9em;
    margin: 0;
    padding: 0 .4em;
    border: 0;
    border-radius: 0 5px 5px 0;
    background: var(--tp-surface-3, #edf1f7);
    box-shadow: none;
    color: var(--tp-muted, #64748b);
    font-size: .8em;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.md-cc .md-cc__copy:hover { background: var(--tp-accent-soft, #e8f0ff); color: var(--tp-accent, #2563eb); }
.md-cc .md-cc__copy.is-done { color: #16a34a; }

/* «Скопировано» */
.md-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 2000;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .88);
    color: #fff;
    font: 500 13px/1.3 var(--tp-font, sans-serif);
    transform: translate(-50%, 8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.md-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* таблицы */
.md-table-wrap { max-width: 100%; margin: .5em 0; overflow-x: auto; }
table.md-table {
    width: auto;
    min-width: 40%;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid var(--tp-border-strong, #cfd7e3);
    background: transparent;
    font-size: .95em;
}
table.md-table th, table.md-table td {
    padding: .4em .75em;
    border: 1px solid var(--tp-border-strong, #cfd7e3);
    color: inherit;
    text-align: left;
    vertical-align: top;
}
table.md-table th { background: var(--tp-surface-3, #edf1f7); font-weight: 600; }
table.md-table tbody tr:nth-child(even) td { background: var(--tp-surface-2, #f6f8fb); }

/* маркер, индекс, скрытый текст */
mark.md-mark { padding: 0 .15em; border-radius: 3px; background: #fde68a; color: #1f2937; }
:root[data-tp-theme="dark"] mark.md-mark { background: rgba(250, 204, 21, .32); color: inherit; }
sup.md-sup { font-size: .72em; }
/* скрытый текст как в Telegram: мерцающая «пыль» вместо текста, открывается по клику (js/markdown.js) */
.md-spoiler {
    --md-dust: #64748b;
    padding: 0 .15em;
    border-radius: 4px;
    background-color: rgba(100, 116, 139, .14);
    background-image:
        radial-gradient(circle, var(--md-dust) .6px, transparent 1px),
        radial-gradient(circle, var(--md-dust) .5px, transparent .9px),
        radial-gradient(circle, var(--md-dust) .45px, transparent .85px);
    background-size: 5px 6px, 7px 5px, 4px 7px;
    background-position: 0 0, 2px 3px, 1px 1px;
    color: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: md-dust 1.4s linear infinite;
    transition: color .3s, background-color .3s;
}
.md-spoiler:not(.md-spoiler--js) * { visibility: hidden; }
.md-spoiler:focus-visible { outline: 2px solid var(--tp-accent, #2563eb); outline-offset: 1px; }
.md-spoiler.is-open { background: none; color: inherit; cursor: text; user-select: text; animation: none; }
.md-spoiler.is-open * { visibility: visible; }
:root[data-tp-theme="dark"] .md-spoiler { --md-dust: #c3cfe3; background-color: rgba(195, 207, 227, .1); }
:root[data-tp-theme="dark"] .md-spoiler.is-open { background: none; }
@keyframes md-dust { to { background-position: 5px 6px, -5px 2px, 1px -6px; } }
@media (prefers-reduced-motion: reduce) { .md-spoiler { animation: none; } }

/* с js/markdown.js — как в Telegram: частицы на canvas вместо CSS-«пыли», текст во внутреннем .md-spoiler__t */
:root .md-spoiler.md-spoiler--js {
    position: relative;
    padding: 0;
    background: none;
    color: inherit;
    animation: none;
    transition: none; /* иначе цвет частиц читался посреди перехода с прозрачного — и частицы были невидимы */
}
.md-spoiler--js .md-spoiler__t { color: transparent; transition: color .5s ease; }
.md-spoiler--js:not(.is-open):not(.is-revealing) .md-spoiler__t * { visibility: hidden; }
.md-spoiler--js.is-revealing .md-spoiler__t, .md-spoiler--js.is-open .md-spoiler__t { color: inherit; }
.md-spoiler__c { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }

/* плашки > [!NOTE] и ::: warning */
.md-alert {
    --md-a: #2563eb;
    margin: .55em 0;
    padding: .5em .9em .55em;
    border-left: 4px solid var(--md-a);
    border-radius: 0 8px 8px 0;
    background: rgba(37, 99, 235, .07);
    background: color-mix(in srgb, var(--md-a) 8%, transparent);
    text-align: left;
}
.md-alert-title { display: flex; align-items: center; gap: .45em; color: var(--md-a); font-weight: 700; }
.md-alert-body { margin-top: .2em; }
.md-alert-tip { --md-a: #16a34a; background: rgba(22, 163, 74, .07); background: color-mix(in srgb, var(--md-a) 8%, transparent); }
.md-alert-important { --md-a: #7c3aed; background: rgba(124, 58, 237, .07); background: color-mix(in srgb, var(--md-a) 8%, transparent); }
.md-alert-warning { --md-a: #d97706; background: rgba(217, 119, 6, .08); background: color-mix(in srgb, var(--md-a) 9%, transparent); }
.md-alert-caution { --md-a: #dc2626; background: rgba(220, 38, 38, .07); background: color-mix(in srgb, var(--md-a) 8%, transparent); }
:root[data-tp-theme="dark"] .md-alert-note { --md-a: #60a5fa; }
:root[data-tp-theme="dark"] .md-alert-tip { --md-a: #4ade80; }
:root[data-tp-theme="dark"] .md-alert-important { --md-a: #a78bfa; }
:root[data-tp-theme="dark"] .md-alert-warning { --md-a: #fbbf24; }
:root[data-tp-theme="dark"] .md-alert-caution { --md-a: #f87171; }

/* сноски */
sup.md-fnref { font-size: .72em; }
sup.md-fnref a { padding: 0 .1em; text-decoration: none; }
.md-fn { margin-top: .8em; padding-top: .4em; border-top: 1px solid var(--tp-border, #e3e8ef); color: var(--tp-text-2, #334155); font-size: .88em; }
.md-fn ol { margin: 0; padding-left: 1.5em; list-style: decimal; }
.md-fn li { display: list-item; margin: .15em 0; }
.md-fn-back { text-decoration: none; }
.md-fn li:target { background: var(--tp-accent-soft, #e8f0ff); border-radius: 4px; }