/*
 * Le schermate fuori dal pannello: accesso, secondo fattore, recupero della
 * password, attivazione del secondo fattore, errori.
 *
 * Non caricano il tema W3CRM. Sono cinque pagine di un modulo e un titolo, e
 * seicento kilobyte di foglio di stile per un gestionale servono a disegnare la
 * barra laterale, le tabelle e i grafici: qui non c'è niente di tutto questo, e
 * la pagina che quasi tutti vedono per prima è quella che conviene far
 * comparire in fretta.
 *
 * ── Il pannello di sinistra ────────────────────────────────────────────────
 *
 * È l'unico punto di tutta l'applicazione in cui ci si concede qualcosa:
 * altrove il lavoro è leggere dati e ogni decorazione è rumore. Il reticolo è
 * inciso come su carta millimetrata, non sfumato: viene da un banco di lavoro,
 * che è dove questo gestionale verrà usato, e si disegna con due gradienti
 * ripetuti — nessuna immagine da scaricare. La barretta d'accento in alto a
 * sinistra è la stessa che dentro il pannello segna la voce di menu corrente:
 * chi entra la rivede subito dopo, e vuol dire "sei qui".
 */

/*
 * Nessun @import qui dentro, ed e' una correzione.
 *
 * `tokens.css` e `comuni.css` arrivavano con `@import url('comuni.css')`, cioe'
 * con un indirizzo SENZA la versione che `asset()` attacca a ogni altro file. Il
 * browser se li teneva in cache: modificando `comuni.css` la pagina continuava a
 * usare la copia vecchia, e la modifica sembrava non fare niente. E' successo
 * davvero — trecento righe di stile nuove che non comparivano — e ai clienti
 * sarebbe successo peggio: avrebbero visto l'interfaccia di due versioni prima
 * finche' non svuotavano la cache, senza sapere perche'.
 *
 * Ora i due fogli li carica il telaio con un <link> versionato, prima di questo.
 * `StiliTest` impedisce che un @import torni.
 */

body.pubblica { min-height: 100vh; }

/* ── Impaginazione a due pannelli ──────────────────────────────────────────
   Il modulo sta a destra e non al centro dello schermo: chi accede arriva da
   tastiera, e un blocco appoggiato a un bordo si ritrova senza cercarlo.
   Sotto i 60rem i due pannelli diventano uno sopra l'altro e quello di
   sinistra si riduce a una fascia: su un telefono il modulo deve stare sopra
   la piega, non sotto una copertina. */
.accesso {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

.accesso-pannello {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s7) clamp(var(--s5), 6vw, var(--s8));
  background: var(--rail);
  border-right: 1px solid var(--bordo);
  overflow: hidden;
}

/* Il reticolo. Sfuma verso il basso a destra con una maschera, così non finisce
   tagliato contro il bordo del pannello come una texture appiccicata. */
.accesso-pannello::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  var(--reticolo) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to bottom, var(--reticolo) 0 1px, transparent 1px 22px);
  /* `#000` qui non è un colore ma un'opacità: in una maschera il nero vuol
     dire "si vede" e il trasparente "non si vede". Non va in tokens.css
     perché non c'è nessuna palette in cui debba cambiare. */
  -webkit-mask-image: radial-gradient(120% 95% at 12% 8%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 95% at 12% 8%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* La barretta: 3px, lo stesso spessore del marcatore di menu. */
.accesso-pannello::after {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(var(--s5), 6vw, var(--s8));
  width: 3.5rem;
  height: var(--spessore-marcatore);
  background: var(--accento);
}

.accesso-pannello > * { position: relative; }

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--testo);
}
.marchio svg { flex: none; color: var(--accento-testo); }
.marchio-nome {
  font-size: var(--t-l);
  font-weight: 600;
  letter-spacing: var(--sp-titolo);
}

.accesso-testo .accesso-frase {
  font-size: clamp(var(--t-2xl), 4.2vw, var(--t-3xl));
  font-weight: 600;
  line-height: var(--lh-stretta);
  letter-spacing: -.02em;
  color: var(--testo);
  margin-bottom: var(--s4);
  max-width: 22ch;
}
.accesso-testo p:last-child {
  color: var(--testo-tenue);
  max-width: 34ch;
  margin-bottom: 0;
}

/* Riga di stato in coda al pannello: in carattere a larghezza fissa perché dice
   dove si è e con che versione, cioè roba che una macchina sa. */
.accesso-stato {
  font-family: var(--carattere-dati);
  font-size: var(--t-xs);
  color: var(--testo-debole);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}

/* ── Il modulo ─────────────────────────────────────────────────────────────*/
.accesso-modulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s7) clamp(var(--s4), 5vw, var(--s7));
  background: var(--sfondo);
}
.accesso-modulo-interno {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}
.accesso-modulo-interno > h1 {
  font-size: var(--t-xl);
  margin-bottom: var(--s2);
}
.accesso-modulo-interno > h1 + p { color: var(--testo-tenue); margin-bottom: var(--s5); }
.accesso-modulo form { margin-bottom: var(--s4); }
.accesso-modulo .pulsante { margin-top: var(--s5); }

.accesso-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
  font-size: var(--t-s);
}
.accesso-piede .minuto { color: var(--testo-debole); }

/* Il collegamento di servizio sotto il pulsante: non compete con l'azione
   principale, ma si trova. */
.accesso-alternativa { font-size: var(--t-s); }

/* ── Pagine di messaggio: errori, e le schermate senza modulo ──────────────
   Un errore dice cos'è successo e da dove si riparte. Il codice è grande e in
   larghezza fissa perché è l'unica cosa utile da riferire a chi assiste. */
.messaggio-pagina {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s6) var(--s4);
  background: var(--sfondo);
}
.messaggio-riquadro {
  width: 100%;
  max-width: 34rem;
  padding: var(--s6);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  border-top: var(--spessore-marcatore) solid var(--accento);
}
/* 400 e non 600: di IBM Plex Mono serviamo un peso solo, e chiedere un peso che
   non c'è non dà un grassetto — dà un grassetto SINTETICO, cioè i glifi del 400
   ingrassati dal browser, che a 26px si vede. Vedi assets/css/caratteri.css. */
.messaggio-codice {
  font-family: var(--carattere-dati);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--testo-debole);
  letter-spacing: .04em;
  display: block;
  margin-bottom: var(--s2);
}
.messaggio-riquadro h1 { font-size: var(--t-xl); }
.messaggio-riquadro p { color: var(--testo-tenue); }
.messaggio-azioni {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
  align-items: center;
  justify-content: space-between;
}

/* ── Pagine larghe fuori dal pannello ──────────────────────────────────────
   L'attivazione del secondo fattore ha un QR, un modulo e un elenco di codici:
   non ci sta in una colonna da 24rem, ma non deve nemmeno indossare il menu del
   pannello (chi è lì è stato mandato lì, e ogni altra voce lo rimanderebbe
   indietro). Quindi: una colonna sola, più larga, centrata. */
.foglio {
  width: 100%;
  max-width: 48rem;
  margin: var(--s6) auto;
  padding-inline: var(--s4);
}
.foglio-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.foglio-testa h1 { margin: 0; }

/* Un bianco scritto in cifre, e non è una svista:
   il QR va su fondo bianco anche in palette scura. Un codice invertito
   qualche lettore lo legge e qualcuno no, e il momento in cui qualcuno sta
   attivando il secondo fattore non è quello di scoprire quale dei due ha in
   mano. Per la stessa ragione non è un token: non deve poter cambiare
   rivestendo l'installazione per un cliente.

   (Questa non è l'unica deroga del progetto, come diceva prima questo commento:
   l'altra è App\Core\ColoriEmail, perché un client di posta non legge i token.
   Due deroghe, entrambe dichiarate dove si trovano. Il test TokensTest sorveglia
   il contrasto delle coppie, non la presenza di letterali: chi ne aggiunge una
   terza non incontra nessuna rete.) */
.qr-cornice {
  display: inline-block;
  padding: var(--s3);
  background: #fff;
  border-radius: var(--raggio-s);
  line-height: 0;
}

/* I codici di recupero si trascrivono o si copiano: in colonna, a larghezza
   fissa, spaziati. */
.codici {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s2);
}
.codici li {
  padding: var(--s2) var(--s3);
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  font-family: var(--carattere-dati);
  font-size: var(--t-m);
  letter-spacing: .06em;
  text-align: center;
}

@media (max-width: 60rem) {
  .accesso { grid-template-columns: 1fr; min-height: 0; }
  .accesso-pannello {
    border-right: 0;
    border-bottom: 1px solid var(--bordo);
    padding-block: var(--s5);
    gap: var(--s4);
  }
  .accesso-pannello::before {
    -webkit-mask-image: radial-gradient(150% 200% at 8% 0%, #000 0%, transparent 78%);
            mask-image: radial-gradient(150% 200% at 8% 0%, #000 0%, transparent 78%);
  }
  .accesso-testo .accesso-frase { font-size: var(--t-xl); margin-bottom: var(--s2); }
  .accesso-stato { display: none; }   /* su un telefono è spazio rubato al modulo */
  .accesso-modulo { padding-block: var(--s6); }
}

/* ── Lavora con noi (Curriculum) ──────────────────────────────────────── */
.lcn-elenco { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.lcn-elenco li + li { border-top: 1px solid var(--bordo); }
.lcn-elenco a { display: flex; flex-direction: column; gap: .15rem; padding: var(--s3) 0; text-decoration: none; }
.lcn-descrizione { margin-bottom: var(--s5); }
.lcn-descrizione > :first-child { margin-top: 0; }
.lcn-titolo { margin: var(--s5) 0 var(--s3); font-size: 1.15rem; }
.lcn-consenso label { display: flex; align-items: flex-start; gap: var(--s2); }
.lcn-consenso input[type=checkbox] { margin-top: .2rem; }