/**
 * MythosX 服务类教程页共用版式：新卡密验证与启用（account-guide）、网络连接排查（network-guide）。
 *
 * 业务定位：这两页是客户自助排障的说明书，Owner 11-02 定「意思不变，布局、显示、截图展示、亮度可以全面优化」。
 * 骨架全部来自 mx-doc.css（目录 + 正文栏、章节、截图框、提示块、上下篇），这里只补两页特有的块：
 *   - 首屏下方的「三段路线」：原页的摘要卡，改成指向对应章节的入口，读者先选路再读正文；
 *   - 正文里的「要点块」（原 stage-card）、问答列表（原 faq-list）、并列卡片（原 mode-card）；
 *   - 截图说明里的「状态点」：只用于原文就在讲某个状态（在线 / 时间错误 / 离线）的地方。
 *
 * 对齐约定：路线区与下面的「目录 + 正文」共用同一组列宽（左 220px、列间距与 .doc-in 一致），
 * 所以路线区的第一列文字和正文左边缘在同一条竖线上。改 .doc-in 的列宽时这里要同步改。
 * 颜色只用 mx.css 的令牌；强调色只出现在悬停和键盘焦点上，状态色只出现在状态点上。
 */

/* 首屏 ------------------------------------------------------------------- */
/* 教程首屏比介绍页收一点：下面紧跟路线区，不需要再留一整段空白 */
.svc-head { padding-bottom: clamp(40px, 5vw, 72px); }
.svc-head .lead { max-width: 42em; }
.svc-head .actions { margin-top: 32px; }
.btn-arrow { transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* 三段路线 --------------------------------------------------------------- */
/* 四列共用一条顶线：标签列用浅线，三条路线用稍亮的线，悬停时那一条换成强调色 */
.svc-routes-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); }
.svc-routes-title,
.svc-route-index { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.svc-routes-title { margin: 0; padding-top: 21px; border-top: 1px solid var(--line); }
.svc-route-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.svc-route { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid var(--line-2); transition: border-color .25s var(--ease); }
.svc-route:hover, .svc-route:focus-visible { border-top-color: var(--accent); }
.svc-route h3 { margin: 12px 0 10px; font: 500 22px/1.35 var(--display); color: var(--text); }
.svc-route p { font-size: 14.5px; line-height: 1.75; color: var(--text-2); }

/* 状态点：只给原文本身就是状态名的标签用（网络页的「显示 离线」、三种状态截图） */
[data-tone] .svc-route-index::before,
[data-tone] .fx-fig-no::before { content: ""; display: inline-block; box-sizing: border-box; width: 6px; height: 6px; margin: 0 8px 1px 0; border-block: 2px solid transparent; vertical-align: middle; background: var(--warn); background-clip: content-box; }
/* ↑ 状态色标去油：圆点改成短细线（同 mx.css 页脚 .dot），盒子仍 6×6、外边距不变，上下 2px 透明边框，底色只画中间 2px */
[data-tone="ok"] .svc-route-index::before,
[data-tone="ok"] .fx-fig-no::before { background: var(--ok); }
[data-tone="down"] .svc-route-index::before,
[data-tone="down"] .fx-fig-no::before { background: var(--down); }

/* 正文开头的提示：上沿对齐左边目录的标题（mx-doc 会把正文第一个子元素的上外边距清零，这里要更高的优先级） */
.doc-body > .svc-lead-note:first-child { margin: clamp(28px, 3vw, 44px) 0 0; }

/* 截图和图解的说明：图号用等宽小字，和说明文字隔开 */
.shot figcaption, .flow figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fx-fig-no { font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
.fx-fig-cap { color: var(--text-3); }
/* 三张状态截图一行：说明分两行，状态名在上 */
.shot-row.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shot-row.is-3 figcaption { display: grid; gap: 4px; }
.shot-row.is-3 .fx-fig-no { color: var(--text); }

/* 要点块（原 stage-card）：小标签 + 宋体小标题 + 正文，不加框，靠层级和留白分组 */
.svc-stage { margin-top: 44px; }
.svc-stage + .svc-stage { margin-top: 36px; }
/* 小标签用 p 写，选择器要压过 mx-doc 的「.doc-body p」（外边距 14px、正文字号），否则标签会下沉、变大 */
.doc-body p.svc-stage-label,
.doc-body p.svc-card-tag { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.doc-sec .svc-stage h3 { margin-top: 10px; }
.doc-body .svc-stage p { margin: 12px 0 0; }
/* 竖长截图（手机或窗口大小）：文字在左、截图在右；截图列定宽，宽屏不会被拉成一整屏高 */
.svc-stage.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(28px, 3.6vw, 48px); align-items: start; }
.svc-stage.is-split .shot { margin: 0; }
.svc-stage.is-split .shot-frame { padding: 8px; border-radius: 12px; }
/* 要点块后面紧跟的截图离它近一点，读起来是同一组 */
.svc-stage + .shot { margin-top: 24px; }

/* 问答列表（原 faq-list）：静态的问答两栏，原页就没有展开收起，这里也不加 */
.svc-faq { margin: 36px 0; border-top: 1px solid var(--line); }
.svc-faq-item { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
/* 问和答同字号同行高，两栏首行基线对齐 */
.doc-sec .svc-faq-item h3 { margin: 0; font: 500 15px/1.75 var(--sans); color: var(--text); }
.doc-body .svc-faq-item p { margin: 0; font-size: 15px; line-height: 1.75; }
/* 列表收尾一节时不再画底线：下面紧跟的就是章节分隔线，两条线挨着会显得乱 */
.svc-faq:last-child, .svc-rows:last-child { margin-bottom: 0; }
.svc-faq:last-child > :last-child, .svc-rows:last-child > :last-child { border-bottom: 0; padding-bottom: 0; }

/* 带编号的竖排条目（网络页「排查顺序」五条）：标签一列、内容一列 */
.svc-rows { margin: 36px 0; border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.svc-row .svc-card-tag { padding-top: 6px; }
.doc-sec .svc-row h3 { margin: 0; font: 500 19px/1.45 var(--display); }
.doc-body .svc-row p { margin: 8px 0 0; }

/* 并列卡片（原 mode-card）：两列等高，同一行卡片底边对齐。去油：发丝细线加中性平底，不要渐变底和顶部内高光（同 mx.css .card） */
.svc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 36px 0; }
.svc-card { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 26px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.doc-sec .svc-card h3 { margin: 10px 0 0; font: 500 20px/1.4 var(--display); }
.doc-body .svc-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.75; }
.doc-body .svc-card ul { margin: 14px 0 0; }
.doc-body .svc-card li { font-size: 15px; }
/* 卡片里的小截图：框收窄，避免框比图还抢眼 */
.svc-card .shot { margin: 16px 0 6px; }
.svc-card .shot-frame { padding: 6px; border-radius: 10px; }
.svc-card .shot-frame img { border-radius: 5px; }

/* 上下篇只有一侧时占满整行，不留空槽 */
.doc-pager.is-single { grid-template-columns: minmax(0, 1fr); }
/* 上下篇在正文栏里，会被 mx-doc 的正文链接下划线规则命中；它本身是整块可点的卡片，不要下划线 */
/* mx-doc 那条规则带三个 :not()，优先级是 (0,4,1)，这里要同样带上才压得过 */
.doc-body .doc-pager a:not(.btn):not(.link):not(.shot-frame) { text-decoration: none; }
/* 同一类问题：mx-doc 的「.doc-body p」(0,1,1) 压过了章节编号和提示块标题的单类样式，
   编号变成正文灰、多出 14px 上边距。按 mx-doc 本意补回；底座修好后这两条可以删 */
.doc-body p.sec-no { margin: 0; color: var(--text-3); }
.doc-body .note p.note-title { margin: 0 0 6px; }
.doc-body .note:not(.is-key):not(.is-warn) p.note-title { color: var(--text-3); }
.doc-body .doc-pager a:hover b { color: var(--accent); }
.doc-pager b { transition: color .2s var(--ease); }

@media (max-width: 960px) {
  .svc-routes-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-routes-title { border-top: 0; padding-top: 0; margin-bottom: 16px; }
  .svc-route-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc-lead-note { margin-top: 40px; }
  .svc-stage.is-split { grid-template-columns: minmax(0, 1fr); }
  .svc-stage.is-split .shot { max-width: 420px; }
  .shot-row.is-3 { grid-template-columns: minmax(0, 1fr); }
  .svc-faq-item, .svc-row { grid-template-columns: minmax(0, 1fr); }
  .svc-row .svc-card-tag { padding-top: 0; }
  .svc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* 11-11 第十三轮孤字：图注名在 360 宽英文下末行只剩两个短词；图注只有一两行，按行平衡 */
.fx-fig-cap { text-wrap: balance; }