/* pages/zspark.css — the RECIPE vocabulary (zBrush: [page, …, pages.zspark]).
   Born on the zSpark hybrid hub; the Partners walkthroughs (Claude, Cursor)
   ride the same sheet — a walkthrough IS a recipe. HOUSE-STANDARD: %masthead +
   zc-section/zc-title/zc-subtitle do the page; this sheet owns only the
   recipe: one glass stepper card (numbered moves), the payoff line, the big
   CTA under it, the quiet whisper, and the paste column. Spine is centered
   (foundations doctrine); cards and notes restore reading alignment. */

/* ── the spine is centered text — cards/notes restore reading align ───────── */
.zc-section .zc-container { text-align: center; }
.zc-note, .zsp-steps      { text-align: left; }

/* ── the stepper card — ONE glass card, five numbered moves ───────────────── */
.zsp-steps {
    max-width:     40rem;
    margin:        2.6rem auto 0;
    padding:       0.9rem 2.1rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--zc-radius, 18px);
    box-shadow:    var(--zc-shadow);
}
.zsp-step {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    padding:     1.15rem 0;
}
.zsp-step + .zsp-step { border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* the number chip — brand-tinted circle, the row's anchor */
.zsp-step-num {
    flex:            0 0 auto;
    width:           2.2rem;
    height:          2.2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0;
    border:          1px solid rgba(124, 58, 237, 0.45);
    border-radius:   50%;
    background:      rgba(124, 58, 237, 0.14);
    color:           #c7d2fe;
    font-size:       0.95rem;
    font-weight:     700;
}
.zsp-step-text,
.zsp-step-text p {
    margin:      0;
    color:       #d1d5db;
    font-size:   1.02rem;
    line-height: 1.6;
    text-align:  left;
}
.zsp-step-text strong { color: var(--text-light, #ffffff); }
.zsp-step-text a      { color: #a5b4fc; }

/* a step's figure — real UI, held small, indented to the step-text column
   (zImage emits a bare <img> carrying the class itself) */
img.zsp-step-figure {
    display:       block;
    width:         calc(100% - 3.45rem);
    max-width:     15rem;
    margin:        -0.3rem 0 1.15rem 3.45rem;
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
}
.zsp-step-figure + .zsp-step { border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* step 0 — the prerequisite row: green chip, same anatomy */
.zsp-step-zero .zsp-step-num {
    border-color: rgba(82, 183, 136, 0.5);
    background:   rgba(82, 183, 136, 0.12);
    color:        #8fe093;
}

/* ── the payoff — one green line, the "it worked" moment ──────────────────── */
.zsp-payoff,
.zsp-payoff p {
    margin:      1.8rem auto 0;
    text-align:  center;
    color:       #8fe093;
    font-size:   1.08rem;
    font-weight: 600;
}
.zsp-payoff strong { color: #8fe093; }

/* ── CTA + whisper — centered by the spine; the button just needs air ─────── */
.zsp-cta { margin-top: 1.7rem; }

.zsp-whisper,
.zsp-whisper p {
    max-width:   40rem;
    margin:      1.1rem auto 0;
    font-size:   0.85rem;
    line-height: 1.6;
    color:       #8b93a7;
    text-align:  center;
}
.zsp-whisper a { color: #a5b4fc; }

/* the whisper's follow-up link — same quiet register, one line under it.
   Authored as a zBtn (the action must carry a zPsi pin — plain zURLs drop it
   in Bifrost), so strip the pill chrome back down to a link. */
button.zsp-whisper-link {
    display:       inline-block;
    margin-top:    0.5rem;
    background:    none;
    border:        0;
    border-radius: 0;
    padding:       0;
    box-shadow:    none;
    font-size:     0.85rem;
    font-weight:   400;
    color:         #a5b4fc;
    cursor:        pointer;
}
button.zsp-whisper-link:hover {
    background: none;
    box-shadow: none;
    transform:  none;
    color:      #c7d2fe;
}

/* ── the technically-curious note — a quiet centered column ───────────────── */
.zc-note.zsp-note { max-width: 44rem; margin: 2.8rem auto 0; }

/* ── the paste column — a zTerminal held to reading width (Partners pages) ── */
.zsp-paste { max-width: 44rem; margin: 2.2rem auto 0; text-align: left; }

@media (max-width: 640px) {
    .zsp-steps { padding: 0.6rem 1.2rem; }
    .zsp-step  { gap: 0.9rem; padding: 0.95rem 0; }
    img.zsp-step-figure { width: calc(100% - 3.1rem); margin-left: 3.1rem; }
}