.ranking-movement {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: 0.38rem;
  color: #187342;
  font: 800 0.68rem/1.1 "Manrope", Inter, system-ui, sans-serif;
  white-space: nowrap;
  vertical-align: middle;
}

.ranking-movement--down {
  color: #b4232d;
}

.ranking-movement--steady {
  color: #74685e;
}

html body.page-ranglister .ranking-toolbar__results {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

html body.page-ranglister #resultsText {
  min-width: 0;
}

html body.page-ranglister .podcast-card__placement:has(.ranking-movement) {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 7px;
  align-items: center;
}

html body.page-ranglister .podcast-card__placement:has(.ranking-movement) .placement-label {
  grid-column: 1 / -1;
}

html body.page-ranglister .placement-value--with-movement {
  display: inline-block;
}

html body.page-ranglister .desktop-ranking-rank:has(.ranking-movement),
html body.page-ranglister .desktop-ranking-row__rank:has(.ranking-movement) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.38rem !important;
  white-space: nowrap !important;
}

html body.page-ranglister .desktop-ranking-rank .ranking-movement,
html body.page-ranglister .desktop-ranking-row__rank .ranking-movement {
  margin-left: 0;
  color: #146238;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1 !important;
}

html body.page-ranglister .desktop-ranking-rank .ranking-movement--down,
html body.page-ranglister .desktop-ranking-row__rank .ranking-movement--down {
  color: #a51f2b;
}

html body.page-ranglister .desktop-ranking-rank .ranking-movement--steady,
html body.page-ranglister .desktop-ranking-row__rank .ranking-movement--steady {
  color: #74685e;
}

@media (min-width: 1101px) {
  html body.page-ranglister .desktop-ranking-row__rank:has(.ranking-movement),
  html body.page-ranglister .desktop-ranking-row__rank:not(:has(.ranking-movement)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px !important;
    align-items: start !important;
    justify-content: stretch !important;
    padding-right: 4px !important;
    column-gap: 2px !important;
    white-space: normal !important;
  }

  html body.page-ranglister .desktop-ranking-row__number {
    grid-column: 1;
    min-width: 0;
    justify-self: end;
    text-align: right;
    white-space: nowrap !important;
  }

  html body.page-ranglister .desktop-ranking-row__rank--wide-number .desktop-ranking-row__number {
    grid-column: 1 / -1;
  }

  html body.page-ranglister .desktop-ranking-row__rank .ranking-movement {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}

@media (max-width: 700px) {
  html body.page-ranglister .ranking-toolbar__results {
    grid-area: count;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.45rem;
  }

  html body.page-ranglister #resultsText {
    flex: 1 1 0;
    white-space: normal !important;
    line-height: 1.35;
  }

}

@media (max-width: 768px) {
  html body.page-ranglister .podcast-card__placement:has(.ranking-movement) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: 38px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.page-ranglister .placement-value--with-movement {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    height: 22px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important;
    box-shadow: 0 3px 8px rgba(223, 84, 16, 0.2) !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.page-ranglister .podcast-card__placement .ranking-movement {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 1px 4px;
    border-radius: 999px;
    background: #f3eee7;
    font-size: 0.68rem;
    line-height: 12px !important;
    letter-spacing: 0;
  }
}