/* /lead-attribution/zapier-make-n8n/ only (prefix zp-): the node graph, the key-or-signature gate,
   the JSON body check and the envelope stack. Each mirrors conversions/hooks.py and
   conversions/adapters/lead.py, generic.py. */

.zp-k{margin:0 0 .6rem;font:500 .68rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-3)}
.fold-paper .zp-k{color:#4a5866}
.zp-code{display:inline-block;padding:.15rem .45rem;border-radius:3px;font:700 .8rem var(--sk-mono);background:rgba(237,161,0,.16);color:var(--sk-bots)}
.zp-code.ok{background:rgba(27,175,122,.16);color:#5fd3a6}
.zp-out{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:.9rem}
.zp-out code{font:400 .8rem var(--sk-mono);color:var(--sk-text);overflow-wrap:anywhere}
.zp-out.flash{animation:zpFlash .6s ease-out}
.zp-say{margin:.7rem 0 0;font-size:.92rem;line-height:1.55;color:var(--sk-text-2)}

/* ---------- hero: the node graph ---------- */
.zp-graph{border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-deep);overflow:hidden}
.zp-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);font:400 .7rem var(--sk-mono);letter-spacing:.04em;color:var(--sk-text-3)}
.zp-btn{flex:none;padding:.25rem .55rem;border:1px solid var(--sk-line-2);border-radius:3px;background:none;color:var(--sk-text-2);font:500 .68rem var(--sk-mono);cursor:pointer}
.zp-tools{display:flex;gap:.4rem;margin:0;padding:.8rem 1rem 0;list-style:none}
.zp-tools li{padding:.25rem .65rem;border:1px solid var(--sk-line-2);border-radius:20px;font:600 .78rem var(--sk-sans);color:var(--sk-text-3);transition:all .3s}
.zp-tools li.on{border-color:var(--sk-ai);color:var(--sk-text);background:#2a1c15}
.zp-nodes{display:grid;padding:1rem;gap:0}
.zp-node{display:grid;gap:.2rem;padding:.75rem .9rem;border:1px solid var(--sk-line-2);border-radius:8px;background:#16212b;min-width:0}
.zp-node .zp-k{margin:0;font-size:.6rem}
.zp-node b{font:600 .95rem var(--sk-sans);color:var(--sk-text);overflow-wrap:anywhere}
.zp-node small{font-size:.78rem;color:var(--sk-text-3);overflow-wrap:anywhere}
.zp-node small code{font:400 .72rem var(--sk-mono)}
.zp-step{border-color:var(--sk-ai)}
.zp-step b.swap{animation:zpSwap .45s ease-out}
.zp-skald{background:#0b1117}
.zp-skald b{font:500 .8rem var(--sk-mono)}
.zp-skald pre{margin:.3rem 0 0;font:400 .76rem/1.5 var(--sk-mono);color:var(--sk-text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.zp-skald pre span{color:var(--sk-ai)}
.zp-wire{position:relative;height:1.6rem}
.zp-wire::before{content:"";position:absolute;left:1.6rem;top:0;bottom:0;width:2px;background:var(--sk-line-2)}
.zp-wire i{position:absolute;left:calc(1.6rem - 3px);top:0;width:8px;height:8px;border-radius:50%;background:var(--sk-ai);opacity:0}
.zp-graph.run .zp-wire i{animation:zpDrop .5s ease-in both}
.zp-graph.run .zp-wire + .zp-node + .zp-wire i{animation-delay:.5s}
.zp-answer{margin:0;padding:.8rem 1rem 1rem;border-top:1px dashed var(--sk-line-2);display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.zp-answer .zp-k{margin:0}
.zp-answer code{font:500 .78rem var(--sk-mono);color:#5fd3a6;overflow-wrap:anywhere}
.zp-graph.js.run .zp-answer{opacity:.2}
.zp-graph.js .zp-answer{transition:opacity .3s}

/* ---------- 01: the gate ---------- */
.zp-gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.25rem;margin-top:1.5rem;align-items:start}
.zp-ctl{display:grid;gap:1.1rem;align-content:start}
.zp-q .zp-k{display:block}
.zp-ctl .try,.zp-env-ctl .try{justify-self:start}
.zp-run{padding:1.3rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);min-width:0}
.zp-req{margin:0 0 1rem;padding:.9rem 1rem;border-radius:6px;background:#0b1117;border:1px solid var(--sk-line);font:400 .76rem/1.6 var(--sk-mono);color:var(--sk-text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.zp-req .h{color:var(--sk-text)}
.zp-req .x{color:var(--sk-text-4);text-decoration:line-through;text-decoration-color:var(--sk-bots)}
.zp-gates{margin:0 0 1rem;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;counter-reset:g}
.zp-gates li{position:relative;display:grid;gap:.2rem;padding:.6rem .7rem;border:1px solid var(--sk-line-2);border-top:3px solid var(--sk-line-2);border-radius:4px;transition:border-color .3s,opacity .3s}
.zp-gates b{font:600 .85rem var(--sk-sans);color:var(--sk-text)}
.zp-gates span{font-size:.78rem;line-height:1.4;color:var(--sk-text-3)}
.zp-gates li.ok{border-top-color:var(--sk-search)}
.zp-gates li.no{border-top-color:var(--sk-bots);background:rgba(237,161,0,.06)}
.zp-gates li.no b{color:#f0c35c}
.zp-gates li.idle{opacity:.4}
.zp-gates li.shut{animation:zpShut .45s ease-out}

/* ---------- 02: the body check ---------- */
.zp-lint{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.25rem;margin-top:1.5rem;align-items:start}
.zp-ed{border:1px solid var(--sk-line-2);border-radius:8px;overflow:hidden;background:#0b1117;min-width:0}
.zp-ed-bar{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--sk-line);font:400 .7rem var(--sk-mono);color:var(--sk-text-3)}
.zp-ed-in{display:grid;grid-template-columns:3.2rem minmax(0,1fr)}
.zp-gut{overflow:hidden;padding:.8rem 0;border-right:1px solid var(--sk-line);font:400 .8rem/1.6 var(--sk-mono);color:var(--sk-text-4);text-align:right;height:16rem;box-sizing:border-box}
.zp-gut div{display:flex;justify-content:flex-end;gap:.3rem;padding-right:.45rem;height:1.6em;white-space:nowrap}
.zp-gut i{font-style:normal;font-weight:700;width:.8em;text-align:center}
.zp-gut .ok i{color:var(--sk-search)}
.zp-gut .note i{color:var(--sk-people-t)}
.zp-gut .dup i{color:var(--sk-text-3)}
.zp-gut .no{background:rgba(237,161,0,.12)}
.zp-gut .no i{color:var(--sk-bots)}
.zp-ed textarea{display:block;width:100%;height:16rem;box-sizing:border-box;margin:0;padding:.8rem .9rem;border:0;resize:none;background:transparent;color:var(--sk-text);font:400 .8rem/1.6 var(--sk-mono);white-space:pre;overflow:auto;tab-size:2}
.zp-ed textarea:focus{outline:2px solid var(--sk-ai);outline-offset:-2px}
.zp-verdict{padding:1.3rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);min-width:0}
.zp-marks{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.zp-marks li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.6rem;padding:.5rem .7rem;border:1px solid var(--sk-line);border-left:3px solid var(--sk-line-2);border-radius:4px;font-size:.85rem;line-height:1.45}
.zp-marks b{font:500 .74rem var(--sk-mono);color:var(--sk-text-3);padding-top:.1rem}
.zp-marks span{color:var(--sk-text-2);overflow-wrap:anywhere}
.zp-marks li.ok{border-left-color:var(--sk-search)}
.zp-marks li.note{border-left-color:var(--sk-people)}
.zp-marks li.no{border-left-color:var(--sk-bots);background:rgba(237,161,0,.06)}
.zp-marks li.no span{color:#f0c35c}
.zp-marks li.idle{opacity:.5}
.zp-log{margin:.9rem 0 0;font:400 .76rem/1.5 var(--sk-mono);color:var(--sk-text-3)}

/* ---------- 03: the envelope stack (on paper) ---------- */
.zp-env-ctl{display:grid;gap:.8rem;margin-top:1.4rem;max-width:30rem}
.zp-env-ctl .zp-k b{font-size:.9rem;color:var(--sk-paper-ink)}
.zp-env-ctl input[type=range]{width:100%;accent-color:var(--sk-ai)}
.zp-env{padding:1.4rem;border:1px solid var(--sk-paper-line);border-radius:8px;background:#fbf8f2;min-width:0;color:var(--sk-paper-ink)}
.zp-pile{position:relative;height:9.5rem;margin:0 0 1rem}
.zp-pile span{position:absolute;left:50%;width:11rem;height:6.5rem;margin-left:-5.5rem;border:1px solid #c9bfae;border-radius:5px;background:#fff;box-shadow:0 1px 0 rgba(15,22,29,.05)}
.zp-pile span::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.5%,#d9d0c1 50%,transparent 50.5%),linear-gradient(to bottom left,transparent 49.5%,#d9d0c1 50%,transparent 50.5%);background-size:100% 55%;background-repeat:no-repeat}
.zp-pile span.over{border-color:var(--sk-bots);background:#fff6e0}
.zp-pile em{position:absolute;right:0;bottom:0;font:600 .78rem var(--sk-mono);font-style:normal;color:#4a5866}
.zp-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;margin:0 0 1rem}
.zp-meter .zp-k{margin:0}
.zp-meter > span:last-child{font:500 .76rem var(--sk-mono);color:#4a5866;white-space:nowrap}
.zp-track{position:relative;height:10px;border-radius:5px;background:#e7e1d6;overflow:hidden}
.zp-track i{position:absolute;left:0;top:0;bottom:0;width:var(--w,2%);max-width:100%;background:var(--sk-search);transition:width .3s,background .3s}
.zp-env.big .zp-track i{background:var(--sk-bots)}
.zp-env .zp-out code{color:var(--sk-paper-ink)}
.zp-env .zp-say{color:var(--sk-paper-ink-2)}
.zp-env .zp-code{background:#fbe7c0;color:#8a5d00}
.zp-env .zp-code.ok{background:#d5f0e4;color:#0b7a52}
.zp-one{margin:1rem 0 0;padding:.7rem .8rem;border-radius:5px;background:#f1ece2;font:400 .72rem/1.5 var(--sk-mono);color:#4a5866;white-space:pre-wrap;overflow-wrap:anywhere}

@keyframes zpFlash{0%{background:rgba(235,104,52,.22)}100%{background:transparent}}
@keyframes zpSwap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes zpDrop{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
@keyframes zpShut{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}100%{transform:none}}

@media (max-width:980px){
  .zp-gate,.zp-lint{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .zp-gates{grid-template-columns:minmax(0,1fr)}
  .zp-meter{grid-template-columns:minmax(0,1fr)}
  .zp-gut,.zp-ed textarea{height:14rem}
  .zp-marks li{grid-template-columns:minmax(0,1fr);gap:.15rem}
}
@media (prefers-reduced-motion:reduce){
  .zp-track i,.zp-gates li{transition:none}
}