/**
* VTD 三份分支文档（v1.html、v2.html、HV.html）共用的页面版式。
*
* 业务定位：Owner 11-02「教程意思不变，布局、显示效果、截图的展示方式、亮度都可以全面优化」。
* 三份文档的骨架完全一致（首屏 + 左侧目录 + 正文栏 + 上下篇），只是内容和停运状态不同，
* 所以共用这一份：目录、步骤导轨、截图框、提示块、上下篇来自 mx-doc.css，这里只补文档特有的排布。
*
* 旧组件到新组件的映射（DOM 里的中文文本节点一个不改，只换容器）：
* chapter / chapter-head → .doc-sec（章节编号用 .sec-no）
* summary-card（三张概览） → 首屏里的 .card，等宽三列
* ink-block + specs → 正文第一节：宋体标题 + .pb-specs 三栏
* stage-card / stage-media → .pb-stage 面板（标签 + 小标题 + 正文 + 截图排）
* fx-figure / fx-figure-group → .shot 截图框，同一组的按张数排成 1～4 列（.pb-shots）
* alert info / warn / label → .note（关键点 is-key、风险 is-warn）；「已停止运营」进首屏状态标签
* mode-card / mode-grid → .pb-mode 卡片，上下排，截图在卡片内
* faq-item / faq-action-link → .pb-faq 问答列表 + .pb-action 跳转卡
*
* 截图亮度：这些产品界面是浅色（实测平均亮度约 205～245/255），在黑底上刺眼；
* 压暗和悬停恢复全站统一，由 mx-doc.css 的 .shot-frame 定义，这里不再自定。
*/
/* 首屏 ------------------------------------------------------------------- */
.pb-head .lead { max-width: 40em; }
/* 停运状态：一枚状态标签 + 原文那句说明。状态色只在标签里，说明文字保持中性 */
.pb-status { display: grid; justify-items: start; gap: 12px; max-width: 40em; margin-top: 28px; }
.pb-status p { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.pb-status a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .45); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.pb-status a:hover { text-decoration-color: var(--accent); }
/* 概览三张卡：同行底边由 grid 拉齐；卡内编号、小标题、说明三层 */
.pb-start { margin-top: clamp(40px, 4.5vw, 64px); }
.pb-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.pb-sum .card-head { margin-bottom: 18px; }
.pb-sum h3 { margin-bottom: 10px; font-size: clamp(20px, 1.7vw, 24px); }
.pb-sum p:last-child { font-size: 15px; }
/* 正文基线 --------------------------------------------------------------- */
.pb-term { font-weight: 500; color: var(--text); }
.pb-tag { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
/* 第一节的三栏规格：标签、值、说明，三层靠 grid 行对齐，三栏同高 */
.pb-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; border-top: 1px solid var(--line); }
.pb-spec { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 22px 20px 4px 0; }
.pb-spec + .pb-spec { padding-left: 20px; border-left: 1px solid var(--line); }
.pb-spec-label { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.pb-spec-value { font: 500 clamp(22px, 2vw, 28px) / 1.3 var(--display); color: var(--text); }
.pb-spec-note { font-size: 14px; line-height: 1.7; color: var(--text-2); }
/* 步骤面板：标签 + 小标题 + 正文 + 截图，框出来和章节说明区分开 */
.pb-stage { margin: 28px 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.doc-sec .pb-stage h3 { margin-top: 8px; }
.pb-stage > :last-child { margin-bottom: 0; }
.pb-stage p { color: var(--text-2); }
.pb-stage ul:not([class]) { margin-bottom: 0; }
/* 排障指引：同一面板里的补充一句，细线隔开，不另起一块提示框 */
.pb-aside { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.pb-link { margin: 16px 0 0; }
/* 截图排：按同一组的张数排 1～4 列，宽高写在 img 上占位；竖长截图单张限宽，不撑满正文栏 */
.pb-shots { display: grid; gap: clamp(12px, 1.6vw, 16px); margin: 24px 0 0; }
.pb-shots .shot { margin: 0; min-width: 0; }
.pb-shots.n1 { grid-template-columns: minmax(0, 300px); }
.pb-shots.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-shots.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-shots.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-shots .shot-frame { padding: 8px; border-radius: 12px; }
.pb-shots .shot-frame img { border-radius: 6px; }
/* 图号在上、图名在下，窄列里图名折行也不会和图号挤在一行 */
.pb-shots figcaption { display: grid; gap: 2px; margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.pb-fig { font: 500 11px/1.5 var(--mono); letter-spacing: .04em; opacity: .8; }
/* 横幅截图（设备管理器）单张整栏宽 */
.pb-shots.is-wide { grid-template-columns: minmax(0, 1fr); }
/* 模式卡：上下排，每张卡里文字在上、截图在下 */
.pb-modes { display: grid; gap: 20px; margin: 28px 0; }
.pb-mode { padding: clamp(20px, 2.4vw, 28px); }
.pb-mode h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 14px; font-size: clamp(20px, 1.7vw, 24px); }
.pb-mode p { margin: 8px 0; }
.pb-mode ol:not([class]) { margin: 12px 0 0; }
.pb-mode .pb-shots { margin-top: 22px; }
/* BDF 验证等纯步骤：导轨编号即顺序，小标题用宋体 */
.steps > li > h3 { margin: 3px 0 0; font-size: 18px; line-height: 1.5; }
.steps > li > p { margin: 6px 0 0; }
/* 常见问题：一问一答，细线分隔；问题用宋体小标题，答案是正文 */
.pb-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.pb-q { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.doc-sec .pb-q h3 { margin-top: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; }
.pb-q p { margin: 8px 0 0; }
/* 排查网络的跳转卡：整张可点，悬停边框亮起，箭头右移 */
.doc-body a.pb-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; transition: border-color .25s var(--ease); }
.doc-body a.pb-action:hover { border-color: var(--line-2); }
.pb-action-copy { display: grid; gap: 2px; }
.pb-action-kicker { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.pb-action-title { font: 500 17px/1.4 var(--display); color: var(--text); }
.pb-action-sub { font-size: 13.5px; color: var(--text-2); }
.pb-action-mark { font-size: 18px; color: var(--text-3); transition: transform .25s var(--ease), color .25s var(--ease); }
.pb-action:hover .pb-action-mark { transform: translateX(3px); color: var(--accent); }
/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
/* 截图都是竖长界面：窄屏下四列并两列，其余张数保持，单张撑满整栏会比一屏还高 */
.pb-shots.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.pb-sum { grid-template-columns: minmax(0, 1fr); }
.pb-specs { grid-template-columns: minmax(0, 1fr); }
.pb-spec, .pb-spec + .pb-spec { padding: 18px 0; border-left: 0; }
.pb-spec + .pb-spec { border-top: 1px solid var(--line); }
.pb-spec { grid-template-rows: none; }
}
@media (max-width: 560px) {
.pb-shots.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-shots.n3 .shot:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
.pb-shots.n1 { grid-template-columns: minmax(0, 240px); justify-content: center; }
}
/* 11-11 第十三轮孤字：721–960 宽三张概览卡各约 170px，英文第一张卡的标题里有一个长词，20px 下只能折成三行、末行一个词。
只在英文下把这一段宽度的卡片标题收到 18px，折成两行；中文标题本来一两行放得下，不动 */
@media (min-width: 721px) and (max-width: 960px) {
html[lang="en-US"] .pb-sum h3 { font-size: 18px; }
}
/* 规格表的说明小字中文在 768–1920 多个宽度末行只剩两个字：一两行的短句，按行平衡 */
.pb-spec-note { text-wrap: balance; }
/* 左侧目录：HV 页第一项在 1024–1920 折成两行、末行两个字；目录项都是一两行的短标题，按行平衡 */
.toc a { text-wrap: balance; }