/* =========================================================================
   ccrelay 配置教程页样式（纯静态，零第三方依赖）
   仅新增 guide 专属 class；颜色/圆角/阴影/字体/动效全部复用 landing.css 的
   :root token，不另造配色。landing.css 为共享文件，本文件不改它。
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* 顶栏：面包屑 + 阅读进度条                                               */
/* ---------------------------------------------------------------------- */

.guide-crumb {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.guide-crumb a { color: var(--text); text-decoration: none; }

.guide-crumb-sep {
  margin: 0 8px;
  font-weight: 400;
  color: var(--border);
}

/* 阅读进度条：固定贴在导航底沿（导航高 64px） */
.guide-progress {
  position: fixed;
  top: 63px;
  left: 0;
  z-index: 101;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease-out);
}

/* 步骤指示条：固定贴在导航下方（导航高 64px），形成 guide 专属二级栏。
   桌面显示面包屑，隐藏「第 N 步」摘要；窄屏反之。 */
.guide-stepper-mini {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  /* = --bg #FAF8F3 带透明度（毛玻璃底要的是纸底色本身的半透明版，用不了 var()）。
     全站共两处这样的半透明纸底副本：这里和 landing.css 的 .site-nav；
     改 --bg 时两处都要跟着改。 */
  background: rgba(250, 248, 243, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.guide-stepper-eyebrow { margin: 0; }

/* 桌面：面包屑可见，步骤摘要隐藏 */
.guide-stepper-mini .guide-stepper-eyebrow,
.guide-stepper-mini .guide-stepper-name { display: none; }

.guide-stepper-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ---------------------------------------------------------------------- */
/* Hero：概览清单 + 图例                                                   */
/* ---------------------------------------------------------------------- */

.guide-hero { padding-bottom: 88px; }

.guide-hero .hero-sub { max-width: 620px; }

.guide-hero .kicker { margin-top: 40px; }

.guide-hero .kicker + .guide-overview { margin-top: 12px; }

#journey-order-status {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: left;
}

#journey-order-status .callout-body p + p { margin-top: 8px; }

.guide-overview {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  max-width: 640px;
  display: grid;
  gap: 12px;
  text-align: left;
}

.guide-overview-row a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover 不位移，仅描边轻微染 accent */
.guide-overview-row a:hover { border-color: var(--accent); }

.guide-overview-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guide-overview-text strong { font-size: 15px; font-weight: 600; }

.guide-overview-text span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.guide-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  /* 12px「每步耗时」：--accent 对 --accent-soft 只有 3.53:1 */
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.guide-time::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.axis-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.axis-legend-item { display: inline-flex; align-items: center; gap: 8px; }

.axis-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
}

.axis-dot.is-active { border-color: var(--accent); background: var(--accent); }

.axis-dot.is-done { border-color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* 主轴：左侧脊线大序号 + 右侧步骤主体                                     */
/* ---------------------------------------------------------------------- */

.axis-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.axis-rail {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

/* 首尾相接的竖脊线，连续贯穿整段；顶部渐入、底部渐出，告别生硬实线 */
.axis-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -112px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
}

/* 已完成步骤：脊线染成 accent（同样渐入渐出） */
.axis-row.is-done .axis-rail::before {
  background: linear-gradient(180deg, transparent, var(--accent) 8%, var(--accent) 92%, transparent);
}

.axis-node {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 进行中：实心 accent + 极淡光环呼吸感。
   下面几处 rgba(193, 95, 60) 是 --accent 的数值展开，一律保留字面量不换 color-mix：
   box-shadow 表达式无效时整条声明被丢弃、光环直接消失，没有回落路径。 */
.axis-row.is-active .axis-node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(193, 95, 60, 0.12),
    inset 0 1px 0 rgba(255, 249, 242, 0.25);
}

.axis-row.is-done .axis-node {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(193, 95, 60, 0.08);
}

/* 已完成对勾：略加粗、圆角端点，更精致 */
.axis-row.is-done .axis-node::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid var(--accent);
  border-width: 0 2.4px 2.4px 0;
  border-radius: 0 0 1px 0;
  transform: rotate(45deg);
}

.axis-seq {
  margin-top: 16px;
  font-family: var(--font-serif);
  /* 记忆点 2 · 老式衬线大序号（刊物主轴序号） */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-style: italic;
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--border);
  transition: color var(--dur-fast) var(--ease-out);
}

.axis-row.is-active .axis-seq,
.axis-row.is-done .axis-seq { color: var(--accent); }

.axis-lead {
  margin: 20px 0 32px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 68ch;
}

.guide-rules-grid { margin-top: 0; }

.guide-inline-faq { margin-top: 24px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------------- */
/* 提示条 callout（danger / info / success）                              */
/* ---------------------------------------------------------------------- */

/* 干净克制：统一 1px 细边 + 左侧一条 3px accent 竖条二选一组合（不再叠
   重边框 + 重阴影 + 重底色）；无阴影、底色保持 surface；图标缩小、与正文
   基线对齐而非顶部大 chip。danger/info/success 三态仅换语义色（accent /
   --ok-text），不引红黄。正向绿**不要**写 --terminal-string：那是深色终端块内的
   语法高亮色，在这里的 --surface 白卡底上只有 2.25:1。 */
.guide-callout {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* 正向绿走 --ok-text：白卡底上 --terminal-string 只有 2.25:1，
   连非文本图形要求的 3:1 都不到（这条竖线与下面的图标是同一语义，一起压暗）。 */
.guide-callout.is-success { border-left-color: var(--ok-text); }

/* 图标：engraved 线性小图标，颜色随语义、与正文首行对齐，不做大色块 chip。
   danger/info 用 sprite 自带赭橙点睛（语义即风险/提示）；success 用 .icon--mono
   把点睛并回 currentColor，落到正向绿，避免出现赭橙。 */
.callout-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--accent);
}

.guide-callout.is-success .callout-icon { color: var(--ok-text); }

.callout-icon svg { display: block; }

.callout-icon .icon { width: 22px; height: 22px; vertical-align: 0; color: inherit; }

.callout-body { min-width: 0; }

.callout-body strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; }

.callout-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.callout-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text);
}

/* ---------------------------------------------------------------------- */
/* 平台切换 tabs（无 JS 时两块都显示）                                     */
/* ---------------------------------------------------------------------- */

.guide-tabs { display: inline-flex; gap: 6px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--bg-subtle); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* 平台 tab：克制分段控件（segmented），自带样式不再依赖 .btn；
   hover 仅轻染描边，激活态 surface 实体 + accent 字 + 极柔阴影。 */
.guide-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.guide-tab .icon { width: 16px; height: 16px; vertical-align: 0; }

.guide-tab:hover { color: var(--text); }

.guide-tab.is-active {
  border-color: var(--border);
  /* 14px 分段控件文字，白底 --accent 只有 4.23:1 */
  color: var(--accent-text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.guide-tab-panel { margin-bottom: 16px; }

.guide-tab-panel:last-child { margin-bottom: 0; }

/* JS 启用后才隐藏非当前面板；无 JS 时全部可见 */
html.js .guide-tabbed .guide-tab-panel:not(.is-active) { display: none; }

/* 终端标题栏文件名：暗色卡内的等宽小注，居红绿点与「复制」之间 */
.terminal-name {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--terminal-muted);
}

.guide-clean-grid { align-items: start; }

.guide-clean-grid .steps { margin-top: 0; }

/* 清理步骤：序号圆点换 engraved chip，与右侧终端的行号节奏呼应 */
.guide-clean-steps { gap: 20px; }

.guide-clean-mark { flex: 0 0 auto; margin-top: 1px; }

.step-text code,
.how-points code,
.faq-item p code,
.axis-lead code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* 子步骤 3a/3b/3c                                                        */
/* ---------------------------------------------------------------------- */

/* 子步骤之间用一条极淡 hairline 分隔，强化「同一大步骤下的小节」节奏 */
.substep { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); }

.substep:first-of-type { margin-top: 40px; padding-top: 0; border-top: none; }

.substep-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

/* engraved chip 领起子步骤，紧跟衬线小序号「3a/3b/3c」 */
.substep-mark { flex: 0 0 auto; }

.substep-seq {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  /* 22px/600 够不上 WCAG 的大字豁免（要 24px，或 18.66px 且 bold=700），按小字算：
     --accent 白底 4.23:1 不达标。主轴的 .axis-seq 是 clamp(48px…) 真·大字，仍用 --accent。 */
  color: var(--accent-text);
}

.substep-head h3 {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  line-height: 1.2;
}

.guide-anchor {
  margin-left: 8px;
  /* 锚点「#」是链接文本，跟随 h3 的 clamp(20px…) 最小档仍算小字 */
  color: var(--accent-text);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.substep-head h3:hover .guide-anchor,
.guide-anchor:focus-visible { opacity: 1; }

.guide-global-grid,
.guide-tun-grid { align-items: center; }

/* 链式：文左、竖向拓扑右，顶对齐让 chip 序号与首条要点齐平 */
.guide-chain-grid { align-items: start; }

/* 全局/TUN 子步骤为「图左文右」，与链式「文左图右」交替 */
.guide-global-grid { grid-template-columns: 7fr 5fr; }

.guide-substep-faq { margin-top: 24px; }

.guide-yaml { margin-top: 28px; }

/* 链式拓扑改竖向堆叠：四个等高节点 + 中间竖向连接线，
   比横排四格更可读，连接箭头向下指、最终出口节点点睛。 */
.flow-stack { flex-direction: column; align-items: stretch; }

.guide-chain-flow .flow-node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 18px;
  text-align: left;
}

.guide-chain-flow .flow-node strong { grid-column: 2; grid-row: 1; }

.guide-chain-flow .flow-node > span:not(.flow-ico):not(.flow-tag) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

/* 出口节点的注脚（最终出口·住宅 IP）独占整行底部 */
.guide-chain-flow .flow-tag { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }

.guide-chain-flow .flow-ico {
  grid-column: 1;
  grid-row: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text);
}

.flow-ico .icon { width: 22px; height: 22px; vertical-align: 0; }

.guide-chain-flow .flow-hub .flow-ico { background: var(--surface); border-color: var(--accent); }

/* 竖向连接线：短竖线 + 朝下三角，覆写共享 .flow-link 的横向形态 */
.flow-stack .flow-link {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 22px;
  min-width: 0;
  border-top: none;
  border-left: 1px solid var(--border);
}

.flow-stack .flow-link::after {
  right: auto;
  top: auto;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-width: 6px 4px 0 4px;
  border-color: var(--border) transparent transparent transparent;
}

/* flow 节点内的小注：单行 caption，克制不挤行——前置小圆点 + 赭橙文字，
   不再做成会折成多行的胶囊。父节点 min-width:0，过窄时省略而非撑破。
   12px：白底 4.23:1 / 中枢节点的 --accent-soft 底 3.53:1，都不达标，走 --accent-text。 */
.flow-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 6px;
  color: var(--accent-text);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-tag::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------------- */
/* 全局 vs 规则分流对比                                                    */
/* ---------------------------------------------------------------------- */

.guide-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.split-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.split-card.is-on { border-color: var(--accent); }

.split-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.split-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.split-tag.is-on {
  background: var(--accent-soft);
  /* 12px on --accent-soft：3.53 → 5.13:1 */
  color: var(--accent-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.split-lanes { display: flex; flex-direction: column; gap: 6px; }

.split-lane {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
}

.split-lane.is-direct { background: var(--sketch-soft); }

.split-arrow { color: var(--sketch-strong); }

.split-card.is-on .split-arrow { color: var(--accent); }

.split-arrow svg { width: 80px; height: 40px; display: block; }

.split-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------- */
/* TUN 数据流对比                                                          */
/* ---------------------------------------------------------------------- */

.tun-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

.tun-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

/* 开启 TUN 列点睛：accent 细边，标示这是「正确收束」的一侧 */
.tun-col.is-on { border-color: var(--accent); }

.tun-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* 13px 列头文字（白卡底 4.23:1）；列的 accent 细边是非文本，保持 --accent */
.tun-col.is-on .tun-col-head { color: var(--accent-text); }

.tun-lane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: 13px;
}

/* 泄漏（直连裸 IP）泳道：左侧赭橙细竖线提示风险，不引红黄 */
.tun-lane.is-leak {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

.tun-lane-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

.tun-lane-name .icon { width: 16px; height: 16px; vertical-align: 0; color: var(--text-secondary); }

.tun-lane-path {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
}

.tun-lane-path::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* 12px 泳道去向：is-proxy 在白卡底（--terminal-string 只有 2.25:1），
   is-direct 落在 .tun-lane.is-leak 的 --accent-soft 底（--accent 只有 3.53:1）。 */
.tun-lane-path.is-proxy { color: var(--ok-text); }

.tun-lane-path.is-direct { color: var(--accent-text); }

.tun-merge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-subtle);
}

.tun-merge .tun-lane-name { font-size: 13px; }

/* 三泳道汇聚到 TUN 出口的竖向连接：短竖线 + 朝下三角 */
.tun-merge-link {
  align-self: center;
  width: 1px;
  height: 18px;
  border-left: 1px solid var(--accent);
  position: relative;
}

.tun-merge-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: var(--accent) transparent transparent transparent;
}

.tun-exit {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  /* 13px on --accent-soft：3.53 → 5.13:1 */
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  /* rgba(193, 95, 60) = --accent 数值展开。box-shadow 无回落路径（表达式无效即整条
     丢弃、光环消失），与 background 同理保留字面量，不换 color-mix。 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(193, 95, 60, 0.06);
}

.tun-exit .icon { width: 18px; height: 18px; vertical-align: 0; }

/* ---------------------------------------------------------------------- */
/* 截图占位槽                                                              */
/* ---------------------------------------------------------------------- */

/* 同一子步骤的两张占位并排成对（窄屏自动单列），节省纵向、强化「左右两步」 */
.shot-row {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.shot-row .shot-slot { margin: 0; }

.shot-slot {
  position: relative;
  margin: 24px 0 0;
  aspect-ratio: 16 / 10;
  /* 精致暖虚线框（外层 hairline 实边 + 内层暖虚线），像刻意设计的占位 */
  border: 1px solid var(--border);
  background-color: var(--bg-subtle);
  /* 同 landing.css 的 .section-alt：background 上的 --accent 数值展开保持字面量，
     color-mix 不被支持时整条 background-image 会失效。 */
  background-image: radial-gradient(120% 100% at 50% 0%, rgba(193, 95, 60, 0.04), rgba(193, 95, 60, 0) 60%);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.shot-slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px dashed var(--sketch-strong);
  border-radius: var(--radius-control);
  pointer-events: none;
}

/* engraved 图标做占位中央的「待截图」标记，沉浸在 chip 里 */
.shot-slot-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.shot-slot-icon .icon { width: 26px; height: 26px; vertical-align: 0; }

.shot-slot figcaption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 420px;
}

/* 步骤号改为衬线斜体小角标（与主轴大序号同族），不再用实心圆 step-num */
.shot-slot-num {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* 15px 角标（白底 4.23:1）；前置短横一同压暗，保持单色 */
  color: var(--accent-text);
}

.shot-slot-num::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--accent-text);
}

.shot-slot-cap {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 真实截图成图：与占位共用 num/cap 角标样式，图面细边 + 轻投影收进版面 */
.shot-fig { margin: 24px 0 0; }

.shot-row .shot-fig { margin: 0; }

/* 圆角走 --radius-card：截图图面与同页卡片是同一层视觉（细边 + --shadow-sm），
   写死数值会在 token 调整时与相邻卡片分叉（07-30 token 对齐即因此从 16px 改过来）。
   .faq-shot img 是同一种「内容区截图」，共用同一个 token，见文件末 FAQ 段。 */
.shot-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.shot-fig figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin: 12px auto 0;
  max-width: 480px;
}

/* 独占一行的横图收窄居中；竖图（控制台抽屉）更窄，避免占满整屏高度 */
.shot-fig--solo {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.shot-fig--portrait {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------- */
/* 自检清单 + 终点                                                        */
/* ---------------------------------------------------------------------- */

.guide-verify-grid { align-items: start; grid-template-columns: 6fr 6fr; }

.guide-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.check-item label:hover {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.check-box {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.check-item label:hover .check-box { border-color: var(--accent); }

/* 勾选 = 自检通过，正向语义用正向绿（--ok-text），不用赭橙。
   勾是白色：填 --terminal-string 时白勾只有 2.25:1（非文本图形要 3:1），
   换 --ok-text 后 6.30:1；勾选态本身也就靠这个填色传达。 */
.check-input:checked + label .check-box {
  border-color: var(--ok-text);
  background: var(--ok-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 对勾：略加粗 + 圆角端点，做出墨笔笔触的精致感 */
.check-input:checked + label .check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.4px 2.4px 0;
  border-radius: 0 0 1px 0;
  transform: rotate(45deg);
}

.check-input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.check-input:checked + label {
  background: var(--bg-subtle);
  border-color: #BEDDCB;
}

.guide-verify-term { margin-top: 0; }

.axis-final {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

/* 终点完成 = 正向语义，圆点用正向绿；内嵌 engraved i-check（mono 承袭白勾）。
   白勾对 --terminal-string 只有 2.25:1（非文本图形要 3:1），底色换 --ok-text 后 6.30:1。 */
.axis-final-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ok-text);
  color: #fff;
  /* 外环是 --ok-text #2E6B4F 的半透明版（box-shadow 扩散环要的是同色淡化），
     必须跟着上面的 background 走，否则环与圆点分成两个绿。box-shadow 无回落路径，
     不换 color-mix（同 .tun-exit 那处的理由）。 */
  box-shadow: 0 0 0 5px rgba(46, 107, 79, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.axis-final-dot .icon { width: 22px; height: 22px; vertical-align: 0; }

.axis-final p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

/* 最后一段主轴脊线在终点处收住，不再向下延伸 */
#step-verify .axis-rail::before { bottom: auto; height: 32px; }

.axis-node.is-final { border-color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* 收尾 CTA                                                               */
/* ---------------------------------------------------------------------- */

.guide-faq { padding-bottom: 96px; }

/* FAQ 内嵌截图：图文排查项（如「换中间节点」）跟随折叠展开。左内边距与
   .faq-item p 的 4px 对齐，图宽收在正文 65ch 量级，避免折叠开合时版面抖动。 */
.faq-shot {
  margin: 0 0 20px;
  padding: 0 4px;
  max-width: 640px;
}

/* 与 .shot-fig img 是同一种语义（内容区截图：细边 + --shadow-sm + figcaption），
   不是缩略图，只是宽度收在正文量级；圆角同走 --radius-card，别再写死数值分叉。 */
.faq-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.faq-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 收尾 CTA（.guide-cta / .guide-cta-actions）是各页共用的页脚 CTA 块，
   样式已迁至始终加载的 landing.css 页脚区，使首页（不加载 guide.css）也有同样的
   间距与分隔线；此处不再重复定义。 */

/* ---------------------------------------------------------------------- */
/* 响应式：≤900 折轴 / ≤768 移动 / ≤600 单列                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .axis-row { grid-template-columns: 1fr; gap: 24px; }

  .axis-rail {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    align-self: auto;
    padding-top: 0;
  }

  .axis-rail::before { display: none; }

  .axis-seq { margin-top: 0; }

  .guide-global-grid { grid-template-columns: 1fr; gap: 48px; }

  .guide-split,
  .tun-diagram { grid-template-columns: 1fr; }

  .guide-verify-grid { grid-template-columns: 1fr; gap: 48px; }

  .guide-rules-grid { grid-template-columns: repeat(2, 1fr); }

  /* 折轴后子步骤序号角标与标题不必再大留白 */
  .substep { margin-top: 40px; padding-top: 40px; }
}

@media (max-width: 768px) {
  /* 窄屏：面包屑隐藏，改显「第 N 步 / 共 N 步」+ 当前步名 */
  .guide-stepper-mini .guide-crumb { display: none; }

  .guide-stepper-mini .guide-stepper-eyebrow,
  .guide-stepper-mini .guide-stepper-name { display: inline-flex; }

  .guide-tab { min-height: 44px; }

  .guide-hero { padding-bottom: 56px; }

  /* 成对占位在窄屏改单列堆叠 */
  .shot-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .guide-rules-grid { grid-template-columns: 1fr; }

  .guide-overview-row a { padding: 14px 16px; }

  .guide-time { display: none; }

  /* 链式节点窄屏让标题/标签换行不挤；图标 chip 收一档 */
  .guide-chain-flow .flow-node { gap: 12px; padding: 14px 14px; }

  .flow-ico { width: 34px; height: 34px; }

  /* 平台分段控件在最窄档占满宽，两 tab 平分，热区充足 */
  .guide-tabs { display: flex; width: 100%; }

  .guide-tab { flex: 1 1 0; justify-content: center; }
}

/* ---------------------------------------------------------------------- */
/* 动效降级                                                                */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .guide-progress { transition: none; }

  .guide-anchor { transition: none; }
}