/* User ranking: identity, comparison bar and amount stay on one row. */
.user-rank-row{display:grid;min-width:0;grid-column:1/-1;grid-template-columns:subgrid;column-gap:6px;align-items:center;height:32px;line-height:20px;padding:6px 0;font-size:var(--fs-xs)}
.user-rank-number{text-align:center;font-variant-numeric:tabular-nums;color:var(--text-muted);font-weight:600}
.user-rank-row:nth-child(-n+3) .user-rank-number{color:var(--pos)}
.user-rank-identity{display:flex;flex-direction:row;align-items:baseline;gap:8px;min-width:0}
.user-rank-name{min-width:0;flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-rank-site{max-width:45%;color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-rank-track.bar-bg{height:10px}
.user-rank-track .bar{animation:none}
@media(max-width:600px){.user-rank-row .bridge-value{font-size:11px}}

.user-rank-link{padding:0;border:0;background:none;color:var(--accent);text-align:left;font:inherit;font-weight:600;cursor:pointer;line-height:inherit}
.user-rank-link:hover{text-decoration:underline;background:none}
.user-rank-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.user-rank-name.is-low-balance,.user-cache-account strong.is-low-balance{color:#dc2626}

/* Preview row count follows available panel height; More opens the full list. */
#userConsumptionRanking,#userRPMRanking{display:grid;grid-template-columns:20px minmax(100px,160px) minmax(0,1fr) max-content;grid-auto-rows:32px;align-content:start;column-gap:6px;overflow:hidden}

.user-ranking-layout .panel-head{min-height:62px;gap:8px}
.user-ranking-layout .panel-head h2{white-space:nowrap}
.layout-2.user-ranking-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){.layout-2.user-ranking-layout{grid-template-columns:1fr}}

@media(max-width:600px){#userConsumptionRanking,#userRPMRanking{grid-template-columns:18px minmax(70px,100px) minmax(0,1fr) max-content}}

#userConsumptionRanking>.muted,#userRPMRanking>.muted{grid-column:1/-1}

.ranking-dialog-list{display:grid;grid-template-columns:20px minmax(70px,160px) minmax(0,1fr) max-content;grid-auto-rows:32px;align-content:start;column-gap:6px}