.lyrics-container {
  max-width: 95%;
  margin: 0 auto;
  line-height: normal;
}

.song-container {
  border-radius: inherit;
  padding: inherit;
  padding-top: 5px;
  margin-bottom: 20px;
}

.track-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.album-label {
  font-size: 12px;
  color: var(--lyric_colour);
}

.album-title {
  font-size: 18px;
  color: var(--main-colour);
  text-align: right;
  margin-right: 20px;
}

.section {
  margin-bottom: 20px;
}

.lyrics-line {
  margin-bottom: 0.2em;
  line-height: 1.2em;
}

.singer-matt {
  color: var(--lyric_colour);
  border-left: 3px solid var(--matt);
  text-shadow: 1px 1px 2px var(--matt_shadow);
  padding-left: 10px;
}

.section.singer-matt::after {
  content: attr(data-singer);
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--matt_shadow);
  color: var(--matt);
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 0px 10px 0px 10px;
  z-index: 10;
  text-shadow: none;
}

.singer-dan {
  color: var(--lyric_colour);
  border-left: 3px solid var(--dan);
  text-shadow: 1px 1px 2px var(--dan_shadow);
  padding-left: 10px;
}

.section.singer-dan::after {
  content: attr(data-singer);
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--dan_shadow);
  color: var(--dan);
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 0px 10px 0px 10px;
  z-index: 10;
  text-shadow: none;
}

.singer-both {
  color: var(--lyric_colour);
  border-left: 3px solid var(--both);
  text-shadow: 1px 1px 2px var(--both_shadow);
  padding-left: 10px;
}

.section.singer-both::after {
  content: attr(data-singer);
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--both_shadow);
  color: var(--both);
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 0px 10px 0px 10px;
  z-index: 10;
  text-shadow: none;
}

.singer-other {
  color: var(--lyric_colour);
  border-left: 3px solid var(--other);
  text-shadow: 1px 1px 2px var(--other_shadow);
  padding-left: 10px;
}

.section.singer-other::after {
  content: attr(data-singer);
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--other_shadow);
  color: var(--other);
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 0px 10px 0px 10px;
  z-index: 10;
  text-shadow: none;
}

.section.singer-matt,
.section.singer-dan,
.section.singer-both,
.section.singer-other {
  position: relative;
  padding-right: 15%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border-radius: 10px;
}

.section-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.lyrics-form-group {
  position: relative;
  margin-bottom: var(--padding-xl);
  font-weight: bold;
  background-color: var(--secondary-colour);
  padding: var(--padding-md);
  border-radius: var(--padding-md);
}

/* Standardized Lyrics Box Dimensions (Matches Discography Lightbox) */
#lyricsLightbox .lb-outerContainer,
#lightbox .lb-outerContainer:has(#lb-lyrics) {
  width: 650px;
  height: 650px;
  position: relative;
}

/* Lyrics overlay — SINGLE SOURCE for both contexts (the release lightbox's
 #lb-lyrics, built by js/lightbox.js, and h/lyrics-list.php's #lyricsLightbox).
 Both markups carry these classes; lightbox.css no longer holds a copy. */
.lb-lyrics {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: var(--black);
  border-radius: var(--border-radius);
}

.lb-lyrics-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--secondary-colour);
  border-radius: var(--border-radius);
  padding: var(--padding-lg);
  box-sizing: border-box;
}

.lb-lyrics-close {
  /* sticky !important must beat the inline position:absolute lightbox.js writes */
  position: sticky !important;
  top: 10px;
  right: 10px;
  background: var(--sales-red);
  color: var(--white);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 100;
  float: right;
  border-radius: calc(var(--border-radius) / 2);
  font-family: var(--font-body);
  font-weight: bold;
}

.lyrics-text {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  padding: var(--padding-lg);
}