/* ==========================================================================
   markdown.css —— 预览区（.markdown-body）的排版。
   只用 themes.css 里的变量着色，因此对全部主题通用；代码高亮把 highlight.js 的 class
   映射到 --hl-* 变量（见文件末尾）。
   ========================================================================== */

.markdown-body {
    font-family: var(--md-font);
    font-size: var(--md-size);
    line-height: 1.7;
    color: var(--fg);
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
.markdown-body > :first-child { margin-top: 0 !important; }
.markdown-body > :last-child { margin-bottom: 0 !important; }

/* ---------- 标题 ---------- */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    position: relative;
    margin: 1.6em 0 .7em;
    font-family: var(--heading-font);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.012em;
    color: var(--heading);
    scroll-margin-top: 16px;
}
.markdown-body h1 { font-size: 2em; margin-top: .4em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
.markdown-body h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1.05em; }
.markdown-body h5 { font-size: .95em; }
.markdown-body h6 { font-size: .9em; color: var(--muted); }
.markdown-body h1 + h2, .markdown-body h2 + h3, .markdown-body h3 + h4 { margin-top: 1em; }

/* 标题锚点（markdown-it-anchor，悬停出现） */
.markdown-body .header-anchor {
    position: absolute;
    left: -1.1em;
    width: 1.1em;
    top: 0;
    color: var(--subtle);
    text-decoration: none;
    opacity: 0;
    font-weight: 400;
    transition: opacity .12s ease;
}
.markdown-body h1:hover .header-anchor, .markdown-body h2:hover .header-anchor, .markdown-body h3:hover .header-anchor,
.markdown-body h4:hover .header-anchor, .markdown-body h5:hover .header-anchor, .markdown-body h6:hover .header-anchor,
.markdown-body .header-anchor:focus-visible { opacity: 1; }
.markdown-body .header-anchor:hover { color: var(--accent); }
@media (max-width: 720px) { .markdown-body .header-anchor { display: none; } }

/* ---------- 段落与行内 ---------- */
.markdown-body p { margin: 0 0 1em; }
.markdown-body a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 2px; }
.markdown-body a:hover { text-decoration-color: var(--link); }
.markdown-body strong { font-weight: 650; color: var(--heading); }
.markdown-body em { font-style: italic; }
.markdown-body del, .markdown-body s { color: var(--muted); }
.markdown-body mark { background: var(--mark); color: inherit; padding: 0 .15em; border-radius: 2px; }
.markdown-body kbd {
    display: inline-block;
    padding: .1em .45em;
    font-family: var(--font-mono);
    font-size: .8em;
    line-height: 1.4;
    color: var(--fg);
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    vertical-align: middle;
}
.markdown-body sub, .markdown-body sup { font-size: .75em; line-height: 0; }
.markdown-body abbr[title] { text-decoration: underline dotted; cursor: help; }
.markdown-body hr {
    height: 1px;
    margin: 2em 0;
    border: 0;
    background: var(--border);
}
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-sizing: content-box;
}
.markdown-body img[align="right"] { margin-left: 1em; }
.markdown-body img[align="left"] { margin-right: 1em; }
.markdown-body p > img:only-child { display: block; margin: 0 auto; }
.markdown-body video, .markdown-body iframe { max-width: 100%; }
.markdown-body figure { margin: 1.4em 0; text-align: center; }
.markdown-body figcaption { margin-top: .5em; font-size: .85em; color: var(--muted); }

/* ---------- 列表 ---------- */
.markdown-body ul, .markdown-body ol { margin: 0 0 1em; padding-left: 1.8em; }
.markdown-body li { margin: .25em 0; }
.markdown-body li > p { margin-bottom: .5em; }
.markdown-body li > ul, .markdown-body li > ol { margin: .25em 0 .35em; }
.markdown-body ul ul { list-style-type: circle; }
.markdown-body ul ul ul { list-style-type: square; }
.markdown-body ::marker { color: var(--muted); }
.markdown-body ol > li::marker { font-variant-numeric: tabular-nums; }

/* 任务列表（markdown-it-task-lists：<li class="task-list-item"><input …> 文本） */
.markdown-body .contains-task-list { list-style: none; padding-left: 1.8em; }
.markdown-body .task-list-item { position: relative; }
.markdown-body .task-list-item-checkbox {
    appearance: none;
    position: absolute;
    left: -1.55em;
    top: .38em;
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    border: 1.5px solid var(--muted);
    border-radius: 4px;
    background: var(--panel);
    cursor: default;
}
.markdown-body .task-list-item-checkbox:checked { background: var(--accent); border-color: var(--accent); }
.markdown-body .task-list-item-checkbox:checked::after {
    content: '';
    position: absolute;
    left: .3em;
    top: .06em;
    width: .28em;
    height: .55em;
    border: solid var(--accent-fg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.markdown-body .task-list-item > p:first-of-type { display: inline; }

/* ---------- 引用 ---------- */
.markdown-body blockquote {
    margin: 0 0 1em;
    padding: .2em 1.1em;
    border-left: 3px solid var(--quote-border);
    color: var(--quote-fg);
    background: color-mix(in srgb, var(--quote-border) 6%, transparent);
    border-radius: 0 6px 6px 0;
}
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body blockquote blockquote { margin-top: .6em; }

/* GitHub 风格提示块：> [!NOTE] 等（render.js 的 alerts 插件） */
.markdown-body .markdown-alert {
    --alert: var(--alert-note);
    border-left-color: var(--alert);
    background: color-mix(in srgb, var(--alert) 7%, transparent);
    color: var(--fg);
    padding: .75em 1.1em .8em;
}
.markdown-body .markdown-alert-tip { --alert: var(--alert-tip); }
.markdown-body .markdown-alert-important { --alert: var(--alert-important); }
.markdown-body .markdown-alert-warning { --alert: var(--alert-warning); }
.markdown-body .markdown-alert-caution { --alert: var(--alert-caution); }
.markdown-body .markdown-alert-title {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 .4em;
    font-weight: 600;
    font-size: .95em;
    color: var(--alert);
}
.markdown-body .markdown-alert-title svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ---------- 表格 ---------- */
.markdown-body .table-wrap { overflow-x: auto; margin: 0 0 1em; }
.markdown-body table {
    display: table;
    width: max-content;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: .93em;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.markdown-body .table-wrap table { margin: 0; }
.markdown-body th, .markdown-body td { padding: .5em .9em; border-bottom: 1px solid var(--border-muted); border-right: 1px solid var(--border-muted); vertical-align: top; }
.markdown-body th:last-child, .markdown-body td:last-child { border-right: 0; }
.markdown-body tbody tr:last-child td { border-bottom: 0; }
.markdown-body th { font-weight: 600; color: var(--heading); background: var(--stripe); text-align: left; white-space: nowrap; }
.markdown-body tbody tr:nth-child(even) td { background: var(--stripe); }
.markdown-body td > :last-child, .markdown-body th > :last-child { margin-bottom: 0; }

/* ---------- 代码 ---------- */
.markdown-body code, .markdown-body pre, .markdown-body samp, .markdown-body tt {
    font-family: var(--font-mono);
    font-feature-settings: 'liga' 0, 'calt' 0;
}
.markdown-body :not(pre) > code {
    padding: .15em .4em;
    margin: 0 .05em;
    font-size: .875em;
    background: var(--code-bg);
    border-radius: 5px;
    color: var(--fg);
    white-space: break-spaces;
}
.markdown-body a > code { color: inherit; }
.markdown-body h1 code, .markdown-body h2 code, .markdown-body h3 code { font-size: .85em; }

.markdown-body .code-block {
    position: relative;
    margin: 0 0 1.1em;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: var(--pre-bg);
    overflow: hidden;
}
.markdown-body .code-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 14px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--muted);
    background: color-mix(in srgb, var(--fg) 4%, transparent);
    border-bottom: 1px solid var(--border-muted);
}
.markdown-body .code-head .code-title { font-family: var(--font-mono); color: var(--fg); }
.markdown-body .code-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    height: 24px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    opacity: .75;
}
.markdown-body .code-copy:hover { background: var(--code-bg); color: var(--fg); opacity: 1; }
.markdown-body .code-copy svg { width: 13px; height: 13px; }
.markdown-body .code-copy.is-copied { color: var(--alert-tip); opacity: 1; }
.markdown-body .code-block.is-plain .code-head { display: none; }
.markdown-body .code-block.is-plain:hover .code-copy { opacity: 1; }
.markdown-body .code-block.is-plain .code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--pre-bg);
    border-color: var(--border-muted);
    opacity: 0;
}
.markdown-body pre {
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    font-size: .875em;
    line-height: 1.6;
    color: var(--fg);
    background: transparent;
    tab-size: 4;
}
.markdown-body pre code { display: block; padding: 0; background: transparent; font-size: inherit; white-space: pre; }
.markdown-body .code-block[data-wrap="true"] pre code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 脚注 ---------- */
.markdown-body .footnote-ref a, .markdown-body a.footnote-backref { text-decoration: none; font-size: .8em; }
.markdown-body sup.footnote-ref a { padding: 0 .1em; }
.markdown-body .footnotes { margin-top: 2.5em; font-size: .88em; color: var(--muted); }
.markdown-body .footnotes-sep { margin: 0 0 1em; }
.markdown-body .footnotes ol { padding-left: 1.4em; }
.markdown-body .footnote-item p { margin-bottom: .3em; }
.markdown-body .footnote-item:target { background: var(--mark); border-radius: 4px; }

/* ---------- details ---------- */
.markdown-body details {
    margin: 0 0 1em;
    padding: .55em .9em;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fg) 2.5%, transparent);
}
.markdown-body details[open] { padding-bottom: .8em; }
.markdown-body summary { cursor: pointer; font-weight: 600; color: var(--heading); list-style: none; display: flex; align-items: center; gap: .5em; }
.markdown-body summary::-webkit-details-marker { display: none; }
.markdown-body summary::before {
    content: '';
    width: .45em;
    height: .45em;
    border: solid var(--muted);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: none;
    margin-left: .1em;
}
.markdown-body details[open] > summary::before { transform: rotate(45deg); }
.markdown-body details[open] > summary { margin-bottom: .6em; }
.markdown-body details > :last-child { margin-bottom: 0; }

/* ---------- 数学 / 图表 ---------- */
.markdown-body .math-block { margin: 0 0 1em; overflow-x: auto; overflow-y: hidden; text-align: center; padding: .4em 0; }
.markdown-body .math-inline .katex { font-size: 1.05em; }
.markdown-body .math-error { color: var(--alert-caution); font-family: var(--font-mono); font-size: .85em; }
.markdown-body .katex-display { margin: 0; }
.markdown-body .mermaid {
    margin: 0 0 1.1em;
    padding: 16px;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: var(--pre-bg);
    text-align: center;
    overflow-x: auto;
}
.markdown-body .mermaid svg { max-width: 100%; height: auto; }
.markdown-body .mermaid.is-pending { color: var(--subtle); font-size: .85em; min-height: 3em; }
.markdown-body .mermaid.is-error { text-align: left; }
.markdown-body .mermaid.is-error pre { color: var(--alert-caution); background: transparent; }

/* ---------- 其它 ---------- */
.markdown-body .front-matter {
    margin: 0 0 1.4em;
    padding: .7em 1em;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: .82em;
    color: var(--muted);
    white-space: pre-wrap;
}
.markdown-body .toc-inline ul { list-style: none; padding-left: 1.2em; }
.markdown-body .toc-inline > ul { padding-left: 0; }
.markdown-body .anchor-flash { animation: anchor-flash 1.2s ease; }
@keyframes anchor-flash { 0%, 40% { background: var(--mark); } 100% { background: transparent; } }
.markdown-body .emoji { font-style: normal; }
.markdown-body dl dt { font-weight: 600; margin-top: .6em; }
.markdown-body dl dd { margin: 0 0 .4em 1.5em; }

/* ==========================================================================
   highlight.js class → 主题变量
   ========================================================================== */
.hljs { color: var(--fg); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-template-tag, .hljs-operator { color: var(--hl-keyword); }
.hljs-string, .hljs-template-variable, .hljs-addition .hljs-string, .hljs-char.escape_ { color: var(--hl-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--hl-number); }
.hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section, .hljs-name { color: var(--hl-title); }
.hljs-variable, .hljs-property, .hljs-params { color: var(--hl-variable); }
.hljs-attr, .hljs-attribute, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-selector-id { color: var(--hl-attr); }
.hljs-type, .hljs-class, .hljs-built_in.type_, .hljs-selector-class { color: var(--hl-type); }
.hljs-tag { color: var(--hl-tag); }
.hljs-tag .hljs-name { color: var(--hl-tag); }
.hljs-tag .hljs-attr { color: var(--hl-attr); }
.hljs-built_in, .hljs-title.class_.inherited__ { color: var(--hl-builtin); }
.hljs-regexp { color: var(--hl-regexp); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string { color: var(--hl-meta); }
.hljs-subst { color: var(--fg); }
.hljs-punctuation { color: var(--muted); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-addition { color: var(--hl-addition); background: var(--hl-addition-bg); display: inline-block; width: 100%; }
.hljs-deletion { color: var(--hl-deletion); background: var(--hl-deletion-bg); display: inline-block; width: 100%; }
.hljs-formula { color: var(--hl-number); }
.hljs-code { color: var(--hl-string); }

/* 恢复阅读位置时内容淡入 */
.markdown-body.is-resuming { animation: resume-fade .7s ease both; }
@keyframes resume-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .markdown-body.is-resuming { animation: none; } }