/* ---------- песенники: картинка по нажатию и название на месте (books.js) ---------- */

/* картинка-кнопка: пятна те же, что у обложек песен, значок «сменить» проступает при наведении */
.book-cover {
  flex: none; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #ffffff;
  transition: transform .12s ease, filter .15s ease;
}
.book-cover:hover { filter: brightness(1.12); }
.book-cover:active { transform: scale(.96); }
.book-cover > svg {
  position: relative; z-index: 1; width: 30%; height: auto; aspect-ratio: 1; max-width: 30px; padding: 7px; box-sizing: content-box;
  border-radius: 50%; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .15s ease;
}
.book-cover:hover > svg, .book-cover:focus-visible > svg { opacity: 1; transform: none; }
@media (hover: none) { .book-cover > svg { opacity: .9; transform: none; } }
/* старая картинка поверх новой, тает за полсекунды */
.cover.cover-fade { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; pointer-events: none; }
.cover.cover-fade::after { content: none; }

/* список */
.book-row .open { display: flex; align-items: center; gap: 14px; min-width: 0; }
.book-text { min-width: 0; }
.book-title { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; }
.book-title .t { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-title .t:hover { text-decoration: underline; text-underline-offset: 3px; }
.book-rename { flex: none; color: var(--faint); }
.book-row:hover .book-rename { color: var(--muted); }
.book-row.renaming .book-rename { display: none; }
input[type=text].book-title-input { width: min(360px, 100%); height: 32px; padding: 0 10px; border-radius: 10px; font-weight: 500; }

/* страница песенника: название — заголовок, который правится на месте; ширина поля по тексту */
.book-head { align-items: center; }
.book-head .book-cover { width: 136px; box-shadow: var(--shadow); }
.book-name {
  display: inline-grid; grid-template-columns: minmax(0, auto) auto; align-items: center; gap: 12px; max-width: 100%;
  margin: 0 0 4px -10px; padding: 2px 12px 2px 10px; border-radius: 14px; cursor: text;
  font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; color: #ffffff;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.book-name::after { content: attr(data-value) " "; grid-area: 1 / 1; visibility: hidden; white-space: pre; overflow: hidden; }
input[type=text]#bname {
  grid-area: 1 / 1; width: 100%; min-width: 3ch; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; letter-spacing: inherit; color: inherit; text-overflow: ellipsis;
}
.book-name > svg { grid-area: 1 / 2; width: 20px; height: 20px; color: var(--faint); transition: color .15s ease; }
.book-name:hover { background: var(--glass); }
.book-name:hover > svg { color: var(--muted); }
.book-name:focus-within { background: var(--glass); box-shadow: 0 0 0 1px var(--border-2); }
.book-name:focus-within > svg { color: var(--text); }

@media (max-width: 700px) {
  .book-head .book-cover { width: 88px; }
  .book-row { grid-template-columns: 1fr; }
}