/* Stili del sito. Solo token di design/tokens.css (wiki/concetti/design-system.md): niente colori scritti a mano.
   Griglia, densità e righe sotto le locandine vengono dal prototipo approvato (direzione A "Catalogo"). */

* { box-sizing: border-box; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }

.colonna, .pagina {
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-8);
}
.colonna { max-width: 640px; }
.pagina { max-width: 1200px; }

/* Il marchio occupa esattamente la larghezza della colonna: la dimensione la calcola marchio.js */
.marchio {
  margin: 0 0 var(--s-5);
  padding-top: 18px;
  font-family: var(--font-marchio);
  font-weight: var(--peso-normale);
  line-height: .8;
  letter-spacing: -0.035em;
  white-space: nowrap;
  width: max-content;  /* marchio.js misura il testo, non la colonna */
}

.titolo-pagina {
  margin: 0 0 var(--s-4);
  font: var(--peso-normale) var(--t-titolo-m) / var(--interlinea-stretta) var(--font-marchio);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.corpo {
  margin: 0 0 var(--s-5);
  max-width: 65ch;
  font-size: var(--t-corpo);
  line-height: var(--interlinea-corpo);
}

.nota { color: var(--nota); }

.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Pulsanti ---------- */
.pulsante {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: var(--carta);
  font: var(--peso-medio) var(--t-ui) / 1 var(--font-ui);
}
.pulsante:active { opacity: .85; }

.pulsante-testo {
  min-height: var(--tocco-min);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Navigazione di sezione ---------- */
.nav { display: flex; gap: var(--s-5); font-weight: var(--peso-medio); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tocco-min);
  color: var(--nota); text-decoration: none;
}
.nav a[aria-current] {
  color: var(--inchiostro);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* ---------- Ricerca, filtri e densità ---------- */
.cerca { margin-top: var(--s-2); }
.cerca input::placeholder { color: var(--nota); opacity: 1; }
.cerca input::-webkit-search-cancel-button { cursor: pointer; }
.strumenti { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
/* Sfumatura sul bordo destro: dice che ci sono altri filtri fuori schermo (critica al prototipo) */
.filtri-box { position: relative; flex: 1; min-width: 0; }
.filtri-box::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--carta));
}
/* Una riga che scorre di lato, con tutta la larghezza (la densità sta accanto alla ricerca): la sfumatura dice che
   continua. Il proprietario non vuole i filtri a capo (2026-10-11). */
.filtri { display: flex; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; padding-right: 32px; }
.filtri::-webkit-scrollbar { display: none; }
.cerca-riga { display: flex; align-items: flex-end; gap: var(--s-2); }
.cerca-riga[hidden] { display: none; }
.cerca-riga .cerca { flex: 1; min-width: 0; }
.filtri button { min-height: var(--tocco-min); white-space: nowrap; color: var(--nota); }
.filtri button[aria-pressed="true"] { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 6px; }
.altre { margin-top: var(--s-2); padding: var(--s-3) 0; border-top: var(--bordo); border-bottom: var(--bordo); }
.altre p { margin: 0 0 var(--s-2); color: var(--nota); font-size: var(--t-meta); }
.altre ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.altre button { min-height: var(--tocco-min); color: var(--nota); }
.altre button[aria-pressed="true"] { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 6px; }
#nessun-risultato { margin-top: var(--s-5); }
.densita { flex: none; display: flex; }
.densita button {
  width: var(--tocco-min); height: var(--tocco-min);
  display: grid; place-items: center; color: var(--nota);
}
.densita button[aria-pressed="true"] { color: var(--inchiostro); }
.densita svg { width: 16px; height: 16px; }
.densita .occhio { color: var(--nota); }
.densita .occhio[aria-pressed="true"] { color: var(--inchiostro); }
/* Occhio spento (di base): solo locandina, titolo e anno; piattaforma, giudizio e amici nascosti (Anna, 2026-10-12) */
.griglia[data-labels="off"] .overlay, .griglia[data-labels="off"] .dove,
.griglia[data-labels="off"] .social { display: none !important; }

/* ---------- Griglia delle locandine ---------- */
.griglia {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--griglia-2-righe) var(--griglia-2-colonne);
  margin-top: var(--s-2);
}
.griglia[data-cols="3"] { --cols: 3; gap: var(--griglia-3-righe) var(--griglia-3-colonne); }
.griglia[data-cols="4"] { --cols: 4; gap: var(--griglia-4); }
@media (min-width: 720px) {
  .griglia { grid-template-columns: repeat(calc(var(--cols) * 2), minmax(0, 1fr)); }
}

.scheda { display: block; align-self: start; width: 100%; text-align: left; }
/* «Le mie piattaforme»: titolo di ogni piattaforma a tutta riga dentro la griglia */
.group-title {
  grid-column: 1 / -1;
  margin: var(--s-5) 0 0; padding-top: var(--s-3); border-top: var(--bordo-forte);
  font: var(--peso-medio) var(--t-titolo-s) / 1.2 var(--font-ui);
}
.group-title:first-child, .salti + .group-title { margin-top: var(--s-2); }
.griglia[data-cols="4"] .group-title { margin-bottom: var(--s-2); }
.group-title { scroll-margin-top: var(--s-4); }
/* Sezione che si chiude toccando il titolo: «+» chiusa, «−» aperta, come «Cosa sa fare il bot» nel Profilo */
.group-toggle {
  width: 100%; min-height: var(--tocco-min); display: flex; align-items: baseline; gap: var(--s-2);
  font: inherit; text-align: left;
}
.group-toggle::after { content: "−"; margin-left: auto; color: var(--nota); }
.group-toggle[aria-expanded="false"]::after { content: "+"; }
.gruppo { display: contents; }
.gruppo[hidden] { display: none; }
/* «Vai a»: i nomi delle piattaforme in cima, per saltare a una sezione */
.salti {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-4);
  margin-top: var(--s-2);
}
.salti button { min-height: var(--tocco-min); }
.locandina, .senza-locandina {
  width: 100%;
  aspect-ratio: var(--locandina);
  object-fit: cover;
  background: var(--velo);
}
/* Senza locandina su TMDB: il titolo in Bodoni sul segnaposto, niente icone */
.senza-locandina {
  display: flex; align-items: flex-end;
  padding: var(--s-3);
  font: var(--peso-normale) var(--t-titolo-s) / var(--interlinea-stretta) var(--font-marchio);
  color: var(--nota);
  overflow: hidden;
}

.righe {
  display: grid; gap: 2px;
  min-width: 0;
  margin: var(--s-2) 0 0;
  font-size: var(--t-meta);
  line-height: 1.35;
}
.righe .titolo { font-weight: var(--peso-medio); text-wrap: balance; }
.righe .sotto { color: var(--nota); }
.righe .sotto:empty { display: none; }
.righe .dove.no { color: var(--nota); }
.righe .social { color: var(--nota); }  /* «Anche Giulia», «Solo tu»: piccolo e grigio */
.griglia[data-cols="3"] .social { display: none; }
.griglia[data-cols="3"] .sotto, .griglia[data-cols="3"] .dove { display: none; }
.griglia[data-cols="3"] .titolo { font-size: var(--t-micro); }
.griglia[data-cols="3"] .senza-locandina { font-size: var(--t-ui); }
.griglia[data-cols="4"] .righe { display: none; }
.griglia[data-cols="4"] .senza-locandina { font-size: var(--t-micro); padding: var(--s-2); }

/* ---------- Scheda film: dal basso, a tutta altezza (pagina intera sul computer) ---------- */
.foglio {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--carta); color: var(--inchiostro);
}
.foglio[open] { animation: dal-basso var(--durata-media) var(--curva); }
.foglio::backdrop { background: var(--carta); }
@keyframes dal-basso { from { transform: translateY(100%); } to { transform: none; } }
.foglio-barra {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: flex-end;
  max-width: 640px; margin: 0 auto; padding: 0 var(--s-2);
  background: var(--carta);
}
.chiudi { width: var(--tocco-min); height: var(--tocco-min); font-size: 22px; line-height: 1; }
.foglio-corpo { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) var(--s-8); }
.foglio-locandina { width: 58%; margin: 0 auto; }
.foglio-locandina.senza-locandina { font-size: var(--t-titolo-s); }
.foglio-titolo {
  margin: var(--s-5) 0 var(--s-2);
  font: var(--peso-normale) var(--t-titolo-l) / 1.02 var(--font-marchio);
  letter-spacing: -0.02em; text-wrap: balance;
}
.foglio-sotto { margin: 0; color: var(--nota); }
.trama {
  margin: 0; max-width: 62ch;
  font-size: var(--t-corpo); line-height: var(--interlinea-corpo);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.trama.intera { display: block; }
.provenienza p { margin: 0; }
.blocco { margin: var(--s-5) 0 var(--s-2); font: var(--peso-medio) var(--t-titolo-s) / 1.2 var(--font-ui); }
.dove-lista { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.azioni { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.azioni .pulsante-testo { justify-self: center; }
.pulsante[disabled] { background: var(--velo); color: var(--nota); cursor: default; }
.crediti-scheda { margin: var(--s-6) 0 0; color: var(--nota); font-size: var(--t-meta); }

/* ---------- Selettore del giudizio: testo semplice finché i timbri non sono riprogettati ---------- */
.scala { display: grid; gap: var(--s-2); }
.scala button {
  min-height: 52px; padding: 0 var(--s-4);
  text-align: left; border: var(--bordo-forte);
  font: var(--peso-normale) 22px / 1 var(--font-marchio);
  transition: background var(--durata-breve) var(--curva), color var(--durata-breve);
}
.scala button[aria-checked="true"] { background: var(--inchiostro); color: var(--carta); }

/* ---------- Campi di testo ---------- */
.campo { display: grid; gap: var(--s-1); margin-top: var(--s-5); }
.campo span { color: var(--nota); font-size: var(--t-meta); }
.campo input {
  min-height: var(--tocco-min);
  padding: 0; border: 0; border-bottom: var(--bordo); border-radius: var(--raggio);
  font: var(--peso-normale) 16px / 1.3 var(--font-ui);  /* 16 px: niente zoom automatico su iOS */
  background: none; color: var(--inchiostro);
}
.campo input:focus, .campo textarea:focus { outline: none; border-bottom: var(--bordo-forte); }
.campo textarea {
  min-height: var(--tocco-min); padding: var(--s-3) 0 var(--s-2);
  border: 0; border-bottom: var(--bordo); border-radius: var(--raggio);
  font: var(--peso-normale) 16px / 1.4 var(--font-ui); background: none; color: var(--inchiostro);
  resize: none; overflow: hidden;
}
/* Link isolati (non dentro una frase): area di tocco di 44 px senza cambiare aspetto */
.link-tocco, .links a, .provenienza a, .back {
  display: inline-flex; align-items: center; min-height: var(--tocco-min);
}

/* ---------- Messaggio di conferma (con «Annulla» quando l'azione si può disfare) ---------- */
.conferma {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--s-4); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  max-width: 608px; margin: 0 auto;
  padding: var(--s-1) var(--s-4);
  min-height: 48px;
  background: var(--inchiostro); color: var(--carta);
  transform: translateY(calc(100% + var(--s-6)));
  transition: transform var(--durata-breve) var(--curva);
}
.conferma:not(.visibile) { visibility: hidden; transition: transform var(--durata-breve) var(--curva), visibility 0s var(--durata-breve); }
.conferma.visibile { transform: none; }
.conferma .pulsante-testo { color: var(--carta); }

/* ---------- Crediti (obbligatori: TMDB e JustWatch) ---------- */
.crediti {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: var(--bordo);
  color: var(--nota);
  font-size: var(--t-meta);
  line-height: 1.45;
}
.crediti p { margin: 0 0 var(--s-2); max-width: 65ch; }
.crediti .pulsante-testo { color: var(--inchiostro); }

/* ---------- «Dimmi cosa guardare» ---------- */
.pick-start { margin-top: var(--s-2); }
@media (min-width: 720px) { .pick-start { width: auto; padding: 0 var(--s-6); } }
.moods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.moods button {
  display: grid; align-content: end; gap: var(--s-2);
  min-height: 200px; padding: var(--s-4);
  border: var(--bordo-forte); text-align: left;
  transition: background var(--durata-breve) var(--curva), color var(--durata-breve);
}
.moods button span { font: var(--peso-normale) var(--t-titolo-l) / 1 var(--font-marchio); letter-spacing: -0.02em; }
.moods button small { font-size: var(--t-meta); color: var(--nota); }
.moods button:active { background: var(--inchiostro); color: var(--carta); }
.moods button:active small { color: var(--carta); }
.pick-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3); padding-bottom: var(--s-1); border-bottom: var(--bordo);
}
.pick-bar .nota { font-size: var(--t-meta); min-width: 0; }
.pick-bar .pulsante-testo { flex: none; white-space: nowrap; }  /* «Un altro» sempre su una riga */
.pick-actions { display: flex; gap: var(--s-4); flex: none; }

/* ---------- Statistiche (variante B «Rivista»): frasi grandi, colonna al centro sul computer ----------
   Bodoni solo sui numeri e sulle parole chiave (<b>, <i>); la frase nel carattere del sito, più leggibile (Anna,
   2026-10-12). */
.stats { max-width: 640px; margin-inline: auto; }
.poster-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: var(--s-5); }
.poster-strip img { width: 100%; aspect-ratio: var(--locandina); object-fit: cover; background: var(--velo); }
.big-line {
  margin: var(--s-5) 0 var(--s-1);
  font: var(--peso-medio) 21px / 1.3 var(--font-ui); letter-spacing: -0.01em; text-wrap: balance;
}
.big-line b, .big-line i {
  font: var(--peso-normale) 1.9em / 1 var(--font-marchio); letter-spacing: -0.03em; vertical-align: -0.04em;
}
.big-line i { font-style: italic; font-size: 1.45em; }
.small-line { margin: 0; color: var(--nota); font-size: var(--t-corpo); line-height: var(--interlinea-corpo); }
.small-line a { color: var(--inchiostro); font-weight: var(--peso-medio); }
.stats hr { border: 0; border-top: var(--bordo); margin: var(--s-5) 0 0; }

/* ---------- Profilo: chi sei e la gestione (variante G, «colophon») ---------- */
.button-outline {
  display: block; width: 100%; min-height: 48px;
  border: var(--bordo-forte); border-radius: var(--raggio);
  font: var(--peso-medio) var(--t-ui) / 1 var(--font-ui);
}
.button-outline:active { background: var(--velo); }
.profile, .narrow { max-width: 640px; }
/* Sul computer niente colonna stretta a sinistra: Profilo su due colonne, conferme al centro */
@media (min-width: 900px) {
  .profile {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8);
    align-items: start;
  }
  .profile-name { grid-column: 1 / -1; }
  .profile-side > .blocco:first-child { margin-top: var(--s-6); }
  .narrow { margin-inline: auto; }
}
.profile-name {
  margin: var(--s-6) 0 0;
  font: var(--peso-normale) var(--t-titolo-l) / 1 var(--font-marchio);
  letter-spacing: -0.03em; text-wrap: balance;
}
.page-title { margin-top: var(--s-6); }
.small { margin: 0; font-size: var(--t-meta); }

.colophon { margin: var(--s-6) 0 0; border-top: var(--bordo-forte); }
.colophon > div {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); align-items: center;
  min-height: 52px; border-bottom: var(--bordo);
}
.colophon dt { color: var(--nota); font-size: var(--t-meta); }
.colophon dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-corpo); }
.colophon-wide dd { justify-content: space-between; padding: var(--s-2) 0; }
.inline-action { flex: none; font-size: var(--t-ui); }

.choice { display: flex; gap: var(--s-4); margin-left: -2px; }
.choice { gap: var(--s-1); margin-left: calc(-1 * var(--s-2)); }
/* «Sì» e «No» erano larghi 12 e 19 px: area di tocco di 44 px, stesso aspetto */
.choice button { min-height: var(--tocco-min); min-width: var(--tocco-min); padding: 0 var(--s-2); text-align: left; color: var(--nota); font-weight: var(--peso-medio); }
.choice button[aria-pressed="true"] { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 6px; }

.platforms-editor { padding: var(--s-4) 0 var(--s-5); border-bottom: var(--bordo); }
.platform-options { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.platform-options:empty { display: none; }
.platform-options button {
  min-height: var(--tocco-min); padding: 0 var(--s-3);
  border: var(--bordo); font-size: var(--t-ui);
  transition: background var(--durata-breve) var(--curva), color var(--durata-breve);
}
.platform-options button[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }

.actions { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.actions .pulsante-testo { justify-self: start; }

.devices, .links { list-style: none; margin: 0; padding: 0; border-top: var(--bordo); }
.devices li, .links li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 52px; border-bottom: var(--bordo); font-size: var(--t-corpo);
}
.devices .nota, .links .nota { font-size: var(--t-meta); text-align: right; }
.links a { font-weight: var(--peso-medio); }
.row-end { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.aside { margin-top: var(--s-6); }

.help { border-top: var(--bordo); }
.help summary {
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; font-size: var(--t-corpo);
}
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: "+"; color: var(--nota); font-size: var(--t-titolo-s); }
.help[open] summary::after { content: "−"; }
.help ul { margin: 0 0 var(--s-4); padding-left: var(--s-4); font-size: var(--t-corpo); line-height: var(--interlinea-corpo); }
.help + .links { border-top: var(--bordo); }

.danger { margin-top: var(--s-7); padding-top: var(--s-3); border-top: var(--bordo); }

[hidden] { display: none !important; }

/* ---------- Amici: riepilogo e lista di un amico (2026-10-07) ---------- */
.friends-page { max-width: 640px; }
@media (min-width: 900px) { .friends-page { margin-inline: auto; } }
#friend.friends-page { max-width: none; }
.page-heading {
  margin: var(--s-5) 0 0;
  font: var(--peso-normale) var(--t-titolo-l) / 1 var(--font-marchio); letter-spacing: -0.03em;
}
.together { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); margin-top: var(--s-3); }
.together-item { display: block; text-decoration: none; }
.friend-rows { border-top: var(--bordo-forte); }
.friend-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--s-3);
  min-height: 76px; border-bottom: var(--bordo); text-decoration: none;
}
.friend-text { display: grid; gap: 2px; min-width: 0; }
.friend-name { font: var(--peso-normale) var(--t-titolo-s) / 1.15 var(--font-marchio); font-size: 24px; }
.friend-row .nota { font-size: var(--t-meta); }
.mini-posters { display: flex; gap: 2px; }
.mini-poster { width: 28px; aspect-ratio: var(--locandina); object-fit: cover; background: var(--velo); }
.chevron { color: var(--nota); font-size: var(--t-titolo-s); }
.back {
  display: inline-flex; align-items: center; min-height: var(--tocco-min); margin-top: var(--s-2);
  font-weight: var(--peso-medio); text-decoration: none;
}
#friend .profile-name { margin-top: var(--s-2); }
#friend-meta { margin-top: var(--s-1); }
.dove.mark { color: var(--nota); }
.from-line { margin: var(--s-3) 0 0; font-size: var(--t-corpo); }
.from-line b { font-weight: var(--peso-medio); }
.empty-view { margin-top: var(--s-5); }
/* Cinque voci nel menu: un po' più vicine sul telefono */
@media (max-width: 420px) { .nav { gap: var(--s-4); } }

/* Locandine piccole (3 e 4 colonne): piattaforma e amici in sovraimpressione (richiesta del proprietario, 2026-10-07) */
.poster-box { position: relative; display: block; }
.overlay { display: none; }
.griglia[data-cols="3"] .overlay, .griglia[data-cols="4"] .overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 1px; justify-items: start;
}
.overlay span {
  max-width: 100%; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--inchiostro); color: var(--carta); font-size: var(--t-micro); line-height: 1.3;
}
.griglia[data-cols="4"] .overlay span { padding: 1px 4px; }  /* il carattere resta --t-micro, il più piccolo della scala */
.griglia[data-cols="3"] .senza-locandina, .griglia[data-cols="4"] .senza-locandina { align-items: flex-start; }  /* sotto c'è la sovraimpressione */

/* ---------- «Torna su»: compare dopo qualche schermata nelle liste lunghe (analisi di usabilità, 2026-10-11) ---------- */
.torna-su {
  position: fixed; right: var(--gutter); bottom: var(--s-4); z-index: 9;
  min-height: var(--tocco-min); padding: 0 var(--s-4);
  background: var(--carta); border: var(--bordo-forte); border-radius: var(--raggio);
  font: var(--peso-medio) var(--t-ui) / 1 var(--font-ui);
}
.torna-su[hidden] { display: none; }
.torna-su:active { background: var(--velo); }
body.con-avviso .torna-su { display: none; }  /* l'avviso in basso ha la precedenza */

/* ---------- «Salta alle locandine»: primo elemento per chi usa la tastiera, visibile solo con il fuoco ---------- */
.salta {
  position: absolute; left: var(--gutter); top: var(--s-2); z-index: 20;
  padding: var(--s-2) var(--s-3); background: var(--inchiostro); color: var(--carta);
  transform: translateY(-200%);
}
.salta:focus { transform: none; }
.griglia:focus { outline: none; }  /* arrivo da «Salta alle locandine»: il Tab dopo va sulla prima */
.testo-lungo ul { padding-left: var(--s-4); }
.testo-lungo .back { margin-top: var(--s-2); }
.crediti .pulsante-testo { min-width: var(--tocco-min); }  /* «Esci» era largo 23 px */
.dove-lista { align-items: center; }
.dove-lista li { display: flex; align-items: center; min-height: var(--tocco-min); }  /* «Apri su JustWatch» si tocca bene */

/* ---------- Novità: pagina /novita e riquadro in «Da vedere» (2026-10-11) ---------- */
.news-item { border-top: var(--bordo); margin-top: var(--s-5); padding-top: var(--s-3); }
.news-date { margin: 0; font-size: var(--t-meta); }
.news-item .blocco { margin-top: var(--s-1); }
.news-item ul { margin: 0; padding-left: var(--s-4); line-height: var(--interlinea-corpo); }
.news-item li + li { margin-top: var(--s-2); }
.news-box {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-2); padding: var(--s-3) 0 var(--s-1) var(--s-4); border: var(--bordo-forte);
}
.news-box[hidden] { display: none; }
.news-box div { flex: 1; min-width: 0; }
.news-box p { margin: 0; }
.news-box .news-date { margin-bottom: var(--s-1); }
.news-box .chiudi { flex: none; font-size: 18px; }
.news { margin-top: var(--s-5); }

/* ---------- «Entra con Instagram» (2026-10-12) ---------- */
.pulsante-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pulsante-link[hidden] { display: none; }
.entra-box { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.entra-box p { margin: 0; }
.entra-codice { display: block; margin-top: var(--s-2); font: var(--peso-normale) var(--t-titolo-m) / 1.1 var(--font-marchio); }

/* ---------- Aggiungere amici: /amici/aggiungi, /amici/richieste, /i/<codice> (2026-10-12) ---------- */
.errore { margin: var(--s-1) 0 0; color: var(--errore); }
.add-friend { margin-top: var(--s-5); }
.requests-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tocco-min); margin-top: var(--s-4); border-top: var(--bordo); border-bottom: var(--bordo);
  font-weight: var(--peso-medio); text-decoration: none;
}
.requests-line[hidden] { display: none; }
.requests-who { font-weight: var(--peso-normale); color: var(--nota); }
.new-mark { font: var(--peso-normale) var(--t-meta) / 1 var(--font-ui); }
.add-block { padding: var(--s-2) 0 var(--s-5); border-top: var(--bordo); }
.add-block:first-of-type { border-top: var(--bordo-forte); }
.add-block .corpo { margin-bottom: var(--s-3); }
.add-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.invite-message { padding: var(--s-3) var(--s-4); border: var(--bordo); }
.request-sent { margin-top: var(--s-4); }
.qr { width: 200px; height: 200px; margin: var(--s-3) 0; image-rendering: pixelated; }
.qr[hidden] { display: none; }
.request-rows { border-top: var(--bordo-forte); }
.request-row { padding: var(--s-4) 0; border-bottom: var(--bordo); }
.request-row p { margin: 0; }
.request-row .corpo { margin-top: var(--s-2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.invito .pulsante-link { margin-top: var(--s-2); }
.invito-nota { margin-top: var(--s-2); }
/* I due gesti per entrare (2026-10-12): grandi, numerati, prima del pulsante */
.due-passi { list-style: none; margin: var(--s-5) 0 var(--s-3); padding: 0; display: grid; gap: var(--s-3);
  counter-reset: passo; }
.due-passi li { counter-increment: passo; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
  font-size: var(--t-titolo-s); line-height: var(--interlinea-ui); }
.due-passi li::before { content: counter(passo); font-family: var(--font-marchio); font-size: var(--t-titolo-m);
  line-height: 1; }
.passi { padding-left: var(--s-5); }
.passi li + li { margin-top: var(--s-2); }
/* Il QR serve solo dal computer: dal telefono si tocca il pulsante */
@media (hover: none), (pointer: coarse) { .solo-computer { display: none; } }
.suggestion-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: 76px; border-bottom: var(--bordo);
}
.small-button { width: auto; min-height: var(--tocco-min); padding: 0 var(--s-4); }

/* ---------- Riepilogo del mese a schede (2026-10-12) ---------- */
.recap { max-width: 480px; }
.recap-dots { display: flex; gap: 4px; margin: var(--s-2) 0; }
.recap-dots span { flex: 1; height: 3px; background: var(--velo); }
.recap-dots span.on { background: var(--inchiostro); }
.recap-stage { position: relative; border: var(--bordo); }
.recap-stage canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.recap-tap { position: absolute; top: 0; bottom: 0; width: 40%; }
.recap-tap[hidden] { display: none; }
.recap-prev { left: 0; }
.recap-next { right: 0; width: 60%; }
.recap-tap:focus-visible { outline: var(--focus); outline-offset: -4px; }
.recap select { min-height: var(--tocco-min); font: 400 16px / 1.3 var(--font-ui); background: none; color: var(--inchiostro);
  border: 0; border-bottom: var(--bordo); border-radius: var(--raggio); }
.closest { margin: 0 0 var(--s-3); }
.closest a { color: var(--inchiostro); font-weight: var(--peso-medio); }

/* «Tra i tuoi amici» nella scheda: una riga per amico, con giudizio e commento di chi l'ha visto (2026-10-12) */
.friend-status { list-style: none; margin: 0; padding: 0; border-top: var(--bordo); }
.friend-status li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3);
  min-height: var(--tocco-min); padding: var(--s-1) 0; border-bottom: var(--bordo);
}
.friend-status a { font-weight: var(--peso-medio); text-decoration: none; min-height: var(--tocco-min); display: inline-flex; align-items: center; }
.friend-status .nota { font-size: var(--t-meta); text-align: right; }
.friend-note { grid-column: 1 / -1; margin: 0 0 var(--s-2); font-style: italic; line-height: var(--interlinea-corpo); }
/* Passkey (2026-10-12): secondo pulsante per entrare, sotto «Entra con Instagram» */
.passkey-login { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.passkey-login[hidden] { display: none; }