/* ============================================================
   Clash官网 · 教程页专属样式(tutorial.css)
   依赖 base.css / components.css 的设计令牌,不新增颜色值
   ============================================================ */

/* ---------- 页首区 ---------- */
.tut-hero {
  padding: 64px 0 8px;
}

.tut-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--pine);
  margin-bottom: 14px;
}

.tut-lede {
  max-width: 780px;
  color: var(--ink-dim);
}

/* 页首元信息:等宽小签排列 */
.tut-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 4px 0 28px;
  padding: 0;
}
.tut-meta li {
  margin: 0;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: var(--paper-deep);
  border: var(--line-w) solid var(--rule);
  border-radius: var(--rad-s);
  white-space: nowrap;
}

/* ---------- 界面路径指引(点哪里的可视化) ---------- */
.ui-path {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 1em;
  padding: 8px 14px;
  max-width: 100%;
  background: var(--paper-deep);
  border: var(--line-w) solid var(--rule);
  border-left: 3px solid var(--pine);
  border-radius: var(--rad-s);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.ui-path b {
  font-weight: 600;
  color: var(--pine-deep);
  white-space: nowrap;
}
.ui-path .sep {
  color: var(--ink-dim);
  flex-shrink: 0;
}

/* ---------- 连接记录示例(步骤 04) ---------- */
.log-sample {
  margin: 0 0 1.2em;
  background: var(--paper-lift);
  border: var(--line-w) solid var(--rule);
  border-radius: var(--rad-s);
  overflow: hidden;
}
.log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: var(--line-w) solid var(--rule-faint);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  min-width: 0;
}
.log-row:last-child { border-bottom: none; }
.log-host {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-rule {
  margin-left: auto;
  color: var(--ink-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- 完成标志清单 ---------- */
.check-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.4em;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.5em;
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 4px;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--sig-ok);
}

/* ---------- 步骤区内小标题的编号感 ---------- */
#step-import h3,
#step-mode h3,
#step-connect h3,
#step-verify h3 {
  margin-top: 1.6em;
  padding-bottom: 6px;
  border-bottom: var(--line-w) dashed var(--rule-faint);
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .tut-hero { padding: 44px 0 4px; }
  .tut-meta li {
    white-space: normal;
    font-size: 0.68rem;
  }
  .ui-path { font-size: 0.72rem; padding: 7px 10px; }
  .log-row { font-size: 0.7rem; gap: 8px; padding: 8px 10px; }
  .log-rule { display: none; }
}