/* pubblico/accesso.css — le pagine della porta: entrare, il codice, l'app di
   autenticazione, il primo ingresso da un invito (vista/accesso.js).

   Poche cose, grandi: un campo per riga, il tasto indaco, gli avvisi in
   terracotta con un bordo — il colore non è l'unico segno. */

.porta {
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campo-porta { display: flex; flex-direction: column; gap: 6px; }
.etichetta-porta { font-size: var(--corpo-s); font-weight: 600; letter-spacing: 0.03em; color: var(--secondario); }

.campo-porta input {
  /* `flex: none`: comune.css dà ai campi di testo una base di 240px, che in una
     colonna diventerebbe l'altezza. */
  flex: none;
  font: inherit;
  font-size: 16px; /* sotto i sedici pixel l'iPhone ingrandisce la pagina */
  padding: 10px 12px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  background: var(--carta-chiara);
  color: var(--inchiostro);
  outline: none;
  width: 100%;
}
.campo-porta input:focus { border-color: var(--indaco); }
.campo-porta input:focus-visible { outline: 2px solid var(--indaco); outline-offset: 1px; }

.campo-codice { letter-spacing: 0.4em; font-size: 22px !important; text-align: center; }

.tasto-porta { align-self: flex-start; padding: 10px 22px; font-size: var(--corpo-m); }

.avviso-accesso {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accento);
  background: var(--accento-velo-lieve);
  color: var(--inchiostro);
  font-size: var(--corpo-m);
  line-height: 1.5;
}

.testo-porta { margin: 0; font-size: var(--corpo); line-height: 1.6; color: var(--inchiostro-medio); }
.nota-porta { margin: 0; font-size: var(--corpo-s); color: var(--secondario); }

.qr-porta {
  align-self: flex-start;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-m);
}

.segreto-porta summary { cursor: pointer; font-size: var(--corpo-s); color: var(--secondario); }
.segreto-porta p { margin: 8px 0 0; font-size: var(--corpo-m); word-break: break-all; user-select: all; }

.porta-piede { margin-top: 18px; }
.porta-piede .collegamento { font-size: var(--corpo-s); }