/* LA SCHERMATA DI ACCESSO */
/* ------------------------------------------------ */
/* Due colonne su schermo largo: la promessa a sinistra e il modulo a
   destra. Prima era una scheda sola al centro di una pagina crema, e
   su un portatile occupava 420 pixel su 1440 — i lati non facevano
   niente, su quella che e' la pagina in cui il cliente decide se
   fidarsi.

   QUI C'ERANO TRE STRATI DI SFONDO, e non ci sono piu'. Due bagliori
   dorati agli angoli, cosi' tenui da non contare, e il fiore della
   vita al centro: largo mille pixel, al cinquanta per cento di
   opacita', in moltiplicazione. Non si leggeva ne' come motivo ne'
   come immagine — e lo stesso segno e' inciso dentro il logo, nitido,
   a due centimetri di distanza. Un motivo che si vede a meta' e'
   peggio di nessun motivo, e il fiore resta dove si vede per intero:
   nel marchio, e sul lingotto nella fotografia della home.

   Il contrasto che ne prende il posto e' quello su cui e' costruita
   tutta l'applicazione dietro questa porta: crema contro bruno. Era
   l'unica schermata che non somigliasse al prodotto. */

.accesso {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--fondo-chiaro);
}

/* Cinque contro sei: la colonna della promessa e' un po' piu' stretta
   di quella del modulo. Divise a meta' si guarderebbero da pari, e
   non lo sono — una si legge una volta sola, l'altra e' il motivo per
   cui si e' arrivati qui. */
@media (min-width: 900px) {
  .accesso {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}


/* LA PROMESSA */
/* ------------------------------------------------ */
/* Stesso bruno, stessa trama metallica e stesso filo chiaro del
   pannello del patrimonio, che e' la prima cosa che si vede dopo aver
   premuto Accedi: la porta e la stanza sono fatte dello stesso
   materiale. */

/* Tutto centrato sull'asse della colonna — marchio, frase e garanzie.
   Allineati a sinistra prendevano l'asse del bordo, che qui non e' un
   bordo ma la cucitura fra il bruno e il crema: il marchio finiva in
   un angolo e le tre garanzie pendevano da lui. Al centro la colonna
   si legge come una lastra sola, ed e' anche il modo in cui la stessa
   fascia e' sempre stata impaginata sul telefono. */
.accesso__promessa {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--sp-10);
  padding: clamp(28px, 5vw, 56px);
  background: var(--grad-trama-metallo), var(--fondo-scuro);
  box-shadow: var(--filo-interno-chiaro);
  text-align: center;
}

/* UNA TARGA SOLA, CENTRATA.

   Fino al 4 settembre 2026 i tre pezzi avevano tre logiche verticali
   diverse: il marchio inchiodato a cinquantasei pixel dal bordo alto,
   il blocco centrato con margini automatici, e sopra di esso una
   traslazione di centosei pixel misurata a mano per portare il claim
   all'altezza dell'etichetta «Email» della colonna accanto.

   Funzionava, e si vedeva che non era un gruppo. Misurato a 1440x900:
   cinquantasei pixel di vuoto sopra il marchio e TRECENTOTTANTADUE
   sotto l'ultima garanzia — a 1920x1080, quattrocentosettantadue. E la
   distanza fra il marchio e il claim non era una misura ma un
   risultato: novantadue pixel su una finestra alta 800, duecentoventotto
   su una alta 1080. Piu' cresceva lo schermo, piu' il gruppo si
   sfilacciava e piu' la meta' bassa della colonna restava bruno vuoto.

   Adesso i tre pezzi sono un oggetto solo — marchio, promessa, prova —
   centrato in verticale con le distanze interne fisse. Il vuoto si
   divide in parti uguali sopra e sotto invece di ammucchiarsi in fondo.

   CON QUESTO SPARISCE LA COSTANTE DEI CENTOSEI PIXEL, e non e' una
   perdita: era una misura presa a mano che si rompeva in silenzio a
   ogni ritocco del titolo, del sommario o del numero di righe del
   claim — era gia' stata rimisurata una volta lo stesso giorno.
   Serviva a cucire due colonne allineate a sinistra; da quando la
   colonna e' centrata, la cucitura la fa l'asse.

   TRE FASCE UGUALI, UNA PER PEZZO. Raccolti in un blocco solo al
   centro, i tre pezzi lasciavano duecentotrenta pixel vuoti sopra e
   duecentotrenta sotto: ordinato, e la colonna restava mezza vuota.
   Adesso la colonna e' divisa in tre fasce alte uguali e ognuna ne
   tiene uno — il marchio in alto, la promessa al centro, le tre
   garanzie in basso — ciascuno centrato nella propria. La colonna e'
   piena da cima a fondo, e i tre pezzi cadono dove l'occhio li cerca.

   IL PREZZO E' CHE LA PROMESSA E LE SUE GARANZIE NON SI TOCCANO PIU'.
   Erano un blocco unico apposta: la frase dice che cosa promettiamo,
   le tre righe sotto dicono chi lo garantisce, e a venti pixel di
   distanza si leggevano come una cosa sola — separate, questo file
   sosteneva che si leggessero come due cose senza rapporto. Fra le due
   fasce ci sono ora circa centocinquanta pixel, e a tenerle insieme
   non e' piu' la vicinanza ma la posizione: sono l'unica altra cosa
   scritta della colonna, sullo stesso asse, dentro la stessa lastra.
   Deciso il 4 settembre 2026 dal proprietario, che la voleva cosi'.

   `repeat(3, 1fr)` regge qui e non avrebbe retto un momento fa, ed e'
   la differenza che conta. Con la promessa e le garanzie insieme, la
   fascia centrale doveva contenere un blocco alto duecentosessantasette
   pixel: sotto i settecento di finestra straboradava e finiva sopra il
   marchio — le due cose si toccano quando la fascia scende sotto
   centonovantotto, cioe' su un portatile qualunque. Divisi, il pezzo
   piu' alto e' il marchio con i suoi centoventotto, e una fascia
   scende sotto quella misura solo su una finestra piu' bassa di
   cinquecento pixel, che non esiste. La regola generale: fasce di
   altezza fissa vogliono contenuti piu' bassi della fascia, e va
   verificato sulla finestra piu' bassa, non su quella che si ha. */

/* Il contenitore della promessa esiste ancora, ma su schermo largo non
   impagina piu' niente: display: contents lo scioglie e i suoi due
   figli — la frase e l'elenco — diventano celle della griglia della
   colonna, cioe' la seconda e la terza fascia. Senza di questo
   sarebbero un pezzo solo in una fascia sola, che e' come stavano
   prima.

   L'elemento resta nell'HTML e resta il contenitore del blocco sul
   telefono, dove le due cose vanno ancora insieme sotto la scheda: li'
   la colonna e' larga trecentocinquanta pixel e la frase e' alta
   diciassette, e separarle non riempirebbe niente. Un solo margine di
   quaranta pixel fra le due, dichiarato qui, e usato solo da lui. */
.accesso__blocco {
  display: grid;
  gap: var(--sp-10);
}

@media (min-width: 900px) {
  .accesso__blocco {
    display: contents;
  }
}

/* Il limite di quindici caratteri regge le due righe; i margini
   automatici sono cio' che lo centra, perche' un blocco piu' stretto
   del suo contenitore non si sposta con il solo text-align. */
.accesso__frase {
  margin-inline: auto;
  color: var(--testo-su-scuro);
  font-family: var(--font-display);
  font-size: clamp(21px, 3.6vw, 46px);
  line-height: var(--interlinea-stretta);
  max-width: 15ch;
}

/* Le tre righe non sono una didascalia: sono l'argomento per cui
   qualcuno dovrebbe fidarsi abbastanza da scrivere una password, e
   sono le uniche cose verificabili di tutta la schermata. Diciassette
   pixel — erano tredici — e il simbolo in oro chiaro, cresciuto con
   loro perche' un segno piu' piccolo del testo che accompagna smette
   di essere un segno e diventa un puntino. */
.accesso__garanzie {
  --simbolo: 23px;
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}

.accesso__garanzia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--testo-su-scuro-attenuato);
  font-size: var(--testo-l);
}

/* L'ELENCO E' CENTRATO COME BLOCCO, LE RIGHE NO.

   Centrata una per una, ogni riga si dispone attorno al proprio centro
   e i tre simboli cadono a tre ascisse diverse: misurati a 1440,
   202, 240 e 231 pixel: uno zigzag di trentotto. Tre righe con il
   segno in colonna sono un elenco; tre righe con il segno che balla
   sono tre frammenti capitati sulla stessa verticale, ed e' cio' che
   si vedeva.

   width: max-content stringe la lista sulla riga piu' lunga, i margini
   automatici la centrano nella colonna, e dentro di essa le righe
   partono tutte dallo stesso bordo. Il blocco resta centrato, il
   contenuto no — che e' il modo in cui un elenco si centra.

   Solo da 900 pixel in su: sul telefono le tre righe restano centrate
   una per una, e li' va bene cosi'. Sono corte, sono piccole e stanno
   sotto una scheda gia' centrata; incolonnarle la' spingerebbe il
   blocco fuori asse. */
@media (min-width: 900px) {
  .accesso__garanzie {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .accesso__garanzia {
    justify-content: flex-start;
    text-align: left;
  }
}

.accesso__garanzia-segno {
  flex: none;
  color: var(--accento-tenue);
}


/* LA SCHEDA */
/* ------------------------------------------------ */

/* La colonna del modulo si centra dentro la sua meta' di pagina. Il
   riempimento e' quello della promessa, cosi' i due blocchi cominciano
   alla stessa altezza dal bordo. */
.accesso__riquadro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 420px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 24px);
  animation: entrata-breve var(--durata-lenta) var(--curva-standard) both;
}

/* La scheda non ha piu' un fondo suo. Poggiava su crema, quindi
   serviva un riquadro chiaro per staccare; adesso la meta' di pagina
   e' gia' crema e un secondo crema sopra il primo e' un contorno che
   non contiene niente. Il modulo poggia direttamente sulla pagina, e
   a staccarlo dalla promessa basta il bruno accanto. */
.accesso__scheda {
  padding: 0;
}

.accesso__marchio {
  display: flex;
  justify-content: center;
}

/* Il collegamento non deve aggiungere niente di visibile: l'area
   cliccabile e' il marchio e basta. inline-flex perche' un <a> in
   linea lascerebbe sotto l'immagine lo spazio della riga di testo. */
.accesso__marchio-via {
  display: inline-flex;
  border-radius: var(--raggio-s);
}

/* Cresce con la colonna e si ferma a centoquattro. La misura e' stata
   cercata tre volte nella stessa giornata del 4 settembre 2026 —
   settantadue, poi centoquattro, poi centoventotto, poi di nuovo
   centoquattro — e le due volte in mezzo sono servite a scoprire una
   cosa: da quando il marchio ha una fascia sua, la prima delle tre,
   non ha piu' bisogno di essere grande per contare. Isolato pesa gia'
   quanto deve, e a centoventotto cominciava a essere l'unica cosa
   della colonna.

   Il marchio e' 480x127, quindi centoquattro di altezza fanno
   trecentonovantatre di larghezza. Il cappello morde solo dai 1600
   pixel in su; sotto comanda 6,5vw, che su un 1440 tiene il marchio a
   trecentocinquantaquattro di larghezza, poco meno di due terzi della
   colonna. */
.accesso__logo {
  display: block;
  height: clamp(52px, 6.5vw, 104px);
  max-width: 100%;
  width: auto;
  transition: opacity var(--durata-media) var(--curva-standard);
}

.accesso__marchio-via:hover .accesso__logo {
  opacity: .82;
}

.accesso__titolo {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-stretta);
}

.accesso__sommario {
  margin: var(--sp-2) 0 var(--sp-6);
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-m);
  font-weight: var(--peso-leggero);
  line-height: var(--interlinea-ampia);
}


/* I CAMPI */
/* ------------------------------------------------ */
/* Non c'e' nessun <form> e non c'e' nessun action: i campi esistono
   per far vedere come sara'. Niente viene inviato da nessuna parte, e
   il banner sotto lo dichiara. */

.accesso__campo {
  display: grid;
  gap: var(--sp-2);
}

.accesso__campo + .accesso__campo {
  margin-top: var(--sp-5);
}

.accesso__etichetta {
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
}

/* Sedici pixel sono un minimo, non un gusto: sotto quella misura il
   telefono ingrandisce la pagina da solo quando il campo prende il
   fuoco, e l'impaginazione salta. */
.accesso__casella {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-s);
  background: var(--superficie-incassata);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-l);
}

.accesso__casella:focus-visible {
  border-color: var(--accento);
}

.accesso__riga {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.accesso__riga .accesso__casella {
  flex: 1 1 auto;
  min-width: 0;
}

.accesso__occhio {
  --simbolo: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--bordo-su-chiaro);
  border-radius: var(--raggio-s);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro-tenue);
  cursor: pointer;
  transition: background var(--durata-rapida) var(--curva-standard);
}

.accesso__occhio:hover {
  background: var(--superficie-incassata);
}

/* I due simboli stanno tutti e due nel bottone e si scambiano
   leggendo aria-pressed: cosi' lo script cambia un attributo e non
   deve toccare un tracciato SVG. */
.accesso__occhio[aria-pressed="false"] .accesso__occhio-icona--nascondi,
.accesso__occhio[aria-pressed="true"] .accesso__occhio-icona--mostra {
  display: none;
}


/* L'AVVISO E LE CHIUSURE */
/* ------------------------------------------------ */

.accesso__avviso {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgb(var(--rgb-allerta) / .3);
  border-radius: var(--raggio-s);
  background: rgb(var(--rgb-allerta) / .08);
  color: var(--allerta);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.accesso__avviso strong {
  font-weight: var(--peso-forte);
}

.accesso__entra {
  width: 100%;
  margin-top: var(--sp-5);
}

.accesso__collegamenti {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--testo-s);
}

.accesso__collegamento-quieto {
  color: var(--testo-su-chiaro-tenue);
}

.accesso__nota {
  margin-top: var(--sp-5);
  color: var(--allerta);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
  text-align: center;
}


/* SUL TELEFONO */
/* ------------------------------------------------ */
/* Non due fasce, una stanza sola.

   Fino al 4 settembre 2026 le due colonne diventavano due righe: sopra
   una striscia bruna con dentro tutto, sotto il crema con il modulo.
   Uno schermo tagliato a meta' orizzontale, in cui nessuna delle due
   meta' era la protagonista e la cucitura fra i due colori cadeva
   proprio a fianco del titolo «Area Clienti».

   Adesso il bruno e' lo sfondo, la scheda chiara e' l'unico oggetto
   sopra di esso ed e' al centro dello schermo; il marchio sta sopra la
   scheda, grande, sul bruno; le garanzie stanno sotto, piccole, sullo
   stesso bruno. Cioe' la stessa figura di una schermata di accesso di
   una applicazione: un fondo, una scheda, il marchio in cima.

   display: contents scioglie .accesso__promessa nei suoi due figli,
   che diventano celle della griglia di .accesso: cosi' il marchio puo'
   salire sopra la scheda e il blocco scendere sotto senza toccare
   l'ordine dell'HTML — che su schermo largo e' quello giusto. Le
   variabili di .contesto-scuro continuano a ereditare, perche'
   display: contents non genera una scatola ma non interrompe
   l'ereditarieta'. */
@media (max-width: 899px) {
  /* min-height e non height: se il contenuto supera lo schermo il
     contenitore cresce, e align-content non ha piu' spazio libero da
     distribuire. Centrare con l'altezza fissa taglierebbe il marchio
     in cima su un telefono corto, senza modo di risalire. */
  .accesso {
    align-content: center;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-5);
    background: var(--grad-trama-metallo), var(--fondo-scuro);
  }

  .accesso__promessa {
    display: contents;
  }

  .accesso__marchio { order: 1; }
  .accesso__riquadro { order: 2; }
  .accesso__blocco { order: 3; }

  /* Grande davvero: sessantasei pixel di altezza su un telefono da
     390 fanno duecentocinquanta di larghezza, i due terzi della
     schermata. E' il marchio dell'azienda a cui si sta per dare una
     password, ed e' l'unica cosa che dice dove si e' finiti. */
  .accesso__logo {
    height: clamp(58px, 17vw, 78px);
  }

  /* La scheda e' un oggetto, non piu' un pezzo di pagina: prende il
     fondo chiaro, un raggio e un'ombra. Il fondo va sul riquadro e non
     sulla scheda perche' la nota rossa in coda — «Ambiente
     dimostrativo» — sta fuori dalla scheda, e sul bruno non si
     leggerebbe. */
  .accesso__riquadro {
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--raggio-l);
    background: var(--superficie-chiara);
    box-shadow: var(--ombra-card-scura);
  }

  /* Sotto la scheda le stesse parole diventano una firma: il respiro
     dei quaranta pixel serve su schermo largo, dove la frase e' alta
     trentotto: qui e' alta diciassette e quaranta la staccherebbe
     dalle sue stesse garanzie. */
  .accesso__blocco {
    gap: var(--sp-4);
  }

  .accesso__frase {
    font-size: var(--testo-l);
    max-width: 26ch;
  }

  .accesso__garanzie {
    --simbolo: 16px;
    gap: var(--sp-2);
  }

  .accesso__garanzia {
    font-size: var(--testo-xs);
  }
}