/* MANIFESTO · MAPPA (cantiere MAPPA, v0.42) · la pelle della vista «Vicino» come mappa.
   Token del viewer (viewer.css): --vetro, --vetro-forte, --vetro-chiaro, --filo, --muto, --oro, --oro-ink, --luce, --notte,
   --f-ui (Manrope), --f-display (Fraunces), --ease, --dock, --safeT, --safeB. Un solo pulsante d'oro per schermata. */
#feed.mp-on > .mh, #feed.mp-on > #fl{ display:none !important; }
#mp{ position:absolute; inset:0; overflow:hidden; background:#070B16; color:#fff; --mp-y:52vh; touch-action:none; }
#mp .mp-mappa, #mp .mp-radar{ position:absolute; inset:0; width:100%; height:100%; }
#mp .maplibregl-canvas{ outline:none; }
#mp .maplibregl-ctrl-bottom-right, #mp .maplibregl-ctrl-bottom-left{ display:none; }

/* in alto: ricerca e chip, vetro sopra la mappa */
#mp .mp-su{ position:absolute; left:0; right:0; top:0; z-index:5; padding:calc(var(--safeT) + 10px) 0 0; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,22,.72),rgba(7,11,22,.0) 100%); }
#mp .mp-su > *{ pointer-events:auto; }
#mp .mp-cerca{ display:flex; align-items:center; gap:10px; margin:0 12px; height:50px; padding:0 8px 0 16px; border-radius:99px;
  background:rgba(12,17,32,.82); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px var(--filo), 0 8px 28px rgba(0,0,0,.45); }
#mp .mp-cerca svg{ width:20px; height:20px; color:var(--muto); flex:none; }
#mp .mp-cerca input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:#fff; font:600 16px var(--f-ui); -webkit-appearance:none; appearance:none; }
#mp .mp-cerca input::placeholder{ color:#9AA3BA; }
#mp .mp-cerca input::-webkit-search-cancel-button{ display:none; }
#mp .mp-qx{ width:36px; height:36px; border:0; border-radius:50%; background:var(--vetro-chiaro); color:#fff; display:grid; place-items:center; flex:none; }
#mp .mp-qx svg{ width:16px; height:16px; color:#fff; }
#mp .mp-chips{ display:flex; gap:8px; overflow-x:auto; padding:10px 12px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
#mp .mp-chips::-webkit-scrollbar{ display:none; }
#mp .mp-chip{ flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:0; border-radius:99px;
  background:rgba(12,17,32,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fff; font:700 14px var(--f-ui);
  box-shadow:inset 0 0 0 1px var(--filo), 0 4px 14px rgba(0,0,0,.3); white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease); }
#mp .mp-chip i{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 8px currentColor; }
#mp .mp-chip i.oro{ background:var(--oro); }
#mp .mp-chip.on{ background:#fff; color:#0A0F1C; box-shadow:0 4px 14px rgba(0,0,0,.3); }
#mp .mp-chip svg{ width:18px; height:18px; }

#mp .mp-avviso{ position:absolute; left:50%; transform:translateX(-50%); top:calc(var(--safeT) + 122px); z-index:4; max-width:90%; padding:8px 14px;
  border-radius:99px; background:rgba(8,12,24,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--muto); font:700 12.5px/1.3 var(--f-ui); text-align:center; box-shadow:inset 0 0 0 1px var(--filo); white-space:nowrap; }

/* tasti sulla mappa: seguono il bordo del foglio */
#mp .mp-tasti{ position:absolute; right:12px; z-index:3; top:calc(var(--mp-y) - 14px); transform:translateY(-100%); display:flex; flex-direction:column; gap:10px; transition:opacity .2s; }
#mp.mp-foglio-alto .mp-tasti, #mp.mp-foglio-alto .mp-attr{ opacity:0; pointer-events:none; }
#mp .mp-tasto{ width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(12,17,32,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--filo), 0 6px 20px rgba(0,0,0,.45); }
#mp .mp-tasto svg{ width:22px; height:22px; transition:transform .2s; }
#mp #mp-io svg{ transform:rotate(0deg); }
#mp #mp-io.on{ color:var(--luce); box-shadow:inset 0 0 0 1.5px rgba(255,244,214,.6), 0 6px 20px rgba(0,0,0,.45); }
#mp .mp-attr{ position:absolute; left:12px; z-index:3; top:calc(var(--mp-y) - 22px); font:600 10.5px/1 var(--f-ui); color:rgba(184,191,208,.78); text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; transition:opacity .2s; }
#mp .mp-attr a{ color:inherit; text-decoration:none; }

/* il foglio */
#mp .mp-foglio{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:6; transform:translate3d(0,52vh,0); transition:transform .34s var(--ease);
  background:rgba(10,14,27,.94); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border-radius:24px 24px 0 0; box-shadow:0 -1px 0 var(--filo), 0 -18px 50px rgba(0,0,0,.55); display:flex; flex-direction:column; will-change:transform; }
#mp .mp-presa{ flex:none; height:22px; display:grid; place-items:center; cursor:grab; }
#mp .mp-presa i{ width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,.28); }
#mp .mp-corpo{ flex:1; min-height:0; overflow:hidden; padding:0 0 calc(var(--dock) + var(--safeB) + 40px); overscroll-behavior:contain; }
#mp .mp-foglio.alto .mp-corpo{ overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
#mp .mp-testa{ padding:2px 18px 10px; }
#mp .mp-testa h2{ margin:0; font:900 22px/1.15 var(--f-display); letter-spacing:-.01em; }
#mp .mp-testa p{ margin:3px 0 0; color:var(--muto); font:600 13px/1.35 var(--f-ui); }

/* righe dell'elenco */
#mp .mp-lista{ padding:0 8px; }
#mp .mp-riga{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; background:none; color:#fff; padding:10px; border-radius:16px; font:inherit; position:relative; }
#mp .mp-riga + .mp-riga::before{ content:""; position:absolute; left:94px; right:10px; top:0; height:1px; background:rgba(255,255,255,.07); }
#mp .mp-riga:active{ background:rgba(255,255,255,.05); transform:none; }
#mp .mp-mini{ position:relative; flex:none; width:72px; height:72px; border-radius:14px; overflow:hidden; background:#0A0A0C; box-shadow:inset 0 0 0 1px var(--filo), 0 0 18px -6px var(--c); }
#mp .mp-mini::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c); box-shadow:0 0 10px var(--c); }
#mp .mp-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
#mp .mp-mini.vuota{ display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--c) 45%,transparent),#0A0D18 70%); }
#mp .mp-mini.vuota b{ font:900 28px var(--f-display); color:#fff; opacity:.92; }
#mp .mp-rt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#mp .mp-rt > b{ font:800 16px/1.25 var(--f-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mp .mp-r1, #mp .mp-r2{ display:flex; align-items:center; gap:5px; color:var(--muto); font:600 13px/1.35 var(--f-ui); white-space:nowrap; overflow:hidden; min-width:0; }
#mp .mp-r1 em, #mp .mp-r2 em{ font-style:normal; opacity:.5; }
#mp .mp-voto{ color:#fff; font-weight:700; } #mp .mp-voto i{ font-style:normal; color:#FFC23D; } #mp .mp-voto small{ color:var(--muto); font-weight:600; font-size:13px; }
#mp .mp-ap{ font-weight:800; } #mp .mp-ap.si{ color:#5BE38F; } #mp .mp-ap.presto{ color:#FFC23D; } #mp .mp-ap.no{ color:#FF7D70; }
#mp .mp-r2 .mp-ap + span::before{ content:"· "; color:var(--muto); }
#mp .mp-r3{ display:block; color:#F3DFA8; font:700 12.5px/1.3 var(--f-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mp .mp-r3 i{ display:inline-block; vertical-align:middle; margin:-2px 7px 0 0; width:7px; height:7px; border-radius:50%; background:var(--oro); box-shadow:0 0 8px var(--oro); }
#mp .mp-dist{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding-left:4px; }
#mp .mp-dist b{ font:800 14px var(--f-ui); color:#fff; } #mp .mp-dist small{ font:600 12px var(--f-ui); color:var(--muto); }
#mp .mp-riga.sk .mp-mini, #mp .mp-riga.sk .mp-rt b, #mp .mp-riga.sk .mp-rt span{ background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05)); background-size:200% 100%; animation:mpSk 1.2s linear infinite; }
#mp .mp-riga.sk .mp-rt b{ height:14px; width:60%; border-radius:6px; } #mp .mp-riga.sk .mp-rt span{ height:11px; width:40%; border-radius:6px; margin-top:6px; }
@keyframes mpSk{ to{ background-position:-200% 0; } }
#mp .mp-vuoto{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 18px; }
#mp .mp-vuoto .mp-chip{ background:var(--vetro-chiaro); }
#mp .mp-piede{ margin:14px 18px 0; color:var(--muto); font:600 13px var(--f-ui); } #mp .mp-piede a{ color:#fff; }

/* anteprima di un'attività */
#mp .mp-ant{ padding:0 0 8px; }
#mp .mp-testa-ant{ display:flex; align-items:flex-start; gap:10px; }
#mp .mp-testa-ant h2, #mp .mp-testa-ant > div{ flex:1; min-width:0; }
#mp .mp-testa-ant h2{ font-size:26px; }
#mp .mp-x{ flex:none; width:34px; height:34px; border:0; border-radius:50%; background:var(--vetro-chiaro); box-shadow:inset 0 0 0 1px var(--filo); color:#fff; display:grid; place-items:center; margin-top:-2px; }
#mp .mp-x svg{ width:16px; height:16px; }
#mp .mp-ant > .mp-r1, #mp .mp-ant > .mp-r2, #mp .mp-ant > .mp-r3{ margin:0 18px 4px; font-size:14px; }
#mp .mp-azioni{ display:flex; gap:8px; padding:12px 18px 0; }
#mp .mp-oro{ flex:1; display:flex; align-items:center; justify-content:center; height:52px; border:0; border-radius:99px; background:var(--oro); color:var(--oro-ink); font:800 17px var(--f-ui); text-decoration:none; box-shadow:0 8px 24px rgba(201,153,26,.28); }
#mp .mp-chipaz{ display:flex; gap:8px; padding:10px 18px 0; overflow-x:auto; scrollbar-width:none; }
#mp .mp-chipaz .mp-chip{ background:var(--vetro-chiaro); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:inset 0 0 0 1px var(--filo); height:40px; }
#mp .mp-foto{ display:flex; gap:6px; padding:14px 18px 0; overflow-x:auto; scrollbar-width:none; touch-action:pan-x; }
#mp .mp-foto::-webkit-scrollbar{ display:none; }
#mp .mp-foto span{ flex:none; width:58%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#0A0A0C; box-shadow:inset 0 0 0 1px var(--filo); }
#mp .mp-foto span:first-child{ box-shadow:inset 0 0 0 1px var(--filo), 0 0 26px -10px var(--c); }
#mp .mp-foto span.vuota{ background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--c) 40%,transparent),#0A0D18 70%); }
#mp .mp-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
#mp .mp-foto-vuota{ display:none; margin:14px 18px 0; height:6px; border-radius:3px; background:var(--c); box-shadow:0 0 18px var(--c); opacity:.8; }
#mp .mp-via{ margin:12px 18px 0; color:var(--muto); font:600 13px var(--f-ui); }
#mp .mp-nota{ margin:8px 18px 0; color:rgba(184,191,208,.7); font:600 12.5px/1.4 var(--f-ui); }

/* percorso */
#mp .mp-min{ margin:0; font:900 28px/1.1 var(--f-display) !important; }
#mp .mp-min small{ font:700 15px var(--f-ui); color:var(--muto); margin-left:4px; }
#mp .mp-sub{ margin:3px 0 0; color:var(--muto); font:600 13.5px/1.35 var(--f-ui); }
#mp .mp-verso{ display:flex; align-items:center; gap:9px; margin:0 18px; color:var(--muto); font:600 14px var(--f-ui); }
#mp .mp-verso b{ color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mp .mp-pal{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }

/* AR: la freccia di vetro che gira verso lo schermo scelto sulla mappa */
#mp-guida{ position:absolute; left:50%; top:calc(var(--safeT) + 66px); transform:translate(-50%,-8px); z-index:7; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px;
  border-radius:99px; background:var(--vetro); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--filo), 0 8px 30px rgba(0,0,0,.35);
  color:#fff; opacity:0; transition:opacity .25s var(--ease),transform .25s var(--ease); max-width:92vw; cursor:pointer; }
#mp-guida.on{ opacity:1; transform:translate(-50%,0); }
#mp-guida .mp-gf{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(255,244,214,.12); color:var(--luce); transition:transform .15s linear; }
#mp-guida .mp-gf svg{ width:20px; height:20px; }
#mp-guida.davanti .mp-gf{ background:var(--luce); color:#0A0F1C; box-shadow:0 0 22px rgba(255,244,214,.7); }
#mp-guida .mp-gt{ display:flex; flex-direction:column; min-width:0; }
#mp-guida b{ font:800 14px/1.2 var(--f-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mp-guida small{ font:700 12.5px/1.2 var(--f-ui); color:var(--muto); }

@media (prefers-reduced-motion: reduce){ #mp .mp-foglio{ transition:none; } }
#mp .mp-priv{ margin-top:10px; font:500 11px/1.4 var(--f-ui); color:rgba(184,191,208,.6); }

/* v0.42 rifinitura: filtri da 36 px con bersaglio da 44 */
#mp .mp-chip{ position:relative; } #mp .mp-chip::after{ content:''; position:absolute; inset:-4px 0; }