/* MeMori — base dello stile «Ritagli» (scelto dall'utente il 27/10/2026, prova in
 * tools/prova-fondamenta e tools/prova-home-c): ritagli di carta colorata alla Matisse e grafica
 * anni '50, forme morbide, ombre piene d'inchiostro spostate, titoli in un bastone grasso
 * (Bricolage Grotesque) e testo tondo (Outfit). Giallo senape nel tema chiaro, viola nello scuro.
 * Qui: caratteri, colori (--rt-…), il menù e il sottomenù delle sezioni. Le pagine passano a
 * questo stile una alla volta (la Home in home.css); le altre usano ancora style.css. */

/* --- Caratteri ------------------------------------------------------------------ */
/* Ospitati dal sito (public/fonts, licenza SIL Open Font License, testi OFL-*.txt nella stessa
   cartella): il browser non contatta Google. Variabili (un file per tutti i pesi). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-normal-400_800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-normal-400_800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Outfit-normal-300_700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Outfit-normal-300_700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Colori ------------------------------------------------------------------------ */
/* Quelli della proposta: il fondo della pagina (--rt-bg) è più scuro dei riquadri (--rt-paper),
   che sembrano fogli appoggiati sopra. Corallo, rosa cipria e salvia sono i ritagli in più. */
:root {
  --rt-bg: #f7f2e8;
  --rt-paper: #fffaf1;
  --rt-ink: #161616;
  --rt-accent: #e0a518;
  --rt-accent-ink: #161616;
  --rt-coral: #e9785a;
  --rt-blush: #f3cfc3;
  --rt-sage: #c3cbb0;
  --rt-display: "Bricolage Grotesque", system-ui, sans-serif;
  --rt-body: "Outfit", system-ui, sans-serif;
  /* Colori degli stati (segnalibri, pallini, menù degli stati) nella famiglia dei ritagli: blu da
     leggere, corallo in lettura, verde letto, grigio abbandonato. Valgono in tutta l'app. */
  --s-da_leggere: #4f7ca8;
  --s-in_lettura: #e9785a;
  --s-letto: #6f9a5b;
  --s-abbandonato: #9a948b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-bg: #17171b;
    --rt-paper: #202026;
    --rt-ink: #f1ece2;
    --rt-accent: #a77ef0;
    --rt-accent-ink: #17171b;
    --rt-coral: #ef8d73;
    --rt-blush: #3a2d40;
    --rt-sage: #2f3a2b;
    --s-da_leggere: #7fa6d1;
    --s-in_lettura: #ef8d73;
    --s-letto: #93bf7e;
    --s-abbandonato: #8c867d;
  }
}

:root[data-theme="dark"] {
  --rt-bg: #17171b;
  --rt-paper: #202026;
  --rt-ink: #f1ece2;
  --rt-accent: #a77ef0;
  --rt-accent-ink: #17171b;
  --rt-coral: #ef8d73;
  --rt-blush: #3a2d40;
  --rt-sage: #2f3a2b;
  --s-da_leggere: #7fa6d1;
  --s-in_lettura: #ef8d73;
  --s-letto: #93bf7e;
  --s-abbandonato: #8c867d;
}

/* Le pagine già nello stile nuovo (Home, Libreria, pagina del libro, Scaffali, Autori) hanno il fondo
   della proposta; anche il menù, che prende il colore della pagina. */
:root:has(:is(#home-view, #library-view, #book-view, #shelves-view, #authors-view, #map-view, #pile-view, #wishlist-view, #reading-view, #recommend-view, #readers-view, #news-view, #account-view, #auth-view, #profile-view):not([hidden])) {
  --bg: var(--rt-bg);
  --bg-glow: var(--rt-bg);
}

/* Il giudizio (al posto delle stelle, vedi VERDICTS in app.js) come etichetta: catalogo,
   copertine, Home, recensioni. Il colore dice quale. */
.verdict-tag {
  --c: var(--rt-accent);
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--rt-ink);
  font: 600 0.72rem/1.4 var(--rt-body);
  white-space: nowrap;
}

.verdict-tag[data-v="4"] {
  --c: var(--rt-coral);
}

.verdict-tag[data-v="3"] {
  --c: var(--rt-sage);
}

.verdict-tag[data-v="2"] {
  --c: var(--muted);
}

/* Niente riquadro azzurro del browser del telefono su ciò che si tocca (con i riquadri cliccabili
   copriva tutta la sezione): il riscontro lo dà la pagina (riquadri che si abbassano, home.css); con
   la tastiera resta il contorno di :focus-visible. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* Anche il testo selezionato (tenendo premuto il dito) nel colore del tema, non in azzurro. */
::selection {
  background: var(--rt-accent);
  color: var(--rt-accent-ink);
}

/* --- Icone -------------------------------------------------------------------------- */
/* Phosphor Duotone al posto delle emoji (public/icons/phosphor.svg, funzione icon in app.js): grandi
   quanto il testo intorno, nel suo colore; la parte tenue è lo stesso colore al 20%. */
.ph {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
  stroke: none;
  vertical-align: -0.2em;
}

/* Il pulsante dentro un avviso (toast con action, es. «Installa» dopo la prima scansione). */
.toast-action {
  margin-left: 0.5rem;
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--rt-accent);
  color: var(--rt-accent-ink);
  font: 700 0.85rem var(--rt-body);
  cursor: pointer;
}

/* Pallino «c'è qualcosa di nuovo» su Scopri e sulla voce Novità (renderNewsDot in app.js). */
.has-dot {
  position: relative;
}

.has-dot::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  right: -0.2rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rt-coral);
}

/* --- Menù ------------------------------------------------------------------------ */
/* PC: una riga fissa in alto: logo e nome, le quattro sezioni (la voce aperta è una pillola
   d'inchiostro), «＋ Aggiungi» nel colore del tema e il cerchio con l'iniziale per l'account.
   Telefono: barra in basso Home · Libreria · + · Letture · Scopri, con il + tondo che esce dalla
   barra; l'account è il cerchio in alto a destra della pagina. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--masthead-height);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 clamp(16px, 3vw, 40px);
  background: var(--bg);
  color: var(--text);
  border-bottom: 2px solid var(--text);
  font-family: var(--rt-body);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 1.6rem;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
}

.brand-name {
  font: 800 1.5rem/1 var(--rt-display);
  letter-spacing: -0.03em;
}

.nav-item {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-item:hover {
  color: var(--text);
}

.nav-item[aria-current="page"] {
  background: var(--text);
  color: var(--bg);
}

/* Sul PC «＋ Aggiungi» viene dopo le sezioni, a destra (nell'HTML sta in mezzo per il telefono). */
.nav-add {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  /* A destra resta il posto per il cerchio dell'account. */
  margin-right: 56px;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 16px 22px 18px 24px;
  background: var(--rt-accent);
  color: var(--rt-accent-ink);
  font: 700 0.95rem var(--rt-body);
  cursor: pointer;
}

.nav-add-plus {
  font: 800 1.2rem/1 var(--rt-display);
}

/* Il cerchio dell'account sta fuori dal menù (sul telefono il menù è in basso): sul PC è fisso
   a destra nella riga del menù. */
.nav-me {
  position: fixed;
  top: calc((var(--masthead-height) - 40px) / 2);
  right: clamp(16px, 3vw, 40px);
  z-index: 21;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font: 800 1rem var(--rt-display);
  text-decoration: none;
}

.nav-me[aria-current="page"] {
  background: var(--rt-accent);
  color: var(--rt-accent-ink);
}

.nav-item:focus-visible,
.nav-add:focus-visible,
.nav-me:focus-visible,
.brand:focus-visible,
.subnav a:focus-visible {
  outline: 3px solid var(--rt-accent);
  outline-offset: 2px;
}

/* --- Sottomenù delle sezioni ------------------------------------------------------ */
/* Sopra le pagine di una sezione con più viste: Libreria (Libri · Scaffali · Autori · Pila ·
   Wishlist) e Scopri (Consigli · Lettori). La vista aperta ha il trattino colorato sotto. Sopra le
   forme colorate della pagina, che salgono fin sotto il menù (sul telefono coprivano «Wishlist»). */
.subnav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  max-width: 1180px;
  margin: 0 auto 1.6rem;
  font-family: var(--rt-body);
}

.subnav a {
  padding: 0.2rem 0 0.35rem;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.subnav a:hover {
  color: var(--text);
}

.subnav a[aria-current="page"] {
  color: var(--text);
}

.subnav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 0.25rem;
  background: var(--rt-accent);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
}

/* --- Telefono ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav {
    inset: auto 0 0 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: 0;
    padding: 0 0.4rem env(safe-area-inset-bottom);
    border-bottom: 0;
    border-top: 2px solid var(--text);
  }

  .brand {
    display: none;
  }

  .nav-item {
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.1rem;
    border-radius: 0;
    font-size: 0.8rem;
    text-align: center;
  }

  .nav-item[aria-current="page"] {
    background: none;
    color: var(--text);
    font-weight: 700;
  }

  /* La voce aperta: un trattino colorato sopra la parola. */
  .nav-item::before {
    content: "";
    width: 22px;
    height: 6px;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  }

  .nav-item[aria-current="page"]::before {
    background: var(--rt-accent);
  }

  /* Il + tondo e grande, che esce dalla barra (la parola «Aggiungi» resta per i lettori di schermo). */
  .nav-add {
    order: 0;
    flex: none;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: -26px 0.4rem 0;
    padding: 0;
    border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
    box-shadow: 4px 4px 0 var(--rt-ink);
  }

  .nav-add-plus {
    font-size: 1.8rem;
  }

  .nav-add-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* L'account: il cerchio in alto a destra della pagina (scorre via con lei). */
  .nav-me {
    position: absolute;
    top: 12px;
    right: 16px;
  }

  .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: 56px;
    margin-bottom: 1.2rem;
  }

  .subnav::-webkit-scrollbar {
    display: none;
  }

  .subnav a {
    flex: none;
  }
}