/* ==========================================================================
   IMABEATDUHPARTY — DUH HOT CHART
   Reads like an official chart, built from the Music page's own language:
   the same dark ground, glass panel, pink accent and rounded rows.
   ========================================================================== */

.chart__head {
  display: grid;
  gap: var(--sp-5);
  margin-block-end: var(--sp-6);
}
@media (min-width: 56rem) {
  .chart__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.chart__sub {
  margin-block-start: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.chart__controls {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}
@media (min-width: 56rem) {
  .chart__controls { justify-items: end; }
}

/* --- Period selector ------------------------------------------------------ */
.chart__periods {
  display: inline-flex;
  /* Three nowrap tabs are wider than a 320px screen's content box. Wrapping
     lets the third drop to a second line there instead of pushing the whole
     page sideways. Above ~360px they still sit on one row. */
  flex-wrap: wrap;
  max-width: 100%;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--glass-line, rgb(255 255 255 / 0.14));
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.04);
}

.chart__tab {
  padding: 0.55em 1.05em;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.chart__tab:hover { color: var(--paper); }
.chart__tab[aria-selected="true"] {
  background: var(--pink);
  color: var(--ink);
}

.chart__period-label {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- The chart itself ----------------------------------------------------- */
.chart__body { padding: var(--sp-3); }
.chart__rows { display: grid; }

.chart__row + .chart__row {
  border-block-start: 1px solid rgb(255 255 255 / 0.07);
}

.chart__hit {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}
.chart__hit:hover,
.chart__hit:focus-visible { background: rgb(255 255 255 / 0.06); }

/* Five columns is a lot for a small phone. Tightening the gutters here gives
   the title and artist real room to breathe instead of being squeezed to
   nothing. Nothing is hidden or removed — the row is identical, just closer
   together. */
@media (max-width: 30rem) {
  .chart__hit {
    gap: var(--sp-2);
    padding-inline: var(--sp-3);
  }
}

.chart__rank {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
  width: 2.2ch;
  text-align: right;
}

.chart__art {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  background: var(--ink-3);
}
.chart__art img { width: 100%; height: 100%; object-fit: cover; }
.chart__art-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--pink), var(--pink-deep));
}

.chart__meta { display: grid; gap: 2px; min-width: 0; }

.chart__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* IMABEATDUHPARTY is one long unbreakable word. Without this it overflows
   the meta column on a narrow screen and runs underneath the play count and
   the movement badge. Truncating keeps every row intact at any width. */
.chart__artist,
.chart__stats {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart__stats { color: rgb(255 255 255 / 0.34); }

.chart__plays {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.chart__plays b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1;
}
.chart__plays i {
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- Movement ------------------------------------------------------------- */
.chart__move {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  text-align: right;
  white-space: nowrap;
}
.chart__move--up { color: #4ade80; }
.chart__move--down { color: #ff6b6b; }
.chart__move--same { color: var(--fg-faint); }
.chart__move--new {
  color: var(--ink);
  background: var(--pink);
  padding: 0.25em 0.5em;
  border-radius: var(--radius-pill);
}

/* --- Number one ----------------------------------------------------------
   A touch more presence than the rest, without inflating the section. */
.chart__row--lead .chart__hit {
  background:
    radial-gradient(120% 160% at 0% 50%, rgb(255 47 146 / 0.12), transparent 62%),
    rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 47 146 / 0.22);
}
.chart__row--lead .chart__rank {
  color: var(--pink);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.chart__row--lead .chart__art { width: 66px; height: 66px; }
.chart__row--lead .chart__title { font-size: var(--t-body); }

/* Whatever is playing right now */
.chart__row.is-current .chart__title { color: var(--pink); }

/* --- Empty state ---------------------------------------------------------- */
.chart__empty {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--fg-muted);
  max-width: 46ch;
  margin-inline: auto;
}
.chart__empty p:first-child {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
}
.chart__empty p:last-child { font-size: var(--t-small); }

/* ==========================================================================
   Mobile — stack the row so the title always has room, and keep the
   numbers where the eye expects them.
   ========================================================================== */
@media (max-width: 40rem) {
  .chart__hit {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    row-gap: var(--sp-2);
  }
  .chart__art { width: 44px; height: 44px; }
  .chart__row--lead .chart__art { width: 54px; height: 54px; }

  /* Plays and movement share the row under the title */
  .chart__plays {
    grid-column: 3;
    grid-row: 2;
    justify-items: start;
    display: flex;
    align-items: baseline;
    gap: 0.35em;
  }
  .chart__plays b { font-size: var(--t-small); }
  .chart__move {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .chart__stats { display: none; }
}