/* Stile dei resoconti dei Consigli raccontati su Twitter (2013-2018).
   Sta qui e non in site.css perche' riguarda solo queste 46 pagine: cosi'
   una modifica non obbliga a rifare il cache-busting su tutto il sito.
   Le pagine caricano prima site.css, quindi qui ci sono solo le aggiunte. */

.resoconto {
  --tweet-bordo: #d9dde1;
  --tweet-tenue: #5a6570;
  margin-block: 24px 0;
}

/* Il titolo del singolo resoconto. E' un <h2>, non un <p>, e non e' un
   dettaglio formale: la pagina ha <h1> "Archivio Resoconti" e poi i due <h3>
   del footer, quindi senza un livello 2 la scaletta salta un gradino e chi
   naviga a titoli si perde. E' anche lo stesso schema del resto del sito —
   `mozioni` ha <h1> "Mozioni" e poi un <h2> per ogni amministrazione.

   L'aspetto resta quello di prima: qui si annullano le misure che l'<h2>
   porterebbe con se' (font-size 2rem e oltre) e si rimettono quelle del
   paragrafo che c'era. Cambia la struttura, non la pagina. */
.resoconto .intro {
  color: var(--tweet-tenue);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  margin-block: 18px 24px;
  text-wrap: initial;
}

/* Ogni tweet e' una scheda, come lo si vedeva all'epoca. */
.tweet {
  border: 1px solid var(--tweet-bordo);
  border-radius: var(--radius, 8px);
  padding: 14px 16px;
  margin-block-end: 12px;
  background: #fff;
  /* Sono decine di schede per pagina: il browser salta il lavoro di disegno
     per quelle fuori schermo. L'altezza stimata evita che lo scorrimento
     salti. */
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}

.tweet-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-block-end: 6px;
}

.tweet-autore { font-weight: 700; }

.tweet-utente {
  color: var(--tweet-tenue);
  font-size: 0.875rem;
}

.tweet-testo {
  margin: 0;
  overflow-wrap: anywhere;
}

.tweet-foto {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block-start: 12px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--tweet-bordo);
}

.tweet-data {
  margin-block: 10px 0;
  font-size: 0.8125rem;
  color: var(--tweet-tenue);
  /* Alta quanto il link che contiene (24px, vedi sotto). Se la riga resta a
     19,5 il link ci sporge fuori di 2,3px sopra e sotto, e quel pezzo che
     avanza e' l'unico che axe conta come "area libera": diceva
     "93,8 x 2,3px" e bocciava lo stesso. */
  line-height: 24px;
}

/* Nel sito i link dentro il testo non si distinguono: qui la data e' un link
   al tweet originale, e deve vedersi che lo e'. */
.tweet-data a {
  color: var(--tweet-tenue);
  text-decoration: underline;

  /* Il bersaglio da toccare deve essere alto almeno 24px: a 13px di testo la
     riga ne misurava **15**, e su un telefono un link cosi' basso si sbaglia.
     Serve `inline-block`: su un elemento `inline` l'altezza del riquadro la
     detta il carattere, non la riga.

     Primo tentativo: padding di 5px piu' `margin-block: -5px` per non allungare
     la pagina. **Sbagliato, e in un modo istruttivo**: il link sporgeva oltre
     il suo paragrafo, gli elementi vicini gli finivano sopra, e dell'area da
     toccare ne restava scoperta 2,3px su 29,5. Un bersaglio grande che sta
     sotto a qualcos'altro non e' un bersaglio grande.

     Quindi si occupa lo spazio davvero. Costa 4,5px per messaggio — su questa
     pagina, che ne ha 244, un 3% di altezza in piu'. E' il prezzo giusto. */
  display: inline-block;
  line-height: 24px;
}

/* Il <time> dentro il link deve occuparlo tutto.
   Lasciandolo `inline` restava alto 15px e stava **sopra** al link nella prova
   a punti: dal centro del riquadro il primo elemento colpito era `TIME`, non
   `A`, e dell'area da toccare restavano libere solo le due strisce sopra e
   sotto — 2,3px. Il bersaglio era grande 24px e ne valeva 2,3. */
.tweet-data a > time {
  display: block;
  line-height: inherit;
}

.tweet-data a:hover { color: var(--color-ink, #34495e); }

/* Commento scritto da noi durante la diretta, non un messaggio di Twitter:
   niente riquadro, si legge come testo della pagina. */
.resoconto .nota {
  margin-block: 20px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--color-accent, #95c3cf);
  /* Come .tweet-testo, e per lo stesso motivo. Qui mancava, e bastava una
     nota con dentro un indirizzo lungo per mandare **tutta la pagina** in
     scorrimento orizzontale: su 2014-08-27, a 412px di schermo, il documento
     era largo 573. Le note le abbiamo scritte noi durante la diretta e spesso
     contengono un link per esteso, quindi capitava spesso. */
  overflow-wrap: anywhere;
}