/* La bacheca. Solo impaginazione: i colori sono quelli di `tavolo.css`, la
   scheda, i bottoni e i campi anche. */

/* La scheda di `tavolo.css` e' larga 440px perche' nasce come pannello sopra
   il tavolo: qui e' una colonna di testo. */
.bacheca .scheda { max-width: none; }

/* ------------------------------------------------------------------ scrivere */

.modulo-bacheca { display: grid; gap: .7rem; }
.modulo-bacheca textarea.campo { display: block; resize: vertical; min-height: 4.6rem; line-height: 1.5; }
.modulo-piede { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .7rem 1rem; }
.campo-chi { display: grid; gap: .25rem; font-size: .82rem; color: var(--fioco); flex: 1 1 12rem; max-width: 18rem; }
.campo-chi .campo { padding: .45rem .65rem; }
.scrive-come { font-size: .9rem; color: var(--fioco); }
.scrive-come b { font-weight: normal; color: var(--inchiostro); }
.in-risposta { margin: 0 0 .7rem !important; font-size: .9rem; }
.in-risposta b { font-weight: normal; color: var(--inchiostro); }
.in-risposta .collegamento { padding: 0; font-size: inherit; }

/* Il campo-trappola: fuori dallo schermo e non `display: none`, che i robot
   piu' attenti saltano. */
.altrove { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* ----------------------------------------------------------------- i messaggi */

.messaggi { margin-top: 1.6rem; }
.messaggio { padding: 1rem 0; border-top: 1px solid var(--bordo-tenue); scroll-margin-top: 1rem; }
.messaggio:target > .messaggio-testa .messaggio-nome { color: var(--accento-chiaro); }
.messaggio-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.messaggio-nome { font-weight: normal; overflow-wrap: anywhere; }
.messaggio-testa time { font-size: .78rem; color: var(--fioco); margin-left: auto; white-space: nowrap; }
/* `pre-line` tiene gli a capo di chi ha scritto senza fidarsi di nessun tag;
   `anywhere` perche' una parola di trecento caratteri non deve allargare la
   pagina di un telefono. */
.messaggio-testo { margin: .35rem 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }

/* La sigla e il segno del sito stanno in `home.css`, che questa pagina e la
   home hanno in comune. Qui la sigla sta a sinistra e il resto le si allinea. */
.messaggio-con-sigla { display: flex; align-items: flex-start; gap: .85rem; }
.messaggio-corpo { flex: 1; min-width: 0; }
.risposta .sigla { width: 1.9rem; height: 1.9rem; font-size: .9rem; }

.risposte { margin-top: .6rem; border-left: 2px solid var(--bordo-tenue); }
.risposta { padding: .65rem 0; }
.risposta:first-child { border-top: 0; padding-top: .2rem; }

.rispondi { margin-top: .55rem; }
.rispondi summary { cursor: pointer; width: fit-content; font-size: .85rem; color: var(--fioco); list-style: none; }
.rispondi summary::-webkit-details-marker { display: none; }
.rispondi summary:hover, .rispondi[open] summary { color: var(--inchiostro); }
.rispondi[open] summary { margin-bottom: .6rem; }

.bacheca-vuota { text-align: center; padding: 1.4rem 0; }

.sfoglia { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.4rem 0; }
.sfoglia-dove { color: var(--fioco); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- la prova */

.prova h2 { font-size: 1.25rem; }
.prova-domanda { font-size: 1.1rem; color: var(--inchiostro) !important; }
.prova-domanda strong { font-weight: normal; color: var(--accento-chiaro); }
.prova-sbagliata { color: var(--accento-chiaro) !important; margin-bottom: 0 !important; }
/* Quattro in fila; sul telefono due per due, perche' una carta larga
   settanta pixel non e' un bersaglio per un pollice. */
.prova-carte { display: grid; grid-template-columns: repeat(4, minmax(0, 7.2rem)); gap: .9rem; justify-content: center; margin: 1rem 0 1.2rem; }
@media (max-width: 480px) {
  .prova-carte { grid-template-columns: repeat(2, minmax(0, 7.6rem)); gap: 1rem; }
}
.prova-carta {
  appearance: none; padding: 0; border: 0; background: none; cursor: pointer; display: block;
  border-radius: var(--angolo-carta);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.prova-carta img { display: block; width: 100%; height: auto; border-radius: var(--angolo-carta); }
.prova-carta:hover { transform: translateY(-5px); box-shadow: 0 12px 22px rgba(0, 0, 0, .5); }
.prova-carta:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .prova-carta { transition: none; }
  .prova-carta:hover { transform: none; }
}
.prova .nota .collegamento { padding: 0; font-size: inherit; }

/* Le risposte e «Rispondi» si allineano al testo del messaggio, non alla
   sigla: il rientro e' la sigla piu' il suo spazio. Sul telefono si accorcia,
   o le risposte restano con mezza riga. */
.messaggio > .risposte, .messaggio > .rispondi { margin-left: 3.15rem; }
.messaggio > .risposte { padding-left: .9rem; }
@media (max-width: 480px) {
  .messaggio > .risposte { margin-left: .6rem; padding-left: .7rem; }
}

/* «Cancella», sotto i propri messaggi: discreto come «Rispondi», e la
   conferma si apre in riga. Il segnaposto di un messaggio cancellato e' una
   riga in corsivo, senza sigla: non c'e' piu' nessuno da nominare. */
.cancella { margin-top: .45rem; }
.cancella summary { cursor: pointer; width: fit-content; font-size: .85rem; color: var(--fioco); list-style: none; }
.cancella summary::-webkit-details-marker { display: none; }
.cancella summary:hover, .cancella[open] summary { color: var(--inchiostro); }
.cancella form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .5rem; font-size: .9rem; color: var(--fioco); }
.cancella .btn { padding: .35rem .85rem; font-size: .88rem; }
.messaggio-cancellato { margin: 0; color: var(--fioco); font-style: italic; font-size: .95rem; }

/* Il divisore fra i giorni: una righetta col giorno in mezzo. E' piu' marcata
   del filetto fra due messaggi, e il messaggio che la segue il suo filetto lo
   perde: due righe una sull'altra sarebbero un binario. */
.giorno {
  display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 0;
  font-size: .78rem; font-variant: small-caps; letter-spacing: .1em; color: var(--fioco);
}
.giorno::before, .giorno::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.giorno + .messaggio { border-top: 0; }
.messaggi > .giorno:first-child { margin-top: 0; }