/* ==========================================================================
   VPNFH — tutorial page (zh-CN/setup.html)
   page-scoped: hero head · step blocks · panel path chips · platform cards
   all values come from the :root tokens declared in base.css
   ========================================================================== */

/* ---------- page head ---------- */
.tut-hero{padding-top:var(--sp-7);padding-bottom:var(--sp-6)}
.tut-head{max-width:780px;margin:0 auto;text-align:center;min-width:0}
.tut-title{
  margin-top:14px;
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.1;
  letter-spacing:-.032em;
}
.tut-lead{
  max-width:660px;
  margin:16px auto 0;
  font-size:16px;
  line-height:1.78;
  color:var(--text-muted);
}
.tut-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}
.tut-callout{max-width:780px;margin:28px auto 0}

/* ---------- body column ---------- */
.tut-body{padding-bottom:var(--sp-9)}
.tut-facts{margin-bottom:var(--sp-5)}

/* ---------- step blocks ---------- */
.tut-step{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-7);
  border-top:1px solid var(--border);
  min-width:0;
}
.tut-step:first-of-type{border-top:0;padding-top:var(--sp-5)}
.tut-step-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width:0;
  margin-bottom:16px;
}
.tut-step-num{
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--accent-dark);
}
.tut-step-title{font-size:clamp(22px,2.4vw,28px);line-height:1.25}

.tut-p{font-size:15.5px;line-height:1.85;color:var(--text-muted)}
.tut-p + .tut-p{margin-top:12px}
.tut-p strong{font-weight:600;color:var(--text)}
.tut-p .link-underline{margin-inline:2px}

/* ---------- panel path chips ---------- */
.tut-path{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:18px;
}
.tut-crumb{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:28px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text-muted);
}
.tut-sep{flex:none;font-size:12px;color:var(--text-faint)}

/* ---------- step actions ---------- */
.tut-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:22px;
}
.tut-actions .btn{flex-shrink:0;white-space:nowrap}
.tut-hint{font-size:12.5px;line-height:1.6;color:var(--text-faint)}

/* ---------- check list ---------- */
.tut-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tut-list li{
  display:flex;
  gap:10px;
  min-width:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.tut-list li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  margin-top:9px;
  border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}

/* ---------- platform cards ---------- */
.tut-plat{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.tut-plat-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:20px 18px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
}
.tut-plat-head{display:flex;align-items:center;gap:10px;min-width:0}
.tut-plat-head .pf-ico{width:36px;height:36px;border-radius:11px;flex:none}
.tut-plat-head .pf-ico svg{width:19px;height:19px}
.tut-plat-name{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.tut-plat-tag{
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  white-space:nowrap;
  color:var(--text-faint);
}
.tut-plat-card p{font-size:13.5px;line-height:1.72;color:var(--text-muted)}
.tut-plat-entry{
  margin-top:auto;
  padding-top:9px;
  border-top:1px dashed var(--border);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}

/* ---------- linux strip ---------- */
.tut-plat-extra{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  margin-top:14px;
  padding:18px;
  border-radius:var(--r-card);
  border:1px dashed var(--border-strong);
  background:var(--bg-panel-3);
}
.tut-plat-extra .pf-ico{width:38px;height:38px;border-radius:11px;flex:none}
.tut-plat-extra > div{min-width:0}
.tut-plat-extra p{font-size:13.5px;line-height:1.72;color:var(--text-muted)}
.tut-plat-extra .tut-plat-name{margin-bottom:4px}

.tut-after{margin-top:18px}

/* ---------- link cards ---------- */
.tut-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:20px;
}
.tut-link-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:20px 18px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card-soft);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.tut-link-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-float);
}
.tut-link-title{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.tut-link-desc{font-size:13px;line-height:1.7;color:var(--text-muted)}
.tut-link-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:10px;
  font-size:12.5px;
  color:var(--accent-dark);
}
.tut-link-more svg{flex:none;transition:transform .16s ease}
.tut-link-card:hover .tut-link-more svg{transform:translateX(2px)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .tut-hero{padding-top:var(--sp-6)}
  .tut-lead{font-size:15.5px}
}

@media (max-width:640px){
  .tut-hero{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
  .tut-title{font-size:32px;line-height:1.16}
  .tut-lead{font-size:15px}
  .tut-callout{margin-top:22px}
  .tut-step{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
  .tut-p{font-size:15px;line-height:1.8}
  .tut-plat{grid-template-columns:1fr}
  .tut-plat-card{padding:18px 16px}
  .tut-plat-extra{padding:16px 14px;gap:12px}
  .tut-actions{gap:12px}
  .tut-actions .btn{width:100%;max-width:340px}
  .tut-link-card{padding:18px 16px}
  .tut-step-head{gap:10px}
}