/* ============================================================
   clashzip.com — tutorial.css
   guide.html 页面专属样式:步骤流程条 / 下一步跳转条
   仅引用 base.css 中的设计令牌
   ============================================================ */

/* 页首步骤流程条:四个环节的横向概览 */
.tut-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
}

.tut-flow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gm-edge);
  border-radius: var(--gm-rad-1);
  background: var(--gm-surface);
  font-family: var(--gm-font-mono);
  font-size: 13px;
  color: var(--gm-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tut-flow a:hover {
  border-color: var(--gm-phos-a35);
  color: var(--gm-phos);
  background: var(--gm-phos-a05);
}

.tut-flow__no {
  color: var(--gm-phos);
  font-weight: 700;
}

.tut-flow__arr {
  font-family: var(--gm-font-mono);
  font-size: 12px;
  color: var(--gm-fg-dim);
  flex-shrink: 0;
}

/* 每步末尾的「下一步」跳转条 */
.tut-next {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.tut-next a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--gm-font-mono);
  font-size: 13px;
  color: var(--gm-fg-dim);
  text-decoration: none;
  border: 1px dashed var(--gm-edge);
  border-radius: var(--gm-rad-1);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tut-next a::before {
  content: "❯";
  color: var(--gm-phos);
}

.tut-next a:hover {
  color: var(--gm-phos);
  border-color: var(--gm-phos-a35);
  background: var(--gm-phos-a05);
}

@media (max-width: 480px) {
  .tut-flow a {
    font-size: 12px;
    padding: 7px 11px;
  }
}