/* ════════════════════════════════════════════════════════════════════════
   zFunc.css — page brush for the zFunc leaf (opt in: zBrush [page, leaf, pages.zFunc]).
   The leaf is otherwise pure canonical zc-*; this brush exists for ONE local
   exception — the "under the hood" proof. The server-log screenshot is illegible
   at size and not meant to be read; it's a small screenshot floated aside, a cue
   that the click really hit the backend. The float lands directly on the <img>
   (its container unwraps), so prose wraps around it. Scoped to .zfunc-* only.
   ════════════════════════════════════════════════════════════════════════ */

/* prose + proof side by side; stretch makes the image match the text's full height */
.zfunc-proof-section {
    display:     flex;
    align-items: stretch;
    gap:         1.4rem;
}

/* the prose column fills the remaining width */
.zfunc-proof-section > *:not(.zfunc-proof-img) {
    flex:      1 1 auto;
    min-width: 0;
}

/* the screenshot (_zClass lands on the <img>) — a wider left-edge crop, zoomed in
   and stretched to 100% of the text height; softened/dimmed as a proof cue */
.zfunc-proof-img {
    flex:            0 0 340px;
    width:           340px;
    align-self:      stretch;
    height:          auto;
    object-fit:      cover;
    object-position: left center; /* zoom + crop to the LEFT edge of the log */
    border:          1px solid rgba(148, 163, 184, 0.2);
    border-radius:   10px;
    box-shadow:      0 8px 22px rgba(0, 0, 0, 0.34);
    opacity:         0.9;
}

/* ── crucial callout — a WARNING-skin on the canonical tight note
   (layer: _zClass: zc-note zc-note-tight zfunc-crucial). The one zFunc footgun:
   an author-written return can silently STEER the wizard engine instead of
   rendering. This is not a regular aside, so it wears the warning hue + a bi-*
   icon to match. Re-skins the note only; width/anchor come from .zc-note-tight. */
.zc-leaf .zfunc-crucial {
    border-color: rgba(255, 179, 71, 0.45);
    background:   linear-gradient(180deg, rgba(255, 179, 71, 0.08), rgba(255, 179, 71, 0.02)), var(--zc-surface);
}
/* swap the thin top hairline for a solid warning bar */
.zfunc-crucial::before {
    height:     3px;
    background: #FFB347;
}
/* the inline <bi-exclamation-triangle-fill> — warning-colored, bumped, aligned */
.zfunc-crucial .bi {
    color:         #FFB347;
    font-size:     1.2em;
    margin-right:  0.45rem;
    vertical-align: -0.05em;
}
/* warmer emphasis so **bold** reads as caution, not the cool default */
.zc-leaf .zfunc-crucial strong { color: #FFD08A; }