/* Step diagrams (includes/step-vectors.php): one static drawing under the steps of the pages that were the longest
   plain-text runs. Wide drawing (1080 units) at ~1:1 in the content column, narrow drawing (340 units) up to 1100 px,
   so labels stay 13-15 px. Not clickable: no hover. Dark variant sits in the build pages' dark steps band. */
.v-svec { margin: 40px 0 0; padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.v-svec svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-svec .v-svec__n { display: none; }
.v-svec text { font-family: var(--v-sans); }
.v-svec__t { font-size: 15px; font-weight: 600; fill: #0b1220; }
.v-svec__s { font-size: 13px; font-weight: 500; fill: #475569; }
.v-svec__k { font-family: var(--v-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: #0f766e; }
.v-svec text.v-svec__k, .v-svec__k text { font-family: var(--v-mono); }
.v-svec__c, .v-svec__c text { text-anchor: middle; }
.v-svec__ink, .v-svec__ink text { fill: #0b1220; }
.v-svec__wt, .v-svec__wt text { fill: #fff; font-weight: 600; }
.v-svec__q text { font-size: 13px; font-weight: 700; fill: #0b1220; text-anchor: middle; }
.v-svec--dark { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
.v-svec--dark .v-svec__t { fill: #fff; }
.v-svec--dark .v-svec__s { fill: #cbd5e1; }
.v-svec--dark .v-svec__ink, .v-svec--dark .v-svec__ink text { fill: #fff; }
.v-svec--dark .v-svec__k { fill: #5eead4; }
@media (max-width: 1100px) {
  .v-svec { padding: 16px; }
  .v-svec .v-svec__w { display: none; }
  .v-svec .v-svec__n { display: block; max-width: 400px; margin: 0 auto; }
}