/* ============================================================
   GUIDA — il giro della prima volta e la guida di una pagina
   Un foglio del guscio: li apre il menu del profilo da ogni pagina.
   ============================================================ */
.tour{position:fixed;inset:0;z-index:900;}
.tour.tour-senza{background:var(--scrim);}
/* Il buco: un riquadro vuoto con un'ombra grande quanto lo schermo, che
   fa da velo tutto intorno. Non prende i clic: il gesto e' «guarda», non
   «tocca». */
.tour-buco{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px var(--scrim);outline:2px solid var(--primary);outline-offset:2px;pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;}
.tour-senza .tour-buco{display:none;}
.tour-box{position:fixed;width:340px;max-width:calc(100vw - 32px);background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:18px 18px 14px;}
.tour-conto{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.tour-box h2{font-size:16px;line-height:1.3;margin:0 32px 6px 0;color:var(--text);}
.tour-box p{font-size:14px;line-height:1.5;margin:0 0 16px;color:var(--neutral-ink);}
.tour-piede{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tour-dx{display:flex;gap:6px;}
.tour-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;}
.tour-x:hover{background:var(--hover);color:var(--text);}
.tour-x:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.tour-x svg{width:16px;height:16px;}
[data-motion="off"] .tour-buco{transition:none;}
@media (prefers-reduced-motion: reduce){ .tour-buco{transition:none;} }

.guide-tips{list-style:none;margin:8px 0 6px;padding:0;display:flex;flex-direction:column;gap:14px;}
.guide-tips li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--text);}
.guide-tips svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--primary);}

/* Sul telefono la testata e' quella del disegno, che il «?» non ce l'ha:
   la guida della pagina sta nel menu del profilo. */
@media (max-width: 640px){
  .topbar-help{display:none;}
}