/* ============================================================
   Launchpad pages (Coins, Launch, Coin). Builds on styles.css
   tokens so it reads as the same site.
   ============================================================ */

/* nav: the launchpad links stay visible on phones */
.lp-links a.is-here{color:var(--ink);background:rgba(22,36,26,.06)}
@media (max-width:900px){
  .nav-links.lp-links{display:flex;flex:1;justify-content:flex-end;margin-right:4px}
  .lp-links .lp-home{display:none}
}
@media (max-width:560px){
  .nav-links a{padding:8px 10px}
  #nav-name{display:none}
}
/* the home page's extra launchpad links (only shown on phones) */
.nav-lp{display:none}
@media (max-width:900px){.nav-lp{display:inline-flex;margin-left:auto} .nav-lp ~ #nav-chart{margin-left:0}}

.lp-main{min-height:70vh;padding-bottom:72px}
.lp-card{
  background:var(--card);border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--shadow);padding:var(--pad);
}
.lp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:56px;padding-bottom:28px}
.lp-head h1{font-size:clamp(36px,5vw,56px);margin-top:10px}
.lp-sub{color:var(--ink-2);max-width:56ch;margin-top:12px;font-size:15px}
.lp-foot-note{margin-top:20px;font-size:12px;color:var(--ink-3);text-align:center}

/* ---------------- board ---------------- */
.lp-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.lp-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--edge);overflow-x:auto;max-width:100%}
.lp-tabs button{
  border:0;background:none;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lp-tabs button:hover{color:var(--ink)}
.lp-tabs button.is-on{background:var(--ink);color:#F6FBF5}
.lp-search{
  display:flex;align-items:center;gap:8px;flex:1;max-width:340px;min-width:200px;
  background:rgba(255,255,255,.78);border:1px solid var(--line-2);border-radius:999px;padding:0 16px;height:44px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lp-search:focus-within{border-color:var(--ink);background:#fff}
.lp-search svg{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;flex:none}
.lp-search input{border:0;outline:0;background:none;flex:1;min-width:0;font-size:14px}

.coin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:980px){.coin-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.coin-grid{grid-template-columns:1fr}}

.coin-card{
  display:flex;gap:14px;align-items:flex-start;min-width:0;
  background:var(--card);border:1px solid var(--edge);border-radius:22px;padding:16px;box-shadow:var(--shadow);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  animation:rise .6s var(--ease) backwards;
}
@media (hover:hover){a.coin-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#fff}}
.coin-card.skel{height:132px;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{50%{opacity:.55}}
.coin-img{
  width:76px;height:76px;flex:none;border-radius:18px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#DDF3D9,#BFE6B9);color:var(--green-deep);font-weight:800;font-size:26px;
  box-shadow:inset 0 0 0 1px rgba(22,36,26,.06);
}
.coin-img img{width:100%;height:100%;object-fit:cover;display:block}
.coin-img.lg{width:92px;height:92px;border-radius:24px;font-size:32px}
.coin-body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.coin-top{display:flex;align-items:baseline;gap:7px;min-width:0}
.coin-top b{font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coin-sym{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.coin-desc{font-size:12.5px;color:var(--ink-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.coin-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3);margin-top:2px}
.coin-meta b{color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:12.5px}
.bar{display:block;height:7px;border-radius:99px;background:rgba(22,36,26,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--green),#5DBB63);transition:width .8s var(--ease)}
.coin-prog{font-size:11.5px;color:var(--ink-3)}
.coin-card .grad-tag{font-size:11px;font-weight:800;color:var(--green-deep);letter-spacing:.04em}

.lp-empty{grid-column:1/-1;text-align:center;padding:48px 24px}
.lp-empty h2{font-size:24px}
.lp-empty p{color:var(--ink-2);margin:10px auto 20px;max-width:46ch}

/* ---------------- launch ---------------- */
.launch-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.launch-grid{grid-template-columns:1fr}}
.launch-form{display:flex;flex-direction:column;gap:16px}
.lf-row{display:flex;gap:16px;align-items:stretch}
.lf-stack{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.lf-drop{
  width:148px;flex:none;border-radius:22px;border:1.5px dashed var(--line-2);background:rgba(255,255,255,.55);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;position:relative;min-height:148px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lf-drop:hover,.lf-drop.is-over{border-color:var(--ink);background:#fff}
.lf-drop-in{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px}
.lf-drop-in svg{width:26px;height:26px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.lf-drop-in b{font-size:13.5px}
.lf-drop-in i{font-style:normal;font-size:11px;color:var(--ink-3)}
.lf-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:520px){.lf-row{flex-direction:column}.lf-drop{width:100%;min-height:170px}}

.lf-field{display:flex;flex-direction:column;gap:6px}
.lf-field > span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.lf-field > span i,.lf-more summary i{font-style:normal;font-weight:500;color:var(--ink-3)}
.lf-field small{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.lf-field input,.lf-field textarea,.lf-sol{
  width:100%;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.85);
  padding:12px 14px;font-size:15px;outline:0;resize:vertical;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.lf-field input:focus,.lf-field textarea:focus,.lf-sol:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(22,36,26,.06)}
.lf-field .is-bad,.lf-sol.is-bad{border-color:var(--down)}
.lf-sol{display:flex;align-items:center;gap:10px;padding:0 14px}
.lf-sol input{border:0 !important;background:none !important;box-shadow:none !important;padding:12px 0;flex:1;min-width:0;font-family:"JetBrains Mono",monospace;font-size:17px}
.lf-sol b{font-size:13px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.lf-more{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.lf-more summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);list-style:none}
.lf-more summary::-webkit-details-marker{display:none}
.lf-more summary::before{content:"+";display:inline-block;width:16px;font-weight:800}
.lf-more[open] summary::before{content:"–"}
.lf-more .lf-field{margin-top:12px}
.lf-go{width:100%}
.lf-cost{font-size:12px;color:var(--ink-3);text-align:center;margin-top:-6px}
.lf-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lf-steps li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-3)}
.lf-steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;box-sizing:border-box}
.lf-steps li.is-now{color:var(--ink);font-weight:700}
.lf-steps li.is-now::before{border-color:var(--ink);border-right-color:transparent;animation:spin .8s linear infinite}
.lf-steps li.is-done{color:var(--ink-2)}
.lf-steps li.is-done::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}

.launch-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:100px}
@media (max-width:900px){.launch-side{position:static}}
.coin-card.is-preview{animation:none}
.terms ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.terms li{font-size:13.5px;color:var(--ink-2);padding-left:20px;position:relative;line-height:1.5}
.terms li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.terms b{color:var(--ink)}

/* ---------------- coin page ---------------- */
.cn-head{display:flex;gap:18px;align-items:center;padding-top:44px;flex-wrap:wrap}
.cn-title{flex:1;min-width:220px}
.cn-title h1{font-size:clamp(28px,4vw,40px);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cn-title .coin-sym{font-size:16px}
.cn-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.75);border:1px solid var(--edge);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap
}
button.chip,a.chip{cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
button.chip:hover,a.chip:hover{background:#fff;color:var(--ink)}
#cn-links{display:contents}
.cn-desc{margin-top:16px;color:var(--ink-2);max-width:70ch;white-space:pre-line;overflow-wrap:anywhere}
.cn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:24px}
@media (max-width:900px){.cn-stats{grid-template-columns:1fr 1fr}}
.cn-stat{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.cn-stat > span{font-size:12px;font-weight:700;color:var(--ink-3);display:flex;justify-content:space-between}
.cn-stat > span em{font-style:normal;color:var(--ink)}
.cn-stat b{font-family:"JetBrains Mono",monospace;font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cn-prog{justify-content:center}
.cn-prog .bar{height:10px}
.cn-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--gap);margin-top:var(--gap);align-items:start}
@media (max-width:980px){.cn-grid{grid-template-columns:1fr}}
.cn-chart{padding:0;overflow:hidden;min-height:520px;display:flex}
.cn-chart iframe{border:0;width:100%;min-height:520px;flex:1}
.cn-chart-empty{margin:auto;text-align:center;display:flex;flex-direction:column;gap:6px;padding:24px;max-width:36ch}
.cn-chart-empty span{color:var(--ink-3);font-size:13px}
@media (max-width:980px){.cn-chart,.cn-chart iframe{min-height:420px}}
.cn-side{display:flex;flex-direction:column;gap:var(--gap)}
.cn-missing{text-align:center;margin-top:64px;padding:48px 24px}
.cn-missing .pill{margin-top:20px}

.trade{display:flex;flex-direction:column;gap:14px}
.tr-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(22,36,26,.05)}
.tr-tabs button{border:0;background:none;border-radius:999px;padding:10px;font-weight:800;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tr-tabs button.is-on.buy{background:var(--green);color:#fff}
.tr-tabs button.is-on.sell{background:var(--down);color:#fff}
.tr-in{display:flex;flex-direction:column;gap:6px}
.tr-lbl{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.tr-bal{border:0;background:none;padding:0;font-size:12px;color:var(--ink-3);cursor:pointer;font-family:"JetBrains Mono",monospace}
.tr-bal:hover{color:var(--ink)}
.tr-quick{display:flex;gap:6px;flex-wrap:wrap}
.tr-quick button{flex:1;border:1px solid var(--line-2);background:rgba(255,255,255,.7);border-radius:999px;padding:7px 0;font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tr-quick button:hover{background:#fff;border-color:var(--ink-3)}
.tr-out{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(22,36,26,.04);font-size:13px;color:var(--ink-2)}
.tr-out b{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.tr-slip{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-3)}
.tr-slip-opts{display:flex;gap:4px}
.tr-slip-opts button{border:1px solid transparent;background:none;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--ink-3);cursor:pointer}
.tr-slip-opts button.is-on{border-color:var(--line-2);background:#fff;color:var(--ink)}
.tr-go{width:100%}
.tr-go.sell{background:var(--down);border-color:var(--down)}
.tr-go.sell:hover{background:#9E2F22;border-color:#9E2F22}
.tr-note{font-size:11.5px;color:var(--ink-3);text-align:center}
.tr-grad p:not(.eyebrow){color:var(--ink-2);font-size:14px}
.creator{display:flex;flex-direction:column;gap:10px}
.cr-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--ink-2)}
.cr-line b{font-family:"JetBrains Mono",monospace;font-size:17px;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .coin-card,.coin-card.skel{animation:none}
  a.coin-card:hover{transform:none}
  .lf-steps li.is-now::before{animation:none}
}