/* Le pagine pre-login: quel che `login.css` non ha, e nient'altro.
   Tutto il resto (scena, card, campi, bottoni, messaggi) viene da lì: due file
   che descrivono lo stesso aspetto divergono alla prima modifica. */

/* Nel login il MODULO è la card (`<form class="card">`), quindi campi e bottone
   ereditano il suo `display:flex` e il suo `gap`. Qui la card contiene il
   titolo e poi il modulo, che senza queste tre righe torna un blocco: campi
   attaccati e bottone largo quanto la sua scritta, allineato a sinistra. */
.card__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card__form .btn { width: 100%; }

/* Un'azione che è un collegamento e non un invio («Richiedi un nuovo link»):
   un <a> non è un <button>, e senza queste righe non ne ha né l'altezza né il
   testo centrato. */
.card__btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 16px;
}

/* Il claim del login è una frase sola su due righe, quindi `nowrap` a 63px.
   Qui è una riga di servizio, diversa per pagina: deve poter andare a capo. */
.login__title--breve {
  font-size: 44px;
  line-height: 54px;
  white-space: normal;
  max-width: 480px;
}

/* La casella del consenso (attivazione invito e registrazione): allineata alla
   prima riga di testo, non al centro del paragrafo. */
.campo--consenso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13px/19px 'IBM Plex Sans', sans-serif;
  color: var(--testo-2);
}

.campo--consenso input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primario);
  flex: 0 0 auto;
}

.campo--consenso a { color: var(--testo-2); }

/* Le vie d'uscita in fondo alla card («Torna all'accesso», «Richiedi un nuovo
   link»): stessa taglia della riga legale, ma sono azioni, non note. */
.card__uscite {
  margin: 0;
  text-align: center;
  font: 400 13px/19px 'IBM Plex Sans', sans-serif;
  color: var(--testo-2);
}

/* Sottolineato sempre, non solo al passaggio del mouse: dentro una frase
   («Hai già un account? Accedi») il colore da solo dà 1,11:1 contro il testo
   accanto, e il grassetto è una distinzione al minimo. */
.card__uscite a { color: var(--primario-hover); font-weight: 600; text-decoration: underline; }
.card__uscite a:hover { text-decoration: underline; }

/* La regola di una password, sotto il campo: è un requisito da leggere prima,
   non un errore. Più piccola dell'etichetta, dello stesso grigio del testo di
   servizio. */
.card__nota {
  font: 400 12px/17px 'IBM Plex Sans', sans-serif;
  color: var(--testo-3);
}