/**
 * MythosX 教程与文档页组件：目录、步骤、截图框、提示块、代码块、上下篇。
 *
 * 业务定位：教程页「意思不变」（Owner 11-02），只换版式和显示。读者是照着做的人，
 * 所以版式服务于「找得到当前在哪一步、看得清截图里的字」，不服务于装饰。
 * 依赖 mx.css 的令牌；交互（目录跟随、截图放大、复制）在 mx-doc.js。
 *
 * 截图的取舍：截图是产品真实界面，内容一个像素不改；只改「怎么摆」：
 *   - 深色衬底加细边框，截图不再直接贴在黑底上，亮色界面不刺眼；
 *   - 静止时整体压暗到 .7（Owner 11-02 拍板：原色整体压暗，内容不改），悬停、键盘聚焦或点开放大时恢复原亮度，读字时不打折；
 *     压暗值全站只在 .shot-frame 的 --shot-dim 定义一次，页面样式不许再自定；
 *   - 本来就是暗色的图（主板 BIOS 照片等）在 <figure class="shot"> 上加 is-dark，不压暗；
 *   - 宽高写死在 img 上，加载前占好位，不跳版。
 *
 * 不是软件截图的图解（排查顺序、账号流程）不再用图片，改用本文件里的 .flow 原生组件，见下方。
 */

/* 骨架：左侧目录 220px 吸顶，正文栏最宽 760px，适合长段落阅读 */
.doc-in { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: clamp(40px, 6vw, 104px); align-items: start; padding-bottom: clamp(80px, 8vw, 128px); }
/* 正文的通用排版一律包在 :where() 里，权重为零：组件自己的类（.sec-no、.note-title、.doc-pager 等）只用一个类就能覆盖它。
   原来写成 .doc-body p 是两级权重，盖掉了组件样式（11-02 服务教程实测：小节编号变成正文灰、还多出上边距） */
:where(.doc-body) > :first-child { margin-top: 0; }
:where(.doc-body) p { margin: 14px 0; color: var(--text-2); }
:where(.doc-body) :is(p, li) strong { font-weight: 500; color: var(--text); }
/* 正文裸链接和已有 inline-doc-link 共用可辨识样式；按钮、卡片、上下篇、截图框保持各自样式。 */
:where(.doc-body) :is(a:not([class]), a.inline-doc-link) { 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); }
:where(.doc-body) :is(a:not([class]), a.inline-doc-link):is(:hover, :focus-visible) { text-decoration-color: var(--accent); }
:where(.doc-body) :is(ul, ol):not([class]) { margin: 14px 0; display: grid; gap: 8px; }
:where(.doc-body) ul:not([class]) > li { position: relative; padding-left: 20px; color: var(--text-2); }
:where(.doc-body) ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .82em; width: 9px; height: 1px; background: var(--text-3); }
:where(.doc-body) ol:not([class]) { counter-reset: n; }
:where(.doc-body) ol:not([class]) > li { position: relative; padding-left: 30px; color: var(--text-2); counter-increment: n; }
:where(.doc-body) ol:not([class]) > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .15em; font: 500 12px/1.6 var(--mono); color: var(--text-3); }

/* 章节：每一节一条细线开头，标题是宋体；编号用等宽小字放在标题上方 */
.doc-sec { padding-top: clamp(48px, 5vw, 72px); scroll-margin-top: calc(var(--bar-h) + 24px); }
.doc-sec + .doc-sec { margin-top: clamp(16px, 2vw, 32px); border-top: 1px solid var(--line); }
.doc-sec h2 { margin-top: 10px; font-size: clamp(26px, 2.4vw, 34px); }
.doc-sec h3 { margin-top: 36px; font-size: clamp(19px, 1.6vw, 22px); }
.sec-no { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--text-3); }
/* 页头紧接教程骨架时，目录和第一章的上内边距收一档：页头自己已经留了下沿，再叠 72px 会空出 160px 以上（1440 宽实测） */
.page-head + .doc-in .toc, .page-head + .doc-in .doc-sec:first-child { padding-top: clamp(28px, 3vw, 44px); }

/* 目录：吸顶，当前小节由 mx-doc.js 标 is-current，左边一道细线指示位置 */
.toc { position: sticky; top: calc(var(--bar-h) + 40px); max-height: calc(100vh - var(--bar-h) - 80px); overflow-y: auto; padding-top: clamp(48px, 5vw, 72px); scrollbar-width: none; }
.toc-title { margin-bottom: 14px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { position: relative; display: block; padding: 6px 0 6px 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-3); transition: color .2s var(--ease); }
.toc a:hover { color: var(--text-2); }
.toc a.is-current { color: var(--text); }
.toc a.is-current::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 1px; background: var(--accent); }

/* 步骤：带编号的竖向导轨，编号圈只描边，当前读到的一步不做特殊处理（读者自己知道在哪） */
.steps { position: relative; display: grid; gap: 28px; margin: 28px 0; counter-reset: step; }
/* 步骤导轨去油（主线 11-11 定稿）：渐隐的渐变导轨改成一条连续的 1px 中性线（--line-2），从第一个编号贯穿到最后一个；
   编号是 1px 中性发丝圆框（--line-2，不用暖金、无发光阴影），圆内用页面底色 --bg 挡住导轨，看起来是线穿过一串圆。
   去掉圆框的那一版导轨被切成短段、结构感弱，已弃用。尺寸不变，不引起重排 */
.steps::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.steps > li { position: relative; padding-left: 52px; counter-increment: step; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); font: 500 11px/1 var(--mono); color: var(--text-2); }
.steps > li > :first-child { margin-top: 3px; }
.step-title { font-weight: 500; color: var(--text); }

/* 截图框：.shot-frame 用 <a href="原图"> 或 <div> 都可以，推荐 <a>：没有脚本时点开就是原图。
   放大交互由 mx-doc.js 统一绑定，两种写法行为一致 */
.shot { margin: 28px 0; }
/* 截图框去油：渐变底、下方投影、顶部内高光全部删掉，只留发丝细线加中性平底（与 mx.css 的 .card 同一种） */
.shot-frame { --shot-dim: .7; position: relative; display: block; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: zoom-in; transition: border-color .25s var(--ease); }
.shot-frame:hover { border-color: var(--line-2); }
.shot-frame img { width: 100%; height: auto; border-radius: 7px; filter: brightness(var(--shot-dim)); transition: filter .3s var(--ease); }
.shot-frame:hover img, .shot-frame:focus-visible img { filter: none; }
/* 暗色原图：不压暗。只给主板 BIOS 照片这类本来就暗的图用，亮底软件截图一律不许加 */
.shot.is-dark .shot-frame img { filter: none; }
.shot figcaption { margin-top: 10px; padding-inline: 4px; font-size: 13px; line-height: 1.6; color: var(--text-3); }
/* 竖长的手机或窗口截图不要撑满正文栏，限高居中 */
.shot.is-tall .shot-frame { width: fit-content; max-width: 100%; margin-inline: auto; }
.shot.is-tall .shot-frame img { width: auto; max-height: min(78vh, 760px); }
.shot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.shot-row .shot { margin: 0; }

/* 流程图解（原生组件）：替代旧的米色 SVG 海报。
   业务定位：「先后顺序 + 每步两句话 + 一块收尾提示」这类图解不是软件截图，不该当图片贴：
   做成页面文字后可翻译、可选中、任何分辨率都清楚，也不会在暗色站里冒出一块亮底。
   结构（两页共用，换内容不换写法）：
     <figure class="flow">
       <ol class="flow-steps"><li><b>步骤名</b><span class="flow-note"><span>说明一</span><span>说明二</span></span></li>…</ol>
       <div class="flow-aside"><p class="flow-aside-head">提示标题</p><ul class="flow-chips"><li>…</li></ul><p class="flow-aside-note">收尾一句</p></div>
       <figcaption>…</figcaption>
     </figure>
   编号由 CSS 计数器生成（01、02…），改步数不用改编号；左侧细导轨用强调色从亮渐隐，只作顺序提示，不标当前步。
   窄屏（≤640px）步骤名和说明上下叠放，编号圈占两行，说明不会被挤成一列竖排。 */
.flow { margin: 28px 0; }
.flow-steps { position: relative; display: grid; gap: 6px; counter-reset: flow; }
/* 流程导轨与编号去油（同 .steps 定稿）：暖金渐变导轨改成连续的 1px 中性线，暖金圆框改成 1px 中性发丝圆框，
   编号 --text-2 等宽字，圆内 --bg 挡住导轨。暖金只留给「选中、当前」的指示线和焦点环；尺寸不变 */
.flow-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--line-2); }
.flow-steps > li { position: relative; display: grid; grid-template-columns: 40px 10.5em minmax(0, 1fr); align-items: center; gap: 0 20px; min-height: 52px; padding-right: 16px; border-radius: 10px; counter-increment: flow; transition: background-color .2s var(--ease); }
.flow-steps > li:hover { background: rgba(var(--ink-rgb), .03); }
.flow-steps > li::before { content: counter(flow, decimal-leading-zero); position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); font: 500 12px/1 var(--mono); color: var(--text-2); }
.flow-steps b { font-weight: 500; font-size: 15.5px; line-height: 1.4; color: var(--text); }
.flow-note { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.flow-aside { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.flow-aside-head { margin: 0; font-weight: 500; font-size: 15px; color: var(--text); }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.flow-chips li { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.flow-aside-note { margin: 0; font-size: 13.5px; color: var(--text-3); }
.flow figcaption { margin-top: 12px; padding-inline: 4px; font-size: 13px; line-height: 1.6; color: var(--text-3); }
@media (max-width: 640px) {
  .flow-steps > li { grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 0 14px; padding: 6px 0; }
  .flow-steps > li::before { grid-row: 1 / span 2; }
  .flow-steps b, .flow-note { grid-column: 2; }
  .flow-steps b { padding-top: 9px; }
  .flow-aside { padding: 18px 18px; }
}

/* 放大层：只淡入、轻微放大，没有回弹；Esc、点击空白或再次点击图片关闭 */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(6, 6, 7, .94); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; cursor: zoom-out; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }
/* 放大图不加投影：底下是 .94 不透明度的近黑遮罩，图与遮罩靠亮度自然分开，投影只是油 */
.lightbox img { max-width: 100%; max-height: 92vh; width: auto; height: auto; border-radius: 8px; transform: scale(.985); transition: transform .3s var(--ease); }
.lightbox.is-open img { transform: none; }

/* 提示块：默认中性；is-key 是必须照做的关键点（强调色），is-warn 是会出错的风险（状态色只用在左边线和标签） */
.note { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--line); border-left: 2px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.note-title { margin-bottom: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.note p { margin: 6px 0; color: var(--text-2); }
.note.is-key { border-left-color: var(--accent); }
.note.is-key .note-title { color: var(--accent); }
.note.is-warn { border-left-color: var(--warn); }
.note.is-warn .note-title { color: var(--warn); }

/* 代码与按键 */
.code { position: relative; margin: 20px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: #0a0a0c; font: 400 13.5px/1.7 var(--mono); color: var(--text); white-space: pre; overflow-x: auto; }
.code-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(var(--ink-rgb), .05); font: 500 12px/1 var(--mono); color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease); }
.code-copy:hover { color: var(--text); background: rgba(var(--ink-rgb), .1); }
:where(.doc-body, .note, .card) code:not(.code code) { padding: 1px 6px; border-radius: 5px; background: rgba(var(--ink-rgb), .07); font: 400 .9em/1 var(--mono); color: var(--text); }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; font: 500 .85em/1.4 var(--mono); text-align: center; color: var(--text); }

/* 文档表格 */
.doc-table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 14.5px; }
.doc-table th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-2); font: 500 12px/1.4 var(--mono); text-align: left; color: var(--text-3); }
.doc-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.doc-table td:first-child { color: var(--text); }

/* 上下篇 */
.doc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 6vw, 88px); }
.doc-pager a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s var(--ease); }
.doc-pager a:hover { border-color: var(--line-2); }
.doc-pager span { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.doc-pager b { font: 500 17px/1.4 var(--display); color: var(--text); }
.doc-pager .is-next { text-align: right; }

@media (max-width: 960px) {
  .doc-in { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }   /* 窄屏不放目录：正文本身就是一条线，目录挤在上面只会推远内容 */
  .shot-row { grid-template-columns: minmax(0, 1fr); }
  .doc-pager { grid-template-columns: minmax(0, 1fr); }
}