/* «Where does the time go?» — stile dell'app. Usa i gettoni del sito (site.css). */

.ap-wrap{max-width:900px;padding-block:var(--sp7) var(--sp8)}

/* contatore e barra restano in cima mentre si scorre: senza, chi arriva alla
   decima scelta non vede piu' quanto manca (il pulsante sta a ~6 schermate). */
.ap-head{position:sticky;top:var(--ap-top,69px);z-index:20;padding-block:var(--sp3);
  background:linear-gradient(180deg,var(--ink) 70%,rgba(5,8,15,0))}
.ap-prog{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:var(--sp3)}
.ap-prog i{display:block;height:100%;background:linear-gradient(90deg,#2563EB,#22D3EE);
  transition:width .35s ease}
.ap-count{color:var(--dim-2);font-size:var(--s-1);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:0}

.ap-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--sp7);box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* ————————————————————————— schermo piccolo
   La testata del sito, su telefono, va a capo e prende ~174-198 px su 844: un quinto
   dello schermo. Il pulsante «Inizia» finiva a 909 px, sotto la piega. Qui l'app
   stringe solo cio' che e' decorazione — margini e riempimenti — e non tocca i
   caratteri: il pulsante entra nello schermo anche a 390x844, senza rimpicciolire
   niente di quello che si legge. */
@media (max-width:520px){
  .ap-wrap{padding-block:0 var(--sp7);line-height:1.55}
  .ap-card{padding:var(--sp3) var(--sp5)}
  .ap-card h1{margin-bottom:0}
  .ap-eyebrow{margin-bottom:var(--sp1);font-size:.75rem}
  .ap-lede{margin-bottom:0;line-height:1.5}
  .ap-promesse{margin:var(--sp2) 0 0;gap:var(--sp1)}
  .ap-go{margin-top:var(--sp2)}
}
.ap-noscript{color:var(--dim);font-size:var(--s1);line-height:1.65;max-width:62ch}
.ap-card--intro{background:
  radial-gradient(900px 300px at 20% -10%,rgba(245,158,11,.10),transparent 70%),
  radial-gradient(700px 300px at 90% 0,rgba(34,211,238,.10),transparent 70%),
  var(--panel)}
.ap-eyebrow{color:var(--warn);font-size:var(--s-1);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;margin-bottom:var(--sp4)}
.ap-card h1{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;margin-bottom:var(--sp4)}
.ap-card h2{font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2;margin-bottom:var(--sp3)}
.ap-card h3{font-size:var(--s2);margin-bottom:var(--sp3)}
.ap-lede{color:var(--dim);font-size:var(--s1);line-height:1.65;max-width:62ch}
.ap-step{color:var(--dim-2);font-size:var(--s-1);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:var(--sp3)}
.ap-help{color:var(--dim-2);margin-top:var(--sp3)}
.ap-hint{color:var(--dim-2);font-size:var(--s-1);margin-top:var(--sp3)}

.ap-promesse{list-style:none;margin:var(--sp6) 0;display:grid;gap:var(--sp3)}
.ap-promesse li{color:var(--dim);padding-left:var(--sp5);position:relative}
.ap-promesse li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;
  border-radius:50%;background:var(--ok)}

/* scelte */
.ap-opts{display:grid;gap:var(--sp3);margin-top:var(--sp6)}
.ap-opt{display:flex;align-items:center;gap:var(--sp4);text-align:left;width:100%;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--sp4) var(--sp5);color:var(--text);font:inherit;font-size:var(--s1);
  cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.ap-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.ap-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-opt.on{border-color:var(--warn);background:linear-gradient(90deg,
  rgba(245,158,11,.14),rgba(245,158,11,.04));box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.ap-tick{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--dim-2);
  position:relative}
.ap-opt.on .ap-tick{border-color:var(--warn);background:var(--warn)}
.ap-opt.on .ap-tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #1a1206;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}

.ap-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
  margin-top:var(--sp7)}
.ap-back{background:none;border:0;color:var(--dim-2);font:inherit;cursor:pointer;
  padding:var(--sp3) 0}
.ap-back:hover{color:var(--text)}
.ap-go[disabled]{opacity:.4;cursor:not-allowed}
.ap-warn{color:var(--stop);font-size:var(--s-1);margin-top:var(--sp3)}

.ap-legend{display:grid;gap:var(--sp4);margin-top:var(--sp6);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-legend-i{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--sp4)}
.ap-legend-i b{display:block;color:var(--text);margin-bottom:var(--sp2)}
.ap-legend-i span{color:var(--dim-2);font-size:var(--s-1);line-height:1.55}
@media (max-width:760px){.ap-legend{grid-template-columns:1fr}}

/* la mappa */
.ap-map{margin-top:var(--sp6);display:grid;gap:var(--sp5)}
.ap-row{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--sp5)}
.ap-rowh{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.ap-rowh b{font-size:var(--s1)}
.ap-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ap-dot--low{background:var(--ok)}
.ap-dot--medium{background:var(--warn)}
.ap-dot--high{background:var(--stop)}
.ap-risk{margin-left:auto;font-size:var(--s-2);letter-spacing:.06em;text-transform:uppercase;
  padding:2px 10px;border-radius:999px;border:1px solid}
.ap-risk--low{color:var(--ok);border-color:rgba(52,211,153,.4)}
.ap-risk--medium{color:var(--warn);border-color:rgba(251,191,36,.4)}
.ap-risk--high{color:var(--stop);border-color:rgba(248,113,113,.4)}
.ap-bar{height:8px;border-radius:999px;background:var(--line);margin:var(--sp4) 0;overflow:hidden}
.ap-bar i{display:block;height:100%}
.ap-bar--low{background:linear-gradient(90deg,#059669,#34D399)}
.ap-bar--medium{background:linear-gradient(90deg,#B45309,#FBBF24)}
.ap-bar--high{background:linear-gradient(90deg,#B91C1C,#F87171)}
.ap-rowd{display:grid;gap:var(--sp2)}
.ap-rowd p{color:var(--dim);font-size:var(--s-1);line-height:1.6}
.ap-k{color:var(--dim-2);text-transform:uppercase;letter-spacing:.08em;font-size:var(--s-2);
  margin-right:var(--sp2)}

.ap-start{margin-top:var(--sp6);border-color:rgba(245,158,11,.45);
  background:linear-gradient(180deg,rgba(245,158,11,.09),transparent 60%),var(--panel)}
.ap-start h3{color:var(--warn);font-size:var(--s2)}
.ap-does{color:var(--dim);margin-top:var(--sp3);font-size:var(--s-1)}
.ap-est{margin-top:var(--sp5);color:var(--text);font-size:var(--s1);font-weight:650;
  border-left:3px solid var(--warn);padding-left:var(--sp4)}
.ap-note{color:var(--dim-2);font-size:var(--s-2);margin-top:var(--sp3);line-height:1.55}

.ap-cta{margin-top:var(--sp6);text-align:center}
.ap-cta .btn{display:inline-block;margin-top:var(--sp4)}
.ap-again{display:block;margin:var(--sp4) auto 0;background:none;border:0;color:var(--dim-2);
  font:inherit;cursor:pointer;text-decoration:underline}
.ap-again:hover{color:var(--text)}

.ap-send{display:inline-block;margin-top:var(--sp4)}
/* il ripiego (copiare) sta sotto la CTA e non si apre da solo: si apre a richiesta,
   cosi' non e' la prima cosa che si legge dopo la mappa. */
.ap-copy-btn{display:inline-block;margin-top:var(--sp4);background:none;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--sp3) var(--sp5);
  font:inherit;font-size:var(--s-1);cursor:pointer}
.ap-copy-btn:hover{color:var(--text);border-color:var(--accent)}
.ap-copy-hint{color:var(--dim-2);font-size:var(--s-2);margin-top:var(--sp5);line-height:1.55}
.ap-copy{margin-top:var(--sp3);text-align:left;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--sp5);color:var(--dim);font-size:var(--s-2);
  line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}