/* /pump-fun-new-pairs only, on top of /paper-trading/paper-trading.css. The page is about a board of launches, so it
   opens on one: Trenches' three columns, each card drawn the way the app draws it. Every size, colour and breakpoint
   of the board below is the app's own (app/src/styles/scope.css, app/src/pages/discover/Scope.tsx,
   app/src/narrative/scopeModel.ts; tests/landing-pages.test.mjs holds the two equal). Green is the curve and money
   up, orange a warning and money down, violet the tracked traders, and nothing else on this page wears them but the
   button. Static page, no script. */

/* ---- first screen: the headline, then the words beside the button, then the board ---- */
.nb-hero{ padding:40px 0 64px; }
/* no wash behind this first screen: the board sits on the page as it sits in the app */
.nb-hero::before{ content:none; }
.nb-hero h1{ font-size:clamp(34px, 4.6vw, 58px); max-width:none; text-wrap:balance; }
.nb-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:20px; }
.nb-hero .lede{ margin:0; max-width:36em; }
.nb-hero .cta{ margin-top:0; }
.nb-art{ margin:36px 0 0; min-width:0; }
.nb-cap{ margin:14px 0 0; max-width:52em; font:500 13px/1.5 var(--sans); color:var(--muted); }
@media (min-width:1000px){
  .nb-hero{ padding:52px 0 76px; }
  .nb-top{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:48px; align-items:end; }
}
.nb-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---- the app's marks, shared by the board, the steps, the four parts and the worked example ---- */
.nb-board, .nb-one, .nb-parts, .nb-read, .nb-steps{ --g1:#0d0b1c; --g2:#161522; --up:#21c95e; --dn:#ff622e; --mut:#9899a3; --lt:#c9c9d1; --vio:#8b58e4; }
.nb-board, .nb-one, .nb-parts, .nb-read{ font-variant-numeric:tabular-nums; letter-spacing:-.12px; }
.nb-board b, .nb-one b, .nb-parts b, .nb-read b{ font-weight:500; }
.nb-board i, .nb-one i, .nb-parts i, .nb-read i{ font-style:normal; }
.nb-ic{ display:block; flex:none; width:13px; height:13px; fill:currentColor; }
/* the SOL mark, sized by the text beside it as the app sizes it */
.nb-sol{ display:inline-block; flex:none; width:min(.46em, 12px); height:min(.4em, 10px); margin:0 0 0 min(.18em, 5px); vertical-align:min(.1em, 2px); background-color:currentColor; opacity:.55;
  -webkit-mask:url(/pump-fun-new-pairs/img/sol-mark.svg) center / contain no-repeat; mask:url(/pump-fun-new-pairs/img/sol-mark.svg) center / contain no-repeat; }
/* a logo in its curve ring: green to the curve now, fainter green to its highest; a graduated token has no ring.
   The corner pill says where it launched. */
.nb-logo{ position:relative; display:block; flex:none; box-sizing:border-box; width:94px; height:94px; padding:2px; border-radius:18px; background:rgba(203,208,235,.08); }
.nb-logo.ring{ background:conic-gradient(var(--up) calc(var(--c) * 1%), rgba(33,201,94,.32) 0 calc(var(--a) * 1%), rgba(203,208,235,.10) 0); }
.nb-logo > b{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:100%; border:2px solid var(--g2); border-radius:16px; background:#16151f; color:var(--mut); font:600 20px/1 var(--sans); letter-spacing:0; }
.nb-logo::after{ content:""; position:absolute; right:-3px; bottom:-3px; width:18px; height:18px; border-radius:6px; border:2px solid var(--g2); background:var(--g2) url(/venues/pumpfun.b5dc9c5b.png) center / 14px no-repeat; }
/* an audit pill: grey is a fact, orange a warning */
.nb-pill{ display:flex; align-items:center; gap:3px; flex:none; height:20px; padding:0 6px; border-radius:6px; background:var(--g2); color:var(--mut); font:500 12px/1.5 var(--sans); white-space:nowrap; }
.nb-pill b{ color:var(--lt); }
.nb-pill b i{ padding:0 4px; }
.nb-pill.warn{ background:rgba(255,98,46,.12); color:var(--dn); }
.nb-pill.warn b{ color:var(--dn); }
/* a vital: holders, the pro share, the dev's record under a crown */
.nb-fact{ display:flex; align-items:center; gap:3px; flex:none; height:18px; color:var(--mut); font:500 12px/1.5 var(--sans); white-space:nowrap; }
.nb-fact b{ font-size:14px; color:var(--lt); }
.nb-fact.good, .nb-fact.good b{ color:var(--up); }
/* tracked traders in the token: their count in violet, their net flow in money colour */
.nb-edge{ display:flex; align-items:center; gap:3px; flex:none; height:18px; color:var(--vio); font:500 12px/1.5 var(--sans); white-space:nowrap; }
.nb-edge b{ font-size:14px; }
.nb-edge b.up{ color:var(--up); }
/* the Alpha score with its word, and its top reason on a line of its own */
.nb-vd{ display:flex; align-items:center; gap:5px; flex:none; height:20px; }
.nb-sc{ font:600 14px/20px var(--sans); letter-spacing:0; }
.nb-sc.up{ color:var(--up); }
.nb-sc.warn{ color:#f8f8f8; }
.nb-sc.dn{ color:var(--dn); }
.nb-word{ min-width:4.4em; color:var(--mut); font:500 12px/1.5 var(--sans); letter-spacing:0; }
.nb-why{ display:block; flex:none; box-sizing:border-box; max-width:100%; height:20px; padding:0 6px; border-radius:6px; background:var(--g2); color:var(--mut); font:500 12px/20px var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- a launch card: 120 tall, the logo, three lines, the market figures and Buy ---- */
.nb-col, .nb-one{ container-type:inline-size; min-width:0; }
.nb-card{ display:grid; grid-template-columns:94px minmax(0, 1fr) auto; grid-template-rows:54px 36px; column-gap:10px; row-gap:4px; align-items:stretch; box-sizing:border-box; height:120px; padding:12px 16px 14px;
  border-radius:12px; background:var(--g1); overflow:hidden; color:#b9bac5; font:400 12px/17.4px var(--sans); }
.nb-card + .nb-card{ margin-top:8px; }
.nb-card > .nb-logo{ grid-column:1; grid-row:1 / 3; }
.nb-main{ grid-column:2; grid-row:1 / 3; display:flex; flex-direction:column; gap:5px; min-width:0; height:94px; }
/* one 20 px line that drops whole: what does not fit wraps out of sight */
.nb-l1{ display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; flex:none; height:20px; min-width:0; white-space:nowrap; overflow:hidden; }
.nb-sym{ flex:0 1 auto; min-width:3ch; max-width:min(11ch, calc(100% - 40px)); overflow:hidden; text-overflow:ellipsis; color:#f8f8f8; font:600 16px/1.5 var(--sans); }
.nb-card .nb-sym{ font-weight:600; }
.nb-age{ flex:none; color:var(--mut); font:500 12px/1.5 var(--sans); }
.nb-m5{ flex:none; color:#76778a; font:500 12px/1.5 var(--sans); white-space:nowrap; }
.nb-m5 b{ font-size:14px; }
.nb-m5 b.up{ color:var(--up); }
.nb-m5 b.dn{ color:var(--dn); }
.nb-m5.b{ display:none; }
.nb-l2{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; flex:none; height:20px; min-width:0; overflow:hidden; }
.nb-l3{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:none; height:44px; min-width:0; overflow:hidden; white-space:nowrap; }
.nb-vline{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; max-width:100%; height:20px; min-width:0; overflow:hidden; line-height:20px; }
.nb-mkt{ grid-column:3; grid-row:1; display:flex; flex-direction:column; gap:1px; min-width:124px; padding-top:1px; color:var(--lt); font:500 14px/16px var(--sans); text-align:right; white-space:nowrap; }
.nb-mkt i{ margin-right:4px; color:var(--mut); font-size:12px; }
.nb-mc{ color:#f8f8f8; font:600 16px/20px var(--sans); }
.nb-mkt b.up{ color:var(--up); }
.nb-mkt b.dn{ color:var(--dn); }
.nb-vf{ display:flex; justify-content:flex-end; gap:6px; }
.nb-vf .nb-sol{ margin:0 3px 0 0; }
.nb-buy{ grid-column:3; grid-row:2; align-self:center; justify-self:end; display:flex; align-items:center; box-sizing:border-box; height:36px; padding:0 12px; border:1px solid transparent; border-radius:8px;
  background:var(--g2); color:#f8f8f8; font:500 14px/1 var(--sans); white-space:nowrap; }
.nb-buy .nb-sol{ color:var(--mut); }
/* a narrow column, 359 and under: the small logo, the 5m move on the second line, the market block at 112 */
@container (max-width: 359px){
  .nb-card{ grid-template-columns:56px minmax(0, 1fr) auto; column-gap:6px; padding-left:8px; padding-right:8px; }
  .nb-card > .nb-logo{ width:56px; height:56px; border-radius:16px; align-self:start; }
  .nb-card > .nb-logo > b{ border-radius:13px; font-size:16px; }
  .nb-sym{ font-size:14px; max-width:min(11ch, calc(100% - 34px)); }
  .nb-m5.a{ display:none; }
  .nb-m5.b{ display:inline-flex; gap:4px; }
  .nb-mkt{ min-width:112px; }
}

/* ---- the board: three columns 16 apart, each under its name, its count, its buy amount and its filter ---- */
.nb-board{ color:#f8f8f8; }
.nb-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.nb-head{ display:flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 16px; }
.nb-head > b{ font:600 16px/1.5 var(--sans); letter-spacing:-.01em; }
.nb-n{ color:var(--mut); font:500 13px/1.5 var(--sans); }
/* the column's buy amount and its filter keep together at the end of the row */
.nb-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.nb-amt{ display:flex; align-items:center; gap:5px; box-sizing:border-box; height:28px; padding:0 8px 0 10px; border:1px solid rgba(203,208,235,.18); border-radius:8px; font:600 12px/1 var(--sans); }
.nb-amt svg{ display:block; width:13px; height:13px; fill:none; stroke:#9899a3; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.nb-fbtn{ display:flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:8px; background:var(--g2); color:var(--mut); }
.nb-fbtn .nb-ic{ width:16px; height:16px; }
/* under 900 of board the app shows one column under tabs, and so does this */
.nb-tabs{ display:none; flex-wrap:wrap; align-items:center; gap:8px 4px; padding:4px 0 8px; }
.nb-tab{ display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:6px; color:var(--mut); font:500 14px/1 var(--sans); }
.nb-tab .nb-n{ font-size:12px; }
.nb-tab.on{ background:rgba(203,208,235,.12); color:#fff; }
@media (max-width:955.98px){
  .nb-tabs{ display:flex; }
  .nb-head{ display:none; }
  .nb-cols{ grid-template-columns:minmax(0, 1fr); }
  .nb-col:not(.new){ display:none; }
}

/* the one moving thing on the page: each curve ring fills to its mark, once */
@property --c{ syntax:'<number>'; inherits:false; initial-value:0; }
@property --a{ syntax:'<number>'; inherits:false; initial-value:0; }
@media (prefers-reduced-motion: no-preference){
  .nb-board .nb-logo.ring{ animation:nb-ring 1.1s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i) * 110ms + 250ms); }
}
@keyframes nb-ring{ from{ --c:0; --a:0; } }

/* ---- the steps: each wears a ring a fifth further round, and the last one is full ---- */
.nb-steps{ list-style:none; margin:40px 0 0; padding:0; counter-reset:s; display:grid; grid-template-columns:minmax(0,1fr); gap:28px 48px; }
@media (min-width:900px){ .nb-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.nb-steps li{ counter-increment:s; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; align-items:start; }
.nb-steps li::before{ content:counter(s); grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:48px; height:48px; border:2px solid transparent; border-radius:14px;
  background:linear-gradient(#16151f, #16151f) padding-box, conic-gradient(var(--up) calc(var(--p) * 1%), rgba(203,208,235,.10) 0) border-box; box-shadow:inset 0 0 0 2px var(--ink);
  color:var(--w); font:600 16px/1 var(--sans); font-variant-numeric:tabular-nums; }
.nb-steps h3{ margin:2px 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.nb-steps p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:40em; }

/* ---- what is on the card: each part as the card draws it, then what it says ---- */
.nb-parts{ margin:36px 0 0; border-top:1px solid var(--line); }
.nb-parts > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:22px 0; border-bottom:1px solid var(--line); }
@media (min-width:800px){ .nb-parts > div{ grid-template-columns:300px minmax(0,1fr); gap:32px; align-items:center; } }
.nb-part{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* a part shown on its own is drawn a third larger than on the card, so it reads at arm's length */
.nb-part > :not(.nb-logo){ zoom:1.3; }
.nb-parts h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.nb-parts p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:44em; }

/* ---- the worked example: the card whole, then the four things to read on it ---- */
.nb-one{ max-width:620px; margin:36px 0 0; }
.nb-one + .nb-cap{ max-width:620px; }
.nb-read{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:28px 32px; }
@media (min-width:640px){ .nb-read{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .nb-read{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.nb-read .nb-part{ height:56px; margin-bottom:14px; }
.nb-read .nb-logo{ width:56px; height:56px; border-radius:16px; }
.nb-read .nb-logo > b{ border-radius:13px; font-size:16px; }
.nb-read h3{ margin:0 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.nb-read p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:30em; }