/* ══════════════════════════════════════════════════════════════════════════
   UPLIST — launch flow
   ─────────────────────────────────────────────────────────────────────────
   Three steps, one page. The preview on the right is the actual card the
   listing would show, drawn by the same code — so what you approve is
   literally what gets listed.
   ══════════════════════════════════════════════════════════════════════════ */

.lp{padding-top:32px}
.lp-hd{margin-bottom:26px;max-width:62ch}
.lp-hd h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.035em}
.lp-hd p{margin-top:11px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start;padding-bottom:40px}
.lp-side{position:sticky;top:var(--stick);display:flex;flex-direction:column;gap:16px}

/* ══ stepper ══ */
.steps{
  display:flex;list-style:none;margin:0 0 22px;padding:0;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--sheet)
}
.steps li{
  flex:1;display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-right:1px solid var(--rule);font-size:12.5px;font-weight:600;color:var(--ink-4);
  min-width:0;position:relative
}
.steps li:last-child{border-right:0}
.steps li b{
  width:21px;height:21px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid currentColor;font-family:var(--mono);font-size:11px;font-weight:400
}
.steps li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps li.on{color:var(--ink);background:var(--pink)}
:root[data-theme="dark"] .steps li.on{background:var(--paper-2)}
.steps li.on b{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps li.done{color:var(--ink-2)}
.steps li.done b{background:var(--up);border-color:var(--up);color:#fff}

.stepbox{display:none}
.stepbox.on{display:block;animation:in .2s ease-out}
.stepbox > h2{font-size:19px;margin-bottom:5px;letter-spacing:-.025em}
.stepbox > .sub{font-size:13.5px;color:var(--ink-3);margin-bottom:20px;line-height:1.55;max-width:62ch}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ══ image upload ══
   A dashed well until there is something in it, then a solid row showing what
   was uploaded. The whole box is the target — click, keyboard, or drop — so
   there is no small button to aim at. */
.drop{
  display:flex;align-items:center;gap:14px;
  padding:14px;cursor:pointer;
  border:1px dashed var(--rule);border-radius:var(--r);background:var(--sheet);
  transition:border-color .12s,background .12s
}
.drop:hover,.drop:focus-visible{border-color:var(--ink)}
.drop.over{border-color:var(--accent);border-style:solid;background:var(--pink)}
:root[data-theme="dark"] .drop.over{background:var(--paper-2)}
.drop.has{border-style:solid}
.drop.bad{border-color:var(--down)}
.drop.busy{opacity:.55;pointer-events:none}

.drop-ic{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--pink);color:var(--accent)
}
:root[data-theme="dark"] .drop-ic{background:var(--paper-2)}
.drop-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.drop-prev{
  width:56px;height:56px;flex:none;border-radius:3px;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-2)
}
.drop-prev img{width:100%;height:100%;object-fit:cover;display:block}

.drop-tx{flex:1;min-width:0}
.drop-tx b{display:block;font-size:14px;font-weight:600}
.drop-tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ══ review: the uploaded image ══ */
.rv-img{
  display:inline-block;width:26px;height:26px;vertical-align:-8px;margin-right:7px;
  border:1px solid var(--rule);border-radius:2px;overflow:hidden
}
.rv-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ pair picker ══ */
.pickbar{display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.pickbar .inp{height:38px;flex:1;min-width:180px}
.picklist{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet);
  max-height:396px;overflow:auto
}
.pk{
  display:flex;align-items:center;gap:12px;padding:11px 13px;cursor:pointer;
  border-bottom:1px solid var(--rule-2);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0
}
.pk:last-child{border-bottom:0}
.pk:hover{background:var(--pink)}
:root[data-theme="dark"] .pk:hover{background:var(--paper-2)}
.pk[aria-pressed="true"]{background:var(--pink);box-shadow:inset 3px 0 0 var(--accent)}
:root[data-theme="dark"] .pk[aria-pressed="true"]{background:var(--paper-2)}
.pk-t{font-family:var(--mono);font-size:14px;font-weight:500;width:66px;flex:none}
.pk-n{flex:1;min-width:0}
.pk-n b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-n span{font-size:11px;color:var(--ink-4)}
.picked{
  display:flex;align-items:center;gap:12px;padding:13px;margin-top:14px;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--pink);box-shadow:var(--press)
}
:root[data-theme="dark"] .picked{background:var(--paper-2)}
.picked .sp{flex:1}

/* ══ review ══ */
.review{border:1px solid var(--rule);border-radius:var(--r);background:var(--sheet);overflow:hidden}
.rv-row{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--rule-2);font-size:13.5px;align-items:center}
.rv-row:last-child{border-bottom:0}
.rv-row .k{color:var(--ink-3);width:150px;flex:none}
.rv-row .v{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
.rv-row .v.mono{font-family:var(--mono);font-weight:400;font-size:12.5px}
.rv-row .edit{font-size:12px;color:var(--accent);cursor:pointer;background:none;border:0;text-decoration:underline}

.terms{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.terms input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--accent)}

.lp-nav{display:flex;gap:10px;margin-top:24px;align-items:center}
.lp-nav .sp{flex:1}

/* ══ side: preview ══ */
.pv-note{padding:11px 14px;font-size:11.5px;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--rule);background:var(--paper-2)}
.pv-body{padding:14px;background:var(--paper);border-bottom:1px solid var(--rule)}

/* ══ side: flow ══
   The fee diagram is the actual product argument, so it gets drawn rather
   than described. Four boxes and three arrows, in the same ruled language. */
.flow{display:grid;gap:0;padding:14px}
.fl-box{
  border:1px solid var(--rule);border-radius:2px;padding:10px 12px;background:var(--sheet);
  display:flex;align-items:center;gap:10px
}
.fl-box.accent{border-color:var(--ink);box-shadow:var(--press);background:var(--pink)}
:root[data-theme="dark"] .fl-box.accent{background:var(--paper-2)}
.fl-box .n{font-family:var(--mono);font-size:11px;color:var(--ink-4);flex:none}
.fl-box b{font-size:13px;font-weight:600}
.fl-box p{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.fl-arrow{
  height:22px;display:flex;align-items:center;justify-content:center;color:var(--ink-4);
  font-family:var(--mono);font-size:12px
}
.fl-arrow::before{content:'↓'}

@media (max-width:1080px){
  .lp-grid{grid-template-columns:1fr}
  .lp-side{position:static;order:-1}
}
@media (max-width:640px){
  .row2{grid-template-columns:1fr}
  .steps li span{display:none}
  .steps li{justify-content:center;padding:11px 6px}
  .rv-row{flex-wrap:wrap;gap:4px}
  .rv-row .k{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
  .lp-nav .btn{flex:1}
}