/* Shared header and phone tab bar (assets/nav.js). Uses the brand tokens from brand.css. */
/* .topbar[data-ns-header] outranks each page's own .topbar rules, so the header lays out the same everywhere:
   lockup, main links, the page's own parts (the Terminal's search), the Terminal links, then the wallet chip on the right. */
.topbar[data-ns-header]{display:flex;align-items:center;justify-content:flex-start;gap:20px;min-height:var(--ns-header-h);width:100%;}
.topbar[data-ns-header] > .nw{margin-left:auto;}
.topbar[data-ns-header] > .search ~ .nw{margin-left:0;}
.ns-home{display:inline-flex;align-items:center;flex:0 0 auto;min-height:var(--ns-touch);}
.ns-home img{display:block;height:25px;width:auto;}
.ns-home .ns-mark{display:none;height:28px;}
.topbar[data-ns-header] .ns-nav{display:flex;align-items:center;gap:4px;}
.ns-link,.ns-sublink{display:inline-flex;align-items:center;min-height:var(--ns-touch);padding:0 12px;border-radius:var(--ns-r-pill);font-size:14px;font-weight:600;color:var(--ns-body);text-decoration:none;transition:color var(--ns-t-touch) var(--ns-ease),background-color var(--ns-t-touch) var(--ns-ease);}
.ns-link:hover,.ns-sublink:hover{color:var(--ns-ink);}
.ns-link[aria-current="page"],.ns-sublink[aria-current="page"]{color:var(--ns-ink);background:rgb(var(--ns-fg-rgb) / 0.05);}
.topbar[data-ns-header] .ns-subnav{display:flex;flex:none;align-items:center;gap:2px;padding-left:12px;border-left:1px solid var(--ns-line);}
.ns-sublink{font-size:13px;padding:0 10px;}

.ns-link.is-family{color:var(--ns-ink);}
.ns-link,.ns-sublink{white-space:nowrap;}
.ns-link .l-short{display:none;}
.topbar[data-ns-header]:has(.ns-subnav) .ns-link .l-full{display:none;}
.topbar[data-ns-header]:has(.ns-subnav) .ns-link .l-short{display:inline;}
@media (max-width:1180px){ .ns-link .l-full{display:none;} .ns-link .l-short{display:inline;} .topbar[data-ns-header]{gap:12px;} .ns-link{padding:0 10px;} }            /* Terminal, while on Pulse or Top Traders (they carry the current mark) */

/* One header for every page: the bar spans the window and the lockup sits at the same place on every page, whatever
   width the page below uses (pages used 1120 to 1680 px containers, so the logo jumped sideways between them). */
html{overflow-x:clip;}
/* body + attribute selector: outranks each page's own `.page > .topbar` margins, whatever order the files load in. */
body .topbar[data-ns-header]{margin-inline:calc(50% - 50vw);width:100vw;max-width:none;padding-inline:max(24px,calc((100vw - 1560px) / 2));box-sizing:border-box;}
html.is-embed{overflow-x:visible;}

.ns-tabs{display:none;}
/* 761 to 1100 px with the Terminal group (Terminal, Pulse, Top Traders): every link shows, so the header tightens and
   the lockup gives way to the mark to keep the wallet chip in view (was in each of the three pages, session 3). */
@media (min-width:761px) and (max-width:1100px){
  .topbar[data-ns-header]:has(.ns-subnav){gap:8px;}
  .topbar[data-ns-header]:has(.ns-subnav) .ns-lockup{display:none;}
  .topbar[data-ns-header]:has(.ns-subnav) .ns-mark{display:block;}
  .topbar[data-ns-header]:has(.ns-subnav) .ns-link,.topbar[data-ns-header]:has(.ns-subnav) .ns-sublink{padding:0 8px;}
  .topbar[data-ns-header] .ns-subnav{padding-left:8px;}
}
/* 761 to 900 px with the Terminal group, plus the light / dark toggle: "Connect" without "Wallet", a slimmer toggle. */
@media (min-width:761px) and (max-width:900px){
  .topbar[data-ns-header]:has(.ns-subnav) .ns-link,.topbar[data-ns-header]:has(.ns-subnav) .ns-sublink{padding:0 6px;}
  .topbar[data-ns-header]:has(.ns-subnav) .ns-theme{width:36px;}
  .topbar[data-ns-header]:has(.ns-subnav) .nw-btn .long{display:none;}
}
@media (max-width:760px){
  .topbar[data-ns-header]{gap:10px;}
  body .topbar[data-ns-header]{padding-inline:12px;}
  .topbar[data-ns-header] .ns-nav{display:none;}
  .ns-home .ns-lockup{display:none;}
  .ns-home .ns-mark{display:block;}
  .topbar[data-ns-header] .ns-subnav{padding-left:0;border-left:0;margin-left:auto;}
  .topbar[data-ns-header] .ns-subnav ~ .nw{margin-left:0;}
  .ns-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(var(--ns-tabbar-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgb(var(--ns-ground-rgb) / 0.94);border-top:1px solid var(--ns-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
  .ns-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:var(--ns-touch);font-size:11px;font-weight:600;letter-spacing:0.01em;color:var(--ns-body);text-decoration:none;white-space:nowrap;}
  .ns-tab svg{width:21px;height:21px;}
  .ns-tab[aria-current="page"]{color:var(--ns-ink);}
  .ns-tab[aria-current="page"] svg{color:var(--ns-mint);}
  body.has-ns-tabs{padding-bottom:calc(var(--ns-tabbar-h) + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion:reduce){.ns-link,.ns-sublink{transition:none;}}

/* ---------- the cross-chain bridge panel (assets/bridge-panel.js) ---------- */
.ns-bridge-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,0.55);opacity:0;transition:opacity 240ms linear;}
.ns-bridge-scrim.is-open{opacity:1;}
.ns-bridge{position:fixed;z-index:91;top:0;right:0;bottom:0;width:min(460px,100vw);display:flex;flex-direction:column;
  background:var(--ns-card,var(--ns-card));border-left:1px solid var(--ns-line-strong,rgb(var(--ns-fg-rgb) / 0.14));
  transform:translateX(100%);transition:transform 240ms var(--ns-ease,cubic-bezier(0.2,0.8,0.2,1));}
.ns-bridge.is-open{transform:none;}
.ns-bridge-head{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 10px 8px 18px;border-bottom:1px solid var(--ns-line);}
.ns-bridge-head h2{flex:1;margin:0;font-size:17px;font-weight:800;color:var(--ns-ink);letter-spacing:-0.01em;}
.ns-bridge-full{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--ns-r-pill,999px);font-size:14px;font-weight:600;color:var(--ns-body);text-decoration:none;}
.ns-bridge-full:hover{color:var(--ns-ink);}
.ns-bridge-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ns-line);border-radius:12px;background:transparent;color:var(--ns-ink);cursor:pointer;}
.ns-bridge-x:hover{border-color:var(--ns-line-strong,rgb(var(--ns-fg-rgb) / 0.14));}
.ns-bridge-x:focus-visible,.ns-bridge-full:focus-visible{outline:2px solid var(--ns-mint);outline-offset:2px;}
.ns-bridge-grip{display:none;}
.ns-bridge-frame{flex:1;width:100%;border:0;background:var(--ns-card,var(--ns-card));}
html.ns-bridge-lock,html.ns-bridge-lock body{overflow:hidden;}
@media (max-width:760px){
  .ns-bridge{top:auto;left:0;width:100%;height:calc(100% - 24px);border-left:0;border-top:1px solid var(--ns-line-strong,rgb(var(--ns-fg-rgb) / 0.14));
    border-radius:20px 20px 0 0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom,0px);}
  .ns-bridge-head{position:relative;padding-top:14px;}
  .ns-bridge-grip{display:block;position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--ns-line-strong,rgb(var(--ns-fg-rgb) / 0.14));}
}
@media (prefers-reduced-motion:reduce){ .ns-bridge,.ns-bridge-scrim{transition:none;} }