/* Computer · pagina di accesso e attivazione: rito d'identificazione LCARS al posto del contenuto, senza menu e footer.
   Stato sul modulo (data-esito): attesa · verifica (scansione) · consentito (verde) · negato (rosso). */

/* Il modulo e la tastiera di bordo fissa in fondo: il modulo sta al centro dello spazio che resta sopra la tastiera. */
.content--access { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: var(--space-2) var(--space-2) 0; }
.access { --esito: var(--color-amber); display: flex; flex: 1; flex-direction: column; min-height: 0; }
.access__head { display: flex; flex-direction: column; gap: var(--space-2); margin: auto 0; padding: var(--space-3) 0; }
.access__keyboard { flex-shrink: 0; padding-bottom: var(--space-2); }
.access[data-esito="verifica"] { --esito: var(--color-lilac); }
.access[data-esito="consentito"] { --esito: var(--color-green); }
.access[data-esito="negato"] { --esito: var(--base-red); }

/* Banner: blocco LCARS con barra spessa a sinistra, scritta grande nel colore dell'esito. */
.access__banner {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 14px solid var(--esito);
  border-radius: 14px 0 0 14px;
  transition: border-color var(--dur-base);
}
.access__code { display: block; color: var(--color-faint); font: 600 var(--text-2xs)/1 var(--font-display); letter-spacing: .14em; }
.access__title {
  --wipe-color: var(--esito);
  width: fit-content;
  margin-top: var(--space-1-5);
  color: var(--esito);
  font: 600 calc(var(--text-title) * .9 * var(--display-scale))/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: color var(--dur-base);
}
.access__sub {
  --wipe-color: var(--color-lilac);
  width: fit-content;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font: 600 var(--text-sm)/1.3 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.access[data-esito="negato"] .access__sub { color: var(--color-alert-text); }

/* Scansione: binario sottile; durante la verifica un blocco corre da un capo all'altro. Consentito: pieno verde. */
.access__scan { position: relative; height: 6px; margin: var(--space-2) 0 var(--space-3); overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--esito) 22%, var(--color-screen)); }
.access__scan-bar { position: absolute; inset: 0 auto 0 0; width: 28%; border-radius: 3px; background: var(--esito); transform: translateX(-110%); }
.access[data-esito="verifica"] .access__scan-bar { animation: access-scan .7s ease-in-out infinite alternate; }
.access[data-esito="consentito"] .access__scan-bar { width: 100%; transform: none; }
.access[data-esito="negato"] .access__scan-bar { width: 100%; transform: none; animation: access-blink .5s steps(2, jump-none) 3; }
@keyframes access-scan { from { transform: translateX(-10%); } to { transform: translateX(360%); } }
@keyframes access-blink { 50% { opacity: .2; } }

.access__fields { display: flex; flex-direction: column; gap: var(--space-2); }
.access__label { margin-top: var(--space-1); color: var(--color-lilac-soft); font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.access__hint { margin-left: var(--space-1); color: var(--color-faint); letter-spacing: .04em; text-transform: none; }
.access__input {
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 0;
  border-left: 8px solid var(--color-lilac);
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--color-lilac) 12%, var(--color-screen));
  color: var(--color-ink);
  font: var(--text-2xl) var(--font-display);   /* 16px: sotto questa misura iOS ingrandisce la pagina al tocco */
  letter-spacing: .12em;
}
.access__input:focus-visible { outline: 2px solid var(--color-lilac); outline-offset: 2px; }
.access__input:focus { caret-color: var(--color-lilac); }

/* Campo con l'occhio: mostra / nasconde il codice (senza Portachiavi né correzione serve vedere cosa si scrive). */
.access__field { position: relative; display: flex; }
.access__field .access__input { flex: 1; min-width: 0; padding-right: var(--touch); }
.access__show {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--touch);
  border: 0;
  background: none;
  color: var(--color-lilac-soft);
}
.access__show .ico { width: 22px; height: 22px; }
.access__show[aria-pressed="true"] { color: var(--color-amber); }

/* Face ID: comando principale quando c'è una passkey; il codice con la tastiera resta come riserva. */
.access__faceid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  min-height: var(--control-tall);
  margin-top: var(--space-3);
  border: 0;
  border-radius: 22px 4px 4px 22px;
  background: var(--color-lilac);
  color: var(--color-on-lilac);
  font: 600 calc(var(--text-xl) * var(--display-scale))/1.2 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.access__faceid .ico { width: 22px; height: 22px; }
.access__faceid[hidden] { display: none; }
.access__faceid:disabled { background: color-mix(in srgb, var(--color-lilac) 25%, var(--color-screen)); color: var(--color-lilac); }

/* Accesso negato: lampo rosso su tutto lo schermo (classe messa da scripts/accesso.js). */
.device__screen--negato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  border-radius: inherit;
  background: var(--base-red);
  pointer-events: none;
  animation: access-flash .55s ease-out forwards;
}
@keyframes access-flash { from { opacity: .45; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .access[data-esito="verifica"] .access__scan-bar { animation: none; width: 100%; transform: none; opacity: .5; }
  .device__screen--negato::before { animation-duration: .01s; }
}