/* MeMori — la Libreria (Libri) nello stile «Ritagli» (27/10/2026, prova in tools/prova-libreria):
 * titolo grande con il bollino del numero dei libri, ricerca, ordine e vista a pillola, stati come
 * pillole col pallino colorato; il catalogo con le iniziali in bollini ritagliati e i libri in
 * riquadri di carta, oppure le copertine piatte con l'ombra d'inchiostro e il segnalibro dello stato.
 * Vale solo dentro #library-view (le copertine anche nello scaffale aperto, #shelves-view, e nella
 * scheda dell'autore, #authors-view): catalogo e
 * copertine si usano anche in pagine non ancora rifatte (Wishlist, Pila, Autori). Caratteri e colori di base: ritagli.css. Animazioni:
 * motion.css (D4) e motion.js («Libreria»). */

#library-view {
  position: relative;
  font-family: var(--rt-body);
  color: var(--rt-ink);
}

#library-view > :not(.lb-blobs) {
  position: relative;
  z-index: 1;
}

/* Forme colorate dietro, più lente della pagina (motion.js); tagliate ai bordi della pagina e in
   fondo (in alto salgono sotto il menù di --lb-rise). */
.lb-blobs {
  --lb-rise: 200px;
  position: absolute;
  inset: calc(-1 * var(--lb-rise)) 0 0 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.lb-blob {
  position: absolute;
  will-change: translate;
}

.lb-blob path,
.lb-blob circle {
  fill: currentColor;
}

.lb-blob-1 {
  right: -150px;
  top: calc(var(--lb-rise) - 160px);
  width: 470px;
  color: var(--rt-blush);
}

.lb-blob-2 {
  right: 300px;
  top: calc(var(--lb-rise) - 70px);
  width: 70px;
  color: var(--rt-coral);
}

.lb-blob-3 {
  left: -130px;
  top: calc(var(--lb-rise) + 720px);
  width: 360px;
  color: var(--rt-sage);
}

.lb-blob-4 {
  right: -80px;
  top: calc(var(--lb-rise) + 1400px);
  width: 300px;
  color: var(--rt-blush);
}

/* --- Titolo e numero dei libri --------------------------------------------------- */
.lb-head {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.lb-head h1 {
  margin: 0;
  font: 800 3.4rem/0.95 var(--rt-display);
  letter-spacing: -0.045em;
  text-transform: none;
}

/* Il numero dei libri in un bollino corallo storto, come un ritaglio incollato. */
.lb-count {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  margin-bottom: 0.2rem;
  padding: 0 0.6rem;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  background: var(--rt-coral);
  color: #161616;
  font: 800 1.4rem var(--rt-display);
  box-shadow: 3px 3px 0 var(--rt-ink);
  rotate: -6deg;
}

.lb-count:empty {
  display: none;
}

/* --- Ricerca, ordine, vista ------------------------------------------------------- */
.lb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.lb-search {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--rt-ink);
  border-radius: 999px;
  background: var(--rt-paper);
}

.lb-search .icon {
  flex: none;
  width: 20px;
  height: 20px;
}

#library-view .lb-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-ink);
  font: 500 1rem var(--rt-body);
  outline: none;
  box-shadow: none;
}

.lb-search input::placeholder {
  color: var(--muted);
}

.lb-search:focus-within {
  box-shadow: 4px 4px 0 var(--rt-accent);
}

.lb-sort {
  position: relative;
}

#library-view .lb-sort select {
  appearance: none;
  padding: 0.7rem 2.2rem 0.7rem 1.1rem;
  border: 2px solid var(--rt-ink);
  border-radius: 999px;
  background: var(--rt-paper);
  color: var(--rt-ink);
  font: 600 0.92rem var(--rt-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.lb-sort::after {
  content: "▾";
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 0.8rem;
  pointer-events: none;
}

/* Catalogo · Copertine: due pillole in una pillola (i pulsanti di scelta restano, nascosti, per la tastiera). */
#library-view .lb-views {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  border: 2px solid var(--rt-ink);
  border-radius: 999px;
  background: var(--rt-paper);
}

#library-view .lb-views label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

#library-view .lb-views input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#library-view .lb-views span {
  display: block;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 0.9rem var(--rt-body);
  letter-spacing: 0;
  text-transform: none;
}

#library-view .lb-views input:checked + span {
  background: var(--rt-ink);
  color: var(--bg);
}

#library-view .lb-views input:focus-visible + span {
  outline: 3px solid var(--rt-accent);
  outline-offset: 2px;
}

#library-view .lb-sort select:focus-visible {
  outline: 3px solid var(--rt-accent);
  outline-offset: 2px;
}

/* --- Stati: pillole col pallino del colore dello stato e il numero ------------------- */
#library-view .status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

#library-view .status-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: auto;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--rt-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--rt-ink);
  font: 600 0.9rem var(--rt-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

#library-view .status-tab .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-color);
}

#library-view .status-tab .count {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-weight: 500;
}

#library-view .status-tab[aria-pressed="true"] {
  background: var(--rt-ink);
  color: var(--bg);
}

#library-view .status-tab[aria-pressed="true"] .count {
  color: inherit;
  opacity: 0.7;
}

/* --- Catalogo: iniziali in bollini ritagliati, i libri in riquadri di carta ----------- */
#library-view .catalog {
  columns: 2 380px;
  column-gap: 1.6rem;
  column-rule: none;
}

#library-view .catalog-group {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  break-inside: avoid;
}

/* Gruppi senza lettera (decennio, voto, mese, «Senza autore»): il titoletto è una pillola sopra. */
#library-view .catalog-group:has(> .catalog-heading) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

#library-view .catalog-letter {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  color: #161616;
  font: 800 1.9rem/1 var(--rt-display);
  text-transform: none;
  box-shadow: 3px 3px 0 var(--rt-ink);
  /* Il catalogo vecchio teneva la lettera attaccata ai suoi libri (break-after: avoid): con la lettera
     accanto, nella griglia, impediva di andare nella seconda colonna. */
  break-after: auto;
}

#library-view .catalog-group:nth-child(4n + 1) .catalog-letter {
  background: var(--rt-accent);
  rotate: -5deg;
}

#library-view .catalog-group:nth-child(4n + 2) .catalog-letter {
  background: var(--rt-coral);
  rotate: 4deg;
}

#library-view .catalog-group:nth-child(4n + 3) .catalog-letter {
  background: var(--rt-sage);
  rotate: -3deg;
}

#library-view .catalog-group:nth-child(4n + 4) .catalog-letter {
  background: var(--rt-blush);
  rotate: 6deg;
}

/* Nello scuro salvia e rosa sono scuri: la lettera color carta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #library-view .catalog-group:is(:nth-child(4n + 3), :nth-child(4n + 4)) .catalog-letter {
    color: var(--rt-ink);
  }
}

:root[data-theme="dark"] #library-view .catalog-group:is(:nth-child(4n + 3), :nth-child(4n + 4)) .catalog-letter {
  color: var(--rt-ink);
}

#library-view .catalog-heading {
  justify-self: start;
  margin: 0;
  padding: 0.3rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--rt-accent);
  color: var(--rt-accent-ink);
  font: 700 0.95rem var(--rt-body);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 3px 3px 0 var(--rt-ink);
}

#library-view .catalog-list {
  margin: 0;
  padding: 0.35rem 0.2rem;
  background: var(--rt-paper);
  border-radius: 22px 28px 24px 26px;
}

/* Una riga: pallino dello stato, titolo con l'autore sotto, stelle. Tutta la riga apre il libro
   (il collegamento è allargato con ::after); il pallino sta sopra e apre il menù degli stati. */
#library-view .catalog-entry {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "status link stars";
  align-items: center;
  gap: 0.3rem 0.7rem;
  padding: 0.55rem 0.9rem;
  border-radius: 16px;
}

#library-view .catalog-entry + .catalog-entry {
  border-top: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}

#library-view .catalog-link {
  grid-area: link;
  min-width: 0;
}

#library-view .catalog-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

#library-view .catalog-link:hover .catalog-title {
  text-decoration: none;
}

#library-view .catalog-title {
  display: block;
  font: 700 1.02rem/1.2 var(--rt-display);
  letter-spacing: -0.01em;
}

#library-view .catalog-author {
  display: block;
  margin: 0;
  color: var(--muted);
  font: 400 0.85rem var(--rt-body);
  font-style: normal;
}

#library-view .catalog-lead {
  display: none;
}

#library-view .catalog-entry .stars {
  grid-area: stars;
  color: var(--rt-accent);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

#library-view .catalog-status {
  position: relative;
  z-index: 1;
  grid-area: status;
  width: 22px;
  height: 22px;
  margin: 0;
}

#library-view .catalog-status::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

@media (hover: hover) {
  #library-view .catalog-entry:hover {
    background: color-mix(in srgb, var(--rt-accent) 14%, transparent);
  }
}

/* --- Copertine: piatte, con l'ombra d'inchiostro; lo stato è un segnalibro in alto a destra. Valgono
   anche nello scaffale aperto (#shelves-view, dal 28/10/2026). --- */
:is(#library-view, #shelves-view, #authors-view, #profile-view) .books {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 2rem 1.4rem;
  padding-top: 0.6rem;
}

:is(#library-view, #shelves-view, #authors-view, #profile-view) .book {
  gap: 0.75rem;
  perspective: 700px;
}

:is(#library-view, #shelves-view, #authors-view, #profile-view) .book .book-cover {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--rt-ink);
  transition:
    translate 0.18s ease,
    box-shadow 0.18s ease;
}

:is(#library-view, #shelves-view, #authors-view, #profile-view) .book:hover .book-cover,
:is(#library-view, #shelves-view, #authors-view, #profile-view) .book:focus-visible .book-cover {
  transform: none;
  translate: -3px -3px;
  box-shadow: 9px 9px 0 var(--rt-ink);
}

/* Le copertine finte: colore pieno e il titolo nel bastone, senza la cornice della tela. */
:is(#library-view, #shelves-view, #authors-view, #pile-view, #wishlist-view, #reading-view, #recommend-view, #readers-view, #profile-view) .book-cover.cover-placeholder {
  align-items: flex-start;
  padding: 0.7rem 1.7rem 0.7rem 0.7rem;
  text-align: left;
  color: #fff;
}

:is(#library-view, #shelves-view, #authors-view, #pile-view, #wishlist-view, #reading-view, #recommend-view, #readers-view, #profile-view) .book-cover .ph-title {
  margin: 0;
  padding: 0;
  border: 0;
  font: 700 max(0.6rem, 12cqi) / 1.15 var(--rt-display);
}

:is(#library-view, #shelves-view, #authors-view, #pile-view, #wishlist-view, #reading-view, #recommend-view, #readers-view, #profile-view) .book-cover .ph-author {
  margin: 0;
  font: 500 max(0.45rem, 7cqi) var(--rt-body);
  letter-spacing: 0;
  text-transform: none;
}

:is(#library-view, #shelves-view, #authors-view, #profile-view) .book-title {
  font: 700 0.95rem/1.15 var(--rt-display);
}

:is(#library-view, #shelves-view, #authors-view, #profile-view) .book-author {
  font-size: 0.8rem;
  font-style: normal;
}

/* Il segnalibro appeso al bordo della copertina, a destra: sporge appena (prima usciva per metà). */
:is(#library-view, #shelves-view, #authors-view) .cover-status {
  top: -4px;
  left: auto;
  right: 0.4rem;
  width: 2rem;
  height: 2.6rem;
}

:is(#library-view, #shelves-view, #authors-view) .cover-status::before {
  width: 14px;
  height: 30px;
  background: var(--status-color);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  filter: none;
}

#library-view .empty {
  color: var(--muted);
}

/* --- Telefono -------------------------------------------------------------------- */
@media (max-width: 760px) {
  .lb-blob {
    scale: 0.6;
  }

  .lb-blob-2 {
    right: -6px;
    top: calc(var(--lb-rise) + 30px);
  }

  .lb-head h1 {
    font-size: 2.3rem;
  }

  .lb-count {
    min-width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }

  .lb-tools {
    gap: 0.5rem;
  }

  .lb-search {
    flex-basis: 100%;
  }

  .lb-sort {
    flex: 1;
  }

  #library-view .lb-sort select {
    width: 100%;
  }

  /* Stati: una fila da scorrere col dito, da bordo a bordo. */
  #library-view .status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 1.6rem;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }

  #library-view .status-tab {
    flex: none;
  }

  #library-view .catalog {
    columns: 1;
  }

  #library-view .catalog-group {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.6rem;
  }

  #library-view .catalog-letter {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
    box-shadow: 2px 2px 0 var(--rt-ink);
  }

  #library-view .catalog-entry {
    gap: 0.2rem 0.55rem;
    padding: 0.5rem 0.7rem;
  }

  #library-view .catalog-title {
    font-size: 0.95rem;
  }

  :is(#library-view, #shelves-view, #authors-view, #profile-view) .books {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem 0.9rem;
  }

  :is(#library-view, #shelves-view, #authors-view, #profile-view) .book .book-cover {
    box-shadow: 4px 4px 0 var(--rt-ink);
  }

  :is(#library-view, #shelves-view, #authors-view, #pile-view, #wishlist-view, #reading-view, #recommend-view, #readers-view, #profile-view) .book-cover.cover-placeholder {
    padding: 0.45rem 1.3rem 0.45rem 0.45rem;
  }

  :is(#library-view, #shelves-view, #authors-view, #profile-view) .book-title {
    font-size: 0.8rem;
  }

  :is(#library-view, #shelves-view, #authors-view, #profile-view) .book-author {
    font-size: 0.7rem;
  }
}