/* =========================================================
   MB COMPANY — LE DUE PAGINE DELL'ACCESSO
   accedi.html (entra / registrati / password dimenticata)
   nuova-password.html (si arriva dal link del recupero)

   UN RIQUADRO SOLO, AL CENTRO, E NIENTE INTORNO.

   C'era una seconda colonna: l'anteprima dell'area disegnata in CSS e
   l'elenco delle quattro cose che si aprono entrando. L'idea era dare
   una ragione a chi non sapeva ancora cosa ci fosse dall'altra parte.
   Non regge: a questa pagina non ci si capita, ci si arriva da un
   pulsante premuto apposta, e chi ci arriva sa gia' dove sta andando.
   Quel contorno era una cosa da leggere messa fra la persona e le due
   caselle che voleva compilare.

   LA REGOLA DI QUESTO FILE, da qui in avanti: ogni parola che non e' una
   etichetta di campo o un messaggio d'errore e' un ostacolo. Se serve
   spiegare qualcosa, si spiega dove il problema si presenta — sotto il
   campo, nel momento in cui si sbaglia — non in un paragrafo che tutti
   saltano.

   IL COLORE E' L'ARANCIONE DEL SITO, non il blu dell'Academy: da qui
   si entra in tutto — corsi, strumenti, richieste — e l'Academy e' una
   delle stanze, non la casa.
   ========================================================= */

.strumento__indietro{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  transition:color .35s var(--ease);
}
.strumento__indietro:hover{color:var(--arancio)}

.entrata{
  position:relative;overflow:hidden;
  padding:clamp(112px,14vh,152px) 0 clamp(56px,7vw,96px);
  min-height:100vh;
}
.entrata::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 54% at 8% 2%,rgba(255,122,26,.13),transparent 64%),
    radial-gradient(50% 48% at 94% 96%,rgba(255,122,26,.07),transparent 68%);
}
/* ── UNA COLONNA SOLA, AL CENTRO ───────────────────────────────────────
   Vale per tutte e due le pagine dell'accesso, ed è il loro disegno.

   C'era una seconda colonna con l'anteprima dell'area e l'elenco di cosa
   si apre entrando. Serviva a chi non sapeva ancora cosa ci fosse
   dall'altra parte — ma qui non ci si capita: ci si arriva da un pulsante
   premuto apposta. Quel contorno era una cosa da leggere messa fra la
   persona e le due caselle che voleva compilare, e su un riquadro
   d'accesso ogni parola in più è un ostacolo.

   `align-content:center` e non `place-items`: il riquadro va centrato in
   verticale, ma in orizzontale deve restare largo quanto gli serve, non
   quanto il suo contenuto più lungo.

   E non prende tutta la larghezza: due caselle stirate su milleduecento
   pixel non si compilano, si cercano. */
.entrata--sola{
  display:grid;align-content:center;
  padding-top:clamp(104px,12vh,148px);
  padding-bottom:clamp(56px,8vw,104px);
}
.entrata--sola .wrap{position:relative;z-index:1}
.entrata--sola .modulo{max-width:480px;margin-inline:auto}

/* =========================================================
   IL MODULO
   ========================================================= */
.modulo{padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px);border-radius:var(--r-lg)}
.modulo__t{
  margin:14px 0 0;font-family:var(--f-display);font-weight:400;color:#fff;
  font-size:clamp(22px,2.9vw,33px);line-height:1.18;
}
/* Vuota sparisce, margine compreso. Nei due modi normali non c'è niente da
   dire sotto il titolo, e un paragrafo vuoto lascerebbe comunque il suo
   spazio: si vedrebbe un buco senza capire di cosa. */
.modulo__sub{margin:16px 0 0;font-size:13px;line-height:1.8;color:var(--ink-3);max-width:44ch}
.modulo__sub:empty{display:none}

/* ── le due linguette ──────────────────────────────────────────────────
   Entrare e registrarsi sono due cose diverse e la pagina deve dire
   quale delle due sta facendo. Il cursore che scorre sotto e' un
   elemento vero e non un bordo che salta: si sposta, e lo spostamento
   dice che sono due stati della stessa cosa. */
.modi{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(26px,3vw,34px);
  border-bottom:1px solid var(--line);
}
.modo{
  position:relative;z-index:1;padding:13px 4px;background:none;border:0;cursor:pointer;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
  transition:color .4s var(--ease);
}
.modo[aria-selected="true"]{color:#fff}
.modo:hover{color:var(--ink-2)}
.modi__cursore{
  position:absolute;left:0;bottom:-1px;width:50%;height:1px;background:var(--arancio);
  transition:transform .5s var(--ease-out);
}
/* «Crea l'accesso» è la PRIMA linguetta, quindi a riposo il cursore sta a
   sinistra e si sposta per «entra». Scritto al contrario — e lo era — il
   trattino arancione finiva sotto la linguetta che NON era scelta, e le due
   indicazioni (la scritta bianca e il trattino) dicevano cose opposte. */
.modi[data-modo="entra"] .modi__cursore,
.modi[data-modo="scordata"] .modi__cursore{transform:translateX(100%)}

/* ── i campi ───────────────────────────────────────────────────────────
   L'etichetta sta sopra e non dentro: un segnaposto che sparisce appena
   si scrive lascia chi compila senza sapere piu' cosa stava scrivendo,
   ed e' il difetto peggiore di un modulo di registrazione. */
.campi{display:grid;gap:16px;margin-top:clamp(24px,3vw,32px)}
.campo{display:grid;gap:8px;min-width:0}
.campo > span{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
}
.campo > span i{font-style:normal;color:var(--ink-4);opacity:.7;text-transform:none;letter-spacing:.06em}
.campo input{
  width:100%;padding:14px 15px;border:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:14px;font-weight:300;color:#fff;
  transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.campo input::placeholder{color:var(--ink-4)}
.campo input:hover{background:rgba(255,255,255,.05)}
.campo input:focus{
  outline:none;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--arancio-3),0 0 0 3px var(--arancio-4);
}
/* Un campo che il browser ha riempito da solo: si vede, cosi' nessuno
   manda una richiesta con dentro l'email di un altro conto. */
.campo input:autofill,.campo input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 100px rgba(255,122,26,.06);
}

/* Il campo che non riguarda il modo scelto sparisce del tutto: nascosto
   con `hidden` e non con l'opacita', o resterebbe raggiungibile col
   tabulatore e verrebbe spedito insieme al resto. */
.campo[hidden]{display:none}

/* la riga sotto la password: la forza, detta come si deve.
   Tre segmenti e una parola. Non una percentuale — nessuno sa cosa vuol
   dire una password al 64%. */
.forza{display:grid;gap:8px;margin-top:2px}
/* `hidden` è solo un valore predefinito, e qualunque `display` scritto dopo
   se lo mangia: senza questa riga, la riga della forza resterebbe in pagina
   anche quando si sta entrando invece di registrarsi — e giudicherebbe la
   password di un conto che esiste già, cosa che non ha nessun senso. */
.forza[hidden]{display:none}
.forza__barre{display:flex;gap:4px}
.forza__barre i{
  flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.10);
  transition:background .4s var(--ease);
}
.forza__dice{font-size:11px;letter-spacing:.04em;color:var(--ink-4)}
.forza[data-forza="1"] .forza__barre i:nth-child(1){background:#e0553f}
.forza[data-forza="2"] .forza__barre i:nth-child(-n+2){background:#c9a227}
.forza[data-forza="3"] .forza__barre i{background:#4ea85c}

/* ── ho dimenticato la password ────────────────────────────────────────
   Un collegamento, non un pulsante: è una via di servizio, e se avesse la
   forma di un pulsante competerebbe con «Entra», che è quello che nove
   volte su dieci si vuole premere. Sta a destra, sotto la password, dove
   si guarda quando quella password non torna. */
.scordata{
  justify-self:end;padding:2px 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:11.5px;color:var(--ink-4);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .3s var(--ease);
}
.scordata:hover{color:#fff}
.scordata[hidden]{display:none}

/* Il messaggio dopo aver chiesto il link. È lungo di proposito: deve dire
   di guardare anche nella posta indesiderata, che è dove finisce la metà
   di queste email, e deve dirlo prima che la persona rinunci. */
.ripensaci{
  margin:0;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
  font-size:12.5px;line-height:1.7;color:var(--ink-2);
}
.ripensaci[hidden]{display:none}

.modulo__vai{margin-top:26px;width:100%}
/* Mentre deriva la chiave il pulsante non e' cliccabile e lo dice. Sono
   due o tre decimi di secondo: senza questo sembrerebbe che il clic non
   abbia fatto niente, e si clicca di nuovo. */
.modulo__vai[disabled]{opacity:.55;cursor:default}
.modulo__vai[disabled]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.10)}

/* ── l'esito ───────────────────────────────────────────────────────────
   Una riga sola, sotto il pulsante, che sta ferma dov'e' anche quando e'
   vuota: se comparisse solo all'occorrenza spingerebbe giu' il modulo e
   il messaggio si leggerebbe mentre la pagina si muove. */
.esito{
  min-height:20px;margin:14px 0 0;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
.esito--male{color:#ff9a7a}
.esito--bene{color:#8fd8a0}

.modulo__minuto{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.75;color:var(--ink-4);
}
.modulo__minuto a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.modulo__minuto a:hover{color:#fff}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:560px){
  .modulo{padding:26px 20px}
  /* Su un telefono il riquadro prende tutta la larghezza che c'e': un
     limite a 480 lascerebbe due bande vuote ai lati e basta. */
  .entrata--sola .modulo{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .modi__cursore{transition:none}
}