/* ==========================================================================
   VPNUJ — tutorial.css
   Page-scoped layout for the setup / tutorial page (zh-CN/setup.html).
   Only layout and rhythm live here; colours come from :root tokens.
   ========================================================================== */

.setup-col{
  max-width:780px;
  margin-inline:auto;
}

/* ---- intro ---- */

.setup-intro{padding-block:var(--sp-2) var(--sp-6);}

.setup-intro h1{margin-top:var(--sp-3);}

.setup-intro .lede{
  margin-top:var(--sp-3);
  max-width:100%;
}

.setup-pills{margin-top:var(--sp-4);}

.setup-intro .callout{
  margin-top:var(--sp-5);
  margin-bottom:0;
}

/* ---- document column ---- */

.prose.setup-doc{max-width:100%;}

.setup-doc .toc-tabs{margin-bottom:var(--sp-5);}

.setup-step{padding-block:0;}

.setup-step + .setup-step{padding-top:var(--sp-4);}

.setup-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:var(--sp-4);
}

.setup-actions .btn{flex-shrink:0;white-space:nowrap;}

/* ---- per-platform import blocks ---- */

.import-stack{
  display:grid;
  gap:14px;
  margin-block:var(--sp-4) var(--sp-5);
}

.import-stack .panel-body{padding:var(--sp-4) var(--sp-5);}

.import-stack h3{
  margin-top:0;
  margin-bottom:var(--sp-2);
}

.import-stack p{font-size:14.5px;}

.import-stack p:last-child{margin-bottom:0;}

.import-stack ol{
  margin-bottom:var(--sp-3);
  font-size:14.5px;
}

/* ---- next-step cards ---- */

.setup-next{margin-top:var(--sp-4);}

.setup-next .panel-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  padding:18px;
}

.setup-next h3{font-size:16px;}

.setup-next p{
  font-size:13.5px;
  margin-bottom:0;
}

.setup-next a{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:12px;
}

/* ---- narrow screens ---- */

@media (max-width:640px){
  .setup-intro{padding-block:var(--sp-1) var(--sp-5);}
  .import-stack .panel-body{padding:var(--sp-4);}
  .setup-next .panel-body{padding:16px;}
}