/* ============================================================
   clash for ios · tutorial.css
   教程页专属:步骤信纸面板 / 步骤衔接提示 / 验证清单 / 收尾面板
   ============================================================ */

/* ---------- 页首 ---------- */
.tut-head{padding-bottom:32px;}
.tut-lede{
  font-size:16px;
  line-height:1.85;
  color:var(--ink-muted);
  max-width:780px;
  margin-bottom:20px;
}
.tut-lede a{white-space:nowrap;}
.tut-head .callout{max-width:820px;}
.tut-head .callout a{
  color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
}
.tut-head .callout a:hover{color:var(--accent-dark);}

/* ---------- 步骤区块节奏(只声明纵向) ---------- */
.tut-step{
  padding-top:22px;
  padding-bottom:22px;
}

/* ---------- 步骤信纸面板 ---------- */
.step-sheet{
  position:relative;
  max-width:880px;
  background:var(--bg-panel);
  background-image:var(--grain-card);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);
  padding:28px 34px 24px 48px;
}
/* 左缘打孔圆点列,呼应索引条票根 */
.step-sheet::before{
  content:"";
  position:absolute;
  left:18px;
  top:24px;
  bottom:24px;
  width:6px;
  background-image:radial-gradient(circle at 3px 6px,var(--accent) 2px,transparent 2.6px);
  background-size:6px 14px;
  background-repeat:repeat-y;
  opacity:.5;
}
.step-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.step-meta .kicker{margin-bottom:0;}
.step-goal{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
  letter-spacing:.04em;
}
.step-sheet h2{margin-bottom:14px;}
.step-sheet .prose{max-width:none;}
.step-sheet .prose p:last-child{margin-bottom:0;}

/* ---------- 步骤间衔接提示 ---------- */
.next-cue{
  max-width:880px;
  margin-top:14px;
  font-size:12px;
  color:var(--ink-muted);
  letter-spacing:.14em;
  text-align:center;
  user-select:none;
}

/* ---------- 验证清单 ---------- */
.verify-list{
  list-style:none;
  margin-top:4px;
  margin-bottom:18px;
}
.verify-list li{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--border);
  font-size:14.5px;
  line-height:1.75;
}
.verify-list li:last-child{border-bottom:none;}
.v-mark{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  color:var(--success);
  border:1px solid var(--success);
  border-radius:50%;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  background:var(--bg-panel);
}

/* ---------- 收尾面板 ---------- */
.tut-finish{
  max-width:880px;
  padding:28px 32px;
}
.tut-finish h2{margin-bottom:10px;}
.tut-finish-note{
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-muted);
  margin-bottom:18px;
  max-width:720px;
}
.tut-finish-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .step-sheet{padding:22px 20px 20px 36px;}
  .step-sheet::before{left:13px;top:20px;bottom:20px;}
  .tut-finish{padding:22px 20px;}
  .tut-head{padding-bottom:22px;}
}