/* /adopt · pick idiot -> action -> cost -> wallet -> sign. */
.adopt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:28px;align-items:start;margin-top:28px}
.adopt-side{position:sticky;top:16px;display:grid;gap:16px}
.step{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:20px;margin:0 0 16px;min-width:0}
.adopt-side .step{margin:0}
.step legend,.step h2{font:400 20px/1.1 var(--display);display:flex;align-items:center;gap:10px;padding:0;margin:0 0 14px}
.step legend{float:left;width:100%}
.step legend + *{clear:both}
.num{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--charge);color:var(--cam);font:400 16px/1 var(--display);flex:none}

/* idiots */
.pick,.kind,.opt{font:400 16px/1.4 var(--body);letter-spacing:normal;color:var(--bone)}
.pick-idiots{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line2);border-radius:12px;padding:8px 4px 10px;cursor:pointer;background:var(--panel);min-width:0;transition:border-color .12s,background .12s}
.pick input,.kind input,.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick:hover{border-color:#6a6f66}
.pick:has(input:checked){border-color:var(--charge);background:#1f2117}
.pick:has(input:focus-visible),.kind:has(input:focus-visible),.opt:has(input:focus-visible){outline:3px solid var(--charge);outline-offset:3px}
.pick .fig{width:100%;height:78px;display:block}
.pick-n{font:400 14px/1 var(--display)}
.pick-c{font:700 11px/1 var(--mono);color:var(--grime);min-height:11px}
.pick-c.low{color:var(--drain)}

/* kinds */
.kinds{display:grid;gap:8px}
.kind{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;border:2px solid var(--line2);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--panel)}
.kind:hover{border-color:#6a6f66}
.kind:has(input:checked){border-color:var(--charge);background:#1f2117}
.k-n{font:400 16px/1.2 var(--display)}
.k-d{grid-column:1;font-size:14px;color:var(--grime);line-height:1.4}
.k-c{grid-column:2;grid-row:1 / span 2;font:700 14px/1.2 var(--mono);color:var(--charge);text-align:right;white-space:nowrap}
.k-c small{display:block;font-weight:400;font-size:11px;color:var(--grime)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:14px}
.opt{position:relative;border:2px solid var(--line2);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--panel);display:grid;gap:2px}
.opt:has(input:checked){border-color:var(--charge);background:#1f2117}
.opt b{font:400 14px/1.2 var(--display)}
.opt span{font-size:13px;color:var(--grime);line-height:1.35}
.whisper{margin-top:16px;display:grid;gap:8px}
.wmeta{display:flex;justify-content:flex-end}
.wcount{font:700 12px/1 var(--mono);color:var(--grime)}
.wcount.near{color:var(--charge)}
.wcount.full{color:var(--drain)}
.whints{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.whints li{font:700 12.5px/1.4 var(--mono);color:var(--charge)}
.whints li::before{content:"▲ "}

/* cost */
.total{font:400 44px/1 var(--display);margin:0;overflow-wrap:anywhere}
.total.ph{color:var(--grime)}
.total small{font:700 14px/1 var(--mono);color:var(--grime);letter-spacing:.08em}
.what{color:var(--ink3);margin:8px 0 0;font-size:15px}
.split.sm{height:40px;margin:14px 0 12px}
.split.sm > div{font-size:13px}
.split .burn{flex:0 0 30%}.split .creator{flex:0 0 35%}.split .pool{flex:0 0 35%}
.rows{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0 0 10px;font:400 14px/1.4 var(--mono)}
.rows dt{color:var(--ink2)}
.rows dt i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:0}
.rows dd{margin:0;text-align:right;color:var(--bone);font-weight:700;white-space:nowrap}
.rows dt.tot,.rows dd.tot{border-top:1px solid var(--line2);padding-top:6px;color:var(--bone)}

/* pay */
.wide{width:100%}
.wallet-list{display:grid;gap:8px;margin-top:10px}
.wallet-list .btn{justify-content:space-between;font:700 14px/1 var(--mono);letter-spacing:.04em;border-color:var(--line2);padding:12px 14px}
.wallet-list .btn:hover{border-color:var(--charge)}
.wallet-list .btn img{width:20px;height:20px;vertical-align:-4px;margin-right:8px}
.wallet-list .btn .label{font-size:11px;color:var(--grime)}
.wallet-list p{margin:4px 0;color:var(--ink2);font-size:14px}
.connected{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line2);padding:8px 8px 8px 12px;border-radius:8px}
.connected .mono{font-weight:700;color:var(--charge)}
#get-quote{margin-top:12px}
.quote{margin-top:14px;border-top:1px dashed var(--line2);padding-top:14px}
.quote .fine{margin:0 0 12px}
.progress{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font:400 13.5px/1.4 var(--mono)}
.progress li{color:var(--grime);display:flex;gap:10px}
.progress li::before{content:"○";width:1em;flex:none}
.progress li.doing{color:var(--bone)}
.progress li.doing::before{content:"◌";color:var(--charge);animation:spin 1s linear infinite}
.progress li.done{color:var(--ink2)}
.progress li.done::before{content:"●";color:var(--charge)}
.progress li.fail{color:var(--drain)}
.progress li.fail::before{content:"✕";color:var(--drain)}
@keyframes spin{to{transform:rotate(360deg)}}
.note .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#err{margin-top:14px}
#err details{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--grime)}
#err pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}
.receipt{margin-top:14px;border:2px solid var(--charge);border-radius:12px;padding:16px;background:#1c1e17}
.receipt .stamp{display:inline-block;font:400 22px/1 var(--display);color:var(--cam);background:var(--charge);padding:6px 10px;transform:rotate(-2deg);margin-bottom:10px}
.receipt.rejected{border-color:var(--drain);background:#1f1512}
.receipt.rejected .stamp{background:var(--drain)}
.receipt p{margin:6px 0;color:var(--ink3)}
.receipt .rows{margin-top:10px}
.receipt .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.receipt a.tx{font:700 13px/1.4 var(--mono);color:var(--charge);overflow-wrap:anywhere}

/* phone/tablet: a sticky summary so the pay step is one tap away */
.mbar{display:none}
@media (max-width:1100px){
  .mbar:not(.hide){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0d0e0c;border-top:2px solid var(--charge);font:700 13px/1.3 var(--mono);color:var(--bone)}
  .mbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mbar .btn{flex:none}
  body:has(.mbar:not(.hide)) .ftr{padding-bottom:88px}
  .adopt{grid-template-columns:1fr}
  .adopt-side{position:static}
  .pick-idiots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .step{padding:16px 14px}
  .pick-idiots{grid-template-columns:repeat(3,1fr);gap:8px}
  .pick .fig{height:64px}
  .kind{grid-template-columns:1fr;padding:11px 12px}
  .k-c{grid-column:1;grid-row:auto;text-align:left}
  .k-c small{display:inline;margin-left:6px}
  .opts{grid-template-columns:1fr 1fr}
  .total{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.progress li.doing::before{animation:none}}