/* ============================================================
   Clash客户端官网 · guide.html 页面专属样式
   步骤工序条 step-map / 页面大标题 / 步骤区微调
   仅引用 base.css 设计令牌,不新增颜色值。
   ============================================================ */

/* 页面大标题(教程页 H1,介于 sec-title 与 type-display 之间) */
.page-title{
  font-family:var(--ft-display);
  font-weight:800;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.28;
  letter-spacing:.01em;
  color:var(--ink);
}

/* 步骤工序条:四道工序横排,箭头衔接,窄屏转纵排 */
.step-map{
  display:flex;
  align-items:stretch;
  border:1px solid var(--cobalt);
  background:var(--card);
  margin-top:28px;
}
.step-map a{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:14px;
  padding-bottom:14px;
  padding-left:20px;
  padding-right:18px;
  border-right:1px solid var(--rule);
}
.step-map a:last-child{border-right:0}
.step-map a:hover{background:var(--cobalt-tint)}
.step-map a:hover .map-name{color:var(--cobalt-deep)}
.map-no{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--cobalt);
}
.map-name{
  font-family:var(--ft-display);
  font-weight:600;
  font-size:15px;
  color:var(--ink);
}
.map-hint{
  font-family:var(--ft-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.step-map a::after{
  content:"→";
  position:absolute;
  right:-9px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--cobalt);
  background:var(--card);
  padding-left:2px;
  padding-right:2px;
}
.step-map a:last-child::after{content:none}

@media (max-width:640px){
  .step-map{flex-direction:column}
  .step-map a{border-right:0;border-bottom:1px solid var(--rule)}
  .step-map a:last-child{border-bottom:0}
  .step-map a::after{
    content:"↓";
    right:auto;
    left:20px;
    top:auto;
    bottom:-10px;
    transform:none;
  }
  .step-map a:last-child::after{content:none}
}

/* 步骤区:kicker 与正文的间距微调 */
.step-sec .sec-head{margin-bottom:24px}
.step-sec .prose{max-width:760px}