/* Swap home (swap.html): the nearswaps skin for the swap engine (assets/swap.js, a core file, never edited).
   swap.js finds its parts by id and writes a few class names of its own (.field, .tico, .pick-row, .chip, .receipt,
   .r-row, .xc-*, .ti ...); this file styles those hooks with the brand tokens from brand.css.
   Layout per the canvas boards "Web: home and swap" and "Mobile: swap": hero left, card right, the four feature cells
   underneath; at phone width the card is the page. Motion belongs to assets/motion.css (session 4). */
:root{
  /* Page names for the brand tokens. Change colours in brand.css, not here. swap.js reads --danger and --mint. */
  --bg:var(--ns-ground); --surface:var(--ns-card); --surface-2:var(--ns-raise); --surface-3:var(--ns-raise-2); --surface-4:var(--ns-raise-3);
  --border:var(--ns-line); --line:var(--ns-line); --line-2:var(--ns-line-strong);
  --text:var(--ns-ink); --text-dim:var(--ns-body); --faint:var(--ns-muted);
  --accent:var(--ns-mint); --accent-ink:var(--ns-mint-ink); --mint:var(--ns-mint); --danger:var(--ns-red); --pink:var(--ns-red);
  --up:var(--ns-mint); --down:var(--ns-red); --warn:var(--ns-amber);
}
*{box-sizing:border-box;}
body{margin:0;min-height:100vh;background:var(--ns-ground);color:var(--ns-ink);font-family:var(--ns-font);}
a{color:inherit;text-decoration:none;}
button,input{font-family:inherit;color:inherit;}
[hidden]{display:none !important;}

.sw-page{max-width:1240px;margin:0 auto;padding:0 40px 48px;display:flex;flex-direction:column;}
.sw-page > .topbar{border-bottom:1px solid var(--ns-line);margin:0 -40px;padding:10px 40px;width:auto;}

/* ---------- hero + card ---------- */
.sw-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px;padding:56px 0 48px;}
.sw-hero{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:24px;}
.sw-eyebrow{margin:0;font:600 12px/1.4 var(--ns-font);letter-spacing:var(--ns-track-caps);text-transform:uppercase;color:var(--ns-body);}
.sw-hero h1{margin:0;font-size:clamp(40px,5.2vw,68px);line-height:1;letter-spacing:-0.04em;font-weight:800;max-width:12ch;}
.sw-lead{margin:0;font-size:var(--ns-fs-lg);line-height:1.55;color:var(--ns-body);max-width:520px;}
.sw-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:4px 0 0;padding-top:20px;border-top:1px solid var(--ns-line);max-width:560px;}
.sw-facts div{display:flex;flex-direction:column-reverse;gap:4px;}
.sw-facts dt{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ns-body);}
.sw-facts dd a{color:var(--ns-ink);text-decoration:underline;text-decoration-color:var(--ns-mint);text-underline-offset:4px;}
.sw-facts dd{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ns-ink);}

.card{background:var(--ns-card);border:1px solid var(--ns-line);border-radius:var(--ns-r-lg);}
.sw-card{flex:0 1 440px;width:100%;max-width:440px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.sw-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 4px;}
.sw-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line);background:var(--ns-ground);}
.sw-seg > *{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border:0;border-radius:var(--ns-r-pill);background:none;color:var(--ns-body);font-size:var(--ns-fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;}
.sw-seg > *:hover{color:var(--ns-ink);}
.sw-seg > .on{background:var(--ns-ink);color:var(--ns-ground);}

/* pay / receive boxes */
.field{background:var(--ns-ground);border:1px solid var(--ns-line);border-radius:var(--ns-r-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.field:focus-within{border-color:var(--ns-line-strong);}
.sw-get{border-color:rgb(var(--ns-mint-rgb) / 0.22);}
.lbl{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--ns-fs-xs);color:var(--ns-muted);min-height:20px;}
.lbl label{color:var(--ns-body);}
.lbl .right{display:flex;align-items:center;gap:8px;color:var(--ns-body);}
.max{min-height:28px;padding:0 4px 0 6px;border:0;background:none;color:var(--ns-mint);font:700 var(--ns-fs-xs) var(--ns-font);cursor:pointer;}
.amt{display:flex;align-items:center;gap:12px;}
.amt input{flex:1;min-width:0;background:none;border:0;outline:none;padding:0;color:var(--ns-ink);font-family:var(--ns-mono);font-size:32px;font-weight:500;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
#amountOut{color:var(--ns-mint);}
.amt input::placeholder{color:var(--ns-muted);}
.usd{font-size:var(--ns-fs-xs);color:var(--ns-muted);min-height:16px;}
.tokbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--ns-touch);padding:6px 12px 6px 6px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line);background:var(--ns-raise-2);color:var(--ns-ink);font-size:var(--ns-fs-md);font-weight:700;cursor:pointer;white-space:nowrap;}
.tokbtn:hover{border-color:var(--ns-line-strong);}
.tokbtn .chev{color:var(--ns-muted);font-size:10px;}
.tico{position:relative;width:26px;height:26px;border-radius:50%;background:var(--ns-raise-3);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ns-ink);overflow:visible;flex:none;}
.tico img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.tico>img.chainb{box-shadow:0 0 0 2px var(--ns-card);}
.flip{display:flex;justify-content:center;height:0;position:relative;z-index:1;}
.flip button{width:var(--ns-touch);height:var(--ns-touch);margin-top:-27px;border-radius:50%;border:4px solid var(--ns-card);background:var(--ns-raise-3);color:var(--ns-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.flip button:hover{color:var(--ns-mint);}

/* the cross-chain address box swap.js adds under "You receive" */
.xc-to label{color:var(--ns-body) !important;}
.xc-to input{border-color:var(--ns-line-strong) !important;background:var(--ns-ground) !important;font-family:var(--ns-mono) !important;height:44px !important;}
.xc-wbtn{min-height:36px;border-color:var(--ns-line) !important;background:var(--ns-raise-2) !important;}
.xc-wbtn:hover,.xc-net:hover,.xc-net:focus-visible{border-color:var(--ns-line-strong) !important;}
.xc-net.current{border-color:var(--ns-mint) !important;background:var(--ns-mint-soft) !important;}
.xc-chain{background:var(--ns-mint-soft) !important;color:var(--ns-mint) !important;}

/* details: route, rate, impact, min received, slippage, fee */
.details{display:flex;flex-direction:column;gap:8px;padding:8px 4px 2px;font-size:var(--ns-fs-sm);color:var(--ns-body);}
.details .d{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.details .d > span:first-child{flex:none;}
.details .d b{color:var(--ns-ink);font-weight:500;font-size:var(--ns-fs-xs);text-align:right;word-break:break-word;font-family:var(--ns-mono);font-variant-numeric:tabular-nums;}
.d-route .rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;}
.d-route small{font-size:11px;color:var(--ns-muted);}
.slip{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;}
.chip{min-height:32px;padding:0 9px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line);background:transparent;color:var(--ns-body);font:600 11px var(--ns-mono);cursor:pointer;}
.chip.on{border-color:var(--ns-mint);color:var(--ns-mint);}
.slip-custom{width:72px;outline:none;text-align:center;}
.slip-custom:focus{border-color:var(--ns-line-strong);color:var(--ns-ink);}
.slip-custom:focus-visible{outline:2px solid var(--ns-mint);outline-offset:1px;}   /* the border change alone was faint (audit 5.10) */
.slip-warn{font-size:var(--ns-fs-xs);color:var(--ns-red);line-height:1.5;}

/* the primary action */
.btn{width:100%;min-height:56px;padding:16px;border-radius:var(--ns-r-md);border:0;background:var(--ns-mint);color:var(--ns-mint-ink);font-size:var(--ns-fs-lg);font-weight:800;letter-spacing:-0.01em;cursor:pointer;margin-top:4px;}
.btn:disabled{background:var(--ns-raise-3);color:var(--ns-muted);cursor:not-allowed;}
.btn.secondary{min-height:var(--ns-touch);background:transparent;border:1px solid var(--ns-line);color:var(--ns-ink);font-size:var(--ns-fs-sm);padding:11px;}
.sw-cardnote{margin:2px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--ns-body);}
.sw-cardnote a{color:var(--ns-ink);text-decoration:underline;text-underline-offset:2px;}
.status{font-size:var(--ns-fs-sm);padding:10px 12px;border-radius:var(--ns-r-sm);display:none;line-height:1.5;border:1px solid var(--ns-line);}
.status.show{display:block;}
.status.info,.status.ok{color:var(--ns-ink);background:var(--ns-raise);}
.status.error{color:var(--ns-red);border-color:rgb(var(--ns-red-rgb) / 0.3);background:var(--ns-red-soft);}

.receipt{border:1px solid rgb(var(--ns-mint-rgb) / 0.3);border-radius:var(--ns-r-md);padding:16px;display:flex;flex-direction:column;}
.receipt h2{font-size:var(--ns-fs-md);margin:0 0 10px;color:var(--ns-mint);}
.r-row{display:flex;justify-content:space-between;gap:12px;font-size:var(--ns-fs-sm);padding:7px 0;border-bottom:1px solid var(--ns-line);}
.r-row span:first-child{color:var(--ns-body);}
.r-row span:last-child{text-align:right;font-family:var(--ns-mono);font-variant-numeric:tabular-nums;word-break:break-word;}
.r-row .big{font-size:var(--ns-fs-md);font-weight:600;}
.receipt .txs{font-size:var(--ns-fs-xs);margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.receipt .txs a,.receipt .note a{color:var(--ns-mint);text-decoration:underline;}
.receipt .note{font-size:var(--ns-fs-xs);color:var(--ns-body);margin:10px 0 0;line-height:1.5;}
.receipt .btn{margin-top:12px;}
.receipt a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none;}

/* ---------- trending (desktop only) ---------- */
.trend{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--ns-line);overflow:hidden;}
.trend-k{flex:none;font:500 var(--ns-fs-2xs) var(--ns-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-muted);white-space:nowrap;}
.trend-k small{font-size:inherit;margin-left:4px;}
.trend-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
.trend-track{display:flex;gap:8px;width:max-content;}   /* its scroll: assets/motion.css */
.ti{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px 0 5px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line);background:transparent;color:var(--ns-ink);font:600 12px var(--ns-font);cursor:pointer;white-space:nowrap;}
.ti:hover{border-color:var(--ns-line-strong);}
.ti .rk{color:var(--ns-muted);font-family:var(--ns-mono);}
.ti .tico{width:20px;height:20px;font-size:10px;}
.ti .v{color:var(--ns-body);font-family:var(--ns-mono);font-variant-numeric:tabular-nums;}
.ti .up{color:var(--ns-mint);} .ti .dn{color:var(--ns-red);}

/* ---------- the four feature cells ---------- */
/* Six cells (3 x 2), hairlines between them drawn by the 1 px gaps over the line colour. */
.sw-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ns-line);border:1px solid var(--ns-line);border-radius:16px;overflow:hidden;}
.sw-cell{display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:var(--ns-ground);text-decoration:none;}
.sw-cell b{font-size:var(--ns-fs-md);font-weight:700;color:var(--ns-ink);}
.sw-cell span{font-size:var(--ns-fs-sm);line-height:1.5;color:var(--ns-body);}
.sw-cell:hover b{color:var(--ns-mint);}

.foot{max-width:72ch;margin:28px auto 0;font-size:13px;color:var(--ns-body);text-align:left;line-height:1.65;}
.foot a{color:var(--ns-body);text-decoration:underline;text-underline-offset:2px;}

/* ---------- token picker ---------- */
.picker{position:fixed;inset:0;z-index:70;background:rgb(var(--ns-ground-rgb) / 0.78);display:flex;align-items:center;justify-content:center;padding:16px;}
.pick-box{width:100%;max-width:420px;max-height:min(640px,90vh);background:var(--ns-card);border:1px solid var(--ns-line-strong);border-radius:var(--ns-r-lg);display:flex;flex-direction:column;overflow:hidden;}
.pick-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px 18px;}
.pick-head h2{margin:0;font-size:var(--ns-fs-md);}
.pick-head button{width:var(--ns-touch);height:var(--ns-touch);border:0;background:none;color:var(--ns-body);font-size:22px;cursor:pointer;}
.pick-search{margin:0 16px 10px;min-height:var(--ns-touch);padding:0 14px;border-radius:var(--ns-r-sm);border:1px solid var(--ns-line);background:var(--ns-ground);color:var(--ns-ink);font-size:var(--ns-fs-md);outline:none;}
.pick-search:focus{border-color:var(--ns-line-strong);}
.pick-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 16px 10px;padding:3px;border-radius:var(--ns-r-sm);border:1px solid var(--ns-line);background:var(--ns-ground);}
.pick-tab{min-width:0;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;border:0;border-radius:7px;background:none;color:var(--ns-body);font:700 12px var(--ns-font);cursor:pointer;white-space:nowrap;}
.pick-tab:hover{color:var(--ns-ink);}
.pick-tab.on{background:var(--ns-raise-3);color:var(--ns-ink);}
.pick-tab img{width:14px;height:14px;border-radius:4px;flex:none;}
.pick-tab .cnt{font:500 10px var(--ns-mono);color:var(--ns-muted);}
.pick-tab.on .cnt{color:var(--ns-mint);}
.pick-list{overflow-y:auto;padding:0 8px 12px;}
.pick-intro{display:flex;align-items:flex-start;gap:8px;margin:2px 8px 8px;padding:9px 11px;border-radius:var(--ns-r-sm);border:1px solid var(--ns-line);font-size:var(--ns-fs-xs);line-height:1.45;color:var(--ns-body);}
.pick-intro img{width:16px;height:16px;border-radius:4px;flex:none;margin-top:1px;}
.pick-intro b{color:var(--ns-ink);}
.pick-sec{display:flex;align-items:center;margin:10px 10px 4px;font:500 10px var(--ns-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--ns-muted);}
.pick-empty{padding:18px 12px;font-size:var(--ns-fs-sm);color:var(--ns-body);text-align:center;line-height:1.5;}
.pick-empty button{border:0;background:none;color:var(--ns-mint);font:inherit;font-weight:700;cursor:pointer;padding:0;}
.pick-row{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--ns-r-sm);border:0;background:none;color:var(--ns-ink);cursor:pointer;text-align:left;font-size:var(--ns-fs-sm);}
.pick-row:hover{background:var(--ns-raise-2);}
.pick-row.current{background:var(--ns-mint-soft);}
.pick-row .tico{width:34px;height:34px;}
.pick-mid{flex:1;min-width:0;display:flex;flex-direction:column;}
.pick-mid small{font-size:11px;color:var(--ns-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pick-bal,.pick-px{font-family:var(--ns-mono);font-size:12px;color:var(--ns-body);font-variant-numeric:tabular-nums;}
.pick-px small{color:var(--ns-muted) !important;}
.pick-note{font-size:11px;color:var(--ns-muted);padding:0 18px 14px;line-height:1.5;}
.tag-shards,.tag-nearly,.tag-hoot,.tag-intear,.tag-new,.tag-via{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--ns-r-pill);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;vertical-align:2px;background:rgb(var(--ns-fg-rgb) / 0.06);color:var(--ns-body);}
.tag-shards{padding-left:17px !important;background:url(shards-logo.webp) 4px center/11px 11px no-repeat,rgb(var(--ns-fg-rgb) / 0.06);}
.tag-nearly{padding-left:17px !important;background:url(nearly-logo.svg) 4px center/11px 11px no-repeat,rgb(var(--ns-fg-rgb) / 0.06);}
.tag-hoot{padding-left:17px !important;background:url(https://justhoot.fun/logo.png) 4px center/11px 11px no-repeat,rgb(var(--ns-fg-rgb) / 0.06);}
.tag-intear{padding-left:17px !important;background:url(intear-launch-logo.svg) 4px center/11px 11px no-repeat,rgb(var(--ns-fg-rgb) / 0.06);}
.tag-new{background:var(--ns-mint-soft);color:var(--ns-mint);}
.shards-logo,.nearly-logo,.hoot-logo,.intear-logo,.intents-logo{width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin:0 2px;}
.xc-nets .xc-net{min-height:32px;}

p a:not([class]),.note a:not([class]){text-decoration:underline;text-underline-offset:2px;}

/* ---------- widths ---------- */
@media (max-width:1080px){
  .sw-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .sw-main{padding-top:32px;gap:32px;}
  .sw-hero{flex-basis:100%;align-items:center;text-align:center;}
  .sw-hero h1{max-width:none;}
  .sw-facts{justify-content:center;}
}
/* Phone: the card is the page. The hero shrinks to its eyebrow, the card loses its frame. */
@media (max-width:760px){
  .sw-page{padding:0 var(--ns-gutter) 24px;}
  .sw-page > .topbar{margin:0 calc(-1 * var(--ns-gutter));padding:6px var(--ns-gutter);}
  .sw-main{padding:12px 0 20px;gap:0;}
  .sw-hero{display:none;}
  .sw-card{max-width:none;flex-basis:100%;padding:0;border:0;background:none;border-radius:0;}
  .field{background:var(--ns-card);border-radius:20px;}
  .flip button{border-color:var(--ns-ground);}
  .amt input{font-size:34px;}
  #amountOut{font-size:30px;}
  .btn{min-height:58px;border-radius:18px;}
  .trend{display:none !important;}
  .sw-strip{grid-template-columns:1fr 1fr;}
  .sw-cell{padding:16px 14px;}
  .foot{text-align:left;margin-top:20px;}
  .picker{align-items:flex-end;padding:0;}
  .pick-box{max-width:none;max-height:88vh;border-radius:var(--ns-r-lg) var(--ns-r-lg) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);}
}
@media (max-width:380px){
  .sw-seg > *{padding:0 11px;}
  .amt input{font-size:28px;}
  #amountOut{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){ .trend-view{overflow-x:auto;} }

/* Phones and touch screens: every control at least 44 px tall (spec rule 6); the slippage choices get their own row. */
@media (max-width:760px),(pointer:coarse){
  .chip,.sw-seg > *,.ti,.max,.pick-tab,.xc-nets .xc-net,.xc-wbtn{min-height:44px;}
  .max{padding:0 10px;}
}
@media (max-width:760px){
  .d:has(> .slip){flex-wrap:wrap;row-gap:8px;}
  .d > .slip{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
  .d > .slip .chip{width:100%;min-width:0;padding:0 4px;font-size:12px;}   /* min-width:0: the Custom box fits its column (audit 3.7) */
  .sw-cardnote{text-align:left;}
}