.media-container {
  margin: 0 auto 1rem;
  max-width: 960px; /* 240 x 4 */
  text-align: center; /* For a fallback "not supported" text to be centered */
}
.media-desc {
  margin: 0 auto 1.5rem;
  max-width: 960px; /* 240 x 4 */
}

.player-button {
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 0 1px; /* Matches (1+1) 2px margin-bottom for song-line */
  padding: 4px 8px 4.5px;
}
.player-button:first-child {
  margin-left: 10px; /* Also for padding and margin from before */
}
.player-button:last-child {
  margin-right: 10px; /* Also for padding and margin from after */
}

.song-list {
  background-color: #fafafa; /* Gray98 */
  border-radius: 1rem;
  box-sizing: border-box;
  margin: 0 auto 2rem;
  max-width: 720px; /* 240 x 3 */
  padding: 1em;
  text-align: left;
}
.song-list summary {
  border-radius: 0.5rem;
}
.song-list summary:hover {
  background-color: #f2f2f2; /* Gray95 */
}

.song-line {
  border-radius: 0.5rem;
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 2px; /* Space for focus frame */
  padding: 0 0.3em;
  width: 100%;
}
.song-line:hover {
  background-color: #f2f2f2; /* Gray95 */
}
.song-line:hover .player-button:hover {
  background-color: #ebebeb; /* Gray92 */
}

.song-line.paused {
  background-color: #ebebeb; /* Gray92 */
}
.song-line.paused:hover {
  background-color: #e3e3e3; /* Gray89 */
}
.song-line.paused:hover .player-button:hover {
  background-color: #dbdbdb; /* Gray86 */
}

.song-line.played {
  background-color: #dbdbdb; /* Gray86 */
}
.song-line.played:hover {
  background-color: #d4d4d4; /* Gray83 */
}
.song-line.played:hover .player-button:hover {
  background-color: #cccccc; /* Gray80 */
}

.line-flex {
  align-items: center;
  display: flex;
  gap: 0.3em;
}
.line-left {
  flex: 1 1 auto;
  min-width: 0; /* For ellipsis to work */
}
.line-right {
  flex: 0 0 auto;
  font-style: italic;
}

/* EOF */