/* ============================================================
   Noctis Swap — shell
   Everything here draws with tokens.css. No colour literal
   belongs in this file: if a value is not a var(--…), it is
   either a measurement or a bug.

   Geometry is the launchpad's, value for value — the design
   pack's shell spec and the live noctis.zone shell already
   agree (238px rail, 32px ticker, rows flex:1 1 0 between
   22px and 44px). Read that as one design system with two
   front doors, not as a copy.
   ============================================================ */

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, figure { margin: 0; }
button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
img { max-width: 100%; }

body {
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

/* The document itself never scrolls — only the content column does. */
html, body { height: 100%; overflow: hidden; }

.ns-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ns-sr:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	z-index: 100;
}

/* Shell ------------------------------------------------------------------- */
/* dvh, with vh underneath it for anything that does not know the unit. A
   phone browser's own toolbars come and go, and 100vh is measured with them
   gone -- so a shell sized in vh keeps its last pixels under the toolbar for
   the whole visit, and on a phone those pixels are the tab bar. */
.ns-shell {
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Ticker ------------------------------------------------------------------ */
.ns-ticker {
	flex: none;
	/* content-box on purpose, against the global reset. The design is 32px of
	   ticker with a 1px rule BENEATH it — 33px in total. Under border-box the
	   rule eats a pixel of the ticker instead, and everything below shifts up
	   by one, which is exactly what happened before this line existed. */
	box-sizing: content-box;
	height: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 22px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.4;
	color: var(--t3);
	/* Truncates rather than wrapping — a second line would break the frame. */
	white-space: nowrap;
	overflow: hidden;
}
.ns-ticker-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--green-2);
	flex: none;
}
.ns-dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	animation: mtBlink 2.2s ease-in-out infinite;
}
.ns-ticker-sep {
	width: 1px; height: 12px;
	background: var(--rule);
	flex: none;
}
.ns-ticker-item { flex: none; }
.ns-ticker-val { color: var(--t2); }
/* The figures are a strip beside the status. On a wide screen it holds still
   and truncates, as the frame demands, and the copy that makes the loop
   seamless stays hidden. */
.ns-ticker-roll { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ns-ticker-track { display: flex; align-items: center; gap: 16px; }
.ns-ticker-dup { display: none; }
/* On a phone it rolls, as noctisagentic.zone's ticker does: the status holds
   still and the figures loop past it. The track is two identical strips, so
   moving it by one strip and one gap (-50% less half the gap) lands it where
   it began. It pauses under a finger, and holds still under reduced motion. */
@media (max-width: 960px) {
	/* 78s: noctisagentic.zone's pace, 11px a second, over this strip's 863px. */
	.ns-ticker-track { width: max-content; animation: nsTick 78s linear infinite; }
	.ns-ticker-dup { display: flex; align-items: center; gap: 16px; }
	.ns-ticker-roll:hover .ns-ticker-track,
	.ns-ticker-roll:active .ns-ticker-track { animation-play-state: paused; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
	.ns-ticker-track { animation: none; }
	.ns-ticker-dup { display: none; }
}
@keyframes nsTick { to { transform: translateX(calc(-50% - 8px)); } }

/* Frame ------------------------------------------------------------------- */
.ns-frame { flex: 1; display: flex; min-height: 0; }

/* Rail -------------------------------------------------------------------- */
.ns-rail {
	width: 238px;
	flex: none;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-right: 1px solid var(--rule);
	overflow: hidden;                 /* must never scroll internally */
}

.ns-rail-top {
	flex: none;
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--rule);
}

/* The brand kit's Noctis Swap lockup (ns_lockup()): NOCTIS, the spear, SWAP
   under it -- the whole lockup, spear included, centred on the rail at the
   size noctis.zone's has in its own: 220px wide and 50px tall, so the line
   fades in 9px off the rail's edge instead of being cut by it. */
.ns-brand { display: block; width: 220px; margin-left: calc(50% - 110px); }

/* One file per theme; the --lockup-* tokens show the one in force. */
.ns-lockup img { display: none; width: 100%; height: auto; }
.ns-lockup .ns-lockup--light   { display: var(--lockup-light, none); }
.ns-lockup .ns-lockup--dark    { display: var(--lockup-dark, none); }
.ns-lockup .ns-lockup--magenta { display: var(--lockup-magenta, block); }

/* Two separate elements, not a <br> in a string. */
.ns-rail-sub {
	/* 9px and 1.45 measured off the pack's build. The launchpad uses 10px and
	   1.5, and the difference lands the whole rail 1px low. */
	margin-top: 9px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.45;
	color: var(--t4);
	text-align: center;
}
.ns-rail-sub span { display: block; }

/* Five rows expand on tall windows and compress on short ones, and the rail
   never gains a scrollbar of its own. */
.ns-rail-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* 10px and a 1px gap, both measured off the design pack's own build — the
	   launchpad rail uses 8px and no gap, and the 1px compounds down the rail
	   into a 5px drift by the last row. */
	gap: 1px;
	padding: 10px;
	min-height: 0;
}
.ns-rail-row {
	flex: 1 1 0;
	min-height: 22px;
	max-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px;
	border-radius: 4px;
	color: var(--t2);
	text-decoration: none;
}
.ns-rail-row:hover { background: var(--hover); color: var(--ink); }
.ns-rail-row[aria-current="page"] { background: var(--hover); color: var(--ink); }
.ns-rail-row[aria-current="page"] .ns-rail-num { color: var(--blue-t); }
.ns-rail-row[aria-current="page"] .ns-rail-count { color: var(--blue-d); }
.ns-rail-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.4;
	color: var(--t5);
	flex: none;
}
.ns-rail-label {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	flex: 1;
}
.ns-rail-count {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	color: var(--t4);
}

/* The rows out (rail.php): the NOCTIS ZONE and NOCTIS AGENTIC logos, drawn by
   ns_brand_logo() as noctis.zone draws its Noctis Swap and Noctis Agentic rows
   and noctisagentic.zone its Noctis Zone row: 26px tall, starting where the
   text labels start (Jinx, 24 Oct 2026). The label stretches to the row's full
   height so that, on a short window where every row compresses, the logo
   shrinks with its row instead of spilling into the next one. Each theme shows
   its own version (the --logo-* tokens, tokens.css). The leaves-this-site mark
   sits where a count sits and is drawn like one. */
.ns-rail-row--zone .ns-rail-label,
.ns-rail-row--agentic .ns-rail-label {
	align-self: stretch; min-width: 0;
	display: flex; align-items: center;
}
.ns-brand-logo { display: block; flex: none; height: 26px; max-height: 100%; width: auto; }
.ns-brand-logo--ondark { display: var(--logo-ondark, block); }
.ns-brand-logo--light  { display: var(--logo-light, none); }
.ns-rail-ext {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	color: var(--t5);
	flex: none;
}
.ns-rail-row:hover .ns-rail-ext { color: var(--blue-t); }

/* The theme switcher alone: the links out are rows of the rail now. */
.ns-rail-bottom {
	flex: none;
	padding: 10px 12px 14px;
}

/* Theme switcher ---------------------------------------------------------- */
.ns-themes {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	padding: 3px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.ns-theme-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .1em;
	min-height: 32px;
	padding: 7px 4px;
	border-radius: 3px;
	color: var(--t3);
	text-align: center;
}
.ns-theme-btn:hover { color: var(--ink); }
.ns-theme-btn[aria-pressed="true"] { background: var(--surface); color: var(--blue-t); }
.ns-theme-btn--degen { grid-column: 1 / -1; font-weight: 700; }

/* Degen when it is NOT active drifts a low-opacity rainbow: a deliberate
   invitation. When active it takes the static three-stop gradient. Both
   layers live in tokens.css — this only decides which one applies. */
.ns-theme-btn--degen:not([aria-pressed="true"]) {
	background-image: linear-gradient(90deg,
		rgba(255,47,176,.20), rgba(122,43,255,.20), rgba(0,229,255,.20),
		rgba(0,255,163,.20), rgba(255,212,0,.20), rgba(255,47,176,.20));
	background-size: 220% 100%;
	animation: dgShimmer 7s linear infinite;
}
[data-theme="degen"] .ns-theme-btn--degen[aria-pressed="true"] {
	background-image: linear-gradient(90deg, #FF2FB0, #7A2BFF 55%, #00FFA3);
	background-size: 100% 100%;
	color: #FFFFFF;
	animation: none;
}

/* Back to the launchpad, at the foot of a phone screen (footer.php). Outlined,
   not filled: the venue's primary actions live in the swap card. */
.ns-rail-out {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ink);
	text-decoration: none;
}
.ns-rail-out:hover { border-color: var(--blue); color: var(--ink); }

/* Noctis Agentic, a separate platform: out to it the same way, in green in
   every theme -- --green-2 is the text green each theme tunes for its ground,
   --green the outline. */
.ns-rail-out--agentic { border-color: var(--green); color: var(--green-2); }
.ns-rail-out--agentic:hover {
	border-color: var(--green);
	color: var(--green-2);
	background: color-mix(in srgb, var(--green) 12%, transparent);
}

/* Content column ---------------------------------------------------------- */
/* The ONLY scrollable element on the page. */
.ns-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	min-width: 0;
}

/* Sticky wallet header ---------------------------------------------------- */
.ns-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 12px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.ns-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Chain filter (chain-bar.php) --------------------------------------------- */
/* A bar of its own under the pools list's header, the one screen it filters:
   the label first at the left, then one segment per chain. Each chain wears
   its own colour (--chain-*, tokens.css) on its marker always, and as a tint
   and an outline once chosen, so the three read apart at a glance rather than
   only when pressed. */
.ns-chainbar {
	padding: 14px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.ns-chainbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}
.ns-filter-note {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--t3);
}
.ns-chains { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-chain {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface-2);
	color: var(--t3);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-decoration: none;
}
.ns-chain:hover { color: var(--ink); border-color: var(--chain-hue, var(--rule-strong)); }
.ns-chain[aria-pressed="true"] {
	color: var(--ink);
	border-color: var(--chain-hue, var(--rule-strong));
	background: color-mix(in srgb, var(--chain-hue, var(--t4)) 14%, var(--surface));
}
.ns-chain-dot {
	width: 10px; height: 10px;
	border-radius: 2px;
	background: var(--chain-hue, var(--t4));
	flex: none;
}
.ns-chain--all      { --chain-hue: var(--t4); }
.ns-chain--cardano  { --chain-hue: var(--chain-cardano); }
.ns-chain--midnight { --chain-hue: var(--chain-midnight); }
.ns-chain--solana   { --chain-hue: var(--chain-solana); }
/* Solana's marker is its own two-colour mark; its outline and count take the
   readable half. */
.ns-chain--solana .ns-chain-dot { background: linear-gradient(135deg, #9945FF, #14F195); }
/* A chain's name and outline wear its colour even unchosen, so a reader never
   has to press one to tell them apart. */
.ns-chain:not(.ns-chain--all) {
	color: var(--chain-hue);
	border-color: color-mix(in srgb, var(--chain-hue) 40%, var(--rule));
}
.ns-chain:not(.ns-chain--all):hover,
.ns-chain:not(.ns-chain--all)[aria-pressed="true"] { color: var(--chain-hue); border-color: var(--chain-hue); }

.ns-chain-count { color: var(--t5); }
.ns-chain[aria-pressed="true"] .ns-chain-count { color: var(--chain-hue, var(--blue-t)); }

.ns-wallet { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* The phone header's own parts, and the phone's tab bar and links out. Hidden
   HERE, outside the phone block: a rule inside a media query cannot hide a
   thing outside it, and all of them are in every page's markup. */
.ns-topbar-brand,
.ns-theme-select,
.ns-tabbar,
.ns-phone-out { display: none; }
/* The header row is the phone's: on a wide screen the rail carries the
   lockup, the theme and the wallet. */
@media (min-width: 961px) {
	.ns-topbar { display: none; }
}

.ns-connect {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 0 20px;
	border-radius: 4px;
	background: var(--blue);
	color: var(--on-blue);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
}
.ns-connect:hover { background: var(--blue-h); }
.ns-connect-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	animation: nsPulse 2.4s ease-in-out infinite;
}
/* In the rail, the last item in its list, as wide as the rail. */
.ns-connect--rail { display: flex; flex: none; justify-content: center; width: 100%; min-height: 42px; margin-top: 9px; padding: 0 12px; }
[data-theme="degen"] .ns-connect {
	background: linear-gradient(90deg,
		#A83A80 0%, #6E42BC 20%, #2D6099 40%,
		#1C7460 60%, #7E6522 80%, #A83A80 100%);
	background-size: 300% 100%;
	animation: dgDrift 14s linear infinite;
	color: #FFFFFF;
}
/* Degen's wallet, the rail's and the phone header's, is outlined, as
   noctis.zone draws its wallet in Degen, so the two sites' wallets match in
   every theme (Jinx, 3 Oct 2026). Connected, the name is in the accent. The
   pages' own connect buttons keep the gradient. */
[data-theme="degen"] .ns-connect--rail,
[data-theme="degen"] .ns-wallet .ns-connect {
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	animation: none;
	color: var(--ink);
	font-weight: 600;
	letter-spacing: .08em;
}
[data-theme="degen"] .ns-connect--rail:hover,
[data-theme="degen"] .ns-wallet .ns-connect:hover { background: var(--hover); border-color: var(--blue-t); }
[data-theme="degen"] .ns-connect--rail:has([data-ns-connect-name]:not([hidden])),
[data-theme="degen"] .ns-wallet .ns-connect:has([data-ns-connect-name]:not([hidden])) { color: var(--blue-t); }

/* Page header band -------------------------------------------------------- */
.ns-band {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 40px 24px 34px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
/* glow → rings → content, in that order. Both layers are in tokens.css. */
.ns-band-content { position: relative; z-index: 2; }

.ns-kicker {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--blue-d);
}
.ns-h1 {
	margin-top: 14px;
	max-width: 23ch;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(30px, 3.1vw, 44px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: pretty;
}
.ns-lede {
	margin-top: 14px;
	max-width: 70ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--t2);
	text-wrap: pretty;
}

/* Swap screen hero -------------------------------------------------------- */
/* noctis.zone's front-page hero, in this site's classes, so the two front
   pages read as one family: centred, the brand lockup under the kicker, the
   ring field at 50% 44% rather than 18% (tokens.css reads --rings-at). The
   sizes are the launchpad's .mt-head--hero values. */
.ns-band--hero { --rings-at: 50% 44%; padding: 72px 48px 64px; text-align: center; }
.ns-band--hero .ns-h1 {
	margin-inline: auto;
	max-width: 24ch;
	font-size: clamp(30px, 4vw, 54px);
	line-height: 1.06;
	text-wrap: balance;
}
.ns-band--hero .ns-lede { margin-inline: auto; max-width: 62ch; font-size: 17px; line-height: 1.6; }
.ns-hero-lockup { width: 100%; max-width: 980px; margin: 20px auto 0; }
.ns-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
/* Two classes: .ns-btn is declared further down and would otherwise win. */
.ns-btn.ns-btn--hero { min-height: 50px; min-width: 266px; font-size: 11px; }

/* Body column ------------------------------------------------------------- */
/* Same measure as the band's inner column, or the kicker jogs sideways
   between pages. */
.ns-body { padding: 30px 24px 60px; }

/* Reduced motion ---------------------------------------------------------- */
/* Four animations exist and all four are ambient. None of them carries
   information, so none of them is missed when switched off. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Band back-link ---------------------------------------------------------- */
.ns-band-back {
	display: inline-block;
	margin-bottom: 12px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--t4);
}
.ns-band-back:hover { color: var(--ink); }

/* Empty states ------------------------------------------------------------ */
/* Built as a real screen, not as scaffolding: with no launch graduated onto
   the venue this IS the swap screen, and it will be the first thing anyone
   sees. */
.ns-empty {
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
	padding: 46px 32px 40px;
	max-width: 74ch;
}
.ns-empty-k {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--t5);
}
.ns-empty-h {
	margin-top: 12px;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--ink);
	text-wrap: pretty;
}
.ns-empty-p {
	margin-top: 12px;
	max-width: 64ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--t2);
	text-wrap: pretty;
}
.ns-empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ink);
}
.ns-empty-cta:hover { border-color: var(--blue); color: var(--ink); }

/* Buttons ----------------------------------------------------------------- */
.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 14px;
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}
.ns-btn--primary { background: var(--blue); color: var(--on-blue); }
.ns-btn--primary:hover { background: var(--blue-h); color: var(--on-blue); }
.ns-btn--ghost {
	background: transparent;
	border: 1px solid var(--rule-strong);
	color: var(--ink);
}
.ns-btn--ghost:hover { border-color: var(--blue); color: var(--blue-t); }

/* Sort bar ---------------------------------------------------------------- */
.ns-sortbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ns-chips {
	display: flex;
	gap: 3px;
	padding: 3px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.ns-chip {
	min-height: 34px;
	padding: 0 13px;
	border-radius: 3px;
	background: transparent;
	color: var(--t4);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .1em;
}
.ns-chip:hover { color: var(--ink); }
.ns-chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.ns-sortcount {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--t5);
}
/* The ADA/USD switch after the count, its rate beside it on one line. */
.ns-sortbar .ns-ccy { margin-left: 0; flex-direction: row; align-items: center; gap: 10px; }

/* Pools table -------------------------------------------------------------- */
/* Wide content scrolls in its own container so the page body never scrolls
   sideways — the shell forbids a horizontal scrollbar on the frame.
   Positioned so it is the containing block of the screen-reader labels in
   its header: an absolutely positioned element is clipped only by an
   ancestor that contains it, and without this they were contained by the
   page itself and widened it, off the end of a table wider than a phone. */
.ns-tablewrap {
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
}
/* Ten columns since MCAP joined PRICE (Jinx, 24 Oct 2026). */
.ns-table { min-width: 1120px; }
.ns-tr {
	display: grid;
	grid-template-columns: 1.5fr .7fr 1.1fr 1fr .5fr .9fr .8fr .8fr .7fr 186px;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	border-bottom: 1px solid var(--rule-2);
}
.ns-tr:last-child { border-bottom: 0; }
.ns-tr--head {
	min-height: 34px;
	background: var(--panel-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .13em;
	color: var(--t3);
}
.ns-pool-row { min-height: 66px; cursor: pointer; }
.ns-pool-row:hover { background: var(--surface-2); }

.ns-td-pool { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ns-avatar {
	width: 32px; height: 32px;
	flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
}
.ns-td-pool-text { min-width: 0; }
.ns-pool-name {
	display: block;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ns-pool-name:hover { color: var(--blue-t); }
.ns-pool-grad,
.ns-pool-moved {
	display: block;
	margin-top: 2px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--t5);
}
/* Where the launch's liquidity went: the row's one line that changes what to do with it. */
.ns-pool-moved { color: var(--amber); }

.ns-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 3px;
	background: var(--panel-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .12em;
}

.ns-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--t2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* The chart pair, not --green/--red: this is a figure a trader reads as up or
   down, and Light and Dark share one pair on purpose. */
.ns-chg { font-weight: 600; }
.ns-chg.is-up   { color: var(--chart-up); }
.ns-chg.is-down { color: var(--chart-down); }
.ns-num--fees { color: var(--green); }
.ns-num--lock { color: var(--t3); }

.ns-td-actions { display: flex; gap: 6px; }
.ns-td-actions .ns-btn { flex: 1; padding: 0 8px; }

/* Chain rollout ------------------------------------------------------------ */
/* A 1px hairline grid: the gap IS the rule, so the cards need no borders of
   their own and no double lines appear where two meet. */
.ns-rollout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	margin-top: 28px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--rule);
	overflow: hidden;
}
.ns-rollout-card { background: var(--surface); padding: 18px 18px 20px; }
.ns-rollout-head { display: flex; align-items: center; gap: 8px; }
.ns-rollout-name {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ink);
}
.ns-rollout-status {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .1em;
	white-space: nowrap;
}
.ns-tone--green { color: var(--green); }
.ns-tone--amber { color: var(--amber); }
.ns-tone--muted { color: var(--t5); }
.ns-rollout-note {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}
.ns-chain-dot--on { background: var(--chain-hue, var(--t4)); }

/* Panels ------------------------------------------------------------------- */
.ns-panel {
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
}
/* --rule-strong marks the primary action panel. Exactly one per screen. */
.ns-panel--strong { border-color: var(--rule-strong); }
.ns-panel-k {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
	color: var(--t5);
}

/* Pair rail ---------------------------------------------------------------- */
.ns-pair-rail {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
	margin-bottom: 16px;
}
.ns-pair {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
	height: 52px;
	padding: 0 13px 0 9px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface-2);
	text-decoration: none;
}
.ns-pair:hover { border-color: var(--rule-strong); }
.ns-pair.is-selected { background: var(--surface); border-color: var(--blue); }
.ns-pair-avatar {
	width: 30px; height: 30px;
	flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--paper);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 700;
}
.ns-pair-name {
	display: block;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 12.5px; font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
.ns-pair-chg {
	display: block;
	margin-top: 1px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 500;
}
.ns-pair-chg.is-up   { color: var(--chart-up); }
.ns-pair-chg.is-down { color: var(--chart-down); }

/* Two-column body ---------------------------------------------------------- */
.ns-swap-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
	gap: 16px;
	align-items: start;
}
/* min-width:0 on both, and an explicit minmax(0,1fr) track inside the side
   column. Without them a grid item's automatic minimum size is its CONTENT
   size, so the swap card sized itself to max-content and pushed 110px past
   its own 400px track — the frame does not scroll sideways, so the overflow
   was simply invisible, clipped at the edge of the screen. */
.ns-col-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	min-width: 0;
}
.ns-col-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	min-width: 0;
}

/* Quick swap: the Swap screen ---------------------------------------------- */
/* Under the hero: the four facts on the left, the widget on the right. In a
   narrow layout the widget comes first, straight under the hero, and the
   facts after it -- the widget is what the screen is for.

   On a wide screen the widget stands in from the right edge by up to half its
   own width, so it sits with the facts rather than out at the far edge. The
   inset is whatever the column can spare past 1120px, so it shrinks to
   nothing before it would narrow the facts. */
.ns-quick-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
	gap: 40px;
	align-items: start;
	padding-right: clamp(0px, 100% - 1120px, 220px);
}
.ns-quick-widget { min-width: 0; }
.ns-quick-facts {
	display: grid;
	gap: 10px;
	max-width: 62ch;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
}
.ns-quick-facts li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--t2);
}
.ns-quick-facts li::before {
	content: "\2713";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	color: var(--green-2);
}
/* The left column: the facts, then a block for each of them, two by two.
   It stretches to the row's height and the blocks take what the facts leave,
   so on a wide screen the column ends where the widget does rather than
   leaving a well of empty space beside it. When the blocks need more room
   than that, the row grows to fit them instead.

   The column is a size container: what the blocks can fit depends on its
   width, not the screen's, and between the phone breakpoint and about
   1225px wide it is too narrow for two blocks side by side. */
.ns-quick-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: stretch;
	min-width: 0;
	container: ns-quick-main / inline-size;
}
.ns-pillars {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}
.ns-pillar {
	min-width: 0;
	padding: 16px 18px 18px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
}
.ns-pillar-k {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
}
.ns-pillar-t {
	margin: 10px 0 8px;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}
.ns-pillar-d {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}
@container ns-quick-main (max-width: 459px) {
	.ns-pillars { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
/* A wider column gives the same copy fewer lines and leaves the blocks half
   empty, so the type steps up with the column. */
@container ns-quick-main (min-width: 600px) {
	.ns-pillar-t { font-size: 17px; }
	.ns-pillar-d { font-size: 13.5px; }
}
@container ns-quick-main (min-width: 800px) {
	.ns-pillar { padding: 20px 22px 22px; }
	.ns-pillar-t { margin-top: 12px; font-size: 19px; }
	.ns-pillar-d { font-size: 14.5px; }
}
.ns-quick-more {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	align-items: start;
}

/* The quick card's head: the wallet's state, then the pair. */
.ns-qs-head { display: grid; gap: 12px; margin-bottom: 14px; }
.ns-qs-wallet {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t3);
}
.ns-qs-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ns-qs-wallet.is-on { color: var(--t2); }
.ns-qs-wallet.is-on .ns-qs-dot { background: var(--green-2); }
.ns-qs-pair { position: relative; display: block; }
.ns-qs-pair::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-right: 1.5px solid var(--t2);
	border-bottom: 1.5px solid var(--t2);
	transform: rotate(45deg);
	pointer-events: none;
}
.ns-qs-pair select {
	width: 100%;
	padding: 12px 40px 12px 16px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface-2);
	color: var(--ink);
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align-last: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.ns-qs-pair select:hover { border-color: var(--rule-strong); }
.ns-qs-pair select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ns-qs-details { margin-top: 2px; }
.ns-qs-details summary {
	padding: 8px 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blue-t);
	cursor: pointer;
	list-style: none;
}
.ns-qs-details summary::-webkit-details-marker { display: none; }
.ns-qs-details summary::after { content: " \25BE"; }
.ns-qs-details[open] summary::after { content: " \25B4"; }
@media (max-width: 960px) {
	.ns-quick-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-right: 0; }
	.ns-quick-widget { order: -1; }
	.ns-quick-facts { padding-top: 0; }
	/* After the widget, one block to a row, each its own height. */
	.ns-pillars { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	/* The launchpad's phone hero values: 18px sides, a 27px heading. */
	.ns-band--hero { padding: 26px 18px 30px; }
	.ns-band--hero .ns-h1 { font-size: 27px; line-height: 1.1; }
	.ns-band--hero .ns-lede { font-size: 16px; }
}

/* Pool header -------------------------------------------------------------- */
.ns-pool-head {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 22px 16px;
	border-bottom: 1px solid var(--rule-2);
}
.ns-avatar--lg { width: 42px; height: 42px; font-size: 15px; }
.ns-pool-head-text { min-width: 0; flex: 1; }
.ns-pool-head-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ns-pool-title {
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 19px; font-weight: 700; letter-spacing: -.01em;
	color: var(--ink);
}
.ns-chip-grad {
	display: inline-flex; align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--chip);
	color: var(--chip-fg);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 700; letter-spacing: .12em;
}
.ns-pool-id {
	margin-top: 7px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 500; letter-spacing: .06em;
	color: var(--t4);
}
.ns-pool-price { text-align: right; flex: none; }
.ns-price {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 26px; font-weight: 700; line-height: 1.1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.ns-price-quote {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 600; color: var(--t4);
	margin-left: 5px;
}
.ns-price-chg {
	display: block;
	margin-top: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600;
}
.ns-price-chg.is-up   { color: var(--chart-up); }
.ns-price-chg.is-down { color: var(--chart-down); }

/* Timeframes --------------------------------------------------------------- */
.ns-frames {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	padding: 13px 22px 0;
}
.ns-frame-chips { display: flex; gap: 5px; }
.ns-frame-chip {
	min-height: 28px;
	padding: 0 11px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: transparent;
	color: var(--t4);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 600; letter-spacing: .1em;
}
.ns-frame-chip:hover { color: var(--ink); }
.ns-frame-chip[aria-pressed="true"] {
	background: var(--panel-2);
	color: var(--blue-t);
	border-color: var(--blue);
}
.ns-chart-note {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 500; letter-spacing: .09em;
	color: var(--t5);
}

/* Candles ------------------------------------------------------------------ */
/* Percentages, never pixels: the chart reflows with its column rather than
   needing a redraw, which is what keeps it correct in the narrow layout. */
.ns-candles {
	height: 280px;
	margin: 16px 22px 0;
	border-bottom: 1px solid var(--rule-2);
	display: flex;
	align-items: stretch;
	gap: 2px;
}
/* A timeframe that is not chosen stays in the page, hidden; display: flex
   above would otherwise override the hidden attribute. */
.ns-candles[hidden],
.ns-chart-note[hidden],
.ns-chart-legend[hidden] { display: none; }
.ns-candle { position: relative; flex: 1; min-width: 0; }
.ns-wick {
	position: absolute;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: currentColor;
	opacity: .5;
}
.ns-body-c {
	position: absolute;
	left: 12%; right: 12%;
	border-radius: 1px;
	background: currentColor;
}
.ns-candle.is-up   { color: var(--chart-up); }
.ns-candle.is-down { color: var(--chart-down); }

/* Pool stat row ------------------------------------------------------------ */
.ns-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	margin-top: 20px;
	background: var(--rule-2);
	border-top: 1px solid var(--rule-2);
}
.ns-stat { background: var(--surface); padding: 15px 22px 17px; }
.ns-stat-k {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .13em;
	color: var(--t4);
}
.ns-stat-v {
	display: block;
	margin-top: 6px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.ns-stat-v--green { color: var(--green); }
.ns-stat-v--blue  { color: var(--blue-t); }

/* Swap card ---------------------------------------------------------------- */
.ns-card { padding: 18px; }
.ns-sides {
	display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
	padding: 3px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.ns-side {
	min-height: 38px;
	border-radius: 3px;
	color: var(--t4);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
}
.ns-side:hover { color: var(--ink); }
.ns-side--buy[aria-pressed="true"]  { background: var(--surface); color: var(--green); }
.ns-side--sell[aria-pressed="true"] { background: var(--surface); color: var(--red); }

.ns-field {
	margin-top: 12px;
	padding: 14px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.ns-field-head { display: flex; align-items: center; gap: 10px; }
.ns-field-k {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .11em;
	color: var(--t4);
}
.ns-field-bal {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 500;
	color: var(--t4);
}
.ns-field-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ns-amount {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 26px; font-weight: 700; line-height: 1.2;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.ns-amount:focus { outline: none; }
.ns-amount--out { color: var(--t2); }
.ns-pill {
	display: inline-flex; align-items: center; gap: 7px;
	flex: none;
	padding: 5px 10px 5px 5px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600;
	color: var(--ink);
}
.ns-pill-avatar {
	width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 3px;
	background: var(--paper);
	font-size: 9px; font-weight: 700;
}

.ns-quickfill, .ns-slip-chips { display: flex; gap: 5px; margin-top: 11px; }
.ns-quick {
	flex: 1;
	min-height: 28px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: transparent;
	color: var(--t3);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
}
.ns-quick:hover:not(:disabled) { color: var(--ink); border-color: var(--rule-strong); }
.ns-quick[aria-pressed="true"] { background: var(--panel-2); color: var(--blue-t); border-color: var(--blue); }
/* MAX has nothing to read without a wallet. Visibly unavailable rather than
   present-and-inert, which reads as broken. */
.ns-quick:disabled { opacity: .45; cursor: not-allowed; }

/* Overlaps both panels, which is what makes it read as acting on the pair. */
.ns-flip {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	margin: -9px auto;
	position: relative;
	z-index: 2;
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background: var(--surface);
	color: var(--blue-t);
	font-size: 14px;
}
.ns-flip:hover { border-color: var(--blue); }

.ns-slip { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ns-slip .ns-slip-chips { flex: 1; margin-top: 0; }
.ns-slip .ns-quick { min-height: 30px; }

.ns-quote { margin-top: 16px; display: grid; gap: 7px; }
.ns-quote-row { display: flex; align-items: baseline; gap: 12px; }
.ns-quote-row dt {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 500;
	color: var(--t4);
}
.ns-quote-row dd {
	margin: 0 0 0 auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 600;
	color: var(--t2);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ns-ok { color: var(--green); }
.ns-warn { color: var(--amber); }
.ns-route { color: var(--blue-t); }

.ns-cta {
	width: 100%;
	min-height: 52px;
	margin-top: 16px;
	border-radius: 4px;
	background: var(--blue);
	color: var(--on-blue);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 700; letter-spacing: .11em;
}
.ns-cta:hover { background: var(--blue-h); }
[data-theme="degen"] .ns-cta {
	background: linear-gradient(90deg,
		#A83A80 0%, #6E42BC 20%, #2D6099 40%,
		#1C7460 60%, #7E6522 80%, #A83A80 100%);
	background-size: 300% 100%;
	animation: dgDrift 14s linear infinite;
	color: #FFFFFF;
}
.ns-card-note {
	margin-top: 12px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--t4);
	text-wrap: pretty;
}
.ns-card-note a { color: var(--blue-t); }

/* The card a pool shows once its launch's liquidity has moved to another DEX. */
.ns-moved-h {
	margin-top: 10px;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: pretty;
}
.ns-moved-p {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--t2);
	text-wrap: pretty;
}
.ns-cta--link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
/* What the trade button did: the order placed, or why it was not. */
.ns-card-status {
	margin-top: 12px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--t2);
	overflow-wrap: anywhere;
}
.ns-card-status--ok { color: var(--green-2); }
.ns-card-status--error { color: var(--red); }
.ns-card-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Order lifecycle ----------------------------------------------------------- */
.ns-life, .ns-guard { padding: 16px 18px 18px; }
.ns-life-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 3px; }
.ns-life-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 11px;
	border-radius: 3px;
}
.ns-life-dot {
	width: 8px; height: 8px;
	flex: none;
	border-radius: 2px;
	background: var(--rule-strong);
}
.ns-life-row.is-active { background: var(--surface-2); }
.ns-life-row.is-active .ns-life-dot { background: var(--amber); animation: mtBlink 1.4s ease-in-out infinite; }
.ns-life-row.is-done .ns-life-dot { background: var(--green); }
.ns-life-label { font-size: 12.5px; color: var(--t2); }
.ns-life-meta {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 600; letter-spacing: .1em;
	color: var(--t5);
}

/* Pool guarantees ----------------------------------------------------------- */
.ns-guard { background: var(--panel); border-color: var(--panel-rule); }
.ns-guard-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ns-guard-row { display: flex; gap: 9px; font-size: 12px; line-height: 1.55; color: var(--t2); }
.ns-guard-tick { color: var(--green); flex: none; font-weight: 700; }

/* Five-tab table panel ------------------------------------------------------ */
.ns-tabs {
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
	overflow: hidden;
}
/* Six labels fit side by side down to about a 380px screen. Below that the
   strip scrolls inside itself rather than clipping its last tab. */
.ns-tabstrip {
	display: flex;
	border-bottom: 1px solid var(--rule);
	overflow-x: auto;
	scrollbar-width: none;
}
.ns-tab {
	flex: 1;
	min-height: 46px;
	border: none;
	border-right: 1px solid var(--rule-2);
	background: var(--surface-2);
	color: var(--t4);
	cursor: pointer;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; line-height: 1.4;
	letter-spacing: .11em;
}
.ns-tab:last-child { border-right: none; }
.ns-tab[aria-selected="true"] {
	background: var(--surface);
	color: var(--blue-t);
}
.ns-tab:hover { color: var(--t2); }
.ns-tab[aria-selected="true"]:hover { color: var(--blue-t); }
.ns-tab:focus-visible {
	outline: 1px solid var(--blue);
	outline-offset: -2px;
}

.ns-tabpanel[hidden] { display: none; }

/* The inner min-width is what makes the columns keep their proportions on a
   narrow screen instead of crushing to unreadable. The scroll lives HERE, on
   the table's own wrapper — the content column never scrolls sideways. */
.ns-tabscroll { overflow-x: auto; }
.ns-tabtable { min-width: 720px; }

/* One custom property per table carries that tab's grid template, so the
   header and every row are laid out by the same value. Two separate
   declarations would let a column heading drift off its column. */
.ns-tabhead,
.ns-tabrow {
	display: grid;
	grid-template-columns: var(--ns-cols);
}
.ns-tabhead { background: var(--panel-2); }
.ns-tabrow { border-top: 1px solid var(--rule-faint); }
.ns-tabrow:hover { background: var(--surface-2); }

.ns-tabth {
	padding: 12px 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; line-height: 1.4;
	letter-spacing: .13em;
	color: var(--t3);
}
.ns-tabtd {
	padding: 12px 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 500; line-height: 1.5;
}

.ns-tabnote {
	margin: 0;
	padding: 14px 18px;
	border-top: 1px solid var(--rule-2);
	background: var(--surface-2);
	font-family: Inter, system-ui, sans-serif;
	font-size: 11.5px; font-weight: 400; line-height: 1.6;
	color: var(--t4);
	text-wrap: pretty;
}

/* Cell tones. Named here once so a template chooses a MEANING and this file
   chooses the colour — a template that could write a hex value could write a
   BUY in the sell colour. */
.ns-c-ink   { color: var(--ink); }
.ns-c-t2    { color: var(--t2); }
.ns-c-t3    { color: var(--t3); }
.ns-c-t4    { color: var(--t4); }
.ns-c-t5    { color: var(--t5); }
.ns-c-green { color: var(--green); }
.ns-c-red   { color: var(--red); }
.ns-c-amber { color: var(--amber); }
.ns-c-blue  { color: var(--blue-t); }

/* Add liquidity ------------------------------------------------------------- */
.ns-lp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
	gap: 16px;
	align-items: start;
}

.ns-lp-card { padding: 22px; }

.ns-lp-ident {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--rule-2);
}
.ns-lp-avatar {
	flex: none;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 700;
}
.ns-lp-ident-text { display: grid; gap: 3px; min-width: 0; }
.ns-lp-pair {
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 17px; font-weight: 700;
	color: var(--ink);
}
.ns-lp-id {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	color: var(--t4);
}
.ns-lp-ident .ns-chain-tag { margin-left: auto; }

.ns-lp-label { margin: 0 0 10px; }

/* Static by design: a deposit has no direction, so nothing here may look
   like the swap card's flip control. */
.ns-lp-plus {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	margin: -9px auto;
	position: relative; z-index: 2;
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background: var(--surface);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 600;
	color: var(--t3);
}

.ns-lp-auto {
	margin: 9px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 500; letter-spacing: .06em;
	color: var(--t5);
}

.ns-lp-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	margin-top: 12px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.ns-lp-compare-card { padding: 15px 16px; background: var(--surface); }
.ns-lp-compare-t {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 8px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
	color: var(--ink);
}
.ns-lp-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.ns-lp-compare-d {
	margin: 0 0 12px;
	font-size: 12px; line-height: 1.55;
	color: var(--t3);
	text-wrap: pretty;
}

/* Risk panel ---------------------------------------------------------------- */
.ns-risk-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ns-risk-row { display: flex; gap: 9px; font-size: 12px; line-height: 1.55; color: var(--t2); }
.ns-risk-mark {
	flex: none;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-weight: 700;
}

/* Other-pools jump list ------------------------------------------------------ */
.ns-jump { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 1px; }
.ns-jump-row {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	text-decoration: none;
}
.ns-jump-row:hover { background: var(--hover); border-color: var(--rule-strong); }
.ns-jump-avatar {
	flex: none;
	width: 24px; height: 24px;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--surface-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700;
}
.ns-jump-pair {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 500;
	color: var(--ink);
}
.ns-jump-tvl {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	color: var(--t4);
}

/* Stat row ------------------------------------------------------------------- */
.ns-statrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.ns-stat { padding: 15px 17px; background: var(--surface); }
.ns-stat-k {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .13em;
	color: var(--t4);
}
.ns-stat-v {
	margin: 9px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 22px; font-weight: 700; line-height: 1.2;
}

/* Bordered panel with a head strip ------------------------------------------- */
.ns-panelbox {
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
	overflow: hidden;
}
.ns-panelbox-head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 14px 17px;
	border-bottom: 1px solid var(--rule);
	background: var(--surface-2);
}
.ns-panelbox-k {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
	color: var(--ink);
}
.ns-panelbox-note {
	margin: 0 0 0 auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .1em;
	color: var(--t5);
}
.ns-panelbox-live {
	display: flex; align-items: center; gap: 7px;
	margin: 0 0 0 auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .1em;
	color: var(--amber);
}
.ns-live-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--amber);
	animation: mtBlink 1.6s ease-in-out infinite;
}

/* A locked order is mid-settlement. It gets a STATUS, not a disabled button —
   a greyed-out control still says "there is a cancel here, just not for you". */
.ns-order-inflight {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
	color: var(--t5);
}
.ns-btn--cancel { color: var(--red); border-color: var(--rule-strong); }
.ns-btn--cancel:hover { border-color: var(--red); }
/* What a CANCEL or REFUND on Positions did, between the table and its note. */
.ns-panelbox > .ns-card-status { margin: 0; padding: 12px 18px; border-top: 1px solid var(--rule-2); }

/* Creator -------------------------------------------------------------------- */
.ns-card-h {
	margin: 10px 0 8px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 19px; font-weight: 600; line-height: 1.25;
	color: var(--ink);
	text-wrap: balance;
}
.ns-card-p {
	margin: 0 0 16px;
	font-size: 13px; line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}

.ns-fees { background: var(--panel); border-color: var(--panel-rule); }
.ns-fee-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 13px; }
.ns-fee-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ns-fee-k {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 500;
	color: var(--t3);
}
.ns-fee-v {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 700;
}
.ns-fee-track {
	display: block;
	height: 4px;
	margin-top: 7px;
	border-radius: 2px;
	background: var(--bar-empty);
	overflow: hidden;
}
.ns-fee-fill { display: block; height: 100%; border-radius: 2px; }
.ns-fee-note { margin-top: 14px; }

.ns-panel-link {
	display: inline-block;
	margin-top: 14px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
	color: var(--blue-t);
	text-decoration: none;
}
.ns-panel-link:hover { text-decoration: underline; }

/* How it works --------------------------------------------------------------- */
.ns-steps { display: grid; }
.ns-step {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 0 4px;
	padding: 18px 20px;
	border-top: 1px solid var(--rule-faint);
}
.ns-step:first-child { border-top: none; }
.ns-step-n {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; font-weight: 700; letter-spacing: .08em;
}
.ns-step-body { min-width: 0; }
.ns-step-t {
	margin: 0 0 6px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 15.5px; font-weight: 600; line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}
.ns-step-d {
	margin: 0 0 8px;
	max-width: 78ch;
	font-size: 13.5px; line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}
.ns-step-note {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
	color: var(--t5);
}

.ns-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1px;
	margin-top: 16px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.ns-guarantee { padding: 20px; background: var(--surface); min-width: 0; }
.ns-guarantee-n {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.ns-guarantee-t {
	margin: 10px 0 7px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 16px; font-weight: 600; line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}
.ns-guarantee-d {
	margin: 0 0 10px;
	font-size: 13px; line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}
.ns-guarantee-spec {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
	color: var(--t5);
}

/* Wallet modal ---------------------------------------------------------------- */
.ns-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 24px;
}
.ns-modal[hidden] { display: none; }
.ns-modal-back {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}
/* Blur on the dark grounds only. On a light ground a backdrop blur reads as
   a rendering fault rather than as depth. */
:root[data-theme="dark"] .ns-modal-back,
:root[data-theme="degen"] .ns-modal-back { backdrop-filter: blur(4px); }

.ns-modal-panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
	padding: 28px;
	border: 1px solid var(--rule-strong);
	border-radius: 4px;
	background: var(--surface);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}
.ns-modal-x {
	position: absolute;
	top: 12px; right: 12px;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: transparent;
	color: var(--t4);
	cursor: pointer;
	font-size: 11px;
}
.ns-modal-x:hover { border-color: var(--rule-strong); color: var(--ink); }
.ns-modal-h {
	margin: 10px 0 8px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 19px; font-weight: 600;
	color: var(--ink);
}
.ns-modal-p {
	margin: 0 0 16px;
	font-size: 13.5px; line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}
.ns-wrow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ns-wrow {
	width: 100%;
	display: flex; align-items: center; gap: 11px;
	min-height: 54px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	text-align: left;
}
.ns-wrow:hover:not([disabled]) { background: var(--hover); border-color: var(--rule-strong); }
.ns-wrow[disabled] { cursor: not-allowed; opacity: .72; }
.ns-wrow-avatar {
	flex: none;
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--surface-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; font-weight: 700;
}
.ns-wrow-text { display: grid; gap: 2px; min-width: 0; }
.ns-wrow-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ns-wrow-chain {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; letter-spacing: .06em;
	color: var(--t5);
}
.ns-wrow-state {
	margin-left: auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 600; letter-spacing: .08em;
}
.ns-modal-note {
	margin: 16px 0 0;
	font-size: 11.5px; line-height: 1.6;
	color: var(--t5);
	text-wrap: pretty;
}

/* Shared pieces these screens introduced ------------------------------------- */
.ns-panel-p {
	margin: 11px 0 0;
	font-size: 12.5px; line-height: 1.6;
	color: var(--t3);
	text-wrap: pretty;
}

/* Mono key/value list. Used by pool state, the LP comparison cards, the
   royalty panel and governance — one shape, so a figure reads the same
   wherever it appears. */
.ns-kv { margin: 12px 0 0; display: grid; gap: 9px; }
.ns-kv-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; line-height: 1.5;
}
.ns-kv-row dt { color: var(--t4); font-weight: 500; }
.ns-kv-row dd { margin: 0; font-weight: 500; text-align: right; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Narrow ------------------------------------------------------------------- */
/* The design drives this from a ResizeObserver on the app root rather than a
   media query. On a server-rendered page the shell IS the viewport, so the
   two agree — and a query costs no JavaScript.

   At this width the venue takes the launchpad's phone shape: a header across
   the top with the lockup, the theme and the wallet, and a tab bar of the five
   screens pinned to the bottom, where a thumb is. The rail is not shown at
   all. Its theme buttons become the header's select, which drives the same
   handler, and its two links out move to the foot of every screen. */
@media (max-width: 960px) {
	.ns-swap-grid,
	.ns-lp-grid { grid-template-columns: minmax(0, 1fr); }

	.ns-rail { display: none; }

	/* The header is the sticky bar every screen already has, carrying the
	   lockup, the select and the wallet on one row. Sized to fit 360px, the
	   narrowest phone in common use. */
	.ns-topbar { padding: 10px 14px; }
	.ns-topbar-inner { gap: 8px; }
	/* The whole lockup, its left edge on the bar's edge, so the spear's fade
	   starts there transparent rather than being cut: 187px wide (42px tall),
	   145px below 401px, as on noctis.zone. */
	.ns-topbar-brand { display: block; width: 187px; margin-left: -14px; margin-right: auto; flex: none; }
	.ns-wallet { margin-left: 0; gap: 8px; }

	/* Native, and left looking native. Only the type is ours, so the closed
	   control matches every other mono label; the open list is the phone's. */
	.ns-theme-select {
		display: block;
		min-height: 40px;
		padding: 0 6px;
		border: 1px solid var(--rule);
		border-radius: 4px;
		background: var(--surface-2);
		color: var(--blue-t);
		font-family: "JetBrains Mono", ui-monospace, monospace;
		font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
		cursor: pointer;
	}
	.ns-connect { gap: 7px; padding: 0 12px; }

	/* The chain filter on a phone: the label on its own line, the chains in
	   one row that scrolls sideways. */
	.ns-chainbar { padding: 12px 18px; }
	.ns-chains { flex-wrap: nowrap; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
	.ns-chain { flex: none; min-height: 44px; }

	/* The tab bar, drawn the launchpad's way: mono capitals, and the lit tab
	   marked on the edge nearest the content, which on a bar at the foot of
	   the screen is the top. */
	.ns-tabbar {
		display: flex;
		flex: none;
		gap: 2px;
		padding: 6px 8px max(6px, env(safe-area-inset-bottom, 0px));
		background: var(--panel-3);
		border-top: 1px solid var(--panel-rule);
	}
	.ns-tabbar-item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		padding: 4px 2px;
		border-top: 2px solid transparent;
		font-family: "JetBrains Mono", ui-monospace, monospace;
		font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.3;
		color: var(--t3);
		text-align: center;
		text-decoration: none;
	}
	.ns-tabbar-item:hover { color: var(--ink); }
	.ns-tabbar-item[aria-current="page"] {
		background: var(--surface);
		border-top-color: var(--blue);
		color: var(--blue-t);
	}

	/* The launchpad and Noctis Agentic, side by side at the foot of the
	   screen's content. */
	.ns-phone-out {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		padding: 18px 24px 24px;
		border-top: 1px solid var(--rule);
	}
	.ns-phone-out .ns-rail-out { min-height: 44px; }

	/* Same floor on the controls a reader is most likely to hit by thumb. */
	.ns-tab { min-height: 44px; }
	.ns-quick { min-height: 34px; }
	.ns-wrow { min-height: 56px; }
}

/* The phone header's lockup below 401px: 145px, what the bar leaves at 360px. */
@media (max-width: 400px) {
	.ns-topbar-brand { width: 145px; }
}


/* ---------------------------------------------------------------------------
 * Live mode.
 * ------------------------------------------------------------------------- */

/* An hour with no trade keeps its slot on the axis and draws nothing. */
.ns-candle.is-empty { visibility: hidden; }

/* A row's link to the explorer reads as the row's own text, underlined. */
.ns-tablink {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rule-faint);
	text-underline-offset: 2px;
}
.ns-tablink:hover,
.ns-tablink:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* A table with nothing in it says so in one full-width row. On a phone the
   table is wider than the screen and scrolls, so the sentence holds to the
   part of it on screen rather than running off the edge. */
.ns-tabrow.ns-tabrow--empty { grid-template-columns: 1fr; }
.ns-tabrow.ns-tabrow--empty:hover { background: transparent; }
.ns-tabrow--empty .ns-tabtd { position: sticky; left: 0; max-width: calc(100vw - 64px); }

/* The connect modal's refusal, and the way out of a connection. */
.ns-modal-err { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.ns-modal-panel [data-ns-disconnect] { margin-top: 12px; }

/* ==========================================================================
   A token's own identity — its logo in every avatar, and the header a token
   page opens with (the launchpad's lp-header, carried over on the same tokens)
   ========================================================================== */

/* A logo fills its avatar edge to edge; the circle or square is the avatar's. */
.ns-avatar, .ns-pair-avatar, .ns-pill-avatar, .ns-lp-avatar, .ns-jump-avatar { overflow: hidden; }
.ns-logo-img { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: inherit; }

.ns-token-head { display: flex; flex-direction: column; gap: 22px; }
.ns-token-ident { display: flex; gap: 20px; align-items: flex-start; }
.ns-token-logo {
	width: 68px; height: 68px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--rule); border-radius: 4px; background: var(--panel);
	font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 26px;
	overflow: hidden;
}
.ns-token-logo .ns-logo-img { border-radius: 0; }
.ns-token-meta { min-width: 0; }
.ns-token-meta .ns-band-back { display: inline-block; margin-bottom: 12px; }
.ns-token-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ns-token-badge {
	display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 3px;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ns-token-badge--chain { border: 1px solid var(--blue); color: var(--blue-t); background: var(--surface); }
.ns-token-badge--state { background: var(--ink); color: var(--paper); }
.ns-token-badge--net { background: var(--hover); color: var(--t3); }
.ns-token-title {
	margin: 10px 0 0; font-family: "Montserrat", sans-serif;
	font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; color: var(--ink);
}
.ns-token-ticker { color: var(--t4); letter-spacing: -.02em; }
.ns-token-desc { margin: 8px 0 0; max-width: 68ch; color: var(--t2); line-height: 1.65; }
.ns-token-creator { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
.ns-token-by { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--t4); }
.ns-token-verified {
	padding: 3px 7px; border-radius: 3px; background: color-mix(in srgb, var(--green) 16%, transparent);
	color: var(--green); font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
}
.ns-token-terms { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ns-token-terms li { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.5; color: var(--t3); }
.ns-token-terms li::before { content: "\2713\00a0"; color: var(--green); }
.ns-token-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.ns-token-link {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600;
	color: var(--blue-t); text-decoration: none;
}
.ns-token-link:hover { color: var(--ink); }
.ns-token-link--launch { letter-spacing: .08em; font-size: 10px; }
.ns-token-ico { flex: none; }

.ns-token-stats {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px;
	padding-top: 18px; border-top: 2px solid var(--blue);
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--t4);
}
.ns-token-stat { display: flex; flex-direction: column; gap: 5px; }
.ns-token-stat-v { font-size: 25px; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ns-token-stat-v--accent { color: var(--blue-t); }
.ns-token-stat-k { font-weight: 600; text-transform: uppercase; }

.ns-ccy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.ns-ccy[hidden] { display: none; }
.ns-ccy-toggle { display: inline-flex; }
.ns-ccy-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em;
	padding: 6px 11px; border: 1px solid var(--rule); background: var(--surface); color: var(--t3); cursor: pointer;
}
.ns-ccy-btn--active, .ns-ccy-btn--active:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ns-ccy-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ns-ccy-rate { font-size: 9.5px; letter-spacing: .06em; color: var(--t4); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
	.ns-token-ident { gap: 14px; }
	.ns-token-logo { width: 52px; height: 52px; }
	.ns-token-stats { gap: 14px 24px; }
	.ns-token-stat-v { font-size: 20px; }
	.ns-ccy { margin-left: 0; align-items: flex-start; flex-basis: 100%; }
}

/* The creator's own pool trades: a marked row in TRADES and a "C" on the chart. */
.ns-tabrow--creator { background: color-mix(in srgb, var(--amber) 9%, transparent); box-shadow: inset 3px 0 0 var(--amber); }
.ns-cmark {
	position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 2;
	width: 15px; height: 15px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 800; line-height: 1;
	color: var(--paper); box-shadow: 0 0 0 2px var(--panel);
}
.ns-cmark--buy { background: var(--green); }
.ns-cmark--sell { background: var(--red); }
.ns-chart-legend {
	display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--t3);
}
.ns-cmark-key {
	width: 15px; height: 15px; border-radius: 50%; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--amber); color: var(--paper); font-size: 9px; font-weight: 800;
}