/* pages/foundations.css — the install page (zBrush: [page, hub, pages.foundations]).
   HOUSE-STANDARD v4: %masthead + zc-section/zc-title/zc-subtitle do the page;
   this sheet owns only what is unique here — the step pills (stack-filetype
   vocabulary, role-colored), the paste card + its Copy button, the whispers.
   EVERYTHING on the spine is centered; bifrost collapses single-child action
   wrappers onto the element itself, so centering never relies on a flex parent. */

/* ── the spine is centered text — collapsed wrappers can't break centering
   when the CONTAINER centers inline content. Cards restore reading align. */
.zc-section .zc-container,
.zc-section-tight .zc-container { text-align: center; }
.zf-paste, .zc-card, .zc-note   { text-align: left; }

/* ── step pills — the zStack filetype-pill voice, role-colored per act ───── */
.zf-pill {
    display:        table;             /* shrink-to-fit block: margin auto centers it, collapsed-wrapper-proof */
    margin:         0 auto 1.1rem;
    padding:        0.3rem 0.95rem;
    border:         1px solid var(--pill-ink, #a5b4fc);
    border-radius:  999px;
    color:          var(--pill-ink, #a5b4fc);
    background:     var(--pill-tint, rgba(124, 58, 237, 0.10));
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.zf-pill-one { --pill-ink: #8fe093; --pill-tint: rgba(120, 200, 110, 0.10); }
.zf-pill-two { --pill-ink: #b794f6; --pill-tint: rgba(147, 112, 219, 0.12); }
.zf-pill-go  { --pill-ink: #7cc0ff; --pill-tint: rgba(92, 169, 255, 0.12); }

/* ── actions row — breathing room above; the centered container does the rest.
   (bifrost collapses a sole-child wrapper onto the button/anchor itself, so
   the class must work on EITHER a wrapper or the control.) */
.zf-actions { margin-top: 2.2rem; }
div.zf-actions {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1rem;
}
a.zf-actions, button.zf-actions { display: inline-flex; }

/* ── the paste card — the prompt you hand your partner ────────────────────
   The ONE card on the page spine. Prose that wraps on any screen, plus a
   real Copy button (injected by &.foundations_copy) in the top-right. */
.zf-paste {
    position:      relative;
    max-width:     46rem;
    margin:        2.4rem auto 0;
    text-align:    left;
    background:    rgba(6, 9, 24, 0.7);
    border:        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding:       1.9rem 2.1rem;
    padding-top:   3.1rem;             /* room for the Copy button row */
    box-shadow:    var(--zc-shadow);
}
.zf-paste p {
    margin:      0;
    color:       #d1d5db;
    font-size:   1.02rem;
    line-height: 1.8;
    text-align:  left;
    overflow-wrap: anywhere;           /* the minted key wraps; prose is unaffected */
}
.zf-paste p + p { margin-top: 1.1rem; }

/* the Copy button — injected by plugins/foundations_copy.js */
.zf-copy-btn {
    position:      absolute;
    top:           0.9rem;
    right:         0.9rem;
    padding:       0.32rem 0.9rem;
    border:        1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background:    rgba(255, 255, 255, 0.05);
    color:         #c9d1e0;
    font-size:     0.8rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zf-copy-btn:hover  { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.zf-copy-btn.zf-copied {
    border-color: rgba(82, 183, 136, 0.55);
    color:        #8fe093;
    background:   rgba(82, 183, 136, 0.10);
}

/* locked face — the PROSE dims (key not real yet); the Copy button stays live */
.zf-locked p { opacity: 0.55; }

/* minted face — the block earns a glow */
.zf-glow {
    border-color: rgba(82, 183, 136, 0.45);
    box-shadow:
        0 0 34px rgba(82, 183, 136, 0.18),
        0 14px 40px rgba(0, 0, 0, 0.30);
    animation: zf-arrive 700ms ease-out;
}
@keyframes zf-arrive {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: none;             opacity: 1; }
}
.zf-done { color: #8fe093; }

/* ── whispers — one quiet centered line ──────────────────────────────────── */
.zf-whisper,
.zf-whisper p {
    max-width:   46rem;
    margin:      1.2rem auto 0;
    font-size:   0.9rem;
    line-height: 1.6;
    color:       #8b93a7;
    text-align:  center;
}
.zf-whisper a { color: #a5b4fc; }

/* quiet row under the paste card — link + truth line, centered stack */
.zf-quiet-row {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.9rem;
    margin-top:     2.2rem;
}
.zf-quiet-row a,
.zf-quiet-row button {
    background:      none;
    border:          none;
    padding:         0;
    font-size:       0.92rem;
    color:           #a5b4fc;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor:          pointer;
}
.zf-quiet-row a:hover,
.zf-quiet-row button:hover { color: #c7d2fe; }
.zf-quiet-row .zf-whisper,
.zf-quiet-row .zf-whisper p { margin-top: 0; }

/* ── partner picker (revealed in place) ──────────────────────────────────── */
.zf-picker-title,
.zf-picker-title h3 {
    text-align: center;
    margin:     2.5rem 0 1.6rem;
    font-size:  1.35rem;
    font-weight: 800;
    color:      var(--text-light, #e6edf3);
}

/* ── fine print: a whisper, not a panel ──────────────────────────────────── */
.zf-fineprint,
.zf-fineprint p {
    max-width:  52rem;
    margin:     0 auto;
    text-align: center;
    font-size:  0.88rem;
    line-height: 1.7;
    color:      #7c8398;
}
.zf-fineprint a { color: #a5b4fc; }

/* ── responsive — one block, mobile up ───────────────────────────────────── */
@media (max-width: 640px) {
    .zf-paste { padding: 1.4rem 1.3rem; padding-top: 3rem; margin-top: 1.8rem; }
}