/* The Neon Current Top 40 page: listen.css's tokens and type, its own palette, a numbered chart. */
body[data-show="top40"] { --bg: #13111c; --ink: #f1eefa; --soft: #aea8c4; --accent: #7ad8e7; --panel: rgba(122,216,231,.07); }
a.play { text-decoration: none; }

.chart-head { padding: 1.5rem 0 2rem; max-width: 46rem; }
.eyebrow { color: var(--accent); font-weight: 700; margin: 0 0 .4rem; }
.chart-head h1 {
  font-size: clamp(2.6rem, 8vw, 6.2rem); line-height: .9; letter-spacing: -.03em; font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  background: linear-gradient(90deg, #7ad8e7, #bc7de1 70%); -webkit-background-clip: text; background-clip: text;
  color: transparent; padding-bottom: .06em;
}
.lede { color: var(--soft); max-width: 58ch; margin: 1rem 0 1.5rem; }

.chart { list-style: none; margin: 0; padding: 0 0 6rem; counter-reset: none; }
.chart li {
  display: grid; align-items: center; gap: .9rem;
  grid-template-columns: 3.4rem 2.8rem 3.5rem minmax(0, 1fr) 3rem auto auto;
  padding: .55rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.chart li.on { background: var(--panel); border-radius: 6px; }
.chart li.on .pos { color: var(--accent); }
.pos {
  font: 800 2.1rem/1 var(--display); font-variation-settings: "wdth" 75; text-align: right;
  font-variant-numeric: tabular-nums;
}
.chart li:nth-child(-n+3) .pos { font-size: 2.7rem; color: var(--accent); }
.move { font-size: .85rem; font-weight: 700; text-align: center; color: var(--soft); }
.move.up { color: #7fd88f; }
.move.down { color: #f08a8a; }
.move.new { color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.thumb { width: 3.5rem; height: 3.5rem; border-radius: 4px; overflow: hidden; background: var(--panel); }
.thumb img, .thumb .blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.what { min-width: 0; display: flex; flex-direction: column; }
.what b { font: 700 1.05rem/1.25 var(--display); font-variation-settings: "wdth" 85; overflow-wrap: anywhere; }
.what b a { color: inherit; text-decoration: none; }
.what b a:hover, .what b a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }
.what span { color: var(--soft); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.len { color: var(--soft); font-variant-numeric: tabular-nums; font-size: .9rem; text-align: right; }

.heart {
  border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); background: transparent; color: var(--ink);
  border-radius: 999px; padding: .3rem .75rem; font: 700 .9rem var(--body); cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.heart[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* The week's records and artists, by likes. */
.week-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem; padding: 0 0 6rem; }
.ranks { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ranks li { counter-increment: rank; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ranks a { display: grid; grid-template-columns: 2rem 3rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem .25rem;
  color: inherit; text-decoration: none; }
.ranks a::before { content: counter(rank); font: 800 1.4rem/1 var(--display); font-variation-settings: "wdth" 75; color: var(--accent); text-align: right; }
.ranks img, .ranks .blank { width: 3rem; height: 3rem; border-radius: 4px; object-fit: cover; background: var(--panel); }
.ranks .blank { background: #16171b url(/static/brand/mark.png) center / 40% no-repeat; }
.ranks .what { display: flex; flex-direction: column; min-width: 0; }
.ranks .what b { font: 700 1rem/1.25 var(--display); font-variation-settings: "wdth" 85; overflow-wrap: anywhere; }
.ranks .what span { color: var(--soft); font-size: .88rem; }
.ranks .n { color: var(--soft); font-variant-numeric: tabular-nums; font-size: .9rem; }
.ranks a:hover b, .ranks a:focus-visible b { text-decoration: underline; text-decoration-color: var(--accent); }

@media (max-width: 640px) {
  .chart li { grid-template-columns: 2.6rem 3rem minmax(0, 1fr) auto; gap: .6rem; padding: .6rem .25rem; }
  .pos { font-size: 1.7rem; }
  .chart li:nth-child(-n+3) .pos { font-size: 2rem; }
  .move, .len { display: none; }
  .heart { grid-column: 3; justify-self: start; padding: .2rem .65rem; }
  .chart li .pbtn { grid-column: 4; grid-row: 1 / span 2; }
  .thumb { grid-column: 2; grid-row: 1 / span 2; }
  .pos { grid-row: 1 / span 2; }
  .what { grid-column: 3; }
}