/* =========================================================
   VPNTd tutorial.css — quickstart.html page-specific styles
   Step tags / action rows / toc width constraint
   All colors reference :root tokens only.
   ========================================================= */

/* toc pill bar: constrain to content width while its sticky
   parent stays <main> (which covers every section) */
.qs-toc{
  width:min(var(--content-w),calc(100% - var(--gutter)*2));
  margin-inline:auto;
}

/* intro block rhythm (vertical padding only, never shorthand) */
.qs-intro{
  padding-top:56px;
  padding-bottom:26px;
}

/* mono step tag above each section heading (ST-01 …) */
.step-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent-dark);
  margin-bottom:10px;
}
.step-tag::before{
  content:"";
  display:inline-block;
  width:20px;
  height:2px;
  background:var(--accent-dark);
  flex-shrink:0;
}

/* section divider between steps */
.qs-step{
  border-top:1px solid var(--border);
}

/* CTA / link row under each step body */
.step-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

@media (max-width:480px){
  .step-actions .btn-primary,
  .step-actions .btn-secondary,
  .step-actions .btn-ghost{
    flex:1 1 auto;
  }
}