/* ============================================================
   markdown.css — Markdown 正文排版

   所有规则都收在 .md 作用域内（content.html 里由 <div class="md"> 包住）。
   服务端用 Python-Markdown + Pygments(friendly) 出 HTML，
   但 friendly 的默认配色是暖米色底 + 红绿蓝 token，和本站的冷色调不搭，
   所以这里不是"补充"而是整体重写一套冷色 token 配色（见文件下半部分）。

   风格底线：单调、冷静。低饱和、无大色块、无花哨阴影。
   令牌一律取自 theme.css 的 :root，本文件不定义任何新令牌。
   ============================================================ */

/* ------------------------------------------------------------
   1. 作用域与行宽
   ------------------------------------------------------------ */
.md {
    max-width: 780px;              /* 契约要求 720–820px */
    color: var(--text);
    font-size: 1rem;
    line-height: 1.78;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* 这里写的是版式行宽，不是渲染宽度。Ctrl+滚轮缩放时这一层不动，
       zoom 挂在外层的正文栏 .app-main 上（见 content.css 第 5 节）：
       栏宽够时行宽按 780 × zoom 渲染，栏宽不够时退化成栏宽本身，
       也就是和浏览器整页放大一样，行变短、排版重排。 */
}

/* 首尾元素不吃掉多余外边距，避免正文顶部出现空洞 */
.md > :first-child { margin-top: 0; }
.md > :last-child  { margin-bottom: 0; }

/* 等宽字体栈：行内 code 与代码块共用 */
.md code,
.md pre,
.md kbd,
.md samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------
   2. 标题
   层级要清晰：h1/h2 深色、h3 用 --primary-dark、h4+ 逐级转灰。
   ------------------------------------------------------------ */
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
    line-height: 1.35;
    font-weight: 700;
}

.md h1 {
    font-size: 1.72rem;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2.2em 0 0.72em;
}

.md h2 {
    font-size: 1.34rem;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 2.1em 0 0.62em;
}

/* h2 下方的极细渐变装饰线 —— 与 .card-header::after 同一套设计语言 */
.md h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--primary-gradient);
    opacity: 0.45;
}

.md h3 {
    font-size: 1.13rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primary-dark);
    margin: 1.8em 0 0.66em;
}

.md h4 {
    font-size: 1.00rem;
    font-weight: 600;
    color: var(--text);
    margin: 1.6em 0 0.58em;
}

.md h5 {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 1.5em 0 0.5em;
}

.md h6 {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin: 1.4em 0 0.5em;
}

/* ------------------------------------------------------------
   3. 段落、链接、列表
   ------------------------------------------------------------ */
.md p {
    margin: 0 0 1.05em;
}

.md a {
    color: var(--primary-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(90, 120, 168, 0.28);
    transition: var(--transition);
}
.md a:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.md strong { font-weight: 600; }
.md em     { font-style: italic; }
.md del    { color: var(--text-light); }

/* ==高亮==（pymdownx.mark）。暖色是本站唯一的暖色点缀，
   只在这类需要从冷色正文里跳出来的地方用，面积很小。 */
.md mark {
    background: var(--accent-light);
    color: var(--text);
    padding: 0.08em 0.3em;
    border-radius: 3px;
}

/* ~下标~（pymdownx.tilde 附带）。本体量收小并下沉，避免撑开行高。 */
.md sub { font-size: 0.76em; }

.md ul,
.md ol {
    margin: 0 0 1.05em;
    padding-left: 1.45em;
}

.md li {
    margin: 0.28em 0;
}

.md li > ul,
.md li > ol {
    margin: 0.28em 0 0.4em;
}

/* 列表符号降调，避免密集的实心点抢注意力 */
.md ul li::marker { color: var(--text-light); }
.md ol li::marker { color: var(--text-muted); font-size: 0.9em; }

/* - [ ] 任务清单（pymdownx.tasklist）——去掉项目符号，让复选框顶替它的位置 */
.md ul.task-list,
.md ol.task-list {
    padding-left: 0.2em;
    list-style: none;
}
.md li.task-list-item {
    list-style: none;
    position: relative;
    padding-left: 1.55em;
}

.md .task-list-item input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.95em;
    height: 0.95em;
    margin: 0;
    accent-color: var(--primary);
    cursor: default;
}

/* 已完成项整行降调，未完成项保持正常——扫一眼就能分辨进度。
   用 :has() 而非 `:checked ~ *`：文本是裸文本节点，兄弟选择器选不中它。
   老浏览器不支持 :has() 时只是少了这层降调，不影响可用性。 */
.md li.task-list-item:has(input:checked) {
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   4. 引用 —— 左侧强调条，不用斜体
   ------------------------------------------------------------ */
.md blockquote {
    margin: 1.5em 0;
    padding: 0.35em 0 0.35em 1.1em;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    /* 用极淡的横向渐隐代替整块底色：不出现大色块 */
    background: linear-gradient(90deg, rgba(107, 140, 191, 0.065) 0%, rgba(107, 140, 191, 0) 100%);
    color: var(--text-muted);
    font-style: normal;
}

.md blockquote p {
    margin: 0.4em 0;
}
.md blockquote > :first-child { margin-top: 0; }
.md blockquote > :last-child  { margin-bottom: 0; }

/* ------------------------------------------------------------
   5. 表格 —— 边框 + 斑马纹，窄屏整表横向滚动
   display:block + width:max-content 是让裸 <table> 能滚动的标准做法
   （Markdown 输出的表格没有外层包裹元素可挂 overflow）。
   ------------------------------------------------------------ */
.md table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.md th,
.md td {
    border: 1px solid var(--border);
    padding: 8px 14px;
    text-align: left;
    vertical-align: top;
}

.md thead th {
    background: var(--primary-light);
    border-color: #d7e0f0;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.md tbody tr:nth-child(even) {
    background: var(--surface-hover);
}
.md tbody tr:hover {
    background: #f1f5fb;
}

/* ------------------------------------------------------------
   6. 图片、分割线
   ------------------------------------------------------------ */
.md img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: var(--radius-sm);
}

/* 竖屏视频（手机拍的演示）限高，不然在桌面上会撑成一整屏 */
.md video {
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: var(--radius-sm);
    background: #000;
}

.md hr {
    margin: 2.2em 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------
   7. 代码 —— 行内 code
   ------------------------------------------------------------ */
.md code {
    font-size: 0.875em;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--primary-light);
    color: var(--text);
}

/* ------------------------------------------------------------
   8. 代码 —— 代码块
   .codehilite 是 Pygments 的外层 div，<pre><code> 在其内部。
   底色、边框、滚动条统一挂在外层，pre 内部清零避免双层。
   ------------------------------------------------------------ */
.md pre {
    margin: 1.5em 0;
    padding: 15px 17px;
    font-size: 0.855em;
    line-height: 1.62;
    tab-size: 4;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md pre code {
    display: block;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

.md .codehilite {
    margin: 1.5em 0;
    padding: 15px 17px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md .codehilite pre {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* ------------------------------------------------------------
   9. Pygments token 配色 —— 冷色重写
   friendly 主题原本是 #f0f0f0 暖底 + 高饱和 token，
   这里改成：#f7f9fc 冷底，token 全部从本站调色板派生。
   （--success / --accent 取加深版，保证在浅底上的可读性）
   ------------------------------------------------------------ */
.md .codehilite .hll {
    background: rgba(107, 140, 191, 0.10);
    border-radius: 3px;
}

/* 关键字 / 声明 —— 派生自 --primary-dark */
.md .codehilite .k,
.md .codehilite .kc,
.md .codehilite .kd,
.md .codehilite .kn,
.md .codehilite .kp,
.md .codehilite .kr,
.md .codehilite .kt,
.md .codehilite .ow {
    color: var(--primary-dark);
    font-weight: 600;
}

/* 字符串 —— 派生自 --success（加深） */
.md .codehilite .s,
.md .codehilite .s1,
.md .codehilite .s2,
.md .codehilite .sa,
.md .codehilite .sb,
.md .codehilite .sc,
.md .codehilite .sd,
.md .codehilite .se,
.md .codehilite .sh,
.md .codehilite .si,
.md .codehilite .sr,
.md .codehilite .ss,
.md .codehilite .sx,
.md .codehilite .dl {
    color: #2f7a55;
}

/* 注释 —— 取 --text-light，斜体 */
.md .codehilite .c,
.md .codehilite .c1,
.md .codehilite .cm,
.md .codehilite .cp,
.md .codehilite .cs,
.md .codehilite .ch,
.md .codehilite .cd {
    color: var(--text-light);
    font-style: italic;
}

/* 数字 / 常量 —— 派生自 --accent（加深） */
.md .codehilite .m,
.md .codehilite .mb,
.md .codehilite .mf,
.md .codehilite .mh,
.md .codehilite .mi,
.md .codehilite .mo,
.md .codehilite .il {
    color: #a8643a;
}

/* 函数名 / 方法名 */
.md .codehilite .nf,
.md .codehilite .fm {
    color: var(--primary);
}

/* 内建名 */
.md .codehilite .nb,
.md .codehilite .bp {
    color: var(--primary);
}

/* 普通标识符：文字色，不加装饰（保证 .n 有明确落点） */
.md .codehilite .n,
.md .codehilite .na,
.md .codehilite .nc,
.md .codehilite .nd,
.md .codehilite .ne,
.md .codehilite .nl,
.md .codehilite .nn,
.md .codehilite .no,
.md .codehilite .nt,
.md .codehilite .nv,
.md .codehilite .nx,
.md .codehilite .py,
.md .codehilite .vc,
.md .codehilite .vg,
.md .codehilite .vi,
.md .codehilite .vm {
    color: var(--text);
}

/* 运算符 / 标点 —— 降到灰，让关键字和字符串先被看到 */
.md .codehilite .o,
.md .codehilite .p {
    color: var(--text-muted);
}

/* 空白 token 不能有任何底色，否则代码块里会出现色块 */
.md .codehilite .w {
    color: inherit;
    background: none;
}

/* 出错 token */
.md .codehilite .err {
    color: var(--error);
    background: var(--error-bg);
    border-radius: 3px;
}

/* diff 增删 */
.md .codehilite .gd {
    color: var(--error);
    background: var(--error-bg);
}
.md .codehilite .gi {
    color: var(--success);
    background: var(--success-bg);
}

/* 长文档 / 命令行 / 强调 */
.md .codehilite .gh {
    color: var(--primary-dark);
    font-weight: 700;
}
.md .codehilite .gu {
    color: var(--text-muted);
    font-weight: 600;
}
.md .codehilite .gp {
    color: var(--text-muted);
}
.md .codehilite .ge {
    font-style: italic;
}
.md .codehilite .gs {
    font-weight: 700;
}

/* ------------------------------------------------------------
   10. [TOC] 目录（toc 扩展生成，可选）
   ------------------------------------------------------------ */
.md .toc {
    margin: 1.5em 0;
    padding: 14px 18px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.md .toc ul {
    margin: 0;
    padding-left: 1.1em;
}
.md .toc a {
    color: var(--text-muted);
    border-bottom: none;
}
.md .toc a:hover {
    color: var(--primary-dark);
}

/* ------------------------------------------------------------
   11. 响应式
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .md { font-size: 0.97rem; line-height: 1.75; }
    .md h1 { font-size: 1.5rem; }
    .md h2 { font-size: 1.22rem; }
    .md h3 { font-size: 1.06rem; }
    .md pre,
    .md .codehilite { padding: 13px 14px; }
    .md blockquote { padding-left: 0.9em; }
}

@media (max-width: 600px) {
    .md table { font-size: 0.86rem; }
    .md th,
    .md td { padding: 7px 10px; }
}