/* ============================================================================
   VPNJM · tutorial page layer
   Page-scoped furniture only: fact chips, flow wrapper, platform banner,
   plan table caption, verification checklist and prose/button overrides.
   Every colour, radius and shadow comes from base.css tokens.
   ========================================================================== */

/* fact chips under the page title */
.tut-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  min-width:0;
}

/* the sticky chapter rail must own a container that spans every section */
.tut-flow{margin-top:24px;min-width:0}
.tut-plate{margin-top:20px}
.tut-band{margin-top:26px}
.tut-prose{margin-top:32px}

.tut-prose > section{padding-top:4px;min-width:0}
.tut-prose > section + section{margin-top:12px}
.tut-prose > section:first-of-type > h2:first-child{margin-top:0}

/* buttons inside the prose column must not inherit link underline/colour */
.prose .btn{
  text-decoration:none;
  color:var(--paper);
}
.prose .btn-ghost{color:var(--text)}
.prose p > .btn + .btn{margin-left:8px}

/* plan comparison table */
.tut-table{margin-top:16px}
.tut-table caption{
  caption-side:top;
  text-align:left;
  padding:12px 14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}

/* verification checklist */
.prose .tut-checks{
  list-style:none;
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:14px;
}
.prose .tut-checks li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:0;
  font-size:14px;
  line-height:1.6;
  color:var(--text-muted);
}
.prose .tut-checks svg{
  width:15px;
  height:15px;
  color:var(--success);
  flex:none;
  margin-top:3px;
}

/* platform banner at the head of each client section */
.tut-plat{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--white),var(--bg-panel-3));
  border:1px solid rgb(var(--text-rgb)/.08);
  box-shadow:var(--shadow-soft);
  min-width:0;
}
.tut-plat svg{width:22px;height:22px;color:var(--accent);flex:none}
.tut-plat-name{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}
.tut-plat-kind{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--text-muted);
  white-space:nowrap;
}

@media (max-width:900px){
  .tut-prose{margin-top:26px}
}

@media (max-width:640px){
  .tut-plat{flex-wrap:wrap;gap:8px 10px}
  .tut-plat-kind{margin-left:0}
  .prose p > .btn + .btn{margin-left:0;margin-top:8px}
}