/* ══════════════════════════════════════════════════════════════════════════
   skin-helparticle.css —— 帮助文档正文页换肤层
   /helparticle/*.html    模板 helparticle.html

   ⚠ 覆盖层。厂商的 helparticle.css 有 114KB / 4955 行，一个字都不改。
   颜色全部走 /themes/_shared/design-token.css（这页已经加载了它，实测
   --brand-500 / --ink-1 / --line 都取得到）。

   改之前的实测（1440px）：
     正文行宽 1002px，字号 14px，行高 22px  → 一行 70+ 个汉字
     h2 / h3 全是 font-size:14px; font-weight:400  → **章节标题和正文一模一样**
       整篇文章的层级全靠作者手打的 emoji（📌🔧📝⚠️）和 <hr> 撑着
     code    color: rgb(0,0,255) 纯蓝、无底色 → 看着像链接，会诱人去点
     blockquote 左竖条 rgb(76,175,80)（Material Green，站内没有的颜色），
                margin 左右各 40px，窄屏白白吃掉 80px
     ul      list-style: square

   另外正文里存的是**一整篇完整 HTML 文档**（meta/title/header/main/footer 齐全），
   是编辑时整页粘进去的。这是内容录入问题不是模板问题，不去动数据库，
   只在样式上兜住：title/meta 本来就不渲染，header 是空的，footer 当落款处理。
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · 版心 + 右侧目录 ═══════════════════════════════════════════════════
   1002px 宽的正文配 14px 字号，一行 70 多个汉字，眼睛要横扫，读长文很累。
   把正文收到 720px（约 46 字/行）。收窄之后右边会空出一条，不留白，
   放本页目录 —— 这篇文章有 4 个 h2 + 2 个 h3，是真有结构的，
   目录既填了空间又确实有用（帮助文档基本都这么做）。 */
.bv-art-grid {
	display: grid;
	grid-template-columns: minmax(0, 720px) 220px;
	gap: 40px;
	align-items: start;
}
.bv-art-col { min-width: 0; }

.bv-art-toc {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding-left: 18px;
	border-left: 1px solid var(--line, #E2E7EF);
}
.bv-art-toc[hidden] { display: none; }
.bv-art-toc-h {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-1, #111823);
}
.bv-art-toc a {
	display: block;
	padding: 5px 8px;
	margin-left: -8px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-3, #5E6B7C);
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}
.bv-art-toc a:hover {
	background: var(--brand-50, #FFF4ED);
	color: var(--brand-700, #B84508);
}
.bv-art-toc a.lv3 { padding-left: 20px; font-size: 12.5px; }
.bv-art-toc a.bv-on {
	background: var(--brand-50, #FFF4ED);
	color: var(--brand-700, #B84508);
	font-weight: 500;
}
/* 目录放不下就收掉，正文吃满（但仍限宽，别又回到 1002px） */
@media (max-width: 1199.98px) {
	.bv-art-grid { grid-template-columns: minmax(0, 1fr); }
	.bv-art-toc { display: none !important; }
	.bv-art-col { max-width: 820px; }
}


/* ══ 2 · 标题区 ════════════════════════════════════════════════════════════ */
#content .help-content .topictitle1 {
	font-size: 28px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ink-1, #111823);
	margin: 0 0 12px;
	text-wrap: balance;
}
/* 原来是「发布时间：xxx」后面跟 7 个 &nbsp; 再接「更新时间：xxx」，
   窄屏一换行就断在 &nbsp; 中间（实测 390px 下断成「更新时间： 2026-」）。
   改成 flex + gap，配合模板里换掉的分隔元素。 */
#content .help-content .updateTime {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 4px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-4, #8D9AAB);
}
#content .help-content .updateTime .updateInfo {
	color: var(--ink-3, #5E6B7C);
	font-variant-numeric: tabular-nums;
}
.bv-art-sep {
	width: 1px;
	height: 11px;
	background: var(--line-strong, #CFD7E3);
	flex: 0 0 auto;
}
#content .crumbs {
	font-size: 13px;
	color: var(--ink-4, #8D9AAB);
}
#content .crumbs .link { color: var(--ink-3, #5E6B7C); }
#content .crumbs .link:hover { color: var(--brand-600, #D9520A); }


/* ══ 3 · 正文排版 ══════════════════════════════════════════════════════════
   选择器一律带 #content 前缀（1,2,1），确保压得过厂商 helparticle.css 里
   那批 `.help-content p` 之类的 (0,1,1) 规则，不用 !important。 */
#content .help-content .section {
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--ink-2, #333F4E);
	margin-top: 24px;
}
#content .help-content .section p {
	font-size: 15.5px;
	line-height: 1.85;
	margin: 0 0 16px;
	color: var(--ink-2, #333F4E);
}
#content .help-content .section > main > section {
	margin: 0;
}
/* 章节之间的分隔：原来靠作者手打的 <hr>（`border-top: 1px inset gray`）。
   隐藏它，改用 section 自己的上边框 —— 这样没打 hr 的文章也有正确的分节，
   不依赖作者记不记得敲那一行。
   ⚠ 只藏 main 的直接子级 hr；footer 里那条 hr 是落款分隔线，留着。 */
#content .help-content .section > main > hr { display: none; }
/* ⚠ 这里**不能用 `section + section`**。相邻兄弟选择器看的是 DOM 结构，
   而两个 <section> 中间隔着那条 <hr> —— 我上面把 hr 设成 display:none，
   但 display 不改变 DOM，`+` 照样被 hr 挡住，规则一次都匹配不上
   （实测四个 section 的 border-top 全是 0px）。
   用 :not(:first-of-type) 既绕开了 hr，也不依赖作者有没有敲那条 hr。
   顺带：它的特异度 (1,3,3) 也压得过上面那条 `> main > section { margin: 0 }`。 */
#content .help-content .section > main > section:not(:first-of-type) {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--line, #E2E7EF);
}

/* 标题层级。原来 h2/h3 都是 14px/400，和正文完全一样。 */
#content .help-content .section h2,
#content .help-content .section h3 {
	/* 点目录跳过来时别被吸顶的导航挡住。用 scroll-margin 而不是 JS 算偏移量。 */
	scroll-margin-top: 96px;
}
#content .help-content .section h2 {
	position: relative;
	margin: 0 0 14px;
	padding-left: 12px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--ink-1, #111823);
}
#content .help-content .section h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	bottom: .28em;
	width: 3px;
	border-radius: 2px;
	background: var(--brand-500, #F2610C);
}
#content .help-content .section h3 {
	margin: 26px 0 10px;
	font-size: 16.5px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--ink-1, #111823);
}
#content .help-content .section h4 {
	margin: 20px 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-1, #111823);
}
#content .help-content .section strong { color: var(--ink-1, #111823); }

/* 列表。原来 ul 是 square + padding-left 30px，嵌套一层缩进就叠到 50px，
   窄屏被吃掉一大截宽度。 */
/* ⚠ 这几条必须带 !important，唯一的原因是：**样式写在文章内容自己的行内
   style 属性上**（数据库里存的富文本就是 `style="list-style-type:square;
   padding-left:30px"`、blockquote 是 `style="border-left:4px solid #4CAF50;
   background-color:#f9f9f9;padding:15px"`）。内联样式压过一切非 !important
   的规则，特异度再高也没用 —— CDP 查出来我的规则确实匹配上了，只是输给了行内。

   这些行内值不是有意的设计，是拿 AI 生成整页 HTML 时带出来的默认产物
   （#4CAF50 是 Material Green，站内没有这个色；#f9f9f9 和白底几乎分不出来）。
   取舍是明确的：站点观感一致优先。代价是以后作者想给某一篇单独换色也会被盖掉，
   真要单独定制得走 class 而不是行内 style。 */
#content .help-content .section ol,
#content .help-content .section ul {
	padding-left: 1.5em !important;
	margin: 0 0 16px;
}
/* ⚠ ul 要的是 list-style:none，不是 disc。
   厂商已经用 `.help-content ul:not(.tex-guide-list) > li::after` 画了一个
   4px 的圆点当项目符号，颜色走 var(--skin-accent)，是站点自己的样式。
   我一开始把 list-style 强制成 disc，等于**同一行出现两套符号**。
   这里改成 none，把符号的活完全交给那个 ::after。
   （内容的行内 style 写的是 square，所以仍然需要 !important 才压得住。） */
#content .help-content .section ul {
	list-style: none !important;
	list-style-type: none !important;
}
/* 那个圆点写死了 `top: 18px` —— 是照厂商原来 22px 的行高调的居中值。
   我把正文行高提到 1.85（15.5px 字号 → 28.7px 行框）之后它就偏低了。
   改成跟着行高算：行框中心 .925em，再减去圆点自身半径 2px。 */
#content .help-content .section ul:not(.tex-guide-list) > li::after {
	top: calc(.925em - 2px);
}

/* 正文里三处 `<span style="color:#0000ff">`（内容作者手写的行内色）。
   纯蓝在白底上对比度够，问题是它**和链接一模一样** —— 这一段里真的链接
   也是有的，读者分不出哪个能点。而且站内没有这个蓝。
   只精确命中 #0000ff 这一个坏值，不去动作者用的其它颜色。
   映射到 --ink-1（最深的墨色）：比正文重一档，保住「这几行是重点」的意图，
   又不再伪装成链接。 */
#content .help-content .section [style*="#0000ff"],
#content .help-content .section [style*="#00f;"],
#content .help-content .section font[color="blue"] {
	color: var(--ink-1, #111823) !important;
}
#content .help-content .section li {
	font-size: 15.5px;
	line-height: 1.85;
	margin-bottom: 6px;
}
#content .help-content .section li > ul,
#content .help-content .section li > ol {
	margin: 6px 0 4px;
	padding-left: 1.35em !important;
}
#content .help-content .section li::marker { color: var(--ink-4, #8D9AAB); }

/* 行内代码。原来是浏览器默认的纯蓝 rgb(0,0,255) 且没有底色 ——
   在一段正文里就是一个蓝色词，和链接长得一模一样，会诱人去点。 */
#content .help-content .section code {
	padding: 2px 6px;
	border-radius: var(--r-chip, 4px);
	background: var(--surface-sunk, #EFF2F7);
	color: var(--ink-1, #111823);
	font-size: .92em;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	overflow-wrap: anywhere;
}
#content .help-content .section pre {
	padding: 14px 16px;
	border-radius: var(--r-ctl, 8px);
	background: var(--surface-sunk, #EFF2F7);
	overflow-x: auto;
	margin: 0 0 16px;
}
#content .help-content .section pre code {
	padding: 0;
	background: none;
}

/* 引用块。左竖条原来是 Material Green #4CAF50，站内没这个色；
   左右 margin 各 40px，窄屏白白吃掉 80px。 */
#content .help-content .section blockquote {
	margin: 0 0 16px;
	/* 同上：行内 style 只能用 !important 压 */
	padding: 14px 16px !important;
	border-left: 3px solid var(--brand-500, #F2610C) !important;
	border-radius: 0 var(--r-ctl, 8px) var(--r-ctl, 8px) 0;
	background: var(--surface-sunk, #EFF2F7) !important;
	color: var(--ink-2, #333F4E);
	font-size: 15px;
	line-height: 1.8;
}
#content .help-content .section blockquote p:last-child { margin-bottom: 0; }

#content .help-content .section a {
	color: var(--brand-600, #D9520A);
	text-decoration: none;
}
#content .help-content .section a:hover { text-decoration: underline; }

#content .help-content .section img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-ctl, 8px);
}
#content .help-content .section table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14.5px;
}
#content .help-content .section th,
#content .help-content .section td {
	border: 1px solid var(--line, #E2E7EF);
	padding: 9px 12px;
	text-align: left;
}
#content .help-content .section th {
	background: var(--surface-sunk, #EFF2F7);
	font-weight: 600;
	color: var(--ink-1, #111823);
}

/* 正文里混进来的整页 HTML 骨架 */
#content .help-content .section > title,
#content .help-content .section > meta { display: none; }
#content .help-content .section > header:empty { display: none; }
#content .help-content .section footer {
	margin: 36px 0 0 !important;
	color: var(--ink-4, #8D9AAB) !important;
	font-size: 13px;
}
#content .help-content .section footer hr {
	border: 0;
	border-top: 1px solid var(--line, #E2E7EF);
	margin: 0 0 14px;
}
#content .help-content .section footer p { font-size: 13px; margin: 0; }


/* ══ 4 · 上一篇 / 下一篇 ═══════════════════════════════════════════════════ */
#content .help-detail-feedback {
	margin-top: 40px;
}
#content .help-detail-feedback .action {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
/* ⚠⚠ 这两条是上面那个 grid 的**必需配套**，删了「上一篇 / 下一篇」会错开成对角线 ⚠⚠
   上游给 .action 写了经典 clearfix：
       .action::before, .action::after { content:" "; display:table; }
       .action::after { clear:both; }
   那是配 float 布局用的。**一旦容器改成 grid，这两个伪元素就各自变成一个 grid item**
   （实测尺寸 354×41，跟真卡片一模一样大），于是四个格子被占成：
       (1,1)=::before   (1,2)=上一篇
       (2,1)=下一篇     (2,2)=::after
   表现就是两个卡片对角线错开、而且左右颠倒。grid 里 float 本就不生效，clearfix 是多余的。
   ⚠ 排查时被误导过一次：把上游的 float / width / margin / display 全部 !important 清掉，
     位置**纹丝不动**（只有宽度变了）—— 因为主因根本不在那些属性上，而在这两个伪元素。 */
#content .help-detail-feedback .action::before,
#content .help-detail-feedback .action::after {
	display: none;
}
/* 上游 .prev/.next 的 width:calc(50% - 20px) 也是配 float 的（两个 50% 并排）。
   在 grid item 上，百分比是相对**自己那一格**算的 → 354×0.5-20 = 157px，
   卡片只剩半格宽，标题被 ellipsis 截成「上一篇：window…」。格子宽度交给 grid 管。 */
#content .help-detail-feedback .action > p {
	width: auto;
}
#content .help-detail-feedback p {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-ctl, 8px);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-4, #8D9AAB);
	background: var(--surface, #FFFFFF);
	transition: border-color .12s ease, background-color .12s ease;
	min-width: 0;
}
#content .help-detail-feedback p:hover { border-color: var(--brand-100, #FFE3D0); }
#content .help-detail-feedback p.next { text-align: right; }
#content .help-detail-feedback a {
	color: var(--ink-2, #333F4E);
	text-decoration: none;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#content .help-detail-feedback a:hover { color: var(--brand-600, #D9520A); }


/* ══ 5 · 左侧分类栏 ════════════════════════════════════════════════════════ */
#content .side-menu-list a.bv-on,
#content .side-nav .nav-item a.bv-on {
	color: var(--brand-700, #B84508);
	font-weight: 500;
}
#content .side-menu-list a:hover,
#content .side-nav .nav-item a:hover { color: var(--brand-600, #D9520A); }


/* ══ 6 · 窄屏 ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	#content .help-content .topictitle1 { font-size: 21px; line-height: 1.4; }
	#content .help-content .section,
	#content .help-content .section p,
	#content .help-content .section li { font-size: 15px; line-height: 1.8; }
	#content .help-content .section h2 { font-size: 18px; }
	#content .help-content .section h3 { font-size: 15.5px; }
	#content .help-content .section blockquote { padding: 12px 14px; font-size: 14.5px; }
	/* 长域名 / 长命令在窄屏必须能断，否则整行被顶出去 */
	#content .help-content .section code,
	#content .help-content .section td { overflow-wrap: anywhere; }
	#content .help-content .section > main > section + section {
		margin-top: 28px;
		padding-top: 22px;
	}
	#content .help-detail-feedback .action { grid-template-columns: minmax(0, 1fr); }
	#content .help-detail-feedback p.next { text-align: left; }
}
@media (max-width: 575.98px) {
	/* 窄屏两段时间必然换行，分隔条就会孤零零挂在第一行末尾。
	   改成上下两行，分隔条收掉。 */
	#content .help-content .updateTime {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	#content .help-content .updateTime .bv-art-sep { display: none; }
}