/* The create wizard (wizard.html, js/wizard.js). One step on screen, back/next, progress. */
.wz{position:relative;max-width:980px;margin:0 auto;background:#f6f9fb;border:1.6px solid var(--line);border-radius:22px;padding:clamp(16px,3vw,28px)}
.wz-top-gap{flex:1}
.wz-head{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.wz-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.wz .wz-head h1{font-size:36px;color:#13224f;line-height:1.1;margin:0;min-width:0;overflow-wrap:anywhere}
.wz-head-acts{display:flex;align-items:center;gap:8px;flex:none}
/* Start over and Continue your token: the outlined secondary button (the same as Back). The second press of Start
   over within a few seconds clears everything; it shows only once something was typed. */
.wz #wz-restart.wz-sure{color:var(--ui-bad,#c8302a);border-color:var(--ui-bad,#c8302a)}
.wz .btn[hidden]{display:none !important}
.wz-progress{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wz-progress li{font-size:12px;font-weight:700;color:#5a6478;background:#fff;border:1.4px solid var(--line);border-radius:999px;opacity:.7;display:flex}
.wz-progress li>span,.wz-progress li>a{display:block;padding:3px 10px;color:inherit;text-decoration:none;border-radius:999px}
/* finished steps you can jump back to look like links: underlined, pointer, hover wash */
.wz-progress li>a{text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wz-progress li>a:hover{background:var(--ui-hl,#fff1b8)}
.wz-progress li.done{opacity:1;background:#e6f4ea}
.wz-progress li.reached{opacity:1}
.wz-progress li.on{opacity:1;background:#ffe98a;color:#13224f}
/* UX sweep round 4 item 17: a step left behind without its details (a drawing from the manual designer) */
.wz-progress li.skipped{opacity:1;background:#fff;border-style:dashed;color:#5a6478}
.wz-count{font-size:13px;color:#44484e;margin:0}
/* the pills already say which step this is: the count line is for screen readers until the pills are hidden */
@media (min-width:561px){.wz-count{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}
.wz-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.wz-agent{display:flex;flex-direction:column;gap:10px;background:#fff;border:1.6px solid var(--line);border-radius:16px;padding:14px}
.wz-cloud{width:100%;max-width:170px;margin:0 auto}
.wz-cloud svg{display:block;width:100%;height:auto;overflow:visible}
.wz-bubble{margin:0;font-weight:600;font-size:14px;color:#13224f;min-height:1.4em}
.wz-bubble.wz-bad{color:var(--down)}
.wz-steps{display:flex;flex-direction:column;gap:16px;min-width:0}
.wz-step{display:flex;flex-direction:column;gap:14px}
.wz-step[hidden]{display:none}
.wz-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#26303a;min-width:0}
.wz-field input,.wz-field textarea,.wz-field select,.wz-credit input,.wz-inline select{font:inherit;font-size:15px;font-weight:500;color:var(--text);background:#fff;border:1.6px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;min-width:0}
.wz-field textarea{resize:vertical}
.wz-credit input{width:7em}
.wz-err{color:var(--down);font-size:13px;font-weight:700}
.wz-err:empty{display:none}
.wz-note{font-size:13px;color:#44484e;margin:0;font-weight:500}
.wz-note:empty{display:none}
/* UX sweep round 4 item 15: a link inside a note looks like a link */
.wz-note a{color:var(--ui-ink,#2b3550);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.wz-note[hidden],.wz-credit[hidden],.wz-progressbar[hidden],.wz-drafts[hidden],.wz-image[hidden],#wz-connect[hidden],#wz-retry[hidden],.wz-unit[hidden],.wz-image-thumb[hidden],.wz-logo-na[hidden],.wz-manual[hidden],#wz-rv-logo[hidden]{display:none}
/* a field with its unit beside it: the box and 'ETH' (or '$' in front) read as one */
.wz-unit{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.wz-unit>span{font-size:15px;font-weight:700;color:var(--ui-ink,#2b3550)}
.wz-field .wz-unit input{flex:1 1 auto;width:auto;min-width:0}
.wz-field .wz-unit{display:flex}
.wz-field .wz-unit input:disabled{background:#eef1f5;color:#7a8396;cursor:not-allowed}
/* the agent's look: label above each picker, a tidy grid */
.wz-look{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;font-size:13px;color:#44484e}
.wz-look label{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-weight:700;min-width:0}
.wz-look select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1.4px solid var(--line);border-radius:8px;padding:4px 10px;width:100%}
.wz .wz-look select,.wz .wz-inline select{min-height:40px}
.wz-manual{align-self:flex-start;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-top:6px}
.wz-image{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wz-image-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1.6px solid var(--ui-ink,#2b3550);flex:none}
.wz-image-name{font-size:13px;color:#44484e;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-art{background:#fff;border:1.6px solid var(--line);border-radius:14px;min-height:180px;display:grid;place-items:center;overflow:hidden;padding:6px}
.wz-art img{width:100%;height:auto;max-height:min(55vh,420px);object-fit:contain;display:block}
.wz-art-empty{font-size:14px;color:#5a6478}
.wz-art-empty[hidden]{display:none}
.wz-art-small{min-height:0}
.wz-art-small img{max-height:220px}
.wz-art.wz-running{background:linear-gradient(90deg,#eef3f7 25%,#f8fbfd 50%,#eef3f7 75%) 0 0/200% 100%;animation:wz-shimmer 1.4s linear infinite}
@keyframes wz-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.wz-art.wz-running{animation:none}}
.wz-progressbar{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:#13224f}
.wz-bar{flex:0 0 160px;height:10px;border-radius:999px;border:1.6px solid var(--line);background:#fff;overflow:hidden}
.wz-bar i{display:block;height:100%;width:5%;background:#eec247;transition:width .6s}
/* drawings: numbered, each with a remove button, the picked one has a thick ring */
.wz-drafts{display:flex;gap:16px;flex-wrap:wrap}
.wz-draft-item{position:relative}
.wz-drafts .wz-draft-pick{position:relative;padding:3px;border:2px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;width:96px;min-height:44px;line-height:0}
.wz-drafts .wz-draft-pick[aria-pressed="true"]{border:3px solid var(--ui-ink,#2b3550);box-shadow:0 0 0 3px #ffd84a;padding:2px}
.wz-drafts img{width:100%;height:auto;display:block;border-radius:5px}
.wz-draft-num{position:absolute;left:4px;top:4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ui-ink,#2b3550);color:#ffd84a;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.wz-drafts .wz-draft-del{position:absolute;right:-12px;top:-12px;width:36px;height:36px;padding:0;border-radius:50%;border:1.6px solid var(--ui-ink,#2b3550);background:#fff;color:var(--ui-ink,#2b3550);font:700 16px/1 var(--ui-font,system-ui);cursor:pointer}
.wz-drafts .wz-draft-del:hover{background:var(--ui-hl,#fff1b8)}
.wz-credit{background:#fff;border:1.6px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:#10204a}
.wz-credit p{margin:0}
.wz-credit-row,.wz-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Draw again is the second choice once a drawing exists: white, outlined (Next is the main action) */
.wz #wz-draw.wz-again{background:#fff !important;color:var(--ui-ink,#2b3550) !important;border-color:var(--ui-ink,#2b3550) !important}
.wz #wz-draw.wz-again:not(:disabled):hover{background:var(--ui-hl,#fff1b8) !important}
/* UX sweep round 4 item 14: the inline Connect wallet is a card button like Draw and Add balance beside it (the marker
   letters stay on the top bar button only) */
.wz #wz-connect{background:var(--ui-ink,#2b3550) !important;color:var(--ui-yellow,#ffd84a) !important;border-color:var(--ui-ink,#2b3550) !important;font:700 15px/1.2 var(--ui-font,system-ui) !important}
.wz #wz-connect:hover{background:#3a4669 !important}
/* Next before there is a drawing: the outlined second choice, Draw is the main action */
.wz #wz-next.wz-soft:not(:disabled){background:#fff !important;color:var(--ui-ink,#2b3550) !important;border-color:var(--ui-ink,#2b3550) !important}
.wz #wz-next.wz-soft:not(:disabled):hover{background:var(--ui-hl,#fff1b8) !important}
#wz-connect-msg a{color:inherit;text-decoration:underline}
/* UX sweep round 2, wallet 7: balance-chip.js visible() hides the chip only while #wz-balance is really on screen */
.wz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.wz-wide{grid-column:1/-1}
.wz-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.wz-logo{border:1.6px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;background:#fff;margin:0;min-width:0}
.wz-logo legend{font-weight:700;font-size:14px;padding:0 6px}
.wz-logo-prev{position:relative;width:112px;height:112px;flex:none}
.wz-logo-prev svg{display:block;width:112px;height:112px}
.wz-logo-na{position:absolute;inset:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:12px;font-weight:600;color:#44484e;background:rgba(255,255,255,.92);border-radius:8px}
.wz #wz-logo-retry{min-height:30px !important;padding:2px 10px !important;font-size:12px !important;box-shadow:none !important}
.wz-logo-ctl{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.wz-sw-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.wz-sw-row>span{width:78px;flex:none}
.wz-sw{display:flex;gap:6px;flex-wrap:wrap}
.wz-sw button{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.wz-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px #ffe98a,0 0 0 4px var(--ink)}
.wz-inline{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.wz-inline select{width:auto;min-width:9em}
.wz-check{cursor:pointer;min-height:32px;flex-wrap:nowrap !important}
.wz-check input{flex:none}
.wz-check input{cursor:pointer}
.wz-review{display:grid;grid-template-columns:minmax(0,260px) minmax(180px,1fr);gap:18px;align-items:start}
.wz-rv-pics{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.wz-rv-pics .wz-art{width:100%;box-sizing:border-box}
.wz-rv-cap{font-size:14px;font-weight:600;color:#5a6478}
.wz-rv-logo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#5a6478}
.wz-rv-logo img{width:96px;height:96px;display:block}
.wz-dl{margin:0;min-width:180px;width:100%;display:flex;flex-direction:column;gap:8px}
.wz-dl div{display:flex;gap:10px;font-size:15px;align-items:baseline}
.wz-dl dt{width:120px;flex:none;color:#5a6478;font-weight:600}
.wz-dl dd{margin:0;flex:1 1 auto;min-width:0;font-weight:700;color:#13224f;overflow-wrap:anywhere;white-space:pre-line}
.wz-edit{flex:none;font-size:13px;font-weight:700;color:var(--ui-ink,#2b3550);text-decoration:underline;text-underline-offset:3px}
.wz-edit:hover{background:var(--ui-hl,#fff1b8)}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
/* Next always sits on the right, on step 1 too (no Back there) */
.wz #wz-next{margin-left:auto}
.wz .btn{border:1.6px solid var(--line)}
.wz-pick{display:flex;gap:8px;align-items:center}
.wz-pick input[type=text]{width:96px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;padding:6px 8px;border:1.6px solid var(--line);border-radius:10px;background:#fff}
.wz-pick input[type=text].is-bad{border-color:#c0392b}
.wz-pick input[type=color]{width:34px;height:30px;padding:0;border:1.4px solid var(--line);border-radius:8px;background:#fff}
#wz-col-pick{flex:none}
.wz-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wz-parts button{min-width:0;justify-content:center;border:1.6px solid var(--line);border-radius:999px;background:#fff;padding:4px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.wz-parts button i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.wz-parts button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}

/* Below about 1100px the steps column would be squeezed beside the agent: the agent becomes a row above */
/* UX sweep round 4 item 16: the four logo parts in even columns, two by two on narrower screens */
@media (max-width:900px){
  .wz-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .wz-body{grid-template-columns:minmax(0,1fr)}
  .wz-agent{flex-direction:row;align-items:center}
  .wz-cloud{width:84px;max-width:84px;margin:0;flex:none}
}
@media (max-width:1000px){
  /* three link boxes side by side would cut the links off */
  .wz-links{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .wz-review{grid-template-columns:minmax(0,1fr)}
}
/* phone: 16px in every box so the phone does not zoom in on focus (beats the 15px base rule in ui.css) */
@media (max-width:820px){
  #wz.wz :is(input[type=text],input[type=url],input[type=number],input[type=email],input:not([type]),textarea,select){font-size:16px}
}
@media (max-width:760px){
  .wz-grid,.wz-review,.wz-links{grid-template-columns:minmax(0,1fr)}
  .wz-look{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-bar{flex-basis:100px}
  /* phone tap targets: 40 to 44px */
  .wz .wz-look select,.wz .wz-inline select{min-height:44px}
  .wz .wz-parts button{min-height:40px;padding:6px 14px}
  .wz .wz-sw{gap:8px}
  .wz .wz-sw button{width:36px;height:36px}
  .wz .wz-pick input[type=text]{height:44px;min-height:44px}
  .wz .wz-pick input[type=color]{width:44px;height:44px}
  .wz-check{min-height:44px;width:100%}
  .wz .wz-check input#wz-grad{width:22px;height:22px}
  .wz-drafts .wz-draft-pick{width:104px}
  .wz-dl dt{width:104px}
  /* the remove buttons: a phone tap size, with room between the drawings */
  .wz-drafts{gap:16px}
  .wz-drafts .wz-draft-del{width:38px;height:38px;right:-12px;top:-12px;font-size:20px}
  /* the review's Edit links: tap size, outlined */
  .wz-edit{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border:1.6px solid var(--ui-ink,#2b3550);border-radius:var(--ui-r,10px);background:#fff;text-decoration:none;font-size:14px}
}
@media (max-width:560px){
  /* the pills do not fit one row: the count line names the step instead */
  .wz-progress{display:none}
  .wz-count{font-weight:700;color:#13224f;font-size:14px}
  .wz-image{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .wz-image #wz-image-btn{grid-column:1/-1;order:-1}
  /* Draw is the step's main action: full width like Back and Next */
  .wz #wz-draw{width:100%;align-self:stretch}
  /* the inline Connect wallet: full width like Draw under it (UX sweep round 4 item 14) */
  .wz #wz-connect{width:100%}
  /* the logo preview above its controls, so the controls get the full width */
  .wz-logo{flex-direction:column;align-items:center}
  .wz-logo-ctl{width:100%;flex:none}
}
/* UX sweep round 2, create 28: a drawing changed in the manual designer */
.wz-art{position:relative}
.wz-draft-edited{position:absolute;left:6px;bottom:6px;background:#24317a;color:#fff;font-size:12px;font-weight:700;line-height:1;padding:4px 7px;border-radius:999px;pointer-events:none}
/* Step 7, the launch (js/launch.js mounted by js/wizard.js) */
.wz-ln-head{display:flex;align-items:center;gap:14px;min-width:0}
.wz-ln-head img{width:72px;height:72px;flex:none;display:block}
.wz-ln-head img[hidden]{display:none}
.wz-ln-who{min-width:0}
.wz-ln-name{margin:0;font-size:20px;font-weight:800;color:#13224f;overflow-wrap:anywhere}
.wz-ln-quote{background:#fff;border:1.6px solid var(--line);border-radius:12px;padding:12px 14px}
.wz-ln-quote[hidden]{display:none}
.wz-ln-quote dt{width:auto;flex:1 1 auto}
.wz-ln-quote dd{flex:none;text-align:right;white-space:nowrap}
.wz-ln-quote div:last-child{border-top:1.4px dashed var(--line);padding-top:8px}
.wz-ln-bar{flex:1 1 auto;height:14px}
.wz-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1.4px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;color:#13224f;overflow-wrap:anywhere;min-width:0}
.wz-status>span{min-width:0}
.wz-status>span:not(.wz-spinner){flex:1 1 0}
.wz-status[hidden],.wz-spinner[hidden],.wz-ln-token[hidden],.wz-running[hidden],#wz-ln-run[hidden]{display:none}
.wz-status.is-error{color:var(--down);border-color:var(--down)}
.wz-status.is-done{border-color:#2f9e4f}
.wz-spinner{flex:none;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:wz-spin .8s linear infinite}
@keyframes wz-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.wz-spinner{animation-duration:2.4s}}
.wz-ln-token{display:flex;flex-direction:column;gap:10px;padding:12px;border:2px solid var(--ui-ink,#2b3550);border-radius:12px;background:#fff;font-weight:600;min-width:0}
.wz-ln-token .token-addr{display:flex;gap:8px;align-items:center;min-width:0}
.wz-ln-token code{flex:1 1 auto;min-width:0;word-break:break-all;user-select:all;font-size:13px;background:#f6f9fb;border:1.4px solid var(--line);border-radius:8px;padding:8px 10px}
.wz-ln-token .token-copy{flex:none}
.wz-ln-token .token-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wz-ln-token .token-actions .btn{text-align:center;justify-content:center}
/* UX sweep round 4 item 19: Token page is the next step, the one primary button; Explorer and Chart stay outlined */
.wz #wz-ln-page{background:var(--ui-ink,#2b3550) !important;color:var(--ui-yellow,#ffd84a) !important;border-color:var(--ui-ink,#2b3550) !important}
.wz #wz-ln-page:hover{background:#3a4669 !important}
.wz-x-link{font-weight:700;text-decoration:underline;flex:1 1 100%}
.wz.wz-locked .wz-progress li>span{cursor:default}
.wz-running{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;background:#fff8d6;border:1.6px solid var(--ui-ink,#2b3550);border-radius:12px;font-size:14px;font-weight:700;color:#13224f}
.wz-running>span{flex:1 1 220px;min-width:0}
.wz-art-svg{display:block;width:100%;height:auto;max-height:min(55vh,420px)}
.wz-art-small .wz-art-svg{max-height:220px}
.wz-drafts .wz-art-svg{max-height:80px}
@media (max-width:560px){
  .wz-ln-token .token-actions{grid-template-columns:minmax(0,1fr)}
  .wz-ln-acts .btn{width:100%}
}