/* ═════════ guscio: altezza costante, pulsanti sempre allo stesso punto ═════════
   L'applicazione occupa esattamente l'altezza dello schermo. Solo la fascia
   centrale scorre: intestazione e barra dei pulsanti restano ferme, quindi
   "Indietro" e "Continua" cadono al pixel nello stesso posto su ogni pagina. */
.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.at-report .app{height:auto;min-height:100dvh;overflow:visible}
body.at-report .mbar{display:none}   /* nel report i marchi stanno sopra il documento */

.mbar{flex:none;display:flex;align-items:center;gap:14px;padding:11px clamp(14px,4vw,22px);
  background:#fff;border-bottom:1px solid var(--line2)}
/* i due marchi hanno la stessa altezza: la larghezza la decide il loro
   rapporto, così nessuno dei due sembra più importante dell'altro */
.mbar .m-me,.mbar .m-fa{height:clamp(30px,8.2vw,40px);width:auto}
.mbar .m-fa{margin-left:auto}

/* firma in fondo a ogni schermata */
.pfoot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.pfoot .prow{display:flex;align-items:center;gap:13px}
.ed{width:58px;height:58px;flex:none;border-radius:10px;background-image:var(--ed);
  background-repeat:no-repeat;background-size:cover;background-position:center;box-shadow:var(--sh1)}
.pfoot .pt{font-size:12.5px;line-height:1.35;color:var(--ink2);font-weight:850;letter-spacing:-.01em}
.pfoot .pdnc{margin-top:11px;font-size:11px;line-height:1.4;color:var(--faint);font-weight:650}

.rail{flex:none;display:flex;align-items:center;padding:9px clamp(16px,4vw,22px) 11px;
  background:#fff;border-bottom:1px solid var(--line)}
.rail .in{display:flex;align-items:center;gap:12px;width:100%;max-width:620px;margin-inline:auto}
.track{flex:1;height:6px;border-radius:99px;background:#EDE5DD;overflow:hidden;position:relative}
.track i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:99px;
  background:linear-gradient(90deg,var(--o-d),var(--o));transition:transform .45s cubic-bezier(.22,1,.36,1)}
.rail-n{font-size:11.5px;font-weight:800;color:var(--mut);white-space:nowrap}
.rail-n b{color:var(--ink)}

.stage{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.at-report .stage{overflow:visible}
.wrap{width:100%;max-width:620px;margin-inline:auto;padding:clamp(18px,4vw,26px) clamp(16px,4vw,22px) 26px}
body.at-report .wrap{max-width:800px}
.screen{display:none}
.screen.on{display:block;animation:enter .34s cubic-bezier(.2,.9,.25,1) both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═════════ barra dei pulsanti: unica, fissa, identica su ogni schermata ═════════ */
.navbar{flex:none;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(19,24,29,.05);
  padding:11px clamp(16px,4vw,22px) calc(11px + env(safe-area-inset-bottom,0px))}
.navbar .in{width:100%;max-width:620px;margin-inline:auto;display:grid;
  grid-template-columns:112px 1fr;gap:10px;align-items:stretch}
@media(min-width:520px){.navbar .in{grid-template-columns:128px 1fr}}
.back{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:750;
  color:var(--ink2);border:1.5px solid var(--line);border-radius:14px;background:#fff;min-height:52px;transition:.15s}
.back svg{width:15px;height:15px;flex:none}
.back:hover{border-color:#DCCFC5;background:#FBF8F5}
.back.off{visibility:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:14px 20px;
  min-height:52px;font-size:15.5px;font-weight:800;letter-spacing:-.012em;color:#fff;text-align:center;
  background:var(--o-btn);box-shadow:0 8px 20px rgba(164,56,9,.26);
  transition:transform .16s cubic-bezier(.2,.9,.25,1),box-shadow .16s,opacity .16s}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(164,56,9,.32)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.34;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:#DCCFC5}
.btn.wa{background:var(--ed-green);color:#fff;box-shadow:0 8px 20px rgba(44,142,55,.28)}
@media(max-width:380px){.btn{font-size:14.5px;padding-inline:14px}}

