/* =========================================================
   IL PANNELLO "MANGIARE"
   =========================================================
   Vedi js/modules/mangiare.js per il perché esiste: i posti c'erano già,
   ma dentro una lista di settantasette voci in ordine alfabetico — e in
   piedi in via Długa quell'ordine non risponde a nessuna domanda.

   Foglio a parte perché lo caricano itera.html e iterav2.html, e perché
   §4.4 vale anche per il CSS: main.css è uno dei tre file già oltre il
   limite, e non ci si aggiunge sopra.
   ========================================================= */

.mg-velo{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
}
/* Dal basso, non dal centro: il pollice sta in fondo allo schermo, ed è
   un pannello che si apre camminando. */
@media (min-width: 760px){
  .mg-velo{ align-items:center; }
}

.mg-finestra{
  width:min(560px, 100%);
  max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:14px 14px 0 0;
  box-shadow:0 -6px 28px rgba(0,0,0,.3);
  overflow:hidden;
}
@media (min-width: 760px){
  .mg-finestra{ border-radius:14px; max-height:80vh; }
}

.mg-testa{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--ink); color:var(--paper);
  flex:none;
}
.mg-testa h3{
  margin:0; flex:1; min-width:0;
  font-family:'Fraunces',serif; font-size:16px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mg-chiudi{
  background:none; border:1px solid #3a3f44; color:var(--paper);
  width:32px; height:32px; border-radius:var(--radius);
  font-size:15px; cursor:pointer; flex:none;
}

.mg-corpo{ overflow-y:auto; padding:10px 14px 18px; }

.mg-sezione{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin:14px 0 7px;
}
.mg-sezione:first-child{ margin-top:4px; }
.mg-fonte{ text-transform:none; letter-spacing:0; font-size:10.5px; opacity:.85; }

/* Le schede aperte di default: sono il "cosa mangiare", cioè la ragione
   per cui si è aperto il pannello. Chiuderle per pulizia vorrebbe dire
   nasconderle una seconda volta. */
.mg-scheda{
  background:var(--white); border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px;
}
.mg-scheda summary{
  cursor:pointer; list-style:none;
  padding:10px 12px; font-size:13.5px; font-weight:600;
}
.mg-scheda summary::-webkit-details-marker{ display:none; }
.mg-scheda-testo{
  padding:0 12px 11px;
  font-size:13px; line-height:1.5; white-space:pre-wrap;
}

.mg-posto{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--white); border:1px solid var(--line);
  border-radius:9px; padding:9px 11px; margin-bottom:7px;
}
.mg-posto.preferito{ background:rgba(217,160,60,.08); }
/* ⬇️ NUOVO (13/08/2026): la riga si preme e porta la mappa sul posto.
   Deve DIRLO di essere premibile: un elenco che reagisce al tocco senza
   sembrare toccabile si scopre per caso, e chi non prova non lo trova. */
.mg-posto[data-vai]{ cursor:pointer; }
.mg-posto[data-vai]:hover{ border-color:var(--route); }
.mg-posto[data-vai]:active{ background:var(--paper-2); }
.mg-posto[data-vai]:focus-visible{ outline:2px solid var(--route); outline-offset:2px; }
.mg-ico{ font-size:15px; line-height:1.3; flex:none; }
.mg-testo{ flex:1; min-width:0; }
.mg-nome{ font-size:13.5px; font-weight:600; }
.mg-stella{ color:#D9A03C; }
.mg-sub{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--muted); margin-top:2px;
}
.mg-nota{ font-size:12.5px; line-height:1.45; margin-top:4px; white-space:pre-wrap; }
/* Da quale tappa arriva, detto solo quando NON è quella in cui si è:
   ripeterlo su ogni riga sarebbe rumore, ometterlo su un posto di
   un'altra città sarebbe una bugia sulla distanza. */
.mg-tappa{ font-size:11px; color:var(--muted); margin-top:3px; font-style:italic; }

/* La distanza in evidenza, in monospazio: è il numero su cui si decide,
   e incolonnato si confronta a colpo d'occhio. */
.mg-metri{
  flex:none; align-self:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  color:var(--route);
  white-space:nowrap;
}

.mg-vuoto, .mg-altri{
  font-size:12.5px; color:var(--muted); padding:8px 2px; line-height:1.45;
}

/* ⬇️ NUOVO (17/08/2026): il collegamento salvato a mano sul luogo — vedi
   js/modules/poi-collegamento.js. Solo dove c'è: 254 luoghi su 377.
   Stessa misura del testo di servizio che gli sta accanto, ma col colore
   del percorso, perché è l'unica cosa cliccabile su quella riga. */
.poi-link{
  color:var(--route);
  text-decoration:none;
  white-space:nowrap;
}
.poi-link:hover{ text-decoration:underline; }

/* Dentro al segnaposto invece è un comando vero, come "🧭 Naviga" che gli
   sta sotto nella v2: largo tutta la finestra e alto quanto un dito. */
.poi-link-riga{ margin-top:8px; }
.poi-link-comando{
  display:flex; width:100%; box-sizing:border-box;
  min-height:32px; align-items:center; justify-content:center; gap:6px;
  padding:5px 8px; font-size:12.5px; font-weight:600;
  color:var(--ink) !important; text-decoration:none !important;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
}
.poi-link-comando:hover{ border-color:var(--route); color:var(--route) !important; }