/* Mappa dei punti di interesse - foglio a se'.
   Sta fuori da style.css di proposito: lo carica una pagina sola, e style.css
   e' servito su ogni pagina in quattro lingue. Tutti i colori passano dai token
   del sito, cosi' il tema scuro viene dietro senza un secondo elenco di tinte.
   I colori delle linee arrivano invece dal JSON, via --c: sono dati, non stile. */

/* Il blocco: a sinistra i comandi e la scheda, a destra il disegno. Lo schema e'
   quasi quadrato e la finestra e' larga e bassa: senza la colonna di fianco
   resterebbero due fasce vuote ai lati e una mappa piccola in mezzo. */
.poi-blocco {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1080px) {
  .poi-blocco {
    grid-template-columns: 296px minmax(0, 1fr);
  }
}

.poi-lato {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.poi-aiuto {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.poi-cerca {
  position: relative;
}

.poi-cerca input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.poi-cerca input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

#poi-suggerimenti {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  max-height: 300px;
  overflow: auto;
}

#poi-suggerimenti button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#poi-suggerimenti button:hover,
#poi-suggerimenti button:focus-visible {
  background: var(--brand-100);
}

#poi-suggerimenti small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.poi-vuoto {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 14px;
}

/* ------------------------------------------------------------- la legenda */

#poi-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 1080px) {
  #poi-legenda {
    flex-direction: column;
    gap: 6px;
  }

  .poi-chip {
    justify-content: flex-start;
  }

  .poi-chip b {
    margin-left: auto;
  }
}

.poi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .18s var(--e), border-color .18s var(--e);
}

.poi-chip i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}

.poi-chip b {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.poi-chip[aria-pressed="true"] {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
}

.poi-chip.spenta {
  opacity: .42;
}

.poi-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- la tela */

.poi-tela {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

.poi-svg {
  display: block;
  width: 100%;
  height: clamp(420px, 74vh, 860px);
  touch-action: none;
  cursor: grab;
  background: var(--surface-2);
}

.poi-svg.trascino {
  cursor: grabbing;
}

.poi-mare {
  fill: var(--brand-100);
}

.poi-battigia {
  stroke: var(--brand-300);
  stroke-width: 2.5;
  opacity: .6;
}

.poi-fiume {
  stroke: var(--brand-100);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.poi-acqua-eti {
  fill: var(--accent-txt);
  opacity: .55;
  font-family: var(--ff-display);
  font-size: calc(26px / var(--poi-k, 1));
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

.poi-linea {
  transition: opacity .22s var(--e);
}

.poi-linea.smorzata {
  opacity: .13;
}

.poi-disco {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3.4;
}

.poi-fermata.scambio .poi-disco {
  stroke-width: 4.2;
}

.poi-presa {
  fill: transparent;
  cursor: pointer;
}

.poi-eti {
  fill: var(--ink);
  font-family: var(--ff);
  font-size: calc(15px / var(--poi-k, 1));
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--surface-2);
  stroke-width: calc(4px / var(--poi-k, 1));
  stroke-linejoin: round;
  pointer-events: none;
}

.poi-eti.forte {
  font-size: calc(16px / var(--poi-k, 1));
  font-weight: 800;
}

.poi-fermata {
  transition: opacity .22s var(--e);
}

.poi-fermata.smorzata {
  opacity: .16;
}

.poi-fermata.sopra .poi-disco,
.poi-fermata.scelta .poi-disco {
  stroke: var(--brand-600);
  r: 13;
}

.poi-fermata.sopra .poi-eti,
.poi-fermata.scelta .poi-eti {
  fill: var(--brand-700);
}

.poi-fermata:focus {
  outline: none;
}

.poi-fermata:focus-visible .poi-disco {
  stroke: var(--focus);
  stroke-width: 5;
}

/* ---------------------------------------------------------- i comandi */

.poi-comandi {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

.poi-comandi button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font: 600 19px/1 var(--ff);
  cursor: pointer;
}

.poi-comandi button:hover {
  background: var(--surface);
}

.poi-comandi button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.poi-comandi .reset {
  font-size: 13px;
  font-weight: 700;
}

/* -------------------------------------------------------------- la scheda */

/* Sopra i 1080 la scheda sta nella colonna, in fila con la legenda. Sotto, dove
   la colonna finisce sopra la mappa, diventa un foglio che sale dal basso: la
   mappa resta dov'e' e la scheda arriva senza far saltare la pagina. */
#poi-scheda {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--line);
  border-width: 1px 0 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: var(--shadow-l);
  max-height: 62vh;
  overflow: auto;
}

@media (min-width: 1080px) {
  #poi-scheda {
    position: static;
    padding: 16px 18px 18px;
    border-width: 1px;
    border-radius: var(--r-l);
    box-shadow: var(--shadow-s);
    max-height: none;
  }
}

.poi-scheda-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.poi-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-txt);
}

.poi-chiudi {
  width: 30px;
  height: 30px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.poi-chiudi:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.poi-chiudi:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

#poi-scheda h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.22;
}

.poi-desc {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

.poi-righe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.poi-riga {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 12.5px/1 var(--ff);
  cursor: pointer;
}

.poi-riga i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.poi-riga:hover {
  border-color: var(--c);
}

.poi-riga:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.poi-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------- attesa */

.poi-attesa {
  display: grid;
  place-items: center;
  height: clamp(420px, 74vh, 860px);
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.poi-guasto {
  color: var(--ink-2);
}

/* --------------------------------------------------------------- elenco */

#poi-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.poi-elenco-linea h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  font-size: 17px;
}

.poi-elenco-linea h3 i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}

.poi-elenco-dida {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.poi-elenco-linea ol {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  border-left: 3px solid var(--c);
}

.poi-elenco-linea li {
  position: relative;
}

.poi-elenco-linea button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 8px 6px 14px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}

.poi-elenco-linea button::before {
  content: "";
  position: absolute;
  left: -6.5px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--c);
}

.poi-elenco-linea button:hover,
.poi-elenco-linea button:focus-visible {
  background: var(--bg-2);
}

.poi-dove {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.poi-scambio-eti {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--brand-100);
  color: var(--accent-txt);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- scuro */

[data-theme="dark"] .poi-mare {
  fill: #0B2B3D;
}

[data-theme="dark"] .poi-battigia {
  stroke: #1B4D69;
}

[data-theme="dark"] .poi-fiume {
  stroke: #0B2B3D;
}

[data-theme="dark"] .poi-disco {
  fill: #0E1B24;
  stroke: #E8F2F8;
}

[data-theme="dark"] .poi-eti {
  stroke: var(--surface-2);
}

[data-theme="dark"] .poi-fermata.sopra .poi-disco,
[data-theme="dark"] .poi-fermata.scelta .poi-disco {
  stroke: var(--brand-300);
}

[data-theme="dark"] .poi-fermata.sopra .poi-eti,
[data-theme="dark"] .poi-fermata.scelta .poi-eti {
  fill: var(--brand-300);
}

[data-theme="dark"] .poi-elenco-linea button::before {
  background: var(--surface);
}

/* ---------------------------------------------------------------- stretto */

/* Sul telefono lo schema intero sta in poche centinaia di pixel: a 15 unita' i
   nomi non si leggerebbero. Si ingrandiscono, e la disposizione si adegua da
   sola perche' la larghezza la misura il browser dopo aver applicato il CSS. */
@media (max-width: 760px) {
  .poi-eti {
    font-size: calc(22px / var(--poi-k, 1));
    stroke-width: calc(5px / var(--poi-k, 1));
  }

  .poi-eti.forte {
    font-size: calc(24px / var(--poi-k, 1));
  }
}

@media (max-width: 1079px) {
  .poi-blocco.con-scheda .poi-svg {
    height: clamp(300px, 38vh, 460px);
  }
}

/* ======================================================== dove sono / qui */

/* Il mirino: stesso corpo degli altri comandi, ma pieno di colore. E' l'unico
   dei quattro che fa una cosa al mondo fuori dalla pagina (chiede la posizione)
   e deve leggersi come un'azione, non come uno zoom. */
.poi-comandi .qui {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.poi-comandi .qui:hover { background: var(--brand-600); border-color: var(--brand-600); }
.poi-comandi .qui svg { width: 20px; height: 20px; }
.poi-comandi .qui[hidden] { display: none; }

/* La fermata trovata. Due cerchi concentrici che pulsano: si vede da lontano e
   non si confonde con la fermata selezionata, che invece e' un bordo spesso. */
/* Il disco si riempie invece di ingrossare il bordo: un anello piu' spesso e'
   quello che la mappa usa gia' per le fermate di scambio, e in mezzo a
   sessantuno cerchi bianchi non si distingueva. Pieno, e' l'unico. */
.poi-fermata.qui .poi-disco {
  fill: var(--brand-600);
  stroke: var(--surface);
  stroke-width: 4;
  r: 14;
}

.poi-fermata.qui .poi-eti { font-weight: 800; }

.poi-alone {
  fill: none;
  stroke: var(--brand-600);
  stroke-width: 3;
  opacity: 0;
}

.poi-fermata.qui .poi-alone { animation: poi-pulsa 2.1s var(--e) infinite; }

/* L'onda non si spegne del tutto: a zero, uno scatto dello schermo preso nel
   momento sbagliato non mostrerebbe niente. */
@keyframes poi-pulsa {
  0% { r: 15; opacity: .9; }
  100% { r: 33; opacity: .12; }
}

.poi-qui-esito {
  position: absolute;
  left: 12px;
  right: 64px;
  top: 12px;
  z-index: 3;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-600);
  border-radius: var(--r-m);
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-s);
}

.poi-qui-esito.guasto { border-left-color: var(--amber); }
.poi-qui-esito[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .poi-fermata.qui .poi-alone { animation: none; opacity: .55; r: 22; }
}

/* ============================================================ vista chiosco */

/* punti-di-interesse.html?vista=mappa - quello che si apre inquadrando i QR
   dei pannelli in strada. Non e' una pagina a parte: e' la stessa, con il sito
   intorno spento. Cosi' i dati, il disegno e i filtri restano in un posto solo,
   e un codice stampato non si rompe se un domani la pagina cambia struttura.

   L'attributo data-vista lo mette la pagina nel <head>, prima che il CSS
   dipinga: se lo mettesse il JS differito si vedrebbe il sito intero per un
   istante e poi sparire. */

.poi-kiosco-testa,
.poi-kiosco-piede { display: none; }

[data-vista="mappa"] .poi-kiosco-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--c, var(--brand-700));
}

[data-vista="mappa"] #poi-filtro {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-vista="mappa"] #poi-filtro b {
  color: var(--ink);
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
}

[data-vista="mappa"] #poi-filtro span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.poi-kiosco-via {
  flex: none;
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  white-space: nowrap;
}

.poi-kiosco-via:hover { background: var(--surface-2); }

[data-vista="mappa"] .poi-kiosco-piede {
  display: block;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

[data-vista="mappa"] .poi-kiosco-piede a { color: inherit; }

/* Quello che sparisce: il sito intorno e la pagina distesa. La mappa, la
   legenda, la ricerca e la scheda di una fermata restano - sono la parte
   interattiva, che e' il motivo per cui il QR esiste. */
[data-vista="mappa"] .phero,
[data-vista="mappa"] #poi-elenco,
[data-vista="mappa"] .poi-blocco ~ .as-h3,
[data-vista="mappa"] .sec > .wrap > .grid,
[data-vista="mappa"] .sec > .wrap > p:not(.poi-kiosco-piede):not(#poi-avviso),
[data-vista="mappa"] .sec > .wrap > h2 { display: none; }

[data-vista="mappa"] .sec { padding: 14px 0 16px; }

/* Sotto i 1080 la colonna dei comandi sta sopra la mappa: sulla pagina intera
   va bene, nella vista dei QR no. Chi inquadra un codice in strada deve vedere
   la cartina subito, non la ricerca e la legenda con il disegno sotto la
   piega. Qui la mappa passa prima e i comandi la seguono. */
@media (max-width: 1079px) {
  [data-vista="mappa"] .poi-tela { order: 1; }
  [data-vista="mappa"] .poi-lato { order: 2; }
  [data-vista="mappa"] .poi-svg { height: clamp(340px, calc(100vh - 210px), 1100px); }
}

/* In alto non c'e' piu' l'intestazione appiccicata, quindi il disegno puo'
   prendersi quasi tutta l'altezza utile. Le due barre e i margini valgono
   circa 150px: il calc() lascia quelli e da' il resto alla mappa. */
[data-vista="mappa"] .poi-svg {
  height: clamp(340px, calc(100vh - 150px), 1100px);
}

@media (min-width: 1080px) {
  [data-vista="mappa"] .poi-svg { height: clamp(420px, calc(100vh - 140px), 1100px); }
}

/* Una linea che col mezzo scelto non ha nessuna fermata: resta al suo posto e
   si dichiara vuota. Farla sparire lascerebbe chi guarda a chiedersi se la
   linea non esiste o se e' la mappa che si e' rotta. */
.poi-chip.vuota {
  opacity: .42;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .poi-linea,
  .poi-fermata,
  .poi-chip {
    transition: none;
  }
}

/* ---------- qui vicino: le distanze fra i punti ----------
   Le distanze stanno sulla scheda e non sul disegno. Sul disegno sarebbero
   bugie: la mappa e' schematica, due centimetri di tela non sono due
   centimetri di citta'. */
.poi-vicino{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.poi-da-te{margin:0 0 12px;padding:8px 11px;border-radius:var(--r-m);
  background:var(--brand-100);color:var(--accent-txt);font-size:.86rem}
.poi-da-te b{font-weight:800}
.poi-vicino-t{margin:0 0 8px;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:800}
.poi-vicino-l{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.poi-vicino-b{display:flex;align-items:baseline;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  padding:7px 9px;border-radius:var(--r-s);color:var(--ink);transition:background .2s}
.poi-vicino-b:hover{background:var(--surface-2)}
.poi-vicino-b:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.poi-vicino-n{flex:1;font-size:.88rem;line-height:1.35}
.poi-vicino-d{flex:none;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.poi-vicino-n2{margin:9px 0 0;font-size:.74rem;color:var(--muted)}

/* ---------- leggenda ----------
   Sotto i filtri, non al posto loro: quelli dicono quante fermate ha una
   linea, questa dice che cosa vogliono dire i segni. */
.poi-chiave{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.poi-chiave-segni{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.poi-chiave-segni li{display:flex;align-items:center;gap:10px;
  font-size:.82rem;color:var(--ink-2);line-height:1.35}
.poi-segno{flex:none;display:block;border-radius:50%;background:var(--surface);
  border:3px solid var(--muted)}
.poi-segno-pallino{width:12px;height:12px}
.poi-segno-scambio{width:18px;height:18px}
.poi-segno-qui{width:18px;height:18px;background:var(--brand-600);
  border-color:var(--surface);box-shadow:0 0 0 2px var(--brand-600)}
.poi-chiave-t{margin:18px 0 9px;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:800}
.poi-chiave-cat{display:flex;flex-wrap:wrap;gap:6px}
.poi-chiave-tag{display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line);font-size:.76rem;color:var(--ink-2)}
.poi-chiave-tag b{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

/* Nella vista dei QR la colonna e' gia' stretta e la mappa e' tutto: la
   leggenda li' sarebbe una colonna di testo davanti a chi ha in mano il
   telefono in strada. */
[data-vista="mappa"] .poi-chiave{display:none}