/**
* 固件使用教程（fw-guide.html）与如何获取 BDF（bdf-guide.html）共用的页面版式。
*
* 业务定位：Owner 11-02「教程意思不变，布局、显示效果、截图的展示方式、亮度都可以全面优化」。
* 骨架（目录 + 正文栏、步骤导轨、截图框、提示块、上下篇）全部来自 mx-doc.css，
* 这里只补两份教程特有的排布：首屏的概览卡、正文里「标签 + 小标题 + 列表」块、三格规格条、
* 板型与固件文件对照行、步骤和竖长截图并排、BDF 的三段说明卡、FAQ 列表。
*
* 旧组件到新组件的映射（文字节点一个不改，只换标签和类名）：
* chapter / chapter-head → .doc-sec（.sec-no + h2 + 导语段）
* stage-card / stage-number → .steps 导轨里的一步；单步带标签的块用 .fg-block
* fx-figure → .shot（截图框，限高、压暗、点击放大）
* alert warn / info → .note.is-warn / .note
* summary-card / summary-grid → 首屏 .fg-paths 的 .card
* spec → .fg-specs（三格顶线齐平）
* mode-card / mode-grid → .fg-cards 的 .card
* faq-item → .fg-q
*
* 截图亮度：产品界面是浅色（实测平均亮度 221～237/255），在黑底上刺眼；
* 压暗和悬停恢复全站统一，由 mx-doc.css 的 .shot-frame 定义，这里不再自定。
*/
/* 首屏：导语下面一行概览卡，三张等宽，同行底边由 grid 拉齐 */
.fg-start { margin-top: clamp(44px, 5vw, 72px); }
.fg-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.fg-paths .card-head { margin-bottom: 18px; }
.fg-paths h3 { margin-bottom: 10px; font-size: clamp(20px, 1.7vw, 24px); }
.fg-paths p:last-child { font-size: 15px; }
.page-head .actions { margin-top: 32px; }
/* 正文里的块：小标签 + 小标题 + 列表，框出来和正文段落区分开 */
.fg-block { margin: 28px 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fg-tag { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.doc-sec .fg-block h3 { margin-top: 8px; }
.fg-block > ul, .fg-block > ol { margin-bottom: 0; }
.fg-block .steps { margin: 22px 0 4px; gap: 18px; }
.fg-block p:not(.fg-tag) { color: var(--text-2); }
.fg-block > .fg-tag { margin: 0; }
.fg-block > :last-child { margin-bottom: 0; }
.fg-block .shot { margin: 22px 0 0; }
/* 三格规格条：顶线齐平，值是宋体，说明是小字 */
.fg-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: 36px 0 0; }
.fg-specs > div { padding-top: 18px; border-top: 1px solid var(--line-2); }
.fg-specs dt { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.fg-specs dd { margin: 10px 0 0; }
.fg-val { display: block; font: 500 clamp(20px, 1.7vw, 24px) / 1.35 var(--display); color: var(--text); }
.fg-note { display: block; margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--text-3); }
/* 步骤导轨里的小标题；步骤编号跨章节连续，由各章的 .fg-from-N 接着上一章往下数 */
.steps > li { color: var(--text-2); }
.fg-head .lead { max-width: 46em; }
.steps h3.step-title { margin: 0; font: 500 clamp(18px, 1.5vw, 20px) / 1.5 var(--display); }
.steps > li > h3.step-title + p { margin-top: 8px; }
.fg-from-4 { counter-reset: step 3; }
.fg-from-7 { counter-reset: step 6; }
.fg-from-8 { counter-reset: step 7; }
/* 板型与固件文件对照：一板一行，三行同一套列宽，路径用等宽字不折行 */
.fg-models { margin: 18px 0 0; border-top: 1px solid var(--line); }
.fg-model { display: grid; grid-template-columns: 96px 52px minmax(0, 1fr); align-items: baseline; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fg-chip { font: 500 12px/1.4 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.doc-body .fg-model .fg-size { margin: 0; font: 500 20px/1.3 var(--display); color: var(--text); }
.doc-body .fg-model p { margin: 0; }
.fg-model p:last-child { font-size: 14.5px; line-height: 1.75; }
.fg-model code { white-space: nowrap; }
/* 「固件文件：」和路径排在同一行：原文中间是 br，这里不折行，三行才一样高 */
.fg-model br { display: none; }
.fg-model code { margin-left: 6px; }
/* 步骤和竖长截图并排：左边照着做，右边看界面，两栏顶边对齐 */
.steps > li.fg-has-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 20px 28px; align-items: start; }
.fg-has-shot .shot { margin: 4px 0 0; }
.fg-has-shot .shot.is-tall .shot-frame { width: auto; }
.fg-has-shot .shot.is-tall .shot-frame img { width: 100%; max-height: none; }
.fg-fig { margin-right: 10px; font: 500 12px/1.6 var(--mono); color: var(--text-3); opacity: .8; }
/* BDF 三段说明卡与两张并排卡：同一行等高 */
.fg-cards { display: grid; gap: 16px; margin: 28px 0; }
.fg-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg-cards .card { padding: clamp(20px, 2.2vw, 26px); }
.fg-cards .card-head { margin-bottom: 14px; }
.doc-sec .fg-cards h3 { margin-top: 0; font-size: clamp(19px, 1.6vw, 22px); }
.fg-cards .card p, .fg-cards .card li { font-size: 15px; }
.fg-cards .card p:last-child { margin-bottom: 0; }
.fg-cards .card ul { margin-bottom: 0; }
/* 常见问题：一问一答，细线分隔；问题用宋体小标题，答案是正文 */
.fg-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.fg-q { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.doc-sec .fg-q h3 { margin-top: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; }
.fg-q p { margin: 8px 0 0; }
/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
/* 截图是竖长界面或宽窗口：窄屏下并排的两张仍保持两张一行 */
.doc-body .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.fg-paths, .fg-specs, .fg-cards-3, .fg-cards-2 { grid-template-columns: minmax(0, 1fr); }
.steps > li.fg-has-shot { grid-template-columns: minmax(0, 1fr); }
.fg-has-shot .shot.is-tall .shot-frame { width: fit-content; margin-inline: auto; }
.fg-has-shot .shot.is-tall .shot-frame img { width: auto; max-height: min(70vh, 520px); }
.fg-model { grid-template-columns: 84px minmax(0, 1fr); }
.fg-model p:last-child { grid-column: 1 / -1; }
/* 窄屏下路径比栏宽，允许在斜杠和下划线处折行，不横向溢出 */
.fg-model code { margin-left: 0; white-space: normal; overflow-wrap: anywhere; }
.page-head .actions .btn { flex: 1 1 100%; }
}
/* 11-11 第十三轮孤字：接法表的说明折行后末行只剩「X。」两个字（中文 768 / 1024）或一个词（英文 360）。只在末行过短时重排 */
.fg-note { text-wrap: pretty; }