/* /songs/: a song made on the line's modules, under module.css's skin (the nav, the hero, the type, the gold). The player,
   the parts' line, and the rack the song was played on: every module it used, a card an instance, each lit by its own
   part while the song plays (songs.js), in a plain grid like the bench's (no rails, no case). */
.song-player { max-width: 1080px; margin: 0 auto; padding: 0 24px 8px; }
.song-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.song-time { font-family: "Space Mono", monospace; font-size: 0.85rem; color: var(--muted, #b8a98a); font-variant-numeric: tabular-nums; }
.song-line { position: relative; height: 34px; margin: 14px 0 4px; cursor: pointer; touch-action: none; }
.song-line::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: rgba(255, 214, 140, 0.18); }
.song-done { position: absolute; left: 0; top: 16px; height: 2px; width: 0; background: var(--gold, #e9b75b); }
.song-part { position: absolute; top: 0; height: 34px; border-left: 1px solid rgba(255, 214, 140, 0.35); padding-left: 5px;
  font-family: "Space Mono", monospace; font-size: 0.68rem; line-height: 1; color: rgba(255, 230, 190, 0.55); white-space: nowrap; overflow: hidden; }
.song-part.now { color: var(--gold, #e9b75b); }
.song-line:focus-visible { outline: 1px solid var(--gold, #e9b75b); outline-offset: 4px; }

.song-rack { max-width: 1080px; margin: 34px auto 0; padding: 0 24px; }
.song-rack h2, .song-words h2 { margin-bottom: 6px; }
.song-rack .rack-note { margin: 0 0 18px; color: var(--muted, #b8a98a); }
.rack-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px; align-items: end; }
.rack-card { margin: 0; text-align: center; }
.rack-card img { display: block; width: 100%; height: auto; transition: filter 90ms linear; }
.rack-card figcaption { margin-top: 8px; font-size: 0.82rem; line-height: 1.35; }
.rack-card figcaption a { font-weight: 600; }
.rack-card .rack-what { display: block; color: var(--muted, #b8a98a); }
.playing .rack-card img { filter: brightness(var(--lit, 0.35)); }
/* the patch over the cards (songs.js draws it, in /cables.js's look), and in words under them */
.rack-cables { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.song-patch { margin: 26px 0 0; font-size: 0.85rem; }
.song-patch summary { cursor: pointer; color: var(--gold, #e9b75b); width: max-content; max-width: 100%; }
.song-patch summary:focus-visible { outline: 1px solid var(--gold, #e9b75b); outline-offset: 3px; }
.song-patch ol { margin: 12px 0 0; padding-left: 1.6em; columns: 2 330px; column-gap: 36px; }
.song-patch li { margin: 0 0 4px; break-inside: avoid; }
.song-patch .jack { font-family: "Space Mono", monospace; font-size: 0.78rem; color: var(--gold, #e9b75b); }
.song-patch .when { color: var(--muted, #b8a98a); }

.song-words { max-width: 760px; margin: 46px auto 80px; padding: 0 24px; }
.song-words p { margin: 0 0 1em; }
.song-words .song-facts { font-family: "Space Mono", monospace; font-size: 0.8rem; color: var(--muted, #b8a98a); }

@media (max-width: 640px) {
  .song-player, .song-rack, .song-words { padding-left: 16px; padding-right: 16px; }
  .rack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .song-part { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .rack-card img { transition: none; } }

/* the words of a song, set as verses */
.song-lyrics p { margin: 0 0 1.1em; }

/* the index: a song an item, its rack in miniature under it */
.song-list { max-width: 1080px; margin: 10px auto 90px; padding: 0 24px; display: grid; gap: 54px; }
.song-item { border-top: 1px solid rgba(255, 214, 140, 0.18); padding-top: 26px; }
.song-title { margin: 0; }
.song-title a { color: var(--gold, #e9b75b); }
.song-line-of { margin: 4px 0 2px; }
.song-item .song-facts { font-family: "Space Mono", monospace; font-size: 0.8rem; color: var(--muted, #b8a98a); margin: 0 0 10px; }
.song-blurb { max-width: 720px; margin: 0 0 16px; color: var(--muted, #b8a98a); }
.song-strip { display: flex; gap: 8px; overflow: hidden; }
.song-strip img { width: 74px; height: auto; flex: none; }
@media (max-width: 640px) {
  .song-list { padding-left: 16px; padding-right: 16px; }
  .song-strip { flex-wrap: wrap; }
  .song-strip img { width: calc((100% - 32px) / 5); }
}