/* login-scelta.css — la scelta del modo di entrare.
   ════════════════════════════════════════════════════════════════════════════
   IDEA GUIDA: l'arancione come luce, non come vernice.

   La versione precedente riempiva la riga consigliata di arancione pieno. Su
   una scheda che e' gia' vetro scuro con bordo caldo e luce interna, una
   campitura piena rompe il linguaggio della pagina e schiaccia tutto il resto.
   Qui l'accento compare solo come luce emessa: un filo caldo lungo il bordo,
   un alone tenue dietro l'icona, il glifo e l'occhiello. La somma di arancione
   sullo schermo e' una frazione di prima, ma la riga consigliata si riconosce
   al primo sguardo.

   GERARCHIA, dichiarata in tre pesi diversi e non in tre colori diversi:
     1. passkey    filo caldo + alone + icona in un riquadro illuminato
     2. link email vetro neutro con filo bianco tenue
     3. password   nessuna cornice, sotto un separatore
   Regge anche per chi non distingue bene l'arancione, perche' la differenza
   e' di struttura prima che di tinta.

   LA STRUTTURA DICE UNA COSA VERA: sopra il separatore stanno i due modi che
   non chiedono una password, sotto quello che la chiede. Il raggruppamento e'
   informazione, non decorazione.

   L'UNICO MOVIMENTO e' una luce che segue il puntatore sulla riga consigliata.
   Non parte da sola e non si ripete: risponde e basta. Senza puntatore (tocco,
   tastiera, movimento ridotto) resta l'alone fermo dietro l'icona, che e' lo
   stato di partenza.
   ════════════════════════════════════════════════════════════════════════════ */

.auth-card.lg-card { text-align: left; }
.auth-card .auth-title { text-align: center; }

.auth-card .lg-sub {
  margin: 5px 0 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-faint, #8a8a90);
}

/* ── le tre strade ───────────────────────────────────────────────────────── */
.auth-card .lg-methods { display: grid; gap: 9px; }

.auth-card .lg-m {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 16px;
  border-radius: 17px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;                 /* tiene dentro l'alone */
  transition: transform var(--ds-dur-normal) cubic-bezier(.2,.7,.3,1),
              background var(--ds-dur-normal) var(--ds-ease), border-color var(--ds-dur-normal) var(--ds-ease);
}
.auth-card .lg-m:focus-visible {
  outline: 2px solid var(--ds-accent-text, #ff9d5c);
  outline-offset: 3px;
}
.auth-card .lg-m:disabled { opacity: .5; cursor: default; transform: none; }

/* i figli stanno sopra all'alone */
.auth-card .lg-m-ico,
.auth-card .lg-m-txt,
.auth-card .lg-m-chev { position: relative; z-index: 1; }

.auth-card .lg-m-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  color: var(--ds-faint, #8a8a90);
}
.auth-card .lg-m-txt { flex: 1; min-width: 0; }
.auth-card .lg-m-t {
  display: block;
  font-size: 15.5px;
  font-weight: 640;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ds-text, #f5f5f7);
}
.auth-card .lg-m-d {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ds-faint, #8a8a90);
}
.auth-card .lg-m-chev {
  display: flex;
  flex: none;
  color: #6a6a70;
  transition: transform var(--ds-dur-normal) var(--ds-ease);
}

/* ── 1. passkey: l'unica riga che emette luce ────────────────────────────── */
/* Il bordo e' caldo e UNIFORME su tutto il giro. La prima versione lo faceva
   sfumare da arancione a niente a meta' perimetro: sembrava incompleto, e
   l'utente non vuole colori a meta' (stessa regola del wordmark: o tutto
   bianco o tutto arancione, mai due toni sullo stesso elemento). */
.auth-card .lg-m--pri {
  align-items: flex-start;
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 150, 80, .42);
}

/* l'alone. Di partenza sta dietro all'icona; con il puntatore lo segue,
   perche' login-scelta.js aggiorna --mx e --my. */
.auth-card .lg-m--pri::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(150px circle at var(--mx, 35px) var(--my, 50%),
    rgba(255, 107, 0, .20), transparent 72%);
  transition: opacity var(--ds-dur-slow) var(--ds-ease);
}

.auth-card .lg-m--pri .lg-m-ico {
  margin-top: 20px;                 /* allinea l'icona al titolo, non all'occhiello */
  border-radius: 11px;
  color: var(--ds-accent-text, #ff9d5c);
  background: rgba(255, 120, 30, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 80, .24);
}
.auth-card .lg-m--pri:hover { transform: translateY(-1px); }

/* Quando il browser non sa fare le passkey, la riga del link per email viene
   promossa a prima scelta: non ha l'occhiello sopra il titolo, quindi lo
   scostamento che allinea l'icona al titolo qui non serve. */
.auth-card .lg-m--pri.lg-m--senza-occhiello { align-items: center; }
.auth-card .lg-m--pri.lg-m--senza-occhiello .lg-m-ico { margin-top: 0; }

.auth-card .lg-m-badge {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-accent-text, #ff9d5c);
}

/* ── 2. link per email ───────────────────────────────────────────────────── */
.auth-card .lg-m--sec {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
}
.auth-card .lg-m--sec:hover {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .055);
  transform: translateY(-1px);
}
.auth-card .lg-m--sec:hover .lg-m-ico { color: var(--ds-dim, #a1a1a8); }
.auth-card .lg-m--sec[aria-expanded="true"] .lg-m-chev { transform: rotate(180deg); }

/* ── 3. password: nessuna cornice, sotto il separatore ───────────────────── */
.auth-card .lg-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a6a70;
}
.auth-card .lg-sep::before,
.auth-card .lg-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .09);
}

.auth-card .lg-m--ghost { padding: 12px 16px; }
.auth-card .lg-m--ghost .lg-m-ico { width: 34px; height: 34px; }
.auth-card .lg-m--ghost .lg-m-t { font-size: 14px; font-weight: 560; color: var(--ds-dim, #a1a1a8); }
.auth-card .lg-m--ghost:hover { background: rgba(255, 255, 255, .045); }
.auth-card .lg-m--ghost:hover .lg-m-t { color: var(--ds-text, #f5f5f7); }
.auth-card .lg-m--ghost:hover .lg-m-chev { transform: translateX(2px); }

/* ── il campo email, che compare sotto il link ───────────────────────────── */
/* Lo stato base e' gia' visibile e l'animazione e' solo un di piu': se non
   parte (scheda in secondo piano, frame sospesi, movimento ridotto) il campo
   si vede comunque. Partire da opacita' zero lo lascerebbe invisibile. */
.auth-card .lg-panel { padding: 6px 2px 2px; }
.auth-card .lg-panel[hidden] { display: none; }
@keyframes lg-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.auth-card .lg-panel.is-open { animation: lg-panel-in var(--ds-dur-normal) cubic-bezier(.2,.7,.3,1); }

/* ── moduli: il campo email del pannello e la pagina classica ────────────── */
.auth-card .lg-form { display: block; }

.auth-card .lg-form label,
.auth-card .lg-panel label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-dim, #a1a1a8);
}
.auth-card .lg-form input[type="email"],
.auth-card .lg-form input[type="password"],
.auth-card .lg-panel input[type="email"] {
  width: 100%;
  height: var(--ds-control-h, 44px);
  margin: 0 0 12px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--ds-surface, #121215);
  border: 1px solid var(--ds-line, rgba(255, 255, 255, .12));
  border-radius: 12px;
  color: var(--ds-text, #f5f5f7);
  font: inherit;
  font-size: 15px;
}
.auth-card .lg-form input:focus,
.auth-card .lg-panel input:focus {
  outline: none;
  border-color: var(--ds-accent, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .16);
}

/* Il bottone di conferma e' l'unico pieno della pagina, e compare solo dentro
   un'azione gia' iniziata: non compete con la scelta iniziale. */
.auth-card .lg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--ds-dur-fast) cubic-bezier(.2,.7,.3,1), filter var(--ds-dur-fast) var(--ds-ease);
}
.auth-card .lg-btn--pri {
  background: var(--ds-accent, #ff6b00);
  border-color: var(--ds-accent, #ff6b00);
  color: var(--ds-on-accent, #1a1206);
}
.auth-card .lg-btn--pri:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-card .lg-btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.auth-card .lg-btn:focus-visible { outline: 2px solid var(--ds-accent-text, #ff9d5c); outline-offset: 3px; }

/* ── la conferma dell'invio: prende il posto del modulo ──────────────────────
   Prima era una riga verde sotto il bottone. Una riga sotto e' una nota, e si
   legge come un dettaglio: dopo aver premuto "Mandami il link" la persona deve
   vedere che il riquadro e' CAMBIATO. Qui il pannello ha due stati, e ne mostra
   uno per volta.

   L'indirizzo mascherato sta al centro perche' e' l'unica informazione che puo'
   far risparmiare quindici minuti di attesa inutile: chi ha scritto gmial al
   posto di gmail se ne accorge subito.

   I bottoni azzerano i predefiniti del browser (appearance, border, font). Su
   un <button> senza quell'azzeramento la pillola diventa una barra chiara col
   bordo di sistema, ed e' successo tre volte. */
.auth-card .lg-step[hidden] { display: none; }

.auth-card .lg-fatto {
  padding: 4px 2px 2px;
  text-align: center;
}

/* Stessa taglia e stesso trattamento dell'icona della passkey qui sopra:
   riquadro 38, glifo 20, alone caldo. E' la stessa famiglia di segni. */
.auth-card .lg-fatto-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--ds-accent-text, #ff9d5c);
  background: rgba(255, 120, 30, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 80, .24);
}

.auth-card .lg-fatto-t {
  margin: 11px 0 0;
  font-size: 17px;
  font-weight: var(--ds-w-bold, 600);
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ds-text, #f5f5f7);
}
/* Il fuoco ci arriva da codice per farlo leggere ai lettori di schermo: il
   contorno si mostra solo a chi naviga da tastiera. */
.auth-card .lg-fatto-t:focus { outline: none; }
.auth-card .lg-fatto-t:focus-visible {
  outline: 2px solid var(--ds-accent-text, #ff9d5c);
  outline-offset: 4px;
  border-radius: 6px;
}

.auth-card .lg-fatto-mail {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: var(--ds-w-bold, 600);
  line-height: 1.4;
  word-break: break-all;
  color: var(--ds-accent-text, #ff9d5c);
}
.auth-card .lg-fatto-d {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ds-faint, #8a8a90);
}

.auth-card .lg-fatto-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 15px;
}
.auth-card .lg-fatto-dom {
  font-size: 12.5px;
  color: var(--ds-faint, #8a8a90);
}

.auth-card .lg-fatto-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--ds-w-bold, 600);
  letter-spacing: -.01em;
  color: var(--ds-text, #f5f5f7);
  cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
/* Il bordo si vede, quindi la pastiglia resta alta 34: cresce solo l'area
   sensibile, e solo in altezza. In larghezza il bottone e' gia' oltre i 44, e
   allargarlo mangerebbe i 9px che lo separano dal testo accanto. */
.auth-card .lg-fatto-btn { position: relative; }
.auth-card .lg-fatto-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: max(100%, var(--ds-control-h, 44px));
  transform: translateY(-50%);
}
.auth-card .lg-fatto-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .055);
}
.auth-card .lg-fatto-btn:disabled { opacity: .55; cursor: default; }
.auth-card .lg-fatto-btn:focus-visible {
  outline: 2px solid var(--ds-accent-text, #ff9d5c);
  outline-offset: 3px;
}

/* La via per correggere l'indirizzo. Stessa grammatica della maniglia
   "Non ricevi l'email": sottolineata, in secondo piano, sempre raggiungibile. */
.auth-card .lg-fatto-corr {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 20px e non 12. Sopra c'e' "Rinvia", che e' un comando anche lui: con 12px
     le due aree sensibili da 44 si sovrapponevano di 6px e il tocco al confine
     finiva sul comando sbagliato. Fra i due centri adesso ci sono 45,7px, cioe'
     piu' dei 44 che serve a ciascuno, e nessuno ruba niente all'altro.
     Misurato nel browser: 38px prima, 44 e 44 dopo. */
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-dim, #a1a1a8);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Sottolineato e in secondo piano per scelta, quindi il disegno non cambia:
   cresce solo l'area sensibile. Sopra e sotto ci sono margini e testo, nessun
   altro comando da cui rubare il tocco. */
.auth-card .lg-fatto-corr { position: relative; }
.auth-card .lg-fatto-corr::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--ds-control-h, 44px));
  height: max(100%, var(--ds-control-h, 44px));
  transform: translate(-50%, -50%);
}
.auth-card .lg-fatto-corr:hover { color: var(--ds-text, #f5f5f7); }
.auth-card .lg-fatto-corr:focus-visible {
  outline: var(--ds-focus, 2px solid #f5f5f7);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-card .lg-fatto .lg-msg { margin-top: 10px; }

/* ── la conferma sola nel riquadro ────────────────────────────────────────
   Partito il link, la scheda smette di essere un elenco di modi per entrare:
   chi ha appena scelto non va rimesso davanti alla stessa scelta trenta
   secondi dopo. Si nascondono i vicini elencandoli, invece di nascondere
   tutto e riesumare i superstiti: cosi' una riga aggiunta domani resta
   visibile per sbaglio, che e' molto meno grave di sparire per sbaglio.
   Sopravvive .lg-aiuto, che e' la maniglia di chi l'email non la ricevera'
   mai, ed e' l'unica via d'uscita da quella schermata.
   Serve una regola esplicita e non l'attributo hidden: qui sopra .lg-m e
   compagni impongono un display, e vincerebbero loro. */
.auth-card.lg-solo > .auth-title,
.auth-card.lg-solo > .lg-sub,
.auth-card.lg-solo > .lg-foot { display: none; }
.auth-card.lg-solo .lg-methods > *:not(#magic-panel):not(.lg-aiuto) { display: none; }

/* ── il ritorno alla scelta, sulla pagina della password ─────────────────── */
.auth-card .lg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ds-faint, #8a8a90);
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
/* Il ritorno alla scelta e' un <a>, quindi la regola canonica di tokens.css,
   che nomina i bottoni, non lo vede. Qui prende la risposta alla pressione e
   l'area sensibile piena, senza muoversi di un pixel. */
.auth-card .lg-back { position: relative; }
.auth-card .lg-back::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--ds-control-h, 44px));
  height: max(100%, var(--ds-control-h, 44px));
  transform: translate(-50%, -50%);
}
.auth-card .lg-back:active {
  transform: scale(var(--ds-press-scale, 0.97));
  transition-duration: var(--ds-dur-instant);
  transition-timing-function: var(--ds-ease-out);
}
.auth-card .lg-back:hover { color: var(--ds-text, #f5f5f7); }

/* ── messaggi: non spostano nulla quando compaiono ───────────────────────── */
.auth-card .lg-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-faint, #8a8a90);
}
.auth-card .lg-msg:empty { display: none; }
.auth-card .lg-msg.is-ok { color: var(--ds-ok, #34d399); }
.auth-card .lg-msg.is-err { color: #ff6b6b; }

.auth-card .login-forgot { margin: 10px 0 0; text-align: center; }
.auth-card .lg-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-dim, #a1a1a8);
}
.auth-card .lg-foot a { color: var(--ds-accent-text, #ff9d5c); font-weight: 600; text-decoration: none; }
.auth-card .lg-foot a:hover { text-decoration: underline; }

/* ── entrata: le tre strade arrivano una dopo l'altra, una volta sola ────── */
@keyframes lg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-card .lg-m {
  /* "backwards" e non "both", ed e' un difetto vero che si vedeva.
     Con "both" l'animazione TIENE il suo fotogramma finale per sempre, e i
     valori di un'animazione battono le regole normali del foglio: transform
     restava inchiodato a "none", quindi il sollevamento in hover della riga
     consigliata non e' mai esistito, e nemmeno la scala alla pressione qui
     sotto sarebbe arrivata. Con "backwards" resta solo la parte che serve
     davvero, cioe' l'invisibilita' durante il ritardo, e a corsa finita
     l'elemento torna a obbedire al foglio.
     Il fotogramma finale diceva opacity 1 e transform none, che e' esattamente
     lo stato di riposo: togliere la tenuta non cambia un pixel. */
  animation: lg-in var(--ds-dur-slowest) cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}

/* La pressione. Le due righe che si sollevano col mouse hanno specificita'
   maggiore della regola canonica di tokens.css e la vincevano anche da premute:
   qui si riparte dalla stessa radice, e translateY(0) si porta dietro la scala
   perche' un transform sostituisce l'altro per intero. */
.auth-card .lg-m:active:not(:disabled),
.auth-card .lg-btn:active:not(:disabled) {
  transform: translateY(0) scale(var(--ds-press-scale, 0.97));
  transition-duration: var(--ds-dur-instant);
  transition-timing-function: var(--ds-ease-out);
}

/* Chi chiede meno animazioni: il blocco unico sta in tokens.css. Quello che
   c'era qui azzerava anche il transform in hover e, di conseguenza, la risposta
   alla pressione: a durata azzerata la scala arriva istantanea, che e' cio' che
   serve a chi ha chiesto meno movimento, non l'assenza di segnale. */

/* ── tre punti in cui login.css vince, e va scavalcato alla pari ─────────────
   login.css usa selettori radicati su body.login-page (specificita' 0-2-2),
   quindi le regole qui sopra, che partono da .auth-card (0-2-1), perdono. Si
   riparte dalla stessa radice invece di buttarci un !important: cosi' la
   cascata resta leggibile e il prossimo che tocca il file capisce perche'.  */
/* Il titolo si stringe solo dove sotto c'e' il sottotitolo, cioe' nella pagina
   di scelta. Sulla pagina della password non c'e', e senza questa condizione
   "Email" finirebbe appiccicato al titolo. */
body.login-page .auth-card .auth-title:has(+ .lg-sub) { margin-bottom: 4px; }

/* Il titolo era una sfumatura (prima verso l'azzurro, poi verso il caldo):
   sempre un colore a meta', e l'utente non lo vuole. Tutto bianco.
   Il gradiente resta come tecnica solo perche' login.css imposta
   background-clip: text; il colore pero' e' uno solo. */
body.login-page .auth-card .auth-title {
  background-image: linear-gradient(#ffffff, #ffffff);
}

/* Il link era azzurro, un residuo della palette precedente: su una scheda
   nera e arancione stonava, ed e' l'unica cosa fredda dell'intera pagina. */
body.login-page .auth-card .lg-foot a { color: var(--ds-accent-text, #ff9d5c); }
body.login-page .auth-card .lg-foot { margin-bottom: 0; }

@media (max-width: 430px) {
  .auth-card .lg-m { padding: 13px 13px; gap: 11px; }
  .auth-card .lg-m--ghost { padding: 11px 13px; }
  .auth-card .lg-m-t { font-size: 15px; }
  .auth-card .lg-m-d { font-size: 12px; }
  .auth-card .lg-m-ico { width: 34px; height: 34px; }
  .auth-card .lg-m--pri .lg-m-ico { margin-top: 18px; }
}

/* ── "La passkey è sul telefono": porta dritti al codice QR ───────────────
   Riga minuta sotto la passkey, non un quarto metodo: e' la stessa strada,
   con il telefono al posto del Mac. Chiede al server l'hint hybrid da solo,
   e Safari apre il QR senza il selettore. */
/* La difesa che a riga 201 c'e' per il pannello e qui mancava: display in una
   regola piu' specifica dell'agente utente scavalca l'attributo hidden, quindi
   "La passkey e' sul telefono" e "Cambia metodo" si vedevano SEMPRE, anche a
   pannello chiuso e senza nessun tentativo fallito alle spalle. Su telefono,
   dove lo spazio e' poco, sembravano due voci di menu in piu'. */
.auth-card .lg-mini[hidden] { display: none; }

.auth-card .lg-mini {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ds-faint, #8a8a90);
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
/* Riga minuta per scelta: e' la stessa strada della passkey, non un quarto
   metodo, e ingrassarla la farebbe sembrare tale. Cresce solo l'area sensibile
   e solo in altezza: i 9px di distanza dalle righe vicine restano liberi. */
.auth-card .lg-mini { position: relative; }
.auth-card .lg-mini::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: max(100%, var(--ds-control-h, 44px));
  transform: translateY(-50%);
}
.auth-card .lg-mini:hover { color: var(--ds-accent-text, #ff9d5c); }
.auth-card .lg-mini:disabled { opacity: .5; cursor: default; }
.auth-card .lg-mini:focus-visible { outline: 2px solid var(--ds-accent-text, #ff9d5c); outline-offset: 2px; }

/* ── Modalita' a fuoco ─────────────────────────────────────────────────────
   Aperto il campo per il link via email, la passkey esce di scena: una
   schermata, una cosa da fare. Il chevron sparisce perche' il ritorno ha ora
   una riga sua, e due comandi che fanno la stessa cosa si contendono il
   significato. */
.auth-card .lg-methods.is-fuoco #passkey-login-btn,
.auth-card .lg-methods.is-fuoco #passkey-phone-btn,
.auth-card .lg-methods.is-fuoco #passkey-login-msg { display: none; }
.auth-card .lg-methods.is-fuoco .lg-m-chev { display: none; }
.auth-card .lg-cambia { margin-left: 0; justify-self: start; }