/* /lead-attribution/typeform/ only (prefix tf-): the one-question player, the hidden field
   picker, the action fan-in and the kanban move. Each mirrors adapters/typeform.py. */

.tf-k{margin:0 0 .7rem;font:500 .68rem var(--sk-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-text-3)}
.fold-paper .tf-k{color:#4a5866}

/* ---------- hero: the one-question player ---------- */
.tf-play{border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-deep);overflow:hidden}
.tf-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)}
.tf-btn{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}
.tf-stage{position:relative;padding:1.3rem 1.2rem 1rem;background:linear-gradient(160deg,#1c2a36,#121b24)}
.tf-prog{height:3px;margin:0 0 1.1rem;background:#2b3a49;border-radius:2px;overflow:hidden}
.tf-prog i{display:block;height:100%;width:var(--p,100%);background:var(--sk-text);transition:width .5s}
.tf-qs{margin:0;padding:0;list-style:none}
.tf-q{display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;padding:.55rem 0;border-top:1px solid var(--sk-line)}
.tf-q:first-child{border-top:0}
.tf-n{grid-row:span 2;font:600 .8rem var(--sk-mono);color:var(--sk-ai)}
.tf-ask{font:600 1rem/1.3 var(--sk-sans);color:var(--sk-text)}
.tf-ans{font:400 .95rem/1.4 var(--sk-serif);font-size:1.15rem;color:var(--sk-people-t);border-bottom:1px solid #3a5470;min-height:1.6em}
.tf-submit{margin:.9rem 0 0}
.tf-submit span{display:inline-block;padding:.45rem 1rem;border-radius:4px;background:var(--sk-text);color:var(--sk-ink);font:700 .85rem var(--sk-sans);transition:transform .2s}
.tf-out{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-top:1px dashed var(--sk-line-2)}
.tf-stay{padding:.9rem;border-right:1px solid var(--sk-line)}
.tf-stay ul{margin:0;padding:0;list-style:none;font:400 .82rem/1.5 var(--sk-mono);color:var(--sk-text-4)}
.tf-stay li{text-decoration:line-through;text-decoration-color:var(--sk-bots)}
.tf-note{margin:.6rem 0 0;font:500 .7rem var(--sk-mono);color:var(--sk-bots)}
.tf-hook{padding:.9rem;min-width:0}
.tf-hook pre{margin:0;font:400 .74rem/1.5 var(--sk-mono);color:var(--sk-text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.tf-cut{text-decoration:line-through;text-decoration-color:var(--sk-bots);color:var(--sk-text-4)}
.tf-why{color:var(--sk-bots)}
.tf-kept{margin:.7rem 0 0;font:600 .84rem var(--sk-sans);color:var(--sk-text)}
/* the play states: questions one by one, then the split */
.tf-play.js .tf-q{display:none}
.tf-play.js .tf-q.done{display:grid;opacity:.45}
.tf-play.js .tf-q.on{display:grid;animation:tfUp .45s ease-out both}
.tf-play.js .tf-out{opacity:.12;transition:opacity .4s}
.tf-play.js.sent .tf-out{opacity:1}
.tf-play.js.sent .tf-hook{animation:tfFly .7s cubic-bezier(.2,.9,.3,1.1) both}
.tf-play.js.sent .tf-stay{animation:tfDim .7s ease-out both}
.tf-play.press .tf-submit span{transform:scale(.92)}
@keyframes tfUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tfFly{from{opacity:0;transform:translate(-30px,-24px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes tfDim{from{opacity:1}to{opacity:.75}}

/* ---------- 01: the hidden field picker ---------- */
.tf-hf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.tf-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tf-chips button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.6rem .8rem;border:1px dashed #4a5d70;border-radius:6px;background:var(--sk-ink-3);color:var(--sk-text-2);cursor:pointer;text-align:left;transition:all .2s}
.tf-chips button code{font-size:.85rem;color:var(--sk-text)}
.tf-chips button small{font:400 .66rem var(--sk-mono);color:var(--sk-text-4)}
.tf-chips button::before{content:'+';font:600 .7rem var(--sk-mono);color:var(--sk-text-4)}
.tf-chips button[aria-pressed="true"]{border:1px solid var(--sk-ai);background:#1d1510;box-shadow:3px 3px 0 var(--sk-ai)}
.tf-chips button[aria-pressed="true"]::before{content:'\2713';color:var(--sk-ai)}
.tf-chips button:hover{transform:translateY(-2px)}
.tf-small{margin:.75rem 0 0;font-size:.85rem}
.tf-rec{padding:1.3rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.tf-rec dl{margin:0}
.tf-rec dl > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.8rem;padding:.55rem 0;border-top:1px solid var(--sk-line)}
.tf-rec dt{font:500 .72rem var(--sk-mono);color:var(--sk-text-4);text-transform:uppercase;letter-spacing:.05em;padding-top:.15rem}
.tf-rec dd{margin:0;font-size:.95rem;color:var(--sk-text)}
.tf-rec dd.no{color:var(--sk-text-4)}
.tf-rec dd.flash{animation:tfFlash .6s ease-out}
@keyframes tfFlash{from{background:rgba(235,104,52,.25)}to{background:transparent}}
.tf-say{margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--sk-line-2);color:var(--sk-text-2);line-height:1.55}

/* ---------- 02: the action fan-in ---------- */
.tf-fan{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(4rem,.8fr) minmax(0,.9fr);gap:0;margin-top:1.5rem}
.tf-ev,.tf-act{position:relative;z-index:1;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem}
.tf-ev{grid-column:1}
.tf-act{grid-column:3;justify-content:space-around}
.tf-ev li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.45rem .7rem;border:1px solid var(--sk-paper-line);border-radius:5px;background:#fbf8f2;transition:all .3s}
.tf-ev b{font:700 .82rem var(--sk-sans);min-width:5.4rem}
.tf-ev code{font-size:.74rem;color:#4a5866}
.tf-to{font:500 .7rem var(--sk-mono);color:#6b7785}
.tf-fan.drawn .tf-to{display:none}
.tf-act li{padding:.8rem .9rem;border:2px solid var(--sk-paper-ink);border-radius:6px;background:#fff;transition:all .3s}
.tf-act b{display:block;font:800 1.05rem var(--sk-disp)}
.tf-act small{display:block;font:400 .68rem var(--sk-mono);color:#4a5866}
.tf-act li.tf-nl{border-style:dashed;border-color:#8a8070}
.tf-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.tf-lines path{fill:none;stroke:#c9bfac;stroke-width:1.5;transition:stroke .3s,stroke-width .3s}
.tf-lines path.on{stroke:var(--sk-ai-deep);stroke-width:2.5}
.tf-fan.lit .tf-ev li{opacity:.4}
.tf-fan.lit .tf-ev li.on{opacity:1;border-color:var(--sk-ai-deep);background:#fff4ee;transform:translateX(4px)}
.tf-fan.lit .tf-act li.on{background:var(--sk-paper-ink);color:#fff}
.tf-fan.lit .tf-act li.on small{color:#f4b393}
.tf-fansay{max-width:52rem;margin:1.5rem 0 0;font-size:1.05rem;line-height:1.6}

/* ---------- 03: the kanban move ---------- */
.tf-kan{padding:1.4rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink)}
.tf-kan-top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1.2rem}
.tf-move{padding:.65rem 1rem;border:1px solid var(--sk-ai);border-radius:4px;background:transparent;color:var(--sk-text);font:600 .92rem var(--sk-sans);cursor:pointer}
.tf-move:hover{background:var(--sk-ai);color:var(--sk-ink)}
.tf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.tf-col{border:1px solid var(--sk-line);border-radius:6px;background:var(--sk-ink-2);padding:.7rem;min-height:9.5rem}
.tf-colh{margin:0 0 .6rem;font:600 .72rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3)}
.tf-col.over{border-color:var(--sk-ai);background:#1d1510}
.tf-slot{min-height:6rem}
.tf-card{display:flex;flex-direction:column;gap:.2rem;padding:.75rem .8rem;border-radius:5px;background:var(--sk-text);color:var(--sk-ink);box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:grab;touch-action:none;user-select:none}
.tf-card b{font:700 .95rem var(--sk-sans)}
.tf-card span{font-size:.8rem;color:#4a5866}
.tf-card code{font-size:.72rem;color:#4a5866}
.tf-card.drag{cursor:grabbing;box-shadow:0 14px 30px rgba(0,0,0,.5);transition:none}
.tf-card.back{animation:tfBack .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes tfBack{0%{transform:translateX(var(--dx,120px)) rotate(3deg)}100%{transform:none}}
.tf-card.land{animation:tfLand .45s ease-out}
@keyframes tfLand{from{transform:translateY(-12px) scale(1.04)}to{transform:none}}
.tf-wire{margin-top:1rem}
.tf-wire pre{margin:0;padding:.9rem 1rem;border:1px solid var(--sk-line);border-radius:5px;background:var(--sk-deep);font:400 .78rem/1.55 var(--sk-mono);color:var(--sk-text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.tf-verdict{margin:1rem 0 0;font-size:1rem;line-height:1.55;color:var(--sk-text)}
.tf-verdict b.no{color:var(--sk-bots)}
.tf-verdict b.ok{color:var(--sk-search)}

/* ---------- 04: set-up steps ---------- */
.tf-steps{margin:1.25rem 0 0;padding-left:1.3rem;line-height:1.6;color:var(--sk-text-2)}
.tf-steps li{margin:.5rem 0}
.tf-steps b{color:var(--sk-text)}

@media (max-width:980px){
  .tf-hf{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tf-fan{grid-template-columns:minmax(0,1fr)}
  .tf-act{grid-column:1;flex-direction:row;flex-wrap:wrap;margin-top:1rem}
  .tf-act li{flex:1 1 45%}
  .tf-lines{display:none}
  .tf-fan.drawn .tf-to{display:inline}
  .tf-out{grid-template-columns:minmax(0,1fr)}
  .tf-stay{border-right:0;border-bottom:1px solid var(--sk-line)}
  .tf-rec dl > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (max-width:520px){
  .tf-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .tf-col{padding:.45rem;min-height:8rem}
  .tf-colh{font-size:.6rem}
  .tf-card{padding:.5rem}
  .tf-card b{font-size:.8rem}
  .tf-card span,.tf-card code{font-size:.64rem}
}