/* RunCheck — accesso e registrazione
   Da caricare dopo vetrina.css, da cui eredita tavolozza e caratteri.
   Contratto delle classi: vedi in fondo. */

.accesso{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 24px}

.accesso-marchio{display:flex;align-items:center;gap:11px;text-decoration:none;
  margin-bottom:34px}
.accesso-marchio svg{width:34px;height:34px;display:block}
.accesso-marchio span{font-size:21px;letter-spacing:-.02em;color:var(--text)}
.accesso-marchio b{font-weight:600}
.accesso-marchio i{font-style:normal;color:var(--dim)}

.accesso-riquadro{width:100%;max-width:410px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:32px}
.accesso-riquadro h1{font-size:23px;font-weight:600;letter-spacing:-.02em;
  margin:0 0 6px;line-height:1.25}
.accesso-riquadro .guida{color:var(--dim);font-size:14.5px;margin:0 0 26px;line-height:1.55}

.campo{display:block;margin-bottom:18px}
.campo span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:7px}
.campo input{width:100%;background:var(--bg);border:1px solid var(--line2);
  border-radius:6px;color:var(--text);font:15px/1.4 var(--sans);padding:11px 13px}
.campo input:focus{outline:none;border-color:var(--gold)}
.campo input::placeholder{color:var(--dim2)}
.campo input[type=password]{font-family:var(--mono);letter-spacing:.04em}
.campo .aiuto{display:block;font-size:12.5px;color:var(--dim2);margin-top:6px;
  text-transform:none;letter-spacing:0;font-family:var(--sans)}

.accesso .bottone{width:100%;text-align:center;padding:13px 18px;font-size:15px;margin-top:6px}

.errore{background:rgba(217,88,75,.14);border:1px solid rgba(217,88,75,.4);
  border-radius:6px;padding:12px 14px;margin-bottom:22px;
  color:#eda49c;font-size:14px;line-height:1.5}
.avvenuto{background:rgba(79,178,134,.14);border:1px solid rgba(79,178,134,.4);
  border-radius:6px;padding:12px 14px;margin-bottom:22px;
  color:#8fd9b8;font-size:14px;line-height:1.5}

.alternativa{text-align:center;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--line);font-size:14.5px;color:var(--dim)}
.alternativa a{color:var(--gold);text-decoration:none;font-weight:600}
.alternativa a:hover{text-decoration:underline}

.accesso-piede{margin-top:30px;font-size:13px;color:var(--dim2)}
.accesso-piede a{color:var(--dim2);text-decoration:none}
.accesso-piede a:hover{color:var(--text)}

@media (max-width:480px){
  .accesso{padding:24px 16px;justify-content:flex-start;padding-top:52px}
  .accesso-riquadro{padding:26px 22px}
}

/* Contratto delle classi, per chi adatta il markup:

   body.accesso                      involucro della pagina, centra il riquadro
     a.accesso-marchio               logo + nome, sopra il riquadro, porta a /
     div.accesso-riquadro            la scheda
       h1                            titolo
       p.guida                       riga di spiegazione sotto il titolo
       div.errore                    messaggio d'errore, se c'è
       div.avvenuto                  conferma, se c'è
       form
         label.campo > span + input  ogni campo; span è l'etichetta
           small.aiuto               nota sotto il campo, facoltativa
         button.bottone.pieno        invio
       div.alternativa               «Non hai un account? Registrati», DENTRO il riquadro
                                     e dopo il form: il suo border-top è il separatore
                                     sotto il modulo, e per essere larga quanto la scheda
                                     deve starci dentro. Fuori, in un contenitore
                                     flex-column con align-items:center, si restringerebbe
                                     al proprio testo e il filo con lei.
     div.accesso-piede               collegamento di ritorno alla vetrina, fuori dal riquadro
*/