/* ==========================================================================
   setup.html · 教程页专属样式(tutorial.css)
   依赖 base.css / components.css 的设计令牌,不新造颜色与字体
   ========================================================================== */

/* 页头信息胶囊行 */
.tut-chips{margin-top:26px}

/* 流程总览:步骤地图(五格,逐级退化) */
.step-map{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin-bottom:72px;
}
.step-map>*{min-width:0}
.step-map a{
  display:flex;flex-direction:column;gap:8px;height:100%;
  padding:18px;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  transition:border-color .2s ease;
}
.step-map a:hover{border-color:var(--border-strong)}
.step-map-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--text-dim);
}
.step-map-name{
  font-size:14px;font-weight:600;color:var(--text);line-height:1.5;
  transition:color .2s ease;
}
.step-map a:hover .step-map-name{color:var(--accent)}
.step-map-desc{font-size:12px;line-height:1.7;color:var(--text-muted)}
@media (max-width:1100px){.step-map{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.step-map{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.step-map{grid-template-columns:1fr}}

/* 正文步骤区块:发丝横线分区,检修手册节奏 */
.tut-article{min-width:0}
.tut-intro{margin-bottom:64px}
.tut-step{min-width:0}
.tut-step+.tut-step{
  margin-top:72px;padding-top:56px;
  border-top:1px solid var(--border-soft);
}
/* 步骤编号标签(等宽字体,压过 .prose p 的默认下边距) */
.prose .step-tag{
  display:flex;align-items:center;gap:12px;
  margin:0 0 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--text-dim);
}
.prose .step-tag::before{
  content:"";width:22px;height:1px;background:var(--border-strong);flex:none;
}
/* 步骤标题:编号标签已承担上部节奏,去掉 h2 默认大上距 */
.prose .tut-step h2{margin-top:0}

/* 收尾操作行 */
.tut-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}