/* =========================================================================
   prose.css —— 2026 改版：资讯详情页的「纸面阅读区」
   -------------------------------------------------------------------------
   两件事：
   1) 给 .article-content 补一整套排版层。原来 style.css 里对 .article-content
      一条规则都没有，正文全靠继承全局的 p{color:#fff;font-size:16px;line-height:2}
      和 Bootstrap 的默认标题尺寸 —— 这才是「h1/h2 特别大、strong 看不出来、
      blockquote 没样式」的真正原因，跟数据本身无关。补完这层之后 h2/h3/h4
      是一套连续的层级，以后写文章可以正常从 h2 开始。
   2) 老数据兼容。库里 6381 篇正文带内联 style，其中文字颜色深浅两派都有
      （rgb(49,49,49) 一派、rgb(231,231,231) 一派），任何单一底色都会瞎掉一半。
      所以这里把正文里的内联 color / background / font-family / font-size /
      line-height 全部中和掉，交还给排版层统一管。
      彩色强调（作者真的想标红的那些）由 legacy-content.js 在运行时挑回来，
      以 inline !important 重新打上 —— 内联 !important 优先级高于本文件。
      即使 JS 没跑，页面也只是变成单色，绝不会出现看不见的文字。
   ========================================================================= */

/* =========================================================================
   1. 纸面容器
   深色外壳里嵌一块浅色阅读卡片：长文阅读浅底更耐读，老数据里大量内容原本
   就是按白底排的（98 篇带 background-color:#fff、121 篇 figure/figcaption），
   AdSense 广告本身也是白底，落在浅色列里比浮在暗底上更不割裂。
   ========================================================================= */
/* 正文区整段抬一档底色，让纸卡不是直接压在近黑上 —— 中间多一层过渡，
   黑白落差就不会那么硬。 */
.post-details-area { background-color: #191d21; }

.post-details-area .post-details-content {
    background-color: var(--pp-bg);
    color: var(--pp-text);
    border-radius: 14px;
    padding: 34px 34px 40px;
    /* 一圈极淡的白描边 + 一圈外扩的柔光，把纸和底之间那道硬边化开 */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .07),
        0 18px 56px rgba(0, 0, 0, .46),
        0 0 90px rgba(255, 255, 255, .035);
}

@media (max-width: 767.98px) {
    .post-details-area .post-details-content {
        padding: 20px 16px 26px;
        border-radius: 10px;
        /* 手机上左右留白很宝贵，卡片贴边铺满，只保留圆角 */
        margin-left: -5px;
        margin-right: -5px;
    }
}

/* 卡片内所有默认继承自全局的白字，一律翻成纸面文字色 */
.post-details-content,
.post-details-content p,
.post-details-content h1,
.post-details-content h2,
.post-details-content h3,
.post-details-content h4,
.post-details-content h5,
.post-details-content h6 { color: var(--pp-text); }

/* =========================================================================
   2. 文章头部（分类 / 标题 / 元信息）
   ========================================================================= */
.post-details-content .post-content .post-cata { margin-bottom: 16px; }

/* style.css 里有 .post-details-content .post-content .post-title{color:#fff;font-size:24px}
   以及两条断点降级到 20px / 18px，特异度都是 (0,3,0)。这里必须写到
   (0,3,1) 以上才压得住，否则标题会白字白底、字号也回不去。 */
.post-details-content .post-content h1.post-title {
    font-size: 28px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f1216;
    margin-bottom: 14px;
    display: block;
}
@media (min-width: 768px) {
    .post-details-content .post-content h1.post-title { font-size: 33px; }
}
@media (min-width: 992px) {
    .post-details-content .post-content h1.post-title { font-size: 36px; }
}
.post-details-content .post-content h1.post-title:hover,
.post-details-content .post-content h1.post-title:focus { color: #0f1216; }

.post-details-content .post-content .post-meta a,
.post-details-content .post-content .post-meta span,
.post-details-content .post-content .post-meta .post-author,
.post-details-content .post-content .post-meta .post-date,
.post-details-content .post-meta a,
.post-details-content .post-meta span { color: var(--pp-muted); font-size: 13px; }
.post-details-content .post-meta a:hover { color: var(--nf-brand); }
.post-details-content .post-content .d-flex.justify-content-between {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pp-line);
}

/* =========================================================================
   3. 正文排版层
   ========================================================================= */
.article-content {
    font-size: 17px;
    line-height: 1.85;
    color: var(--pp-text);
    letter-spacing: .01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (min-width: 992px) {
    .article-content { font-size: 18px; line-height: 1.88; }
}

.article-content p {
    /* 覆盖全局的 p{color:#fff;font-size:16px;line-height:2} */
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
    /* 原来 1.15em（18px 字号 ≈ 21px），配上 1.88 的行高显得松。收到 0.8em
       ≈ 14px：仍然比行内间距（约 16px 的行距）略小一档，段落边界看得出来，
       又不至于像原来那样一段一段飘着。再往下压到 0.25em 的话只剩 4.5px，
       比行距还小，段与段就糊成一坨了。 */
    margin: 0 0 .8em;
}

/* ---- 标题层级 ----
   h1 只做视觉降级，DOM 里仍然是 <h1>（库里 18 篇正文自带 h1，改 DOM 会动到
   页面的标题结构，属于「内核」，这轮只动外观）。 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #0f1216;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.article-content h1,
.article-content h2 {
    font-size: 1.44em;
    margin: 2.1em 0 .8em;
    padding-left: 14px;
    position: relative;
}
.article-content h1::before,
.article-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .22em;
    bottom: .22em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--nf-brand-2), var(--nf-brand));
}

.article-content h3 {
    font-size: 1.2em;
    margin: 1.8em 0 .7em;
    padding-bottom: .4em;
    border-bottom: 1px solid var(--pp-line);
}

.article-content h4 {
    font-size: 1.06em;
    margin: 1.6em 0 .6em;
    color: #2b3138;
}

.article-content h5,
.article-content h6 {
    font-size: 1em;
    margin: 1.4em 0 .5em;
    color: var(--pp-muted);
    font-weight: 600;
}

/* 第一个标题不要顶太多空 */
.article-content > :first-child { margin-top: 0; }

/* ---- 强调 ----
   原来 <strong> 在暗底上和正文几乎一个样。这里用「记号笔」底纹：比纯加粗
   醒目得多，又不像整段变红那样吵。 */
.article-content strong,
.article-content b {
    font-weight: 700;
    color: #0f1216;
    background-image: linear-gradient(transparent 62%, rgba(229, 9, 20, .18) 0);
    padding: 0 1px;
}
.article-content em, .article-content i {
    font-style: normal;              /* 中文斜体很丑，改成着色区分 */
    color: var(--nf-brand);
    font-weight: 500;
}
.article-content mark {
    background-color: rgba(245, 197, 24, .34);
    color: inherit;
    padding: .1em .25em;
    border-radius: 3px;
}

/* ---- 引用 ---- */
.article-content blockquote {
    margin: 1.6em 0;
    padding: 16px 20px 16px 22px;
    background-color: var(--pp-sub);
    border-left: 4px solid var(--nf-brand);
    border-radius: 0 8px 8px 0;
    color: #414952;
    font-size: .97em;
}
.article-content blockquote p:last-child { margin-bottom: 0; }

/* ---- 列表 ---- */
.article-content ul,
.article-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.5em;
}
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
.article-content li { margin-bottom: .45em; padding-left: .2em; }
.article-content li::marker { color: var(--nf-brand); }
.article-content li > ul,
.article-content li > ol { margin-top: .45em; margin-bottom: .2em; }

/* ---- 分隔线 ---- */
.article-content hr {
    margin: 2.2em 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--pp-line), transparent);
    opacity: 1;
}

/* ---- 链接 ---- */
.article-content a {
    color: var(--nf-brand);
    font-weight: 500;
    font-size: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(229, 9, 20, .38);
}
.article-content a:hover { color: var(--nf-brand-2); text-decoration-color: currentColor; }

/* ---- 图片 / figure ----
   宽高与防 CLS 的逻辑在 customer.css 里，这里只加圆角和上下留白，不碰尺寸。 */
.article-content img { border-radius: 8px; margin: 1.1em auto; }
.article-content figure { margin: 1.5em 0; }
.article-content figcaption {
    margin-top: .6em;
    font-size: .82em;
    line-height: 1.7;
    color: var(--pp-muted);
    text-align: center;
}
/* 老数据里的 <figure><source srcset> 没有外层 <picture>，浏览器不会渲染它，
   但它会占一个空的行盒，显式藏掉。 */
.article-content figure > source { display: none; }

/* ---- 表格 ----
   宽表由 legacy-content.js 包一层 .article-table-scroll 做横向滚动，
   避免撑破版心导致整页横向滚动。 */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: .93em;
}
.article-content table th,
.article-content table td {
    border: 1px solid var(--pp-line);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}
.article-content table th { background-color: var(--pp-sub); font-weight: 700; color: #0f1216; }
.article-content table tr:nth-child(even) td { background-color: #fafbfc; }
.article-content .article-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
}
.article-content .article-table-scroll > table { margin: 0; }

/* 老数据里有从别的站整块粘过来的「伪表格」：<tbody> 上挂 display:flex，
   <tr> 上挂 display:flex + 固定 width，<th>/<td> 上挂 display:block + flex:1/2。
   在源站那是个两列并排的规格面板，搬到这儿之后行会横向换行拼接，看起来就是
   「两行挤在一排、右边多出一个空格子」（文章 1184 就是这种）。
   把这些内联的 flex 布局收回标准表格布局，行列关系立刻恢复正常。 */
.article-content table[style],
.article-content table { display: table !important; table-layout: auto !important; }
.article-content thead[style] { display: table-header-group !important; }
.article-content tbody[style] { display: table-row-group !important; }
.article-content tfoot[style] { display: table-footer-group !important; }
.article-content tr[style] {
    display: table-row !important;
    width: auto !important;
    flex: none !important;
}
.article-content th[style],
.article-content td[style] {
    display: table-cell !important;
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    /* 源站给单元格写死的 6px 上下内边距在这儿太挤，交还给上面的 9px/12px */
    padding: 9px 12px !important;
}
/* 老表格还带着 HTML 的 width 属性（<table width="541"><td width="92">）。
   这是表现层属性，CSS 的 width 规则管不到它，结果是某一列被钉死在 92px、
   另一列吃掉剩下全部宽度，列宽比例完全失衡。交还给自动布局按内容分配。 */
.article-content table[width],
.article-content table th[width],
.article-content table td[width],
.article-content table col[width],
.article-content table colgroup[width] { width: auto !important; }
.article-content table { width: 100% !important; }

/* ---- 代码 ---- */
.article-content code,
.article-content pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background-color: var(--pp-sub);
    border-radius: 5px;
}
.article-content code { padding: .12em .38em; font-size: .9em; color: #b4232c; }
.article-content pre { padding: 14px 16px; overflow-x: auto; margin: 1.4em 0; }
.article-content pre code { background: none; padding: 0; color: inherit; }

/* ---- 视频/嵌入 ---- */
.article-content iframe { max-width: 100%; border-radius: 8px; }

/* ---- 溢出保险 ----
   老正文里有从别处整块粘来的定宽元素（style="width:750px" 这类）。改版后
   正文列加了内边距、版心比以前窄，定宽元素会顶破卡片、把整页撑出横向滚动条。
   只对直接子节点和替换元素兜底，不动表格（表格由 .article-table-scroll 横向滚动，
   在这里加 max-width 反而会把宽表压扁）。 */
.article-content > *:not(table):not(.article-table-scroll) { max-width: 100%; }
.article-content img,
.article-content video,
.article-content embed,
.article-content object,
.article-content pre { max-width: 100%; }
.article-content [style*="width"]:not(table):not(td):not(th):not(col):not(colgroup) { max-width: 100% !important; }

/* =========================================================================
   4. 老数据兼容层（关键）
   顺序在排版层之后，用属性选择器命中所有带内联样式的节点。
   只中和「颜色/字体」这类会和主题打架的声明，不动结构、不动尺寸、不动对齐。
   ========================================================================= */
.article-content [style*="color"]       { color: inherit !important; }
.article-content [style*="background"]  { background-color: transparent !important; background-image: none !important; }
.article-content [style*="font-family"] { font-family: inherit !important; }
/* 字号/行高只对正文级元素中和。标题必须排除掉：老数据里的 h2 普遍带
   inline font-size:26px，一律 inherit 会让它掉成正文字号，标题层级整个塌掉
   （font-size 是继承属性，inherit/unset 都会拿到父级的值，不会回到本层规则）。 */
.article-content [style*="font-size"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)   { font-size: inherit !important; }
.article-content [style*="line-height"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { line-height: inherit !important; }

/* 标题带内联字号/行高时，把排版层的层级强制打回去 */
.article-content h1[style], .article-content h2[style] { font-size: 1.44em !important; line-height: 1.45 !important; }
.article-content h3[style] { font-size: 1.2em !important;  line-height: 1.45 !important; }
.article-content h4[style] { font-size: 1.06em !important; line-height: 1.45 !important; }
.article-content h5[style], .article-content h6[style] { font-size: 1em !important; line-height: 1.45 !important; }
/* 老编辑器还会给标题塞 margin:70px 0 10px 这种夸张间距，统一收回排版层的节奏 */
.article-content h1[style], .article-content h2[style] { margin: 2.1em 0 .8em !important; }
.article-content h3[style] { margin: 1.8em 0 .7em !important; }
.article-content h4[style] { margin: 1.6em 0 .6em !important; }
.article-content h5[style], .article-content h6[style] { margin: 1.4em 0 .5em !important; }
/* 内联 padding:0 会顶掉左侧红条的留白 */
.article-content h1[style], .article-content h2[style] { padding-left: 14px !important; }
.article-content h3[style] { padding: 0 0 .4em !important; }
/* 老编辑器留下的 text-shadow / 描边之类，一并清掉 */
.article-content [style*="text-shadow"] { text-shadow: none !important; }

/* strong/标题即使带内联色，也要保住它们自己的语义色 */
.article-content strong[style],
.article-content b[style] { color: #0f1216 !important; }
.article-content h1[style], .article-content h2[style],
.article-content h3[style], .article-content h4[style],
.article-content h5[style], .article-content h6[style] { color: #0f1216 !important; }
.article-content a[style] { color: var(--nf-brand) !important; }

/* 老数据里不少标题带 text-align:center。标题左侧的红竖条是给左对齐标题设计的，
   居中时竖条会孤零零钉在最左边、和文字脱节，所以居中标题去掉竖条和左内边距。 */
.article-content h1[style*="text-align:center"],
.article-content h1[style*="text-align: center"],
.article-content h2[style*="text-align:center"],
.article-content h2[style*="text-align: center"] { padding-left: 0 !important; }
.article-content h1[style*="text-align:center"]::before,
.article-content h1[style*="text-align: center"]::before,
.article-content h2[style*="text-align:center"]::before,
.article-content h2[style*="text-align: center"]::before { display: none; }
/* 居中的 h3 同理，底部细线保留但不再左偏 */
.article-content h3[style*="text-align:center"],
.article-content h3[style*="text-align: center"] { padding-left: 0 !important; padding-right: 0 !important; }

/* 老正文里大量 <p><br></p> 当空行用，排版层已经有段距了，再叠一层就散架。
   :has() 在目标浏览器（Chrome 105+/Safari 15.4+/Firefox 121+）已普遍支持，
   不支持的浏览器只是维持改版前的松散间距，不会出错。 */
.article-content p:has(> br:only-child) { display: none; }
.article-content p:empty { display: none; }

/* 老编辑器爱在标签上撒一堆非法属性（noto="" sans="" margin:=""…），
   属性本身不影响渲染，这里只保证它们不会因为 [style] 命中而漏掉。 */

/* =========================================================================
   5. 纸面卡片里的其余模块（标签 / 上下篇 / 相关主题）
   这些原本是给暗底写的，进了浅色卡片必须逐个翻过来，
   否则会出现白字白底（尤其是 Bootstrap 的 .text-light）。
   ========================================================================= */
.post-details-content .post-tags {
    border-color: var(--pp-line);
    padding: 24px 0;
}
.post-details-content .post-tags ul li a {
    background-color: var(--pp-sub);
    border: 1px solid var(--pp-line);
    color: #4b535c;
    border-radius: 999px;
    padding: 5px 13px;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.post-details-content .post-tags ul li a:hover {
    background-color: var(--nf-brand);
    border-color: var(--nf-brand);
    color: #fff;
}

.post-details-content .related-post-area .section-heading h4 { color: #0f1216; }
.post-details-content .related-post-area h6 { color: #0f1216; font-weight: 600; line-height: 1.5; }
.post-details-content .related-post-area a:hover h6 { color: var(--nf-brand); }
/* BS 的 .text-secondary / .text-light 在白底上一个偏灰一个直接隐形 */
.post-details-content .text-secondary { color: var(--pp-muted) !important; }
.post-details-content .related-post-area .post-content a.text-light,
.post-details-content .related-post-area .post-content a {
    color: var(--pp-text) !important;
    font-weight: 600;
    line-height: 1.5;
}
.post-details-content .related-post-area .post-content a:hover { color: var(--nf-brand) !important; }
.post-details-content .related-post-area .single-post-area .post-thumbnail { background-color: var(--pp-sub); }

/* 上一篇 / 下一篇。
   这两块是栅格列本身（.col-md-6.d-flex.flex-column），直接给它加背景会连
   gutter 一起染色，所以只做「标签 + 分隔线」的轻处理，不做成实心卡片。 */
.post-details-content .related-post-area .col-md-6.d-flex.flex-column {
    border-top: 2px solid var(--pp-line);
    padding-top: 12px;
}
.post-details-content .related-post-area .col-md-6.d-flex.flex-column > span:first-child {
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--pp-muted) !important;
    padding-top: 0 !important;
}

/* 隐私政策页把内容直接塞在 .post-details-content 里（列宽是 col-lg-12，
   没有 .article-content 包裹），给它一套最基本的段落节奏，
   否则进了浅色卡片会变成没有呼吸感的一大坨。 */
.post-details-area .col-lg-12 > .post-details-content {
    font-size: 16px;
    line-height: 1.85;
    color: var(--pp-text);
}
.post-details-area .col-lg-12 > .post-details-content p { margin-bottom: 1em; font-size: inherit; line-height: inherit; }
.post-details-area .col-lg-12 > .post-details-content h1,
.post-details-area .col-lg-12 > .post-details-content h2 { font-size: 1.4em; margin: 1.8em 0 .7em; }
.post-details-area .col-lg-12 > .post-details-content h3,
.post-details-area .col-lg-12 > .post-details-content h4 { font-size: 1.15em; margin: 1.5em 0 .6em; }
.post-details-area .col-lg-12 > .post-details-content ul,
.post-details-area .col-lg-12 > .post-details-content ol { padding-left: 1.5em; margin-bottom: 1.1em; }
.post-details-area .col-lg-12 > .post-details-content li { list-style: inherit; margin-bottom: .4em; }
.post-details-area .col-lg-12 > .post-details-content ul li { list-style: disc; }
.post-details-area .col-lg-12 > .post-details-content ol li { list-style: decimal; }
.post-details-area .col-lg-12 > .post-details-content a { color: var(--nf-brand); text-decoration: underline; }

/* 详情页顶图仍在深色区，保持原样，只补圆角 */
.post-details-thumb img { border-radius: var(--nf-radius); }

/* 复制成功的小弹窗（BS5 modal 默认白底，这里只调文字间距） */
.modal-content .modalAlert { margin: 0; padding: 22px 16px; font-size: 15px; }