/* Route / Liquid pools, Figma 1645:16504. Values are taken from the frame's design context.
   Shared tokens, the top nav and the menu are copied from pool.css (not linked: that file carries the pool page's app layout). */
@font-face{font-family:Geist;src:url('/yield/assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--surface:#f7f7f2;--edge:#dededa;--primary:#272b21;--muted:#72736b;--faint:#909090;--label:#a9a9a9;--chip:#eff0ea;
  --shadow:0 4px 8px -2px rgba(0,0,0,.03),0 8px 16px -4px rgba(0,0,0,.03),0 8px 16px -4px rgba(0,0,0,.04),0 0 0 1px rgba(202,204,197,.58)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--surface);color:var(--primary);font:500 12px/14px Geist,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
button:disabled{cursor:default}
input{font:inherit;color:inherit;margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #6a856b;outline-offset:2px}
.page{width:100%;min-width:0;overflow-x:clip}
/* Figma strokes are inside: 1px borders are absorbed by 1px less padding so outer sizes match. */
.cell{background:var(--surface);border:1px solid var(--edge);border-radius:8px}

/* Top Nav (copied from pool.css, Figma 1606:11325) */
.topnav{display:flex;height:83px}
.topnav>.cell{display:flex;align-items:center;padding:15px 23px}
.topnav-left{gap:16px;flex:none}
.topnav-mid{flex:1 1 0;min-width:0}
.topnav-right{gap:8px;flex:none}
.logo{position:relative;display:block;width:40px;height:40px;flex:none}
.logo img{position:absolute;inset:-2.5% -7.5% -12.5% -7.5%;width:115%;height:115%}
.navlinks{display:flex;align-items:center;gap:8px}
.navlink{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid transparent;border-radius:16px;font:400 15px/22.5px Geist,sans-serif;color:#252620;filter:drop-shadow(0 2px 1.5px rgba(37,38,32,.02))}
.navlink img{width:17px;height:17px;display:block}
.navlink .chev{width:14px;height:14px}
.navlink.active{background:var(--surface);border-color:#e3e4db;border-radius:88px}
.glass{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;background:rgba(207,207,203,.4);backdrop-filter:blur(13.8px);font:400 13px/19.5px Geist,sans-serif;color:#000;white-space:nowrap}
.glass img{width:16px;height:16px;display:block}
.icon-button{width:16px;height:16px}
.icon-button img{width:16px;height:16px;display:block}
.menu-wrap{position:relative}
.menu{position:absolute;top:calc(100% + 8px);z-index:30;display:flex;flex-direction:column;gap:4px;width:240px;padding:8px;background:var(--surface);border-radius:12px;box-shadow:var(--shadow)}
.menu-item{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border-radius:8px;font:500 13px/16px Geist,sans-serif;text-align:left;cursor:pointer}
.menu-item:hover{background:#efefe8}
.menu-item.checked{cursor:default}
.menu-item.checked::after{content:'';margin-left:auto;width:8px;height:8px;border-radius:50%;background:#448b1a}
.menu-note{padding:2px 10px;font:500 11px/14px Geist,sans-serif;color:var(--muted)}
.menu input[type=checkbox]{accent-color:var(--primary);margin:0}

/* Page bands: 180px grid cells either side of the 1080px column (Figma 1645:16508/16522, 1645:16524/16606) */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1080px) minmax(0,1fr)}

/* Header 1645:16509 */
.pools-head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px;padding:15px 23px;overflow:hidden}
.pools-head h1{font:500 24px/32px Geist,sans-serif;letter-spacing:-.12px;color:#000;white-space:nowrap}
.head-stats{display:flex;align-items:center;gap:24px;white-space:nowrap}
.head-stat{display:flex;flex-direction:column;gap:4px}
.head-stat span{font:500 12px/14px Geist,sans-serif;color:var(--label)}
.head-stat strong{font:500 14px/18px Geist,sans-serif;color:#1b1b1b;font-variant-numeric:tabular-nums}
.head-stat strong.tvl{color:#448b1a}

/* Content column 1645:16525: 32px sides, 24px top/bottom, 8px between filter bar and table */
.content{display:flex;flex-direction:column;gap:8px;min-width:0;padding:23px 31px}

/* Filter bar 1645:16526 */
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 0;min-height:53px}
.filter-left{display:flex;align-items:center;gap:8px}
.filter-right{display:flex;align-items:center;gap:16px}
.chip{display:flex;align-items:center;gap:8px;height:37px;padding:8px 12px;border-radius:80px;background:var(--chip);font:400 14px/21px Geist,sans-serif;color:#717267;white-space:nowrap}
.chip img{display:block;width:14px;height:14px}
.chip .filters-icon{width:17px;height:17px}
.chip[aria-expanded=true]{background:#e6e7df}
#network-menu{left:0}
#filters-menu{right:0}
.segmented{display:flex;align-items:stretch;height:37px;padding:4px;border-radius:80px;background:var(--chip);overflow:hidden}
.segmented button{display:flex;align-items:center;justify-content:center;width:40px;padding:0 8px;border-radius:256px;font:400 14px/21px Geist,sans-serif;color:rgba(113,114,103,.5)}
.segmented button:hover{color:rgba(37,38,32,.7)}
.segmented button.active{background:#f9faf4;color:rgba(37,38,32,.9)}
.search{display:flex;align-items:center;gap:9px;width:163px;min-width:112px;height:37px;padding:8px 12px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px #e3e4db;cursor:text}
.search img{display:block;width:16px;height:16px;flex:none}
.search input{flex:1 1 auto;min-width:0;height:21px;padding:0;border:0;background:none;font:400 13px/21px Geist,sans-serif;color:#252620;outline:none}
.search input::placeholder{color:#717267;opacity:.3}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{box-shadow:0 0 0 1px #b9bab0}
.min-tvl{display:flex;gap:4px;padding:2px 10px 4px}
.min-tvl button{height:26px;padding:0 8px;border-radius:13px;background:var(--chip);font:400 12px/14px Geist,sans-serif;color:var(--muted)}
.min-tvl button.active{background:var(--primary);color:#f7f7f2}

/* Table 1645:16548 */
.table-card{border:1px solid var(--edge);border-radius:16px;background:var(--surface);overflow:hidden}
.table{min-width:0}
.thead{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 13px;background:var(--chip)}
.thead button{font:400 13px/19.5px Geist,sans-serif;color:#72736b;white-space:nowrap}
.thead button:hover,.thead button.sorted{color:var(--primary)}
.thead button.sorted::after{content:' ↓'}
.thead button.sorted.asc::after{content:' ↑'}
.thead button:disabled{cursor:default;color:#72736b}
.cols{display:flex;align-items:center;width:560px;flex:none;height:44px}
.cols>*{flex:1 1 0;min-width:0;display:flex;align-items:center}
.cols>.end{justify-content:flex-end}

/* Pool Row 1645:16564: 70px tall including its 1px top border */
.prow{display:flex;align-items:center;justify-content:space-between;height:70px;padding:12px 13px 13px;border-top:1px solid var(--edge);background:var(--surface);overflow:hidden}
a.prow:hover{background:#f2f2ec}
.prow .who{display:flex;align-items:center;gap:16px;min-width:0}
.pair{display:flex;align-items:center;flex:none}
.token{display:inline-grid;place-items:center;flex:none;width:28.8px;height:28.8px;overflow:hidden;border-radius:27.009px;background:#e6e6e6;color:var(--primary);font:500 11px/1 Geist,sans-serif}
.token img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.pair .token:first-child{margin-right:-9.6px;position:relative;z-index:1}
.names{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.names strong{font:500 14px/18px Geist,sans-serif;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.pills{display:flex;gap:4px}
.pill{padding:1px 5px;border:1px solid var(--edge);border-radius:100px;font:500 12px/14px Geist,sans-serif;color:var(--muted);white-space:nowrap}
.prow .cols>*{flex-direction:column;align-items:flex-start}
.prow .cols>.end{align-items:flex-end}
.val{font:400 12px/14px Geist,sans-serif;color:#000;white-space:nowrap;font-variant-numeric:tabular-nums}
.val.na{color:var(--label)}
.cap-kind{margin-left:4px;font:500 10px/14px Geist,sans-serif;color:var(--label)}
.price-pill{display:flex;align-items:center;height:24px;padding:6px 8px;border-radius:8px;background:var(--chip);font:400 12px/14px Geist,sans-serif;color:#59634d;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-pill img{display:block;width:16px;height:16px;transform:scaleX(-1)}
.price-pill img.down{transform:rotate(180deg) scaleX(-1)}
.spark{display:block;width:112px;height:44px;overflow:visible}
.spark-empty{display:flex;align-items:center;justify-content:flex-end;width:112px;height:44px;font:400 12px/14px Geist,sans-serif;color:var(--label)}

/* Loading, empty and error rows */
.state-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:140px;padding:24px 13px;border-top:1px solid var(--edge);font:400 13px/19.5px Geist,sans-serif;color:var(--muted);text-align:center}
.state-row button{height:32px;padding:0 14px;border-radius:16px;background:var(--primary);color:#f7f7f2;font:500 12px Geist,sans-serif}
.skeleton .bar{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#ecece5 0%,#f4f4ee 50%,#ecece5 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.skeleton .token{background:#ecece5}
@keyframes shimmer{to{background-position:-200% 0}}
.table-foot{display:flex;justify-content:center;padding:10px;border-top:1px solid var(--edge)}
.more{height:32px;padding:0 16px;border-radius:80px;background:var(--chip);font:400 13px/19.5px Geist,sans-serif;color:#717267}
.more:hover{background:#e6e7df}
.source{font:500 11px/14px Geist,sans-serif;color:var(--label)}
.source:empty{display:none}

@media (max-width:1100px){
  .band{grid-template-columns:minmax(0,1fr)}
  .band>.side{display:none}
  .topnav{flex-wrap:wrap;height:auto}.topnav>.topnav-mid{display:none}
  .topnav-right{flex:1 1 auto;justify-content:flex-end}
  .navlink span{display:none}
}
@media (max-width:760px){
  .topnav>.cell{padding:11px 15px}
  .topnav-left{flex:1 1 auto;gap:8px;min-width:0}
  .navlinks{gap:2px}
  .navlink{padding:8px}
  .topnav-right{flex:1 1 100%;justify-content:flex-end}
  .pools-head{flex-direction:column;align-items:flex-start;height:auto;padding:15px}
  .head-stats{flex-wrap:wrap;gap:12px 20px}
  .content{padding:15px}
  .filterbar{flex-wrap:wrap}
  .filter-left,.filter-right{flex-wrap:wrap}
  .filter-right{flex:1 1 100%;gap:8px}
  .search{flex:1 1 auto;width:auto}
  .table-card{overflow-x:auto;overscroll-behavior-x:contain}
  .table{min-width:800px}
  #filters-menu{right:0;width:min(240px,calc(100vw - 32px))}
}
@media (prefers-reduced-motion:reduce){.skeleton .bar{animation:none}}

/* Swap menu in the top nav (as on route.fun: Swap, Multi-swap). */
.navlink svg{width:17px;height:17px;display:block;flex:none}
.nav-swap{position:relative}
.nav-swap>summary{list-style:none;cursor:pointer}
.nav-swap>summary::-webkit-details-marker{display:none}
.nav-swap[open]>summary .chev{transform:rotate(180deg)}
.nav-swap-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:grid;min-width:150px;padding:6px;border-radius:14px;background:#f7f7f2;box-shadow:0 12px 32px -8px rgba(0,0,0,.18),0 0 0 1px #e3e4db}
.nav-swap-menu a{padding:8px 10px;border-radius:9px;font:400 14px/20px Geist,sans-serif;color:#252620}
.nav-swap-menu a:hover{background:rgba(39,43,33,.06)}

/* $ROUTE pinned at the top of Discover. */
.pill.pinned{background:rgba(176,196,80,.22);border-color:rgba(143,176,42,.45);color:#3f4a1f}
.prow.pinned{background:linear-gradient(90deg,rgba(176,196,80,.09),transparent 60%),var(--surface)}
/* 24h change shown in the "Last 24h" column while sparklines are off. */
.chg-text{font:500 13px/18px Geist,sans-serif;color:var(--muted,#72736b)}
.chg-text.up{color:#0b9981}
.chg-text.down{color:#f23546}

/* Phones (Oct 9, 2026): one nav row like route.fun — logo, icon links, then wallet and theme as icons. */
@media (max-width:760px){
  .topnav{flex-wrap:nowrap;height:auto}
  .topnav>.topnav-mid{display:none}
  .topnav>.cell{padding:8px 10px}
  .topnav-left{flex:1 1 auto;min-width:0;gap:6px}
  .topnav-right{flex:none;gap:4px}
  .navlinks{gap:2px}
  .navlink{padding:8px;min-width:38px;min-height:38px;justify-content:center}
  .navlink span{display:none}
  .topnav .logo{width:34px;height:34px}
  .topnav-right .glass{width:38px;height:38px;padding:0;justify-content:center}
  .topnav-right .glass span{display:none}
}
@media (max-width:360px){.nav-swap .chev{display:none}.navlink{padding:7px;min-width:34px}}
/* Phones: the token list as two columns — token (icons, name, tags) and price over its 24h change. Market cap,
   volume and age are left out; sorting by them stays on larger screens. */
@media (max-width:600px){
  .table-card{overflow:hidden}
  .table{min-width:0}
  .thead{padding:0 12px}
  .cols{width:auto;gap:10px}
  .cols>*:nth-child(1),.cols>*:nth-child(2),.cols>*:nth-child(4){display:none}
  .cols>*:nth-child(3){flex:none;width:92px}
  .cols>.end{flex:none;width:64px}
  .prow{height:auto;min-height:66px;padding:10px 12px;gap:10px}
  .prow .who{gap:10px;flex:1 1 auto}
  .prow .cols{height:auto}
  .prow .cols>*:nth-child(3){align-items:flex-end}
  .names strong{max-width:100%;font-size:14px}

  .pills{flex-wrap:nowrap}
  .pills .pill:nth-child(n+2){display:none}
  .cols>*:nth-child(3){width:84px}
}