/* ─── 25 Sep 2026 — LYRICS PAGE (src/LyricsPage.jsx) ──────────────────────────────────────────────
   Hugo: "its own page where i can pick album and song and read them in a nicely formatted way".
   Two fixed columns inside the standard .view-page: the album picker + songs (300px) | the reader.
   Every box is sized by the grid and scrolls inside itself; the reader's header is one fixed height
   for every song (the title is clamped to two lines), so switching songs moves nothing (invariant
   #20). Buttons are the page pill (.media-expand-pill, as in Media > Songs). Colours and type are
   tokens only: one type scale, one heading (the song title), secondary text in --ink-muted. */

.view-page.lyr-view {
  overflow: hidden;              /* each column scrolls on its own */
  min-height: 0;
  color: var(--ink);
  /* 27 Sep 2026 — ONE header box for both panels (Hugo: "make sure the header of the lyrics section
     with the title is aligned with the header of the left drawer"): the album picker's header and the
     reader's header share this height and these paddings, so their first lines start at the same y
     and their divider lines sit on the same y, for every album and every song. */
  --lyr-head-h: 132px;
  --lyr-head-pt: 20px;
  --lyr-head-pb: 16px;
  --lyr-head-line: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
}
.lyr-body {
  flex: 1 1 auto;
  min-height: 420px;             /* never collapses, even where --app-vh resolves to 0 */
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.lyr-note { padding: 32px; text-align: center; color: var(--ink-muted); font-size: var(--fs-14); }

/* ── left: albums + songs ── */
.lyr-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 10px 12px;          /* the top is the shared header box's own padding */
}
/* the same box as .lyr-head: the eyebrow on its first line, the album / EP chips below it in a fixed
   area that holds two rows of chips and scrolls inside itself beyond that (no layout shift, #20) */
.lyr-side-head {
  flex: none;
  display: flex;
  flex-direction: column;
  height: var(--lyr-head-h);
  box-sizing: border-box;
  padding: var(--lyr-head-pt) 8px var(--lyr-head-pb);
  border-bottom: var(--lyr-head-line);
}
.lyr-eyebrow {
  flex: none;
  height: 16px;
  line-height: 16px;
  margin-bottom: 8px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lyr-albums {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}
.lyr-view .lyr-album { height: 28px; box-sizing: border-box; margin-top: 0; max-width: 100%; font-family: inherit; }
.lyr-album-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an EP says so inside its chip, quieter than the name (never a tooltip) */
.lyr-album-tag {
  flex: none;
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lyr-view .lyr-album.is-on .lyr-album-tag { color: var(--ink); }
.lyr-songs-none { padding: 14px 10px; font-size: var(--fs-12-5); color: var(--ink-muted); }
.lyr-album-none { font-size: var(--fs-12-5); color: var(--ink-muted); line-height: 26px; }

.lyr-songs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.lyr-song {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  height: 58px;                  /* 27 Sep 2026 — room for a two-line name + "No lyrics yet", every row */
  box-sizing: border-box;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2) ease;
}
.lyr-song:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lyr-song.is-current { background: color-mix(in srgb, var(--leaf) 16%, transparent); }
.lyr-song:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.lyr-song-num {
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  font-feature-settings: var(--tnum);
}
.lyr-song-text { display: flex; flex-direction: column; min-width: 0; }
.lyr-song-name {
  font-size: var(--fs-13-5);
  font-weight: var(--fw-med);
  line-height: 1.3;
  /* a long name wraps to a second line, then ends in "…" (never cut on one line) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.lyr-song-sub { font-size: var(--fs-11); line-height: 1.3; color: var(--ink-muted); }
.lyr-song-sub:empty { display: none; }
/* a song without words yet: dimmed, still readable */
.lyr-song.is-missing .lyr-song-name { color: var(--ink-muted); font-weight: normal; }
.lyr-song-live { display: inline-flex; align-items: center; justify-content: center; }
.lyr-song-live .hmp-row-live i { background: var(--ink); }

.lyr-side-foot {
  flex: none;
  padding: 10px 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
}
.lyr-view .lyr-follow { margin-top: 0; gap: 8px; font-family: inherit; }
.lyr-switch {
  position: relative;
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background var(--dur-2) ease;
}
.lyr-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--card-bg-solid);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 30%, transparent);
  transition: transform var(--dur-2) ease;
}
.lyr-follow.is-on .lyr-switch { background: var(--leaf); }
.lyr-follow.is-on .lyr-switch i { transform: translateX(11px); }

/* ── right: the reader ── */
.lyr-reader {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* the shared header box (same height, paddings and divider as the album picker's): the title row
   (the title | the file buttons, Prev and Next pinned to the right padding) with the meta line right
   under it, the pair centred in the box; up to two title lines fit, so no song moves anything */
.lyr-head {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--lyr-head-h);
  box-sizing: border-box;
  padding: var(--lyr-head-pt) 32px var(--lyr-head-pb);
  border-bottom: var(--lyr-head-line);
}
.lyr-head-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.lyr-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-34);
  font-weight: normal;
  line-height: 1.08;
  letter-spacing: var(--track-02);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.lyr-sub {
  flex: none;
  margin-top: 6px;
  min-height: 1.4em;
  font-size: var(--fs-12-5);
  line-height: 1.4;
  letter-spacing: var(--track-02);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lyr-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lyr-view .lyr-pill {
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  margin-top: 0;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.lyr-pill--nav { width: 74px; }
.lyr-pill--open, .lyr-pill--file { width: 108px; }
/* 26 Sep 2026 — the album's printed booklet (Packaging), opened on this song's page; always takes its
   place (hidden when the album has none), so the header never moves */
.lyr-pill--booklet { width: 136px; }
.lyr-view .lyr-pill.is-none { visibility: hidden; }
/* at the first / last song: quieter than an active pill, still readable (never brighter) */
.lyr-view .lyr-pill:disabled {
  cursor: default;
  color: var(--ink-muted);
  background: transparent;
  border-color: color-mix(in srgb, var(--card-border) 45%, transparent);
}
/* the album on show, and Follow the player when it is on: the page's own selected look (the
   pill's .is-on tint reads too faint in the dark skins), ink on a leaf tint, in every skin */
.lyr-view .lyr-album.is-on,
.lyr-view .lyr-follow.is-on {
  color: var(--ink);
  background: color-mix(in srgb, var(--leaf) 22%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
}
.lyr-view .lyr-follow { color: var(--ink); }
.lyr-view .lyr-pill:focus-visible,
.lyr-view .lyr-album:focus-visible,
.lyr-view .lyr-follow:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }

.lyr-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 56px;
}
/* the words: a comfortable measure, generous leading, ragged right (never justified) */
.lyr-text {
  max-width: 64ch;
  font-family: var(--font-body);
  font-size: var(--fs-17);
  line-height: 1.75;
  color: var(--ink);
  text-align: left;
}
.lyr-block { margin: 0 0 1.5em; }
.lyr-block:last-child { margin-bottom: 0; }
.lyr-line { margin: 0; text-align: left; overflow-wrap: break-word; }

.lyr-empty { max-width: 52ch; padding: 8px 0; }
.lyr-empty-title { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--ink); margin-bottom: 6px; }
.lyr-empty-text { margin: 0; font-size: var(--fs-14); line-height: 1.6; color: var(--ink-muted); }

/* narrower screens: the list above the reader, the header wraps */
@media (max-width: 900px) {
  .lyr-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 360px minmax(420px, 1fr); }
  /* stacked: the title, the meta line, then the buttons (Prev / Next first; the file buttons keep
     their places even when hidden, so every song's header is the same height) */
  .lyr-head { height: auto; min-height: var(--lyr-head-h); padding: 18px 18px 14px; }
  .lyr-head-row { display: contents; }
  .lyr-title { order: 0; }
  .lyr-head .lyr-sub { order: 1; }
  .lyr-actions { order: 2; margin: 12px 0 0; flex-wrap: wrap; }
  .lyr-pill--nav { order: -1; }
  .lyr-scroll { padding: 22px 18px 40px; }
  .lyr-text { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: reduce) {
  .lyr-song, .lyr-switch, .lyr-switch i { transition: none; }
}