/* Struttura e forma delle pagine. Colori e caratteri stanno in variabili.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font-family: var(--testo); font-size: var(--corpo); line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icona { width: 1.25em; height: 1.25em; flex: none; }
.tenue { color: var(--tenue); font-family: var(--interfaccia); font-size: .9375rem; }

/* ---- impaginazione ---- */
.testata, .pagina { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
/* Lo spazio fra i blocchi della pagina è un "gap": nessun margin: 0 di un elenco può annullarlo. */
.pagina { display: flex; flex-direction: column; gap: 2.5rem; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) {
  .testata, .pagina { padding-left: 2rem; padding-right: 2rem; }
  .pagina { padding-bottom: 4rem; }
}
.testata { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding-top: .75rem; }
.marchio { text-decoration: none; font-weight: 600; font-size: 1.375rem; }
.menu { display: none; align-items: center; gap: 1.75rem; font-family: var(--interfaccia); font-weight: 600; font-size: .9375rem; }
.menu a { text-decoration: none; }
.menu a[aria-current] { color: var(--accento); }
.menu form { margin: 0; }
@media (min-width: 48rem) { .menu { display: flex; } }
.titolo-pagina { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.sezione { font-size: 1.375rem; font-weight: 600; margin-bottom: 1rem; }
.sezione-testata { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sezione-testata .sezione { margin: 0; }
.sezione-testata a { font-family: var(--interfaccia); font-size: .9375rem; color: var(--accento); }

/* ---- ricerca ---- */
.cerca form { position: relative; }
.cerca .icona { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); opacity: .6; pointer-events: none; }
.cerca input {
  width: 100%; min-height: 3.25rem; padding: 0 1rem 0 3rem; border-radius: 999px;
  font: inherit; font-family: var(--interfaccia); color: inherit; background: var(--superficie);
  border: 1px solid var(--linea-forte);
}
.conteggio { margin-top: .5rem; }
.nessun-risultato { margin-top: 1rem; }
.risultati { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; }
.risultati li + li { border-top: 1px solid var(--linea); }
.risultati a { display: grid; grid-template-columns: 3rem 1fr; gap: .9rem; align-items: center; padding: .6rem 0; text-decoration: none; }
.risultati .titolo { font-weight: 600; line-height: 1.25; }
.risultati .autore { display: block; font-family: var(--interfaccia); font-size: .875rem; color: var(--tenue); }

/* ---- copertine ---- */
.griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
@media (min-width: 36rem) { .griglia { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56rem) { .griglia { grid-template-columns: repeat(5, 1fr); gap: 2.25rem 1.5rem; } }
.libro { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; }
.libro .titolo { margin-top: .4rem; line-height: 1.25; font-weight: 600; font-size: 1rem; }
.libro .autore { font-family: var(--interfaccia); font-size: .8125rem; color: var(--tenue); }
.copertina { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--linea);
  border-radius: 4px; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.copertina-vuota { display: flex; align-items: flex-end; padding: .75rem; font-style: italic; font-size: .875rem;
  line-height: 1.2; color: var(--tenue); background: var(--fondo-caldo); }

/* ---- bottoni ---- */
.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.bottone {
  min-height: 48px; padding: 0 1.25rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-family: var(--interfaccia); font-size: .9375rem; font-weight: 600;
  color: var(--inchiostro); background: var(--superficie); border: 1px solid var(--linea-forte);
  text-decoration: none; cursor: pointer;
}
.bottone.primario { color: var(--su-accento); background: var(--accento); border-color: var(--accento); }
.bottone.piccolo { min-height: 40px; padding: 0 1rem; font-size: .875rem; }
.collegamento { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.menu .collegamento { text-decoration: none; font-weight: 600; }

/* ---- sfoglia ---- */
.lettere { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lettere a { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--interfaccia); text-decoration: none; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linea); }
.lettere a[aria-current] { color: var(--su-accento); background: var(--accento); border-color: var(--accento); }
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li + li { border-top: 1px solid var(--linea); }
.elenco a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px;
  padding: .5rem 0; text-decoration: none; }
.elenco .quanti { font-family: var(--interfaccia); font-size: .875rem; color: var(--tenue); }
.schede-ordine { display: flex; gap: .4rem; flex-wrap: wrap; }
.paginazione { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* ---- scheda del libro ---- */
.briciole { margin-top: 1rem; font-family: var(--interfaccia); font-size: .9rem; }
.briciole a { text-decoration: none; color: var(--tenue); }
.scheda-libro { display: grid; gap: 1.75rem; }
.scheda-copertina { max-width: 18rem; margin: 0 auto; width: 70%; }
@media (min-width: 48rem) {
  .scheda-libro { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 3.5rem; align-items: start; }
  .scheda-copertina { width: 100%; max-width: none; margin: 0; position: sticky; top: 1.5rem; }
}
.scheda-copertina .copertina { border-radius: 6px; }
.scheda-testo { display: flex; flex-direction: column; gap: .6rem; max-width: 38rem; }
.scheda-titolo { font-size: clamp(1.875rem, 6vw, 2.75rem); font-weight: 600; line-height: 1.1; }
.serie { font-family: var(--interfaccia); font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accento); }
.scheda-testo .autore { font-family: var(--interfaccia); color: var(--tenue); }
.scheda-testo .autore a { text-decoration: none; }
.voto { font-family: var(--interfaccia); font-size: .875rem; color: var(--tenue); }
.descrizione { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.fonte { font-family: var(--interfaccia); font-size: .8125rem; color: var(--tenue); }
.dati { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem;
  background: var(--superficie); border-radius: 12px; padding: 1.25rem; }
.dati div { display: flex; flex-direction: column; gap: .1rem; }
.dati dt { font-family: var(--interfaccia); font-size: .75rem; color: var(--tenue); }
.dati dd { margin: 0; font-family: var(--interfaccia); font-size: .9375rem; overflow-wrap: anywhere; }
@media (max-width: 47.99rem) {
  .scheda-testo .azioni { display: grid; grid-template-columns: 1fr 1fr; }
  .scheda-testo .azioni .primario { grid-column: 1 / -1; }
}

/* ---- avvisi, moduli, accesso ---- */
.avviso { background: var(--fondo-caldo); border-radius: 12px; padding: 1rem 1.25rem; font-family: var(--interfaccia); }
.avviso.errore { color: var(--errore); }
.campo { display: flex; flex-direction: column; gap: .35rem; font-family: var(--interfaccia); font-size: .9375rem; }
.campo input { min-height: 48px; padding: 0 1rem; border-radius: 12px; font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid var(--linea-forte); }
.modulo { display: flex; flex-direction: column; gap: 1rem; }
.accesso { max-width: 24rem; margin: 0 auto; padding: 4rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.accesso h1 { font-size: 1.75rem; font-weight: 600; }

/* ---- gestione ---- */
.chiavi { list-style: none; margin: 0; padding: 0; }
.chiavi li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0;
  border-top: 1px solid var(--linea); font-family: var(--interfaccia); }
.chiavi .etichetta { font-weight: 600; }
.chiavi .revocata { opacity: .55; }
.avvisi { margin: .5rem 0 0; padding-left: 1.25rem; }
.avvisi li + li { margin-top: .5rem; }
.lavori { margin: 0; font-family: var(--interfaccia); font-size: .9375rem; }
.lavori > div { padding: .75rem 0; border-top: 1px solid var(--linea); }
.lavori dt { font-weight: 600; }
.lavori dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.lavori .fallito dt { color: var(--errore); }
#catalogo details { font-family: var(--interfaccia); font-size: .9375rem; }
#catalogo summary { cursor: pointer; }
.illeggibili { padding-left: 1.25rem; overflow-wrap: anywhere; }
.illeggibili li + li { margin-top: .5rem; }
.link-nuovo { width: 100%; padding: .75rem; border-radius: 8px; font-family: ui-monospace, monospace; font-size: .8125rem;
  color: inherit; background: var(--superficie); border: 1px solid var(--linea-forte); }

/* ---- barra in basso, solo su smartphone: tutto sotto il pollice ---- */
.schede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom));
  background: var(--carta); border-top: 1px solid var(--linea);
}
.schede a { min-width: 64px; min-height: 48px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15rem; font-family: var(--interfaccia); font-size: .6875rem;
  text-decoration: none; color: var(--tenue); }
.schede a[aria-current] { color: var(--accento); font-weight: 600; }
@media (min-width: 48rem) { .schede { display: none; } }