/* ==========================================================================
   Shadowrocket 官方下载站 · 教程页专属样式
   只服务于 tutorial.html:步骤与官方截图的左右排布、界面路径胶囊、
   教程页自己的间距节奏。颜色一律引用 base.css 的设计令牌。
   ========================================================================== */

/* 首屏底部的步骤跳转块 */
.tut-toc-block{margin-top:30px;}

/* 白底分区:前提说明与步骤之间的呼吸 */
.tut-callout{margin-bottom:26px;}

.tut-intro{
  margin:0 0 40px;
  max-width:820px;
  font-size:15.5px;
  line-height:1.9;
  color:var(--text-on-light-body);
}

/* 步骤列表:比通用 .steps 更宽的间距,一屏只出现一步 */
.tut-steps{gap:44px;}

.tut-step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:32px;
  align-items:start;
}
.tut-step > *{min-width:0;}

.tut-step-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.3;
  color:var(--text-on-light);
}

.tut-copy > * + *{margin-top:14px;}

.tut-copy p{
  margin:0;
  font-size:15px;
  line-height:1.9;
  color:var(--text-on-light-body);
}

/* 界面路径胶囊:等宽字体,写清这一步在哪个界面完成 */
.tut-where{
  display:inline-block;
  max-width:100%;
  margin:0;
  padding-block:7px;
  padding-inline:12px;
  border-radius:var(--radius-chip);
  background-color:var(--bg-light-panel);
  border:1px solid var(--border-light);
  color:var(--text-on-light-muted);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  overflow-wrap:anywhere;
}

.tut-list{
  margin:0;
  padding-left:1.3em;
  font-size:15px;
  line-height:1.9;
  color:var(--text-on-light-body);
}
.tut-list li{margin-bottom:.5em;}
.tut-list li:last-child{margin-bottom:0;}

/* 步骤内的官方截图:固定宽度上限,窄屏居中 */
.tut-step .official-shot{max-width:280px;}

/* 走完五步后的自检提示 */
.tut-check{margin-top:44px;}

/* 收尾分区 */
.tut-cards{margin-top:44px;}
.tut-cta{margin-top:44px;}

@media (max-width:900px){
  .tut-step{grid-template-columns:minmax(0,1fr);gap:22px;}
  .tut-step .official-shot{margin-inline:auto;}
}

@media (max-width:720px){
  .tut-steps{gap:36px;}
  .tut-intro{margin-bottom:32px;}
  .tut-cards{margin-top:32px;}
  .tut-cta{margin-top:32px;}
}