/* Top 30 sidebar panel. Sits on .rail-card, so only the rows are defined. */
.top30rail__list { display: flex; flex-direction: column; gap: 2px; }

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

.top30rail__pos {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-red, #dd0b18);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.top30rail__text { display: flex; flex-direction: column; min-width: 0; }

.top30rail__title,
.top30rail__artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top30rail__title { font-size: 15px; font-weight: 700; color: var(--color-navy, #12345b); }
.top30rail__artist { font-size: 13.5px; color: var(--color-ink-soft, #4a5a6e); }

.top30rail__move { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 22px; font-variant-numeric: tabular-nums; font-weight: 700; }
.top30rail__move .icon { width: 16px; height: 16px; }

/* #0a7a33 and #b3121d rather than the plain greens and reds: both clear 4.5:1
   on the striped row background. */
.top30rail__move--up { color: #0a7a33; }
.top30rail__move--down { color: #b3121d; }
/* Not --color-placeholder: the unchanged zero must remain readable. */
.top30rail__same { color: var(--color-ink-soft, #4a5a6e); font-weight: 700; }

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