/*
 * Le tre pagine che il server disegna ancora: accesso, invito, errore.
 *
 * Da M5.1 tutto il resto è la console, che porta il proprio foglio di
 * stile dentro il pacchetto (ADR-17); qui resta lo stretto necessario a
 * far sembrare queste tre parte dello stesso prodotto — e dalla M5.2
 * "sembrare" vuol dire davvero: i valori non sono più scritti qui, sono
 * i token del brand, gli stessi che legge la console. Stanno sotto
 * /css/tokens/, dove `npm run design:sync` li deposita, e non sotto
 * /console/ come nella SPA, perché a queste tre pagine si arriva senza
 * aver fatto accesso e /console/** vuole una sessione.
 *
 * La prima pagina che un cliente vede è la pagina di accesso. Se quella
 * è azzurra e generica, il verde caldo che viene dopo arriva come una
 * sorpresa invece che come una conferma.
 *
 * Anche i caratteri: i woff2 restano una volta sola, nel pacchetto
 * della console, ma la configurazione di sicurezza li lascia passare
 * senza sessione e /css/fonts.css li dichiara per queste tre pagine.
 * La coda della pila — Georgia, Helvetica — resta il paracadute per il
 * primo disegno, non la destinazione.
 */

@import url("/css/fonts.css");
@import url("/css/tokens/colors.css");
@import url("/css/tokens/typography.css");
@import url("/css/tokens/spacing.css");
@import url("/css/tokens/effects.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1);
}

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.muted-text {
  color: var(--text-secondary);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------------ */
/* Moduli                                                              */
/* ------------------------------------------------------------------ */

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

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

input[type="email"],
input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  padding: 10px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  transition:
    border-color var(--duration-fast) var(--ease-quiet),
    box-shadow var(--duration-fast) var(--ease-quiet);
}

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button,
.button {
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--accent-strong);
  color: var(--text-on-dark);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-quiet);
}

button:hover,
.button:hover {
  /* Il brand non ha un token per lo scuro del pulsante premuto: il kit
     lo scrive a mano (#35564a). Qui si ricava dai token invece che
     copiarlo, così una revisione della palette lo segue. TODO brand:
     un --accent-pressed toglierebbe il calcolo. */
  background: color-mix(in srgb, var(--accent-strong) 82%, var(--ink));
  color: var(--text-on-dark);
  text-decoration: none;
}

button.quiet,
.button.quiet {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

button.quiet:hover,
.button.quiet:hover {
  background: var(--surface-tint);
  color: var(--text-primary);
}

.actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/*
 * L'avviso: detto, mai gridato. L'ambra è il tono di ciò che si può
 * ancora sistemare; il rosso è riservato all'irreversibile, e "email o
 * password non corretti" non lo è.
 */
.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.notice.bad {
  border-color: var(--amber-border);
  border-left-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber-deep);
}

/* ------------------------------------------------------------------ */
/* Accesso                                                             */
/* ------------------------------------------------------------------ */

.login-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
  overflow: hidden;
  background: linear-gradient(160deg, var(--paper) 0%, var(--tint) 55%, #d9e6dd 100%);
}

/*
 * La scena dietro la scheda: fogli che da sparsi si mettono in pila.
 *
 * Ogni foglio parte dalla sua posizione di disordine (--dx, --dy, --r)
 * e arriva alla sua posizione in pila (--px, --py): un movimento solo,
 * lento, con la curva quieta del brand e senza rimbalzi. La spunta
 * arriva quando la pila è ferma; poi la pila svanisce e arriva un altro
 * mucchio da mettere in ordine, ogni quattordici secondi. Chi ha
 * chiesto meno movimento vede direttamente la pila ordinata, ferma.
 */
.login-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: glow-drift 22s var(--ease-quiet) infinite alternate;
}

.glow-a {
  left: -20vmax;
  top: -25vmax;
  background: radial-gradient(circle, var(--green-light) 0%, rgba(169, 196, 180, 0) 65%);
}

.glow-b {
  right: -22vmax;
  bottom: -28vmax;
  background: radial-gradient(circle, rgba(87, 128, 107, 0.55) 0%, rgba(87, 128, 107, 0) 65%);
  animation-delay: -11s;
}

@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vmax, 5vmax) scale(1.15); }
}

.sheets {
  position: absolute;
  width: min(42vmin, 360px);
  height: min(42vmin, 360px);
  overflow: visible;
  animation: stack-float 7s ease-in-out infinite alternate;
}

.sheets-a {
  left: max(2vw, calc(50% - 560px));
  bottom: 4vh;
}

.sheets-b {
  right: max(2vw, calc(50% - 560px));
  top: 6vh;
  transform: scale(0.82);
  animation-delay: -3.5s;
}

@keyframes stack-float {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}

.sheet {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r));
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(46, 58, 66, 0.10));
  animation: sheet-cycle 14s var(--ease-quiet) infinite;
  animation-delay: var(--wait);
}

/* In pila: leggermente sfalsati, come una risma appena battuta sul tavolo.
   L'etichetta colorata in alto è la cosa che distingue un foglio dall'altro. */
.sheet.s1 { --dx: -120px; --dy:  40px; --r: -16deg; --px: -8px; --py:  8px; --pr: -2deg; --wait: 200ms;  --band: var(--green); }
.sheet.s2 { --dx:  110px; --dy: -70px; --r:  13deg; --px: -4px; --py:  4px; --pr: -1deg; --wait: 500ms;  --band: var(--amber); }
.sheet.s3 { --dx: -60px;  --dy: -110px; --r: -8deg; --px:  0px; --py:  0px; --pr:  0deg; --wait: 800ms;  --band: var(--green-light); }
.sheet.s4 { --dx:  90px;  --dy:  80px; --r:  19deg; --px:  4px; --py: -4px; --pr:  1deg; --wait: 1100ms; --band: var(--green-dark); }
.sheet.s5 { --dx: -30px;  --dy: 120px; --r:  -5deg; --px:  8px; --py: -8px; --pr:  2deg; --wait: 1400ms; --band: var(--amber); }

@keyframes sheet-cycle {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  5%   { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  28%  { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  86%  { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  94%  { opacity: 0; transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

.tick path {
  fill: none;
  stroke: var(--green);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: tick-cycle 14s var(--ease-quiet) infinite;
}

@keyframes tick-cycle {
  0%   { stroke-dashoffset: 70; opacity: 1; }
  38%  { stroke-dashoffset: 70; opacity: 1; }
  44%  { stroke-dashoffset: 0;  opacity: 1; }
  88%  { stroke-dashoffset: 0;  opacity: 1; }
  95%  { stroke-dashoffset: 0;  opacity: 0; }
  100% { stroke-dashoffset: 70; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .sheets { animation: none; }
  .sheet { animation: none; opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  .tick path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 720px) {
  .sheets { opacity: 0.55; }
}

.login-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-7) var(--space-6) var(--space-6);
  width: 100%;
  max-width: 420px;
  animation: card-rise 600ms var(--ease-quiet) both;
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: center;
}

.login-brand img {
  width: 72px;
  height: 72px;
}

.login-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.login-brand-name b {
  font-weight: var(--weight-semibold);
  color: var(--accent-strong);
}

.login-brand + h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-5);
}

/* La testata dell'invito resta orizzontale e piccola: lì il marchio
   presenta, non accoglie. */
.lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}

.lockup img {
  width: 32px;
  height: 32px;
  flex: none;
}

.lockup-name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  color: var(--text-primary);
}

.lockup-name b {
  font-weight: var(--weight-semibold);
}

.login-card button {
  width: 100%;
  margin-top: var(--space-1);
}

.login-hint {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}