/* 文章标题与正文排版。
 *
 * 从 portal.css 抽出来的：编辑侧的文章预览页要复用同一套排版——预览的意义就是
 * "看它在网站样式下长什么样"，各写一套就没意义了。展示侧和编辑侧都引这个文件。
 *
 * 这里**不定义 :root 变量**：admin.css 里 --brand / --radius 跟展示侧同名但不同值，
 * 重新定义会把后台的颜色改掉。所以一律带 fallback，取值就是展示侧那一套。
 *
 * 窄屏的 .article-title / .prose 字号仍留在 portal.css 的 @media 里（只有展示侧
 * 需要），预览页在窄屏下用桌面字号——后台基本在桌面用，不值得为它再抄一份。
 */

.article { min-width: 0; }

.article-head { margin-bottom: 22px; }
.article-title { margin: 0; font-size: 30px; line-height: 1.4; }
.article-meta { margin-top: 12px; font-size: 14px; color: var(--ink-3, #94a3b2); }

/* 正文排版。正文是 HTML（编辑页是富文本编辑器），前台原样输出，这份样式管显示 */
/* overflow-wrap：正文里的长链接、长英文单词不该把容器顶开。
   旧站那批 HTML 正文里就有整条 URL 当文字的情况。 */
.prose { font-size: 16.5px; line-height: 2; color: #22303d; overflow-wrap: break-word; }
.prose > *:first-child { margin-top: 0; }
/* 段落缩进由正文自己带（旧站编辑器和现在的富文本编辑器都会在段首写两个全角空格），
   CSS 这里**不能**再加 text-indent，否则叠加成四格。
   2026-10 就是这个原因：后台看着 2 格、前台 4 格。 */
.prose p { margin: 0 0 1.1em; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin: 1.8em 0 .7em; line-height: 1.5;
}
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 19px; }
.prose h4, .prose h5, .prose h6 { font-size: 17px; }
/* 正文里的图片不能超出容器宽度。
 *
 * 旧站靠 bootstrap 的 `img { max-width: 100% }` 收着，新站没引 bootstrap，
 * 于是原图有多宽就撑多宽——正文里 91% 的图 style 是空的（没有显式尺寸），
 * 在窄屏上会直接溢出到侧边栏外面。
 *
 * height: auto 只在没写死高度时起作用：body 里那些
 * style="width: 326px; height: 410.88px" 的图，行内样式优先，尺寸照旧。 */
.prose img { margin: 1.4em auto; border-radius: 8px; max-width: 100%; height: auto; }
.prose a { color: var(--brand-2, #0a7ea4); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.6em; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose blockquote {
    margin: 1.4em 0; padding: 2px 18px; color: var(--ink-2, #5a6b7c);
    border-left: 3px solid var(--line, #e4e9ee); background: var(--bg-2, #f6f8fa); border-radius: 0 8px 8px 0;
}
/* 表格列一多，实际宽度会超过容器、把整页撑出横向滚动条。
   改成 block 让自己内部横向滚——跟 .prose pre 一个思路。
   代价是表格不再按 table 的算法分配列宽，宽表会挤在一起靠滚动看。 */
.prose table {
    display: block; width: 100%; overflow-x: auto;
    border-collapse: collapse; margin: 1.4em 0; font-size: 15px;
}
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--line, #e4e9ee); }
.prose th { background: var(--bg-2, #f6f8fa); }
.prose code {
    padding: 2px 6px; font-size: .92em; background: var(--bg-2, #f6f8fa);
    border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre { padding: 16px; overflow-x: auto; background: var(--bg-2, #f6f8fa); border-radius: 8px; }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line, #e4e9ee); }