/* =====================================================================
 * Filandapp · ritocchi della versione online
 * Caricato dopo gli stili del prototipo: li migliora senza modificarli,
 * così resta valido anche quando arriva una nuova versione del prototipo.
 * ===================================================================== */

/* ---------- Tastierino PIN ---------- */
.pin button{
  touch-action:manipulation;              /* niente zoom con il doppio tocco */
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  transition:transform .06s ease, background-color .06s ease;
}
.pin button:active{transform:scale(.95);background:var(--surface2)}
.pin button[data-k="C"],
.pin button[data-k="←"]{background:transparent;border-color:transparent;color:var(--muted);font-size:1.15rem}
.pindots{gap:18px;margin:6px 0 2px}
.pindots i{width:18px;height:18px}
.pindots.shake{animation:fa-pinshake .38s ease}
@keyframes fa-pinshake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(4px)}
}
#pinmsg{min-height:1.4em;text-align:center}

/* Telefono e tablet in verticale: tasti grandi, proporzionati allo schermo */
@media (orientation:portrait) and (pointer:coarse), (max-width:600px){
  .pin{max-width:none;width:min(100%,360px);gap:14px}
  .pin button{height:clamp(64px,9.5svh,84px);font-size:1.75rem;border-radius:18px}
}
@media (min-width:601px) and (orientation:portrait) and (pointer:coarse){
  .sheet:has(.pin){width:min(520px,100%)}
  .pin{width:min(100%,420px);gap:18px}
  .pin button{height:clamp(80px,8.5svh,100px);font-size:2.1rem;border-radius:20px}
  .pindots i{width:22px;height:22px}
  #pinmsg{font-size:1rem}
}

/* Telefono: schermata intera, tastierino in basso alla portata del pollice */
@media (max-width:600px){
  .sheet:has(.pin){height:100dvh;max-height:100dvh;border-radius:0}
  .sheet:has(.pin) .sheet-body{flex:1;justify-content:flex-end;
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .sheet:has(.pin) .sheet-body > .stack{width:100%;gap:20px}
}