/* =========================================================
   COME TI STAI MUOVENDO — l'icona del mezzo
   =========================================================
   ⬇️ NUOVO (richiesta utente 08/08/2026): "un'icona sia su app che su web
   che mostra il mezzo rilevato e se ci clicchi sopra puoi modificarlo".

   File a sé, e usato dalle DUE pagine, per due ragioni:
   — il markup lo scrive js/andatura.js una volta sola, e due fogli di
     stile diversi lo farebbero divergere lo stesso, dal lato sbagliato;
   — css/main.css è già ampiamente oltre il limite di §4.4, e app.html
     tiene il suo stile in linea: aggiungere in tutti e due i posti
     avrebbe voluto dire scrivere due volte la stessa pastiglia.

   Cambia solo DOVE sta: sul sito è una pastiglia nell'angolo libero della
   mappa (.mappa, pannello che si apre verso l'alto), nell'app una barra
   sotto lo stato del GPS (.barra, pannello che scende). Il vestito è lo
   stesso perché è la stessa cosa.

   --shadow non esiste in app.html, che ha un :root più corto: qui c'è
   sempre il valore di ripiego, identico a quello di main.css.
   ========================================================= */

.andatura[hidden]{ display:none; }

.andatura-btn{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; font:inherit; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  text-align:left;
}
.andatura-ico{ font-size:16px; line-height:1; flex:none; }
.andatura-testo{ font-weight:600; white-space:nowrap; }
/* Il numero per cui tutto questo esiste, accanto allo stato: quanti
   chilometri a piedi oggi. È la domanda da cui è nata la richiesta. */
.andatura-oggi{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Corretto a mano. Deve vedersi: senza, non si sa se il tocco è servito. */
.andatura-btn.dichiarato{ border-color:var(--route); }

.andatura-pannello{
  position:absolute;
  z-index:620;
  width:214px; max-width:calc(100vw - 24px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow, 0 6px 24px rgba(27,31,35,0.18));
  padding:8px;
  display:flex; flex-direction:column; gap:3px;
}
.andatura-pannello[hidden]{ display:none; }
.andatura-titolo{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:0 2px 2px;
}
.andatura-pannello button{
  display:flex; align-items:center; gap:9px;
  width:100%; text-align:left;
  appearance:none; background:none; cursor:pointer;
  border:1px solid transparent; border-radius:7px;
  padding:7px 8px; font:inherit; font-size:13px; color:var(--ink);
}
.andatura-pannello button span{ font-size:16px; line-height:1; width:20px; text-align:center; }
.andatura-pannello button:active{ background:var(--paper); }
@media (hover:hover){ .andatura-pannello button:hover{ background:var(--paper); } }
/* Quello in corso. Un pannello che non dice dove sei adesso costringe a
   ricordarselo dal pulsante che l'ha aperto. */
.andatura-pannello button.scelto{
  border-color:var(--route); background:var(--paper);
}
/* "Rilevalo tu" non è un mezzo: è il ritorno all'automatico, e la riga
   sopra lo separa dai quattro che invece lo sono. */
.andatura-auto{ border-top:1px solid var(--line) !important; border-radius:0 !important; margin-top:3px; }
.andatura-riepilogo{
  border-top:1px solid var(--line);
  margin-top:4px; padding:7px 4px 1px;
  font-size:11.5px; line-height:1.5; color:var(--muted);
}

/* ---------- SUL SITO: pastiglia sulla mappa ----------
   In basso a sinistra: l'angolo si è liberato quando la legenda dei
   luoghi è entrata nel pannello dei filtri, ed è speculare a
   .track-legend che sta in basso a destra. */
.andatura.mappa{ position:absolute; left:12px; bottom:28px; z-index:500; }
.andatura.mappa .andatura-btn{
  border-radius:999px; padding:6px 13px 6px 10px; font-size:12.5px;
  box-shadow:var(--shadow, 0 6px 24px rgba(27,31,35,0.18));
  max-width:min(320px, calc(100vw - 40px));
}
.andatura.mappa .andatura-oggi::before{ content:'· '; }
.andatura.mappa .andatura-pannello{ left:0; bottom:calc(100% + 6px); }
@media (max-width:760px){
  .andatura.mappa{ left:8px; bottom:24px; }
  .andatura.mappa .andatura-oggi{ display:none; }
}

/* ---------- NELL'APP: barra sotto lo stato del GPS ----------
   Stessa forma di .share-bar, che sta subito sopra: sono due righe di
   stato dello stesso tipo, e farle diverse le farebbe leggere come due
   cose senza rapporto. */
.andatura.barra{ position:relative; display:block; }
.andatura.barra .andatura-btn{
  width:100%; border:none; border-bottom:1px solid var(--line);
  background:var(--paper-2);
  padding:10px 14px; font-size:12.5px;
}
.andatura.barra .andatura-btn.dichiarato{
  background:#eaf1ee; box-shadow:inset 3px 0 0 var(--route);
}
.andatura.barra .andatura-oggi{ margin-left:auto; font-size:11.5px; }
.andatura.barra .andatura-pannello{ left:12px; top:calc(100% + 4px); }