/* ==========================================================================
   clash.fyi · 教程页专属样式
   步骤走线板:一根墨色竖向干线,四张检修工单挂在线上
   只引用 base.css 的设计令牌,零硬编码色值
   ========================================================================== */

/* 顶部步骤跳转条与导语的间距微调 */
.tut-toc{
  margin-top:6px;
  margin-bottom:24px;
}

/* 正文行内链接:朱红下划线,贴合招贴风 */
.ln{
  color:var(--flame);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
.ln:hover{
  background:var(--volt);
  text-decoration-color:var(--ink);
  color:var(--ink);
}

/* 准备区双卡 */
.prep-grid{margin-top:26px;}
.prep-grid .tile h3{margin-bottom:8px;}
.prep-grid .tile p{
  font-size:14.5px;
  line-height:1.85;
}

/* ================= 步骤走线板 ================= */

.step-board{
  position:relative;
  margin-top:38px;
  padding-left:42px;
}
.step-board::before{
  content:"";
  position:absolute;
  left:12px;
  top:12px;
  bottom:12px;
  width:6px;
  border-radius:3px;
  background:var(--ink);
}

.step{
  position:relative;
  margin-bottom:48px;
  min-width:0;
  scroll-margin-top:calc(var(--bar-h) + 24px);
}
.step:last-child{margin-bottom:0;}

/* 端子触点:柠檬黄圆钮压在干线上 */
.step-pin{
  position:absolute;
  left:-41px;
  top:4px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:4px solid var(--ink);
  background:var(--volt);
  flex-shrink:0;
}

/* 工单票签编号 */
.step-ticket{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  background:var(--card);
  border:var(--rule);
  border-radius:6px;
  padding:2px 12px;
  margin-bottom:12px;
}

.step-title{
  margin-bottom:14px;
  letter-spacing:-.3px;
}

/* 工单正文卡 */
.step-body{
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-lg);
  padding:24px 26px;
  min-width:0;
}
.step-body > p{
  font-size:15px;
  line-height:1.9;
  max-width:76ch;
  margin-bottom:14px;
}
.step-body > p:last-child{margin-bottom:0;}
.step-body h3{
  margin-top:20px;
  margin-bottom:8px;
}
.step-body h3:first-child{margin-top:0;}
.step-body strong{
  border-bottom:3px solid var(--volt);
  padding-bottom:1px;
}

/* ================= 卡点分流卡(可点击 tile) ================= */

.go-tile{
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .18s ease,background .18s ease;
}
.go-tile:hover{
  transform:translateY(-3px);
  background:var(--panel);
}
.go-tile h3{margin-bottom:0;}
.go-tile p{
  font-size:14px;
  line-height:1.8;
  color:var(--ink-soft);
}
.go-more{
  margin-top:auto;
  font-family:var(--ft-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--flame);
}

/* ================= 响应式 ================= */

@media (max-width:640px){
  .step-board{padding-left:32px;}
  .step-board::before{left:8px;}
  .step-pin{
    left:-31px;
    width:24px;
    height:24px;
  }
  .step-body{padding:18px 16px;}
  .step{margin-bottom:36px;}
}