/* Rank ranges use one palette on every screen. Cell backgrounds show movement. */
:root{--rank-top10:#087c49;--rank-top30:#2869b1;--rank-beyond30:#9a5d12;--rank-top10-soft:#e4f3eb;--rank-top30-soft:#e7eff9;--rank-beyond30-soft:#fbefdf}
.overview-bands>span[data-rank-range="top10"]{--rank-range:var(--rank-top10);--rank-range-soft:var(--rank-top10-soft)}
.overview-bands>span[data-rank-range="top30"]{--rank-range:var(--rank-top30);--rank-range-soft:var(--rank-top30-soft)}
.overview-bands>span[data-rank-range="beyond30"]{--rank-range:var(--rank-beyond30);--rank-range-soft:var(--rank-beyond30-soft)}
.overview-bands>span[data-rank-range] .overview-band-track{background:var(--rank-range-soft)}
.overview-bands>span[data-rank-range] .overview-band-track i{background:var(--rank-range)}
.band[data-rank-range="top10"]{--rank-range:var(--rank-top10)}
.band[data-rank-range="top30"]{--rank-range:var(--rank-top30)}
.band[data-rank-range="beyond30"]{--rank-range:var(--rank-beyond30)}
.band[data-rank-range]{box-shadow:inset 0 -3px var(--rank-range)}
.band[data-rank-range] strong{color:var(--rank-range)}
.rank.top3,.rank.top10,.rank.good{color:var(--rank-top10)}
.rank.top30{color:var(--rank-top30)}
.rank.other,.rank.beyond30{color:var(--rank-beyond30)}