/* Accesso e registrazione: una scheda al centro, sullo stesso fondo delle altre pagine. */

body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(900px 560px at 50% -120px, color-mix(in srgb, var(--color-accent-900) 90%, transparent), transparent 70%), var(--color-bg);
}
.accesso {
  display: grid; place-items: center; box-sizing: border-box;
  min-height: calc(100dvh - 52px); padding: clamp(20px, 5vh, 56px) 16px;
}
.accesso__scheda {
  width: min(100%, 400px); display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 4vw, 32px); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-md);
  animation: noct-in .3s ease both;
}
.accesso__marchio { display: block; height: 56px; width: auto; align-self: flex-start; }
.accesso__titolo { margin: 0; font-size: 26px; }
.accesso__sotto { margin: -10px 0 0; font-size: 14px; color: var(--color-neutral-400); }

/* ── Accedi / Registrati ── */

.schede { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.schede__voce {
  padding: 7px 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--color-neutral-400); transition: background .15s, color .15s;
}
.schede__voce:hover { color: var(--color-neutral-200); }
.schede__voce[aria-selected='true'] { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-200); }

/* ── Google e Apple ── */

.esterni { display: flex; flex-direction: column; gap: 10px; }
.esterni[hidden] { display: none; }
.esterno {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--color-text); transition: background .15s, border-color .15s;
}
.esterno:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.esterno[hidden] { display: none; }
.separatore { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-neutral-500); }
.separatore::before, .separatore::after { content: ''; flex: 1; height: 1px; background: var(--color-divider); }

/* ── Modulo ── */

.modulo { display: flex; flex-direction: column; gap: 14px; }
.field[hidden] { display: none; }
.input { min-height: 40px; }
.aiuto { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-neutral-500); }
.aiuto[hidden] { display: none; }
.password { position: relative; }
.password .input { padding-right: 72px; }
.password__mostra {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 4px 8px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--color-neutral-400);
}
.password__mostra:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.errore {
  margin: 0; padding: 9px 12px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.4;
  color: var(--sig-bad, #ff4d6a); border: 1px solid color-mix(in srgb, var(--sig-bad, #ff4d6a) 50%, transparent);
  background: color-mix(in srgb, var(--sig-bad, #ff4d6a) 8%, transparent);
}
.errore[hidden] { display: none; }
.invia { min-height: 42px; margin-top: 4px; font-size: 15px; }

/* ── Lichess e Chess.com ── */

.esterno__logo {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; font-size: 15px; line-height: 1;
}
.esterno__logo--lichess { background: #f2f2f2; color: #161512; }
.esterno__logo--chesscom { background: #81b64c; color: #fff; }
.aiuto--centro { margin: -2px 0 2px; text-align: center; }

.cc { display: flex; flex-direction: column; gap: 14px; }
.cc[hidden], .cc .modulo[hidden] { display: none; }
.cc__passi { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.cc__codice { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cc__codice code {
  padding: 4px 9px; border-radius: var(--radius-md); font-size: 14px; letter-spacing: .04em; user-select: all;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); border: 1px solid var(--color-accent-700); color: var(--color-accent-200);
}
.cc__indietro { align-self: center; font-size: 13px; }
.schede[hidden], .modulo[hidden] { display: none; }

/* ── password dimenticata, password nuova, conferma dell'email ── */

.pannello { display: flex; flex-direction: column; gap: 14px; }
.pannello[hidden], .pannello .modulo[hidden], .pannello [hidden] { display: none; }
.collegamento {
  align-self: flex-start; margin: 8px 0 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-accent-200); text-decoration: underline; text-underline-offset: 3px;
}
.collegamento:hover { color: var(--color-text); }
.collegamento[hidden] { display: none; }
.esito {
  margin: 0; padding: 11px 13px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5;
  border: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.esito--ok { border-color: color-mix(in srgb, var(--sig-good, #5fd38d) 50%, transparent); background: color-mix(in srgb, var(--sig-good, #5fd38d) 8%, transparent); }
a.invia { display: flex; align-items: center; justify-content: center; text-decoration: none; }