/* The lyrics of a song (partials/song-lyrics.html.twig, js/lyrics.js). Kept apart from the rest of the theme: they will move to the
   music plugin of the site (band-tools and boeuf as one engine, see TODO.md).

   The lyrics are one grid: each row of the template (a verse in every version) gives its cells to the grid, so the versions shown stand
   in columns aligned verse by verse. Without a script, the n-th button shows the n-th cell of every row. With a script (.js-versions),
   lyrics.js marks the cells of the versions on (.is-shown), any number of them, and the columns take the width of their longest line. */
.song-version { margin: 0 0 1rem; font-size: 1.25rem; }

/* The toolbar: one line of controls (versions, full screen; chords and key later), wrapping only when it is full */
.lyrics-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1.25rem; }
.lyrics-toolbar > * { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; }
.lyrics-toolbar:not(:has(> :not([hidden]))) { display: none; }
.versions-choice { display: flex; flex-wrap: wrap; gap: 0; }
/* The version buttons are one joined group (the theme gives a radio's label a margin of its own) */
.song-versions .versions-choice input + label { display: inline-block; margin: 0 0 0 -1px; padding: 0.3rem 0.9rem; border: 1px solid currentColor; border-radius: 0; cursor: pointer; opacity: 0.65; }
.song-versions .versions-choice input:first-of-type + label { margin-left: 0; border-radius: var(--q2-radius-pill) 0 0 var(--q2-radius-pill); }
.song-versions .versions-choice input:last-of-type + label { border-radius: 0 var(--q2-radius-pill) var(--q2-radius-pill) 0; }
.song-versions:not(.js-versions) .versions-choice input:checked + label, .song-versions .versions-choice input + label.is-on { opacity: 1; font-weight: 700; background: rgba(127, 127, 127, 0.15); }
.versions-choice input:focus-visible + label { outline: 2px solid var(--q2-accent, currentColor); outline-offset: 2px; }
.lyrics-toolbar > .lyrics-fullscreen { margin-left: auto; }
.lyrics-fullscreen { padding: 0.3rem 0.8rem; border: 1px solid currentColor; border-radius: var(--q2-radius-pill); background: none; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; opacity: 0.8; }
.lyrics-fullscreen:hover, .lyrics-fullscreen:focus-visible { opacity: 1; }

/* The grid of the verses */
.lyrics-flow { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; hyphens: manual; }
.lyrics-row { display: contents; }
.lyrics-row > div { display: none; min-width: 0; }
.lyrics-heads > div { margin-bottom: 0.75rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
/* The sections of a song (ChordPro {start_of_chorus}, {start_of_bridge}), the same in every version */
.lyrics-chorus { margin-bottom: 1em; padding-left: 1.25rem; border-left: 2px solid currentColor; }
.lyrics-chorus > :last-child { margin-bottom: 0; }
.lyrics-bridge, .lyrics-bridge :is(p, blockquote) { font-style: italic; }
/* The label of a section ({start_of_verse: Ad lib}), shown above it like the names of the columns */
.lyrics-row .lyrics-label { margin: 0 0 0.25rem; font-size: 0.8em; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
/* A second voice answering the first one (an indented line of the ChordPro file) */
.lyrics-voice { display: inline-block; padding-left: 2em; font-style: italic; }
/* An instruction to the singer ({comment}, {comment_italic}, {comment_box} of the ChordPro file), not sung */
.lyrics-comment { display: inline-block; font-size: 0.8em; opacity: 0.75; }
.lyrics-comment-italic { font-style: italic; }
.lyrics-comment-box { padding: 0 0.4em; border: 1px solid currentColor; border-radius: 0.25em; }
/* The verses follow the size of the lyrics (lyrics.js changes it): the theme gives paragraphs a size and a line height of their own */
.lyrics-row :is(p, blockquote, li) { font-size: inherit; line-height: 1.7; }

/* Without a script: the chosen version */
.song-version-single .lyrics-row:not(.lyrics-heads) > div:nth-child(1),
.song-versions:not(.js-versions):has(.versions-choice input:nth-of-type(1):checked) .lyrics-row:not(.lyrics-heads) > div:nth-child(1),
.song-versions:not(.js-versions):has(.versions-choice input:nth-of-type(2):checked) .lyrics-row:not(.lyrics-heads) > div:nth-child(2),
.song-versions:not(.js-versions):has(.versions-choice input:nth-of-type(3):checked) .lyrics-row:not(.lyrics-heads) > div:nth-child(3),
.song-versions:not(.js-versions):has(.versions-choice input:nth-of-type(4):checked) .lyrics-row:not(.lyrics-heads) > div:nth-child(4),
.song-versions:not(.js-versions):has(.versions-choice input:nth-of-type(5):checked) .lyrics-row:not(.lyrics-heads) > div:nth-child(5) { display: block; }

/* With a script: the versions on, in columns as wide as their longest line (--shown: how many), centred when lyrics.js lets them take
   the width of the window; when even the smallest font allowed does not make them fit, they share the width and long lines wrap
   (.is-squeezed) */
.js-versions .lyrics-row > div.is-shown { display: block; }
.js-versions:not(.is-several) .lyrics-heads > div { display: none; }
.js-versions .lyrics-flow { grid-template-columns: repeat(var(--shown, 1), max-content); justify-content: start; }
.js-versions .lyrics-flow.is-wide { justify-content: center; }
.js-versions.is-squeezed .lyrics-flow { grid-template-columns: repeat(var(--shown, 1), minmax(0, 1fr)); }
@media (max-width: 40rem) { .js-versions .lyrics-flow { grid-template-columns: minmax(0, 1fr); } }

/* Versions that do not fit in the text column (lyrics.js: .lyrics-wide): the side column goes under them, the video stays as wide as
   the text column, and lyrics.js lets the lyrics take the width of the window */
@media (min-width: 60rem) {
    .with-aside.lyrics-wide { grid-template-columns: minmax(0, 1fr); }
    .with-aside.lyrics-wide > aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; align-items: start; }
    .with-aside.lyrics-wide > aside > * { margin: 0; }
    .with-aside.lyrics-wide > .content-item { max-width: none; margin-inline: 0; }
    .with-aside.lyrics-wide :is(.embed-slot, .embed-card, .consent-embed) { max-width: 760px; }
}

/* The stage view (full screen, as in boeuf): light text on black, the name of the song; one version flows in as many columns as give
   the largest font, several stand side by side; lyrics.js sizes the font to fit the screen */
.song-versions:fullscreen { overflow-y: auto; padding: 1.25rem 2rem; color: #fff; background: #000; scrollbar-width: none; }
.song-versions:fullscreen::-webkit-scrollbar { display: none; }
.song-versions:fullscreen::before { content: attr(data-title); display: block; margin: 0 0 0.75rem; font-size: 1.5em; font-weight: 700; }
.song-versions:fullscreen .lyrics-toolbar { position: fixed; top: 1rem; right: 1.5rem; z-index: 1; margin: 0; font-size: 1rem; }
.song-versions:fullscreen .lyrics-toolbar > :not(.lyrics-fullscreen) { display: none; }
.song-versions:fullscreen :is(a, p, blockquote, li, .lyrics-heads > div) { color: inherit; }
.song-versions:fullscreen:not(.is-several) .lyrics-flow { display: block; column-width: 30rem; column-gap: 2rem; column-rule: dotted 1px; }
.song-versions:fullscreen:not(.is-several) .lyrics-row > div { break-inside: avoid; }
/* No footnotes on stage: neither the notes nor their calls */
.song-versions:fullscreen .lyrics-row.lyrics-notes,
.song-versions:fullscreen .lyrics-notes > div,
.song-versions:fullscreen .footnote-ref,
.song-versions:fullscreen sup:has(> .footnote-ref) { display: none; }

/* Phones keep the page as it is: one version at a time, no stage view */
@media (max-width: 40rem) { .lyrics-fullscreen, .song-version-single .lyrics-toolbar { display: none; } }