/* Keep only the token icon pinned on phones; the identity scrolls normally. */
#tokensTable :is(.tokens-prefix-cell,.tokens-icon-cell) {display:none}
.tokens-prefix-link {display:flex;align-items:center;gap:5px;text-decoration:none;color:inherit}
#tokensTable th[data-key="token"] {left:0;z-index:5;text-align:left;min-width:440px;width:440px}
.tokens-icon-link {display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
:is(.tokens-prefix-link,.tokens-icon-link):focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

@media(max-width:640px) {
  #tokensTable :is(th,td).tokens-prefix-cell {
    display:table-cell;position:static;left:auto;z-index:auto;box-sizing:border-box;
    width:57px;min-width:57px;max-width:none;padding-left:9px;padding-right:5px;
  }
  #tokensTable th.tokens-prefix-cell {position:sticky;left:auto;z-index:3}
  #tokensTable :is(th,td).tokens-icon-cell {
    display:table-cell;position:sticky;left:0;z-index:4;box-sizing:border-box;
    width:48px;min-width:48px;max-width:48px;padding-left:9px;padding-right:9px;
  }
  #tokensTable th.tokens-icon-cell {z-index:6}
  #tokensTable th[data-key="token"] {
    left:auto;z-index:3;min-width:216px;width:216px;max-width:216px;
  }
  #tokensTable td.tokens-identity {
    position:static;left:auto;z-index:auto;min-width:216px;width:216px;max-width:216px;
  }
  #tokensTable .tokens-identity :is(.tokens-rank,.tokens-venues,.tokens-icon) {display:none}
}

/* Compact token rows on phones and desktop, keeping the icons at 30px. */
#tokensTable tbody td:not(.tokens-empty) {height:40px;padding-top:3px;padding-bottom:3px}