/* La regia di Incastry (23 ottobre 2026): i colori e le misure di Incastry (public/app.css), perché sia la stessa casa.
   - spazi da un'unità di 6: 3 · 6 · 12 · 18 · 24 · 30;
   - testi a 11 · 13 · 15 · 17 · 20 · 30;
   - raggi: 10 i campi e i tasti, 12 le carte, 14 la finestra;
   - 60 · 30 · 10: il bianco della carta, il grigio della pagina e dei campi, il nero del binario e del tasto. L'azzurro solo nel segno.
   Questo file si vede anche da fuori, perché fa la porta: dentro ci sono solo i colori e la porta, la regia sta in regia.css */
:root {
  --pagina: #D9DADD; --pannello: #F4F5F7; --carta: #FFFFFF; --grigino: #F2F2F4; --binario: #0E0E0F;
  --testo: #1D1D1F; --tenue-forte: #6E6E73; --tenue: #86868B; --filo: #ECECEE; --azzurro: #1F8BFF; --allarme: #B5452E;
  --font: -apple-system, "SF Pro Text", system-ui, sans-serif; --titoli: -apple-system, "SF Pro Display", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--pagina); }
body { min-height: 100dvh; background: var(--pagina); color: var(--testo); font: 13px/1.3 var(--font); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
[hidden] { display: none !important; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 2px; }
h1 { font: 600 30px/1.1 var(--titoli); letter-spacing: -.02em; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- la porta: il segno piccolo, il titolo, email, password, Entra */
.porta { display: grid; place-items: center; padding: 24px 12px; }
.ingresso { width: 100%; max-width: 420px; display: grid; gap: 24px; padding: 30px; border-radius: 14px; background: var(--carta);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -30px rgba(0, 0, 0, .35); }
.saluto { display: grid; justify-items: center; gap: 12px; text-align: center; }
.saluto .segno { width: 30px; height: 30px; margin-bottom: 12px; }
.saluto h1 { font-size: 20px; letter-spacing: -.01em; }
.sotto { font-size: 15px; line-height: 1.4; color: var(--tenue-forte); }
.pila { display: grid; gap: 12px; }
.porta input { width: 100%; min-height: 50px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--grigino); font-size: 17px; }
.porta input::placeholder { color: var(--tenue); }
.pieno { min-height: 50px; border-radius: 10px; background: var(--binario); color: #FFFFFF; font-size: 17px; font-weight: 600; text-align: center;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.pieno:disabled { opacity: .4; cursor: default; }
.errore { font-size: 13px; text-align: center; color: var(--allarme); }
.errore:empty { display: none; }
@media (max-width: 599px) {
  .porta { display: block; padding: 0; background: var(--carta); }
  .ingresso { max-width: none; min-height: 100dvh; display: flex; flex-direction: column; border-radius: 0; box-shadow: none;
    padding: calc(env(safe-area-inset-top) + 96px) 24px calc(env(safe-area-inset-bottom) + 24px); }
  .ingresso .pila { margin-top: auto; }
}