/* La pagina di accesso.

   Perche' ha un foglio suo invece di stare in styles.css. styles.css veste
   le pagine del coaching in blu notte e verde acqua, con Inter e Source
   Serif, che e' un'identita' diversa da quella del marchio. Questa pagina e'
   la porta fra la landing e il simulatore, cioe' il punto in cui il
   candidato decide se sta ancora parlando con noi o se e' finito su un
   servizio di terzi: qui i token del marchio valgono per intero. Le altre
   pagine del coaching restano come sono finche' non si decide di portarle
   tutte insieme.

   Tutto quello che si vede qui viene da brand.css. Nessun colore e nessuna
   distanza sono scritti a mano. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-page);
}

body {
  color: var(--ink-body);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- la pagina ---------- */

/* Lo spazio e' il segnale di prezzo: una cosa sola per schermata, con
   respiro attorno. */
.auth-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5) var(--space-8);
}

/* Finche' non si sa se c'e' gia' una sessione, la pagina non si mostra: chi
   e' gia' entrato vedrebbe lampeggiare un modulo di accesso che non gli
   serve. */
.auth-wrap.booting { visibility: hidden; }

.marchio {
  display: block;
  width: 232px;
  max-width: 70vw;
}
.marchio img { display: block; width: 100%; height: auto; }

/* ---------- la scheda ---------- */

.card {
  width: 100%;
  max-width: 480px;
  background: var(--surface-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* L'unica ombra della schermata: la scheda e' la cosa da sollevare. */
  box-shadow: var(--shadow-md);
}

.card h1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink-title);
  margin: 0 0 var(--space-2);
}

.card .lead {
  margin: 0 0 var(--space-5);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 25px;
}

/* ---------- le due linguette ---------- */

.tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--space-5);
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 var(--space-3);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  /* Area toccabile: 44px di lato contando il padding della scheda. */
  min-height: 36px;
}
.tab:hover { color: var(--ink-title); }
.tab[aria-selected="true"] {
  color: var(--ink-title);
  border-bottom-color: var(--brand);
}

/* ---------- i campi ---------- */

.field { margin: 0 0 var(--space-4); }

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-muted);
}

/* Shared account states: clear context before signup, a dedicated next step
   after it. Hidden panels must remain hidden despite layout display rules. */
[hidden] { display: none !important; }
.auth-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--brand-deep);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-trial {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 20px;
}
.auth-trial p { margin: 0; }
.auth-trial ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 0;
  margin: var(--space-2) 0;
  list-style: none;
  color: var(--ink-title);
  font-weight: 700;
}
.auth-trial .auth-reassurance { color: var(--brand-deep); }
.auth-confirmation h2 {
  font-family: var(--font-display);
  color: var(--ink-title);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.confirmation-address {
  overflow-wrap: anywhere;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--ink-title);
  font-weight: 700;
}
.confirmation-help {
  border-top: 1px solid var(--line);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  font-size: 13px;
  line-height: 21px;
  color: var(--ink-muted);
}
.confirmation-help p { margin: 0 0 var(--space-2); }

.field input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 25px;
  color: var(--ink-title);
  background: var(--surface-page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color 120ms ease;
}
.field input::placeholder { color: var(--ink-muted); opacity: 0.75; }
.field input:hover { border-color: var(--brand-pale); }

.hint {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--ink-muted);
}

/* ---------- il pulsante ---------- */

/* L'unico pieno del sistema, uno per schermata. */
.btn {
  appearance: none;
  border: 0;
  background: var(--surface-fill);
  color: var(--ink-inverse);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 25px;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 120ms ease;
}
/* Il blu si scurisce restando blu: --ink-title da solo porta il pulsante
   quasi al nero, che su una schermata bianca legge come un altro oggetto. */
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-fill) 82%, var(--ink-title)); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-block { display: block; width: 100%; margin-top: var(--space-5); }

/* ---------- i messaggi ---------- */

/* Il colore non e' mai l'unico veicolo: il messaggio e' una frase, e il
   filetto a sinistra lo accompagna. */
.msg {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sunken);
  font-size: 13px;
  line-height: 21px;
}
.msg.show { display: block; }
.msg.error { border-left-color: var(--state-gap); color: var(--state-gap); }
.msg.ok { border-left-color: var(--state-solid); color: var(--state-solid); }

/* ---------- il pie' di pagina ---------- */

.auth-foot {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 21px;
  color: var(--ink-muted);
}
.auth-foot a { color: var(--brand-deep); text-underline-offset: 3px; }

/* ---------- messa a fuoco ---------- */

/* Ogni controllo ha uno stato di messa a fuoco visibile: contorno
   brand-deep spesso 2px, staccato di 2px. */
.tab:focus-visible,
.btn:focus-visible,
.field input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}
.field input:focus { border-color: var(--brand-deep); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 480px) {
  .auth-wrap { padding: var(--space-6) var(--space-4) var(--space-7); gap: var(--space-5); }
  .card { padding: var(--space-5); border-radius: var(--radius-md); }
}

/* ── righe minori sotto i campi: recupero password e nota legale ──────
   Corpo piccolo, inchiostro tenue, nessun riquadro: non devono competere
   col pulsante, che resta la sola superficie piena della pagina. */
.auth-minore {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted, #5b7180);
  text-align: center;
}
.auth-minore a,
.auth-link {
  color: var(--brand-deep, #006e99);
  text-decoration: underline;
}
/* Il recupero e' un button, perche' non porta a una pagina: deve pero'
   leggersi come un link, quindi gli si toglie tutto il resto. */
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.auth-link:disabled { opacity: .6; cursor: default; }