/* ==========================================================================
   ZakoGo — mappa.css (agente M-MA)

   Extra del solo modulo Mappa nell'era Leaflet: il riquadro della mappa OSM,
   i pin disegnati dentro un divIcon, i comandi sopra le pane di Leaflet,
   l'attribuzione, i filtri, la lista distanze e la scheda di dettaglio.

   Tutto il resto (card, chip, row, badge, squircle, bottoni) arriva da
   styles.css: qui non si ridefinisce nulla di condiviso.

   Nota sugli z-index: Leaflet usa 200-700 per le pane e 1000 per i suoi
   controlli. Il riquadro apre uno stacking context proprio (isolation), così
   quei numeri restano confinati e non superano tab bar, FAB e sheet dell'app.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette delle categorie POI — stessi token dell'app
   -------------------------------------------------------------------------- */

[data-poi="ristoranti"] { --c: var(--sunset);   --c-ink: var(--sunset-ink); --c-tint: var(--sunset-tint); }
[data-poi="attrazioni"] { --c: var(--violet);   --c-ink: var(--violet-ink); --c-tint: var(--violet-tint); }
[data-poi="sentieri"]   { --c: var(--meadow);   --c-ink: var(--meadow-ink); --c-tint: var(--meadow-tint); }
[data-poi="servizi"]    { --c: var(--sky);      --c-ink: var(--sky-ink);    --c-tint: var(--sky-tint); }
[data-poi="itinerario"] { --c: var(--pine-700); --c-ink: var(--pine-900);   --c-tint: var(--pine-tint); }
/* Il chip "Tutti" non ha data-poi: senza questi valori lo stato attivo
   ricadrebbe sul fondo di default dei chip e diventerebbe invisibile. */
.map-filter[data-filter="tutti"] { --c: var(--pine-500); --c-ink: var(--pine-900); --c-tint: var(--pine-tint); }

/* --------------------------------------------------------------------------
   2. Il riquadro della mappa
   -------------------------------------------------------------------------- */

.mappa { display: block; }

.map-stage {
  position: relative;
  isolation: isolate;          /* confina gli z-index di Leaflet */
  height: 55dvh;
  min-height: 280px;
  max-height: 470px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  background: var(--snow);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@supports not (height: 55dvh) {
  .map-stage { height: 55vh; }
}

.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   3. Leaflet dentro casa nostra
   --------------------------------------------------------------------------
   leaflet.css impone un font Helvetica 12px e un fondo grigio: qui torna a
   parlare la lingua dell'app.
   -------------------------------------------------------------------------- */

.map-stage .leaflet-container {
  font: inherit;
  color: var(--pine-900);
  background: var(--snow);
  outline-offset: -3px;
}
.map-stage .leaflet-container a { color: var(--pine-700); }

/* Nessun asset di default: i marker sono divIcon disegnati da noi. */
.map-stage .leaflet-marker-icon,
.map-stage .leaflet-marker-shadow {
  border: 0;
  background: none;
}

/* --- attribuzione: obbligatoria e sempre visibile, ma discreta --- */

.map-stage .leaflet-control-attribution {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(250, 249, 245, .93);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
  box-shadow: 0 1px 4px rgba(18, 63, 46, .16);
}
.map-stage .leaflet-control-attribution a {
  color: var(--pine-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-stage .leaflet-control-attribution a:focus-visible { outline-offset: 1px; }

/* --------------------------------------------------------------------------
   4. Pin — goccia travel-pop dentro un divIcon 34x44
   --------------------------------------------------------------------------
   L'ancora è la punta. Leaflet posiziona l'icona con una transform propria:
   la scala del pin selezionato va applicata all'<svg> interno, mai al div.
   -------------------------------------------------------------------------- */

.zpin { background: none; border: 0; }

.pin-wrap {
  position: absolute;
  inset: 0;
  display: block;
}

/* bersaglio 44x50 senza gonfiare il disegno */
.pin-hit {
  position: absolute;
  inset: 0 -5px -6px -5px;
  display: block;
  background: transparent;
}

.pin-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 17px 42px;   /* la punta */
  transition: transform 160ms var(--ease-out);
}

.pin-ring {
  fill: none;
  stroke: none;
  stroke-width: 3;
}

.pin-shadow { fill: var(--pine-900); fill-opacity: .2; stroke: none; }

.pin-body {
  fill: var(--c, var(--pine-700));
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.pin-glyph { color: #fff; }
.pin-glyph svg { stroke-width: 3; }

.pin-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  fill: #fff;
  stroke: none;
}

.zpin.is-done .pin-body { fill-opacity: .62; }

/* selezione: anello sole + una crescita appena percettibile */
.zpin.is-selected .pin-ring { stroke: var(--sun); }
.zpin.is-selected .pin-svg { transform: scale(1.12); }
.zpin.is-selected .pin-shadow { fill-opacity: .3; }

.zpin:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. Posizione dell'utente
   -------------------------------------------------------------------------- */

.me-icon { background: none; border: 0; }

.me-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 2px var(--sky), 0 2px 6px rgba(18, 63, 46, .22);
}

.me-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sky);
  animation: map-pulse 1900ms var(--ease-out) infinite;
}

@keyframes map-pulse {
  0%   { transform: scale(.72); opacity: 1; }
  55%  { transform: scale(1.1);  opacity: .82; }
  100% { transform: scale(.72); opacity: 1; }
}

/* alone di precisione: è un <path> di Leaflet, gli attributi li vince il CSS */
.me-acc {
  fill: var(--sky);
  fill-opacity: .14;
  stroke: var(--sky);
  stroke-opacity: .5;
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   6. Comandi sopra la mappa
   --------------------------------------------------------------------------
   Stanno FUORI dal contenitore Leaflet (fratelli di .map-canvas): così il
   trascinamento della mappa non li vede mai, e loro stanno sopra le pane.
   -------------------------------------------------------------------------- */

.map-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.map-tool {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, .95);
  color: var(--pine-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(18, 63, 46, .16);
  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.map-tool:active { transform: scale(.94); background: var(--pine-100); }
.map-tool:focus-visible { outline-offset: 2px; }
.map-tool-wide { padding: 0 12px; letter-spacing: .2px; }

/* il set icone non ha un "meno": lo disegniamo con lo stesso tratto tondo */
.map-minus {
  display: block;
  width: 16px;
  height: 2.6px;
  border-radius: 2px;
  background: currentColor;
}

.map-locate {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1100;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15.5px;
}
.map-locate.is-on { background: var(--pine-500); }
.map-locate.is-busy { opacity: .85; }
.map-locate:disabled { pointer-events: none; }

/* Leaflet non si è caricato: lo si dice, non si finge una mappa. */
.map-nomap { align-items: flex-start; }
.map-nomap .icn { color: var(--sunset-ink); flex: 0 0 auto; margin-top: 1px; }

/* --------------------------------------------------------------------------
   7. Filtri
   -------------------------------------------------------------------------- */

.map-filters {
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
}
.map-filter { flex: 0 0 auto; }
.map-filter .icn { color: var(--c-ink, var(--ink-soft)); }
.map-filter.is-on .icn { color: var(--c-ink, var(--pine-900)); }

/* --------------------------------------------------------------------------
   8. Lista
   -------------------------------------------------------------------------- */

.map-listwrap { margin-top: 14px; }
.map-listhead { margin: 0 2px 8px; }

.map-row .row-main { min-width: 0; }
.map-row-note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-dist {
  font-size: 15px;
  color: var(--pine-900);
  white-space: nowrap;
}
.map-row.is-done .row-title { text-decoration-color: var(--pine-500); }

.map-listwrap .empty-inline { align-items: flex-start; }
.map-listwrap .empty-inline .icn { color: var(--pine-500); flex: 0 0 auto; margin-top: 1px; }

/* --------------------------------------------------------------------------
   9. Scheda di dettaglio (in basso, sopra la tab bar — non è una sheet)
   -------------------------------------------------------------------------- */

.map-detail {
  position: fixed;
  left: 0;
  right: 0;
  /* --tabbar-real è misurata dal vivo e include già la safe-area;
     l'inset si somma solo nel ripiego statico. */
  bottom: var(--tabbar-real, calc(var(--tabbar-h) + var(--safe-b)));
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 calc(10px + var(--safe-r)) 10px calc(10px + var(--safe-l));
  pointer-events: none;
}
.map-detail[hidden] { display: none; }

.map-detail-card {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  max-height: 52dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-float);
  border: 1.5px solid var(--line);
  animation: map-detail-up 240ms var(--ease-out) both;
}
@keyframes map-detail-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.map-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.map-detail-heading { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.map-detail-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}
.map-detail-heading .badge { margin-top: 5px; }
.map-detail-head .btn-icon { margin: -6px -8px 0 0; }

.map-detail-note {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.map-detail-dist {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.map-detail-dist .num { font-size: 17px; color: var(--pine-900); }

.map-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.map-detail-actions .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; }

/* --------------------------------------------------------------------------
   9bis. Scheda luogo — la lettura lunga (SPEC §8.2bis)
   --------------------------------------------------------------------------
   Vive dentro la .sheet-body di ui.js: contenitore, scorrimento interno e
   piede appiccicato restano di styles.css, qui si veste solo il contenuto.
   Ordine sullo schermo: foto → credito → badge → voto → descrizione →
   piatti → consiglio e nota → distanza.
   -------------------------------------------------------------------------- */

.poi-photo {
  height: 200px;
  margin-top: 4px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  background: var(--pine-050);   /* il posto della foto si vede anche prima che arrivi */
  overflow: hidden;
}
.poi-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Credito di licenza: minuto, ma è un obbligo — e un bersaglio da 44px.
   L'underline sta sul solo testo, non sull'intera riga cliccabile. */
.poi-credit,
.poi-credit-static {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  text-align: left;
}
.poi-credit { border-radius: var(--radius-sm); }
.poi-credit > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.poi-credit:active { color: var(--pine-900); }
.poi-credit:focus-visible { outline-offset: 2px; }

.poi-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.poi-credit + .poi-headline,
.poi-credit-static + .poi-headline { margin-top: 2px; }

/* Voto dei ristoranti: una stella piena, il numero grande, la fonte in piccolo
   sotto — perché è un'istantanea, non un verdetto dell'app. */
.poi-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 13px;
}
.poi-star {
  align-self: center;
  display: inline-flex;
  color: var(--sun);
}
.poi-star .icn { width: 22px; height: 22px; }
.poi-star .icn path {
  fill: var(--sun);
  fill-opacity: 1;
  stroke: var(--sun-700);
  stroke-width: 1.6;
}
.poi-voto {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--pine-900);
}
.poi-voto-src {
  flex: 1 1 100%;
  color: var(--ink-soft);
}

.poi-desc {
  margin-top: 13px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--pine-900);
  overflow-wrap: break-word;
}

.poi-sub {
  margin: 16px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pine-900);
}

.poi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* i nomi dei piatti sono lunghi: a 360px devono andare a capo, non uscire */
.poi-chips .chip {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

/* Le righe pratiche (consiglio, nota) stanno in una zona loro: la linea le
   separa dal racconto, così non si leggono come coda della descrizione. */
.poi-notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.poi-help { margin-top: 13px; }
.poi-help + .poi-help { margin-top: 9px; }
.poi-notes > .poi-help:first-child { margin-top: 0; }

.poi-dist {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.poi-dist .num { font-size: 17px; color: var(--pine-900); }

/* Piede della scheda: "Apri su Google Maps" è lungo e affiancato andrebbe a
   due righe su ogni telefono. Meglio due bottoni pieni, uno sopra l'altro:
   la gerarchia resta leggibile e il bersaglio è largo quanto la sheet. */
.sheet-foot:has(.poi-act) { flex-direction: column; gap: 8px; }
.poi-act {
  width: 100%;
  padding: 0 14px;
  line-height: 1.2;
}
.poi-act > span { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   9ter. Foto da link remoto (SPEC §11.3)
   --------------------------------------------------------------------------
   Vale per la scheda di un luogo aggiunto dalla chat e per la sheet di lettura
   di un'attività: stesso linguaggio della foto POI qui sopra (angolo lg, filo
   sottile, fondo pino chiarissimo che fa da posto in attesa), ma con
   proporzione fissa invece di un'altezza fissa — la figura occupa lo spazio
   prima che l'immagine arrivi, così la scheda non salta con la rete lenta.
   Le classi vivono in mappa.css perché è qui che sta il resto del linguaggio
   fotografico, ma valgono ovunque: index.html collega tutti i CSS.
   Chi disegna nasconde l'intera <figure> sull'evento error (figura.hidden =
   true): niente icona rotta, niente messaggio.
   -------------------------------------------------------------------------- */

.foto-link {
  /* niente `display`: così `hidden` continua a funzionare da solo */
  margin: 4px 0 0;
  padding: 0;
}

.foto-link-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  background: var(--pine-050);
}

/* Didascalia di onestà ("Immagine indicata in chat, non verificata"): stessa
   misura e stesso colore di .tiny .muted, che restano applicabili sopra. */
.foto-link-cap {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   10. Hover — solo puntatore fine
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .map-tool:hover { background: #fff; border-color: var(--pine-500); }
  .map-locate.is-on:hover { background: var(--pine-700); }
  .poi-credit:hover { color: var(--pine-900); }
  .zpin:hover .pin-body { stroke: var(--pine-900); }
  .zpin:hover .pin-svg { transform: scale(1.06); }
  .zpin.is-selected:hover .pin-svg { transform: scale(1.12); }
}

/* --------------------------------------------------------------------------
   11. Schermi stretti / larghi
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {
  .map-stage { min-height: 260px; }
  .map-locate { padding: 0 12px; font-size: 15px; }
  .map-stage .leaflet-control-attribution { padding: 2px 7px; font-size: 10.5px; }
  .map-detail-actions { flex-direction: column; }
  .map-detail-actions .btn { width: 100%; }
}

@media (min-width: 600px) {
  .map-stage { max-height: 520px; }
}

/* --------------------------------------------------------------------------
   12. Movimento ridotto — niente pulsazione, niente scorrimenti
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .me-dot { animation: none !important; transform: none !important; }
  .pin-svg { transition: none !important; }
  .map-detail-card { animation: none !important; }
}

/* --------------------------------------------------------------------------
   13. Orari di oggi nella scheda (SPEC §8.2ter)
   --------------------------------------------------------------------------
   Una riga sola, con l'orologio davanti e la data del rilevamento in coda:
   l'orario è un'informazione datata e deve dichiararlo dov'è scritto.
   -------------------------------------------------------------------------- */

.poi-orari {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 13px;
  font-size: 15px;
  color: var(--ink-soft);
}
.poi-orari .icn { flex: 0 0 auto; color: var(--pine-700); }
.poi-orari-txt { color: var(--pine-900); }
.poi-orari-val { font-size: 17px; color: var(--pine-900); }
.poi-orari.is-chiuso .icn { color: var(--ink-faint); }
.poi-orari.is-chiuso .poi-orari-val { color: var(--ink-soft); font-weight: 600; }
.poi-orari-src { flex: 1 1 100%; }

/* --------------------------------------------------------------------------
   14. Pasti — la sheet "dove mangiamo?" (modulo pasti.js)
   --------------------------------------------------------------------------
   Righe a due colonne: a sinistra il locale (bersaglio largo che apre la
   scheda), a destra la distanza e "Scegli". Due bottoni affiancati e non
   annidati: il tocco lungo la riga non deve mai far partire l'azione
   sbagliata.
   -------------------------------------------------------------------------- */

.pasti-testa { margin: 0 0 10px; }

.pasti-list .pasti-row { align-items: stretch; gap: 10px; padding: 8px 10px 8px 14px; }

/* Il bersaglio principale: tutta la parte testuale della riga. */
.pasti-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-sm);
}
.pasti-main:active { transform: scale(.995); }
.pasti-main:focus-visible { outline-offset: 1px; }

.pasti-nome {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}

.pasti-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.pasti-voto {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sun-700);
}
.pasti-voto .icn { color: var(--sun); }
.pasti-voto .icn path {
  fill: var(--sun);
  fill-opacity: 1;
  stroke: var(--sun-700);
  stroke-width: 1.8;
}
.pasti-voto .num { font-size: 14px; color: var(--pine-900); }
.pasti-cucina { overflow-wrap: anywhere; }

.pasti-aperto {
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--meadow-ink);
}

/* Colonna destra: distanza sopra, azione sotto, entrambe allineate a destra. */
.pasti-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}
.pasti-dist {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.pasti-km { font-size: 16px; color: var(--pine-900); }
.pasti-base {
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.pasti-pick {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14.5px;
  white-space: nowrap;
}
.pasti-pick.is-gia {
  color: var(--pine-500);
  opacity: 1;                 /* non è un bottone spento: è uno stato raggiunto */
  background: var(--pine-050);
}
.pasti-pick.is-gia .icn { color: var(--pine-500); }

.pasti-empty { margin: 4px 0 0; align-items: flex-start; }
.pasti-empty .icn { flex: 0 0 auto; color: var(--sunset-ink); }

/* Piede: il bottone largo quanto la sheet, sotto la riga di onestà. */
.sheet-foot:has(.pasti-foot) { flex-direction: column; align-items: stretch; }
.pasti-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.pasti-locate { width: 100%; }
.pasti-locate.is-busy { opacity: .75; }
.pasti-onesta { margin: 0; text-align: center; }

/* A 360px le due colonne restano: impilarle raddoppierebbe l'altezza di ogni
   riga e ne farebbe stare due sullo schermo. Si stringono i margini e il
   bottone, il nome lungo va a capo per conto suo. */
@media (max-width: 379.98px) {
  .pasti-list .pasti-row { gap: 8px; padding: 8px 8px 8px 12px; }
  .pasti-pick { padding: 0 11px; font-size: 14px; }
  .pasti-km { font-size: 15px; }
}

@media (hover: hover) and (pointer: fine) {
  .pasti-main:hover .pasti-nome { color: var(--pine-700); }
}

@media (prefers-reduced-motion: reduce) {
  .pasti-main:active { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Luoghi aggiunti dalla chat (SPEC §10.1)
   --------------------------------------------------------------------------
   Stesso colore di categoria dei luoghi curati — sono posti veri, non una
   categoria a parte — ma con il contorno tratteggiato: il pin dichiara da solo
   che quel dato non è stato verificato da nessuno. Niente colore "di allarme",
   niente opacità: sarebbero un giudizio, e il giudizio lo dà la scheda.
   -------------------------------------------------------------------------- */

.zpin-utente .pin-ring {
  stroke: var(--c, var(--pine-700));
  stroke-dasharray: 3.4 3.6;
  stroke-linecap: round;
}
/* Selezionato, l'anello passa al sole come per gli altri pin, ma resta
   tratteggiato: la provenienza non sparisce quando lo si tocca. */
.zpin-utente.is-selected .pin-ring { stroke: var(--sun); }

/* Il badge "da chat": violetto quieto, lo stesso accento che l'app usa per
   tutto ciò che arriva dall'AI (SPEC §9.8). */
.badge-chat {
  background: var(--violet-tint);
  color: var(--violet-ink);
}
.badge-chat .icn { color: var(--violet-ink); }

/* --- lista: il contrassegno sta nella riga secondaria, prima della nota --- */

.map-row.is-utente .map-row-note {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.map-row-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-row-chat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--violet-tint);
  color: var(--violet-ink);
  font-weight: 700;
  letter-spacing: .1px;
}
.map-row-chat .icn { width: 13px; height: 13px; color: var(--violet-ink); }

/* --- card in basso: due badge affiancati, che vanno a capo a 360px --- */

.map-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.map-detail-heading .map-detail-badges .badge { margin-top: 0; }

/* --- scheda --- */

.poi-headline { flex-wrap: wrap; gap: 6px; }

/* Ristorante suggerito in chat senza orari: la riga sta accanto all'icona
   dell'orologio, come le altre righe di servizio della scheda. */
.poi-noorari {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
}
.poi-noorari .icn { flex: 0 0 auto; margin-top: 1px; color: var(--sunset-ink); }

/* "Rimuovi" è l'ultima azione del piede: presente, mai la più vistosa.
   Diventa rosso solo al tocco, quando la scelta è già stata fatta. */
.poi-rimuovi { color: var(--berry-ink); }
.poi-rimuovi .icn { color: var(--berry-ink); }
.poi-rimuovi:active { background: var(--berry-tint); }

/* --------------------------------------------------------------------------
   16. Pasti — il gruppo "Senza orari verificati"
   -------------------------------------------------------------------------- */

.pasti-chat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--violet-ink);
  font-weight: 700;
}
.pasti-chat .icn { width: 13px; height: 13px; color: var(--violet-ink); }

.pasti-row.is-senzaorari .pasti-aperto { color: var(--ink-faint); font-weight: 600; }

.pasti-senza {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

/* Il triangolino di sistema non è nel nostro linguaggio: via, e al suo posto
   la chevron disegnata di icons.js. */
.pasti-senza > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--pine-900);
}
.pasti-senza > summary::-webkit-details-marker { display: none; }
.pasti-senza > summary:focus-visible { outline-offset: 2px; }
.pasti-senza > summary:active { background: var(--pine-050); }

.pasti-senza-txt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.pasti-senza-txt .count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.pasti-senza-chev {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ink-soft);
  transition: transform 160ms var(--ease-out);
}
.pasti-senza[open] .pasti-senza-chev { transform: rotate(180deg); }

.pasti-senza-nota { margin: 0 2px 10px; }

@media (hover: hover) and (pointer: fine) {
  .pasti-senza > summary:hover { background: var(--pine-050); }
  .poi-rimuovi:hover { background: var(--berry-tint); }
}

@media (prefers-reduced-motion: reduce) {
  .pasti-senza-chev { transition: none; }
}