/* === state-progress-advanced (v7) – safe layout fixes === */

/* 1) Ensure grid/flex children can shrink, preventing spillover */
.state-table .state-row .cell { min-width: 0; }

/* 2) Playlist column: keep text on the left, icon on the right */
.state-table .track-cell .track-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.state-table .track-cell .track {
  flex: 1 1 auto;
  min-width: 0;
}
.state-table .track-cell .spotify-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 3) Split into lines and de-emphasize artist */
.state-table .track-cell .track .title {
  display: block;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.state-table .track-cell .track .artist {
  display: block;
  font-size: .92em;
  opacity: .85;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Help narrow screens avoid overlap */
@media (max-width: 900px) {
  .state-table .track-cell .track .title,
  .state-table .track-cell .track .artist {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 5) Keep Spotify glyph as monochrome to match your palette */
.ico-spotify { display: inline-block; }