/* The full chart. Sits inside .panel, so only the rows are defined. */
.top30 { display: flex; flex-direction: column; gap: 2px; }

.top30__row {
  display: grid;
  grid-template-columns: 46px 62px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 10px);
}
.top30__row:nth-child(odd) { background: var(--color-ice, #edf4ff); }

.top30__pos {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy, #12345b);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.top30__row--top .top30__pos { color: var(--color-red, #dd0b18); }

.top30__move {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.top30__move .icon { width: 15px; height: 15px; }

/* Both clear 4.5:1 on the striped row background. */
.top30__move--up { color: #0a7a33; }
.top30__move--down { color: #b3121d; }
/* Movement values must stay readable on the striped row. */
.top30__move--same,
.top30__same { color: var(--color-ink-soft, #4a5a6e); }

.top30__new {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-red, #dd0b18);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.top30__text { display: flex; flex-direction: column; min-width: 0; }
.top30__title { font-size: 16.5px; font-weight: 700; color: var(--color-navy, #12345b); }
.top30__artist { font-size: 14.5px; color: var(--color-ink-soft, #4a5a6e); }

.top30__weeks {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  color: var(--color-ink-soft, #4a5a6e);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.top30__weeks-label { font-size: 12px; font-weight: 600; }

@media (max-width: 720px) {
  .top30__row { grid-template-columns: 34px 48px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .top30__pos { font-size: 20px; }
  .top30__weeks { display: none; }
}