:root{
  --ink:#0E0D0D; --surface:#161414; --surface2:#1B1918;
  --bone:#F4EFE6; --mut:#9A9184; --rule:rgba(244,239,230,.13);
  --pink:#EB2B58;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;
  --serif:"argent-cf",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
/* i testi non si gonfiano da soli girando il telefono (build 74): senza
   questa riga il browser, in orizzontale, ingrandiva i caratteri per conto
   suo e tornando in verticale li lasciava grandi. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{margin:0; height:100%; overflow:hidden; background:var(--ink);}
body{font-family:var(--sans); color:var(--bone);}
#app{position:fixed; inset:0; overflow:hidden;}

/* map */
#map{position:absolute; inset:0; background:#F2F0EC; z-index:1;}
.maplibregl-ctrl-bottom-right{margin-bottom:302px;}
#app.sh-collapsed .maplibregl-ctrl-bottom-right{margin-bottom:84px;}
#app.sh-expanded .maplibregl-ctrl-bottom-right{margin-bottom:calc(78vh + 4px);}
.maplibregl-ctrl-attrib{font-size:9px !important; opacity:.7;}
.fpin-wrap{width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.me-wrap{width:18px; height:18px;}
/* pin adattivi per zoom */
.fpin .body{transition:width .15s ease, height .15s ease;}
#map.mid .fpin .body{width:28px;height:28px;}
#map.mid .fpin .body span svg{width:14px;height:14px;}
#map.far .fpin .body{width:21px;height:21px;border-width:1.5px;}
#map.far .fpin .body span svg{width:10px;height:10px;}
#map.far .fpin .tag{display:none;}
/* pin selezionato (mini scheda o scheda aperta) */
.fpin.sel .body{border-color:var(--ink); transform:scale(1.2);
  box-shadow:0 0 0 3px rgba(14,13,13,.22), 0 6px 14px rgba(14,13,13,.4);}

/* custom marker · cerchio */
.fpin{position:relative; display:flex; align-items:center; justify-content:center;}
.fpin .body{width:34px;height:34px;border-radius:50%;
  background:#808080; border:2px solid #FFFFFF; box-shadow:0 4px 11px rgba(14,13,13,.34);
  display:flex; align-items:center; justify-content:center;}
.fpin .body span{display:flex; line-height:1;}
.fpin .body span svg{width:17px;height:17px;display:block;}
.fpin.spons .body{background:var(--ink); border-color:#FFFFFF;}
.fpin.sel .tag{display:none;}  /* la mini scheda prende il posto dell'etichetta */
.fpin.closed .body{opacity:.45; filter:grayscale(.6);}
.fpin .tag{position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bone); font-family:var(--mono); font-size:8.5px; font-weight:700; padding:3px 6px;
  border-radius:2px; white-space:nowrap; letter-spacing:.12em; text-transform:uppercase;}
.og-wrap{width:20px;height:20px;}
.og-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--pink);
  background:rgba(235,43,88,.15); box-shadow:0 0 0 3px rgba(235,43,88,.25); margin:0 auto;}
.me-dot{width:18px;height:18px;border-radius:50%; background:var(--pink); border:3px solid #fff;
  box-shadow:0 0 0 6px rgba(235,43,88,.22);}

/* header */
/* La testata e' UN BLOCCO NERO UNICO: logo, pulsanti e riga della posizione
   sullo stesso fondo, senza stacchi. La sfumatura verso la mappa vive in un
   codino disegnato SOTTO il blocco (::after): cosi' resta della stessa
   altezza qualunque cosa la testata contenga (col banner o senza). Prima era
   un gradiente unico e, sparito il banner, la riga della posizione cadeva
   nella parte trasparente. */
#head{position:absolute; top:0; left:0; right:0; z-index:20;
  padding:calc(10px + var(--safe-top)) 16px 14px;
  background:rgba(14,13,13,.97);
  pointer-events:none;}
#head::after{content:""; position:absolute; top:100%; left:0; right:0; height:16px;
  background:linear-gradient(180deg, rgba(14,13,13,.8), rgba(14,13,13,0));
  pointer-events:none;}
#head > *{pointer-events:auto;}
/* build 89: coi tondi etichettati la colonna a destra e' piu' alta del
   marchio; l'allineamento in alto + il margine sul logo rimettono la
   scritta FLAWLESS al centro ottico del cerchio, non del blocco intero */
.brandrow{display:flex; align-items:flex-start; justify-content:space-between;}
.brandrow .logo{margin-top:7px;}
.logo{font-family:var(--sans); font-size:21px; font-weight:800; color:var(--bone); letter-spacing:-0.04em; display:flex; align-items:baseline; gap:8px;}
/* marchio ufficiale: allineato per base con "around me", non per centro.
   IL MARCHIO HA UNA MISURA SOLA, ovunque compaia (testata, scheda, pannello
   account): 22px di altezza, larghezza in proporzione. Prima era 22, 18 e 15
   nei tre posti — tre marchi diversi. Non si tocca senza cambiarla qui. */
.brandimg{height:22px; width:auto; display:block;}
.logo.hasimg{align-items:flex-end; gap:9px;}
.logo.hasimg .logosub{padding-bottom:1px;}
.logosub{font-family:var(--mono); font-size:9.5px; font-weight:600; font-style:normal; color:var(--pink); letter-spacing:.22em; text-transform:uppercase; margin-left:0;}
.hbtns{display:flex; gap:14px; align-items:flex-start;}
/* la colonna tondo+etichetta (build 89): l'etichetta sta FUORI dal
   pulsante, cosi' i tondi e le loro classi .on non cambiano di una virgola */
.hcol{display:flex; flex-direction:column; align-items:center; gap:4px;}
.hlbl{font-family:var(--mono); font-size:7.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mut); line-height:1;}
/* ricerca per nome: la lente accesa fa come la stellina dei preferiti —
   simbolo ROSA su fondo discreto; un altro tocco e torna com'era */
#searchBtn.on{background:rgba(244,239,230,.12);}
/* fill:none esplicito: la regola generica .iconbtn.on riempirebbe il
   cerchio della lente di scuro, e sembrerebbe una macchia */
#searchBtn.on svg{stroke:var(--pink); fill:none;}
.searchbar{display:flex; align-items:center; gap:9px; margin:10px 0 2px; padding:9px 12px;
  border-radius:10px; background:rgba(244,239,230,.10); border:1px solid var(--rule);}
/* la barra resta com'era, 13.5px (scelta di Stefano: a 16 era troppo grossa).
   Sotto i 16px pero' l'iPhone ingrandisce la pagina da solo appena tocchi il
   campo: per questo app.js blocca lo zoom SOLO mentre si scrive qui dentro,
   e lo rilascia appena si esce. Fuori di qui la pagina si allarga sempre. */
.searchbar input{flex:1; min-width:0; border:none; background:none; color:var(--bone);
  font-family:var(--mono); font-size:13.5px; letter-spacing:.02em; outline:none;}
.searchbar input::placeholder{color:var(--mut);}
.searchbar .sx{flex:none; border:none; background:none; color:var(--mut); font-size:14px; padding:2px 4px; cursor:pointer;}
/* finché si cerca, la testata passa sopra al pannello: la barra in cui scrivi
   non deve MAI finire coperta dall'elenco (resta sotto la scheda di dettaglio) */
#app.cercando #head{z-index:30; background:rgba(14,13,13,.97);}
/* e la testata si fa silenziosa: via il banner finche' si scrive — restano
   solo il marchio, la barra e i risultati. Alla chiusura torna tutto.
   (La riga della posizione, che qui spariva anche lei, dalla build 65
   non esiste piu' del tutto: il suo posto l'ha preso il mirino.) */
#app.cercando .ctx{display:none;}
/* velo + pannello "Guarda intorno a...": sopra il pannello elenco (25),
   sotto la scheda di dettaglio (40). Da build 65 si apre dal mirino, e la
   testata senza riga della posizione e' piu' corta: il pannello sale a 70px. */
.zback{position:fixed; inset:0; z-index:34; background:rgba(14,13,13,.45);}
.zpanel{position:fixed; left:16px; right:16px; top:calc(70px + var(--safe-top)); z-index:35;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  max-height:56vh; overflow:auto; -webkit-overflow-scrolling:touch;}
.zhead{padding:12px 14px 6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut);}
.zrow{display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--rule);
  cursor:pointer; font-size:14.5px; color:var(--bone);}
.zrow:active{background:rgba(244,239,230,.07);}
.zrow.on{color:var(--pink);}
.zrow .zi{flex:none; width:16px; text-align:center; color:var(--mut);}
.zrow.on .zi{color:var(--pink);}
/* i primi risultati sotto la barra: si toccano e aprono dritti la scheda */
.sugg{margin-top:8px; border-radius:10px; background:var(--surface); border:1px solid var(--rule); overflow:hidden;}
.sugg .srow{display:flex; align-items:baseline; gap:10px; padding:11px 13px; border-top:1px solid var(--rule); cursor:pointer;}
.sugg .srow:first-child{border-top:none;}
.sugg .srow:active{background:rgba(244,239,230,.07);}
.sugg .sn{font-size:14.5px; color:var(--bone); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sugg .sz{font-family:var(--mono); font-size:10px; color:var(--mut); letter-spacing:.05em; flex:none; max-width:45%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* ---- l'invito ai gesti e la sua nota (build 68) ----
   Non piu' un tondino col punto interrogativo (bocciato): una scritta, sulla
   mappa in alto a sinistra, che dice cosa succede se la si tocca. Vive solo
   nei primi tre avvii — poi la mappa torna pulita e la nota si apre da
   "Come si usa", in fondo all'elenco. La posizione verticale la mette
   app.js, appena sotto la testata, che cambia altezza da sola. */
.gesti{position:absolute; left:16px; top:74px; z-index:15; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:7px; padding:9px 13px; border-radius:999px;
  border:1px solid rgba(235,43,88,.45); background:rgba(14,13,13,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--bone); font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; line-height:1; text-align:left;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.4);}
.gesti::before{content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--pink);}
.gesti:active{transform:scale(.97);}
/* l'attributo hidden deve poter vincere sul display:flex qui sopra */
.gesti[hidden]{display:none;}
/* mentre si cerca la testata si allunga e scende fin qui: la scritta si toglie
   di mezzo, come fa il banner */
#app.cercando .gesti{display:none;}
/* la nota: stessa cornice dei quartieri, ma piu' alta — sono nove voci */
.gpanel{max-height:68vh;}
.grow{padding:12px 14px; border-top:1px solid var(--rule);}
.grow:first-of-type{border-top:none;}
.gname{display:flex; align-items:baseline; gap:8px; font-size:14px; font-weight:700;
  letter-spacing:-0.01em; color:var(--bone); line-height:1.3;}
.gname::before{content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--pink); transform:translateY(-2px);}
.gtxt{display:block; margin:4px 0 0 13px; font-family:var(--mono); font-size:10.5px;
  line-height:1.55; letter-spacing:.03em; color:var(--mut);}
.gclose{width:100%; display:block; padding:13px 14px; border:none; border-top:1px solid var(--rule);
  background:none; color:var(--pink); font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;}
.gclose:active{background:rgba(244,239,230,.07);}
.iconbtn{width:38px;height:38px;border-radius:50%; border:none; background:rgba(244,239,230,.12); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;}
.iconbtn:active{transform:scale(.94);}
.iconbtn.on{background:var(--bone);}
.iconbtn.on svg{stroke:var(--ink); fill:var(--ink);}
/* il mirino col pannello aperto: acceso ROSA su fondo discreto, come la
   lente della ricerca. Il fill:none esplicito evita la macchia scura che
   la regola generica .iconbtn.on metterebbe nel cerchietto del mirino. */
#locateBtn.on{background:rgba(244,239,230,.12);}
#locateBtn.on svg{stroke:var(--pink); fill:none;}
.ctx{margin-top:10px; background:rgba(235,43,88,.07);
  border:1px solid rgba(235,43,88,.30); border-radius:3px; padding:9px 11px; display:flex; align-items:center; gap:8px;}
/* quando non ha niente da dire, il banner non c'e' proprio: il display:flex
   qui sopra vincerebbe sull'attributo hidden, quindi lo si spegne a mano */
.ctx[hidden]{display:none;}
/* la via di mezzo del mono (scelta di Stefano, 11/8): la voce "di servizio"
   parla TUTTA in mono — banner, toast, barra di ricerca, messaggio di
   nessun-risultato. Le descrizioni dei locali restano in sans: sono
   l'unico testo lungo, e il contrasto tra le due voci e' la gerarchia. */
.ctx .t{font-family:var(--mono); font-size:11.5px; line-height:1.45; letter-spacing:.03em; color:var(--bone);}
.ctx .t b{color:#fff;}
/* mini scheda sul pin: nome + via, un tocco per la scheda completa */
.minipop{z-index:9;}   /* sopra i pin e sopra il punto della tua posizione */
.minipop .maplibregl-popup-content{background:none; padding:0; box-shadow:none; border-radius:0;}
.minipop.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.minipop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.minipop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--ink);}
.minipop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.minipop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.minipop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--ink);}
.minipop.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--ink);}
.minipop.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--ink);}
.minicard{display:flex; align-items:center; gap:10px; cursor:pointer; max-width:min(74vw,300px);
  background:var(--ink); color:var(--bone); border:1px solid rgba(244,239,230,.22); border-radius:4px;
  padding:9px 11px; box-shadow:0 10px 26px rgba(0,0,0,.45);}
.minicard:active{transform:scale(.98);}
.mc-dot{width:8px;height:8px;border-radius:50%; flex:none;}
.mc-txt{min-width:0; flex:1;}
.minicard b{display:block; font-size:13.5px; font-weight:700; letter-spacing:-0.02em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.minicard i{display:block; margin-top:3px; font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mc-go{flex:none;}

/* sheet */
#sheet{position:absolute; left:0; right:0; bottom:0; z-index:25;
  background:var(--ink); border-radius:10px 10px 0 0; border-top:1px solid var(--rule);
  box-shadow:0 -12px 34px rgba(0,0,0,.5);
  height:300px; display:flex; flex-direction:column; transition:height .3s cubic-bezier(.4,0,.2,1);
  padding-bottom:var(--safe-bot);}
#sheet.expanded{height:78vh;}
/* solo mappa: restano la barra e le categorie — i filtri di categoria
   devono poter lavorare anche a mappa piena (richiesta di Stefano, 14/8).
   78 e non piu' 104: prima e' uscito il nero vuoto sotto le categorie
   (~16px), poi anche "Aperto adesso" (build 66) — ora quello spazio e'
   mappa. Il respiro sotto le categorie lo danno i loro 10px di padding,
   piu' il bordo di sicurezza dei telefoni col mento. L'altezza e' gemella
   di "collapsed" dentro app.js (trascinamento). */
#sheet.collapsed{height:calc(78px + var(--safe-bot));}
#sheet.collapsed .syncbar,
#sheet.collapsed .list{display:none !important;}
/* "Aperto adesso" vive solo a pannello alzato, normale o esteso (scelta di
   Stefano, 14/8 sera): a mappa piena si filtra per categoria e basta, e
   l'interruttore non resta li' a meta' servizio. (La vista da computer,
   piu' sotto, lo rimette in vista: la' il pannello e' sempre pieno.) */
#sheet.collapsed .toggle{display:none !important;}
/* la freccia che alzava/abbassava l'elenco non c'e' piu': lo swipe basta,
   e "Aperto adesso" e' l'ultimo della riga, ancorato a destra */
/* mentre si trascina col dito: niente animazione (il pannello segue la mano,
   non la rincorre) e il browser non deve interpretare il gesto come scorrimento */
#sheet.dragging{transition:none;}
.grip{width:40px;height:4px;border-radius:3px;background:rgba(244,239,230,.22); margin:9px auto 4px; cursor:pointer; touch-action:none;}
.bar{padding:2px 16px 8px; display:flex; align-items:center; gap:9px; touch-action:none;
  -webkit-user-select:none; user-select:none;}
/* bussola: appare solo a mappa ruotata */
.compass{position:absolute; right:16px; top:-52px; width:40px;height:40px;border-radius:50%; padding:0;
  border:1px solid var(--rule); background:rgba(14,13,13,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.4); z-index:2;}
.compass svg{transition:transform .1s linear;}
.compass:active{transform:scale(.94);}
.bar h2{margin:0; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);}
.count{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--mut); text-transform:uppercase;}
.toggle{margin-left:auto; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut);}
.sw{width:38px;height:22px;border-radius:14px;background:#2A2726; position:relative; transition:.2s; flex:none;}
.sw::after{content:""; position:absolute; top:2px; left:2px; width:18px;height:18px;border-radius:50%; background:#fff; transition:.2s;}
.sw.on{background:var(--pink);}
.sw.on::after{left:18px;}
.chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:0 16px 10px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; border-radius:2px;
  background:none; color:var(--mut); border:1px solid var(--rule);}
.chip.on{background:var(--bone); color:var(--ink); border-color:var(--bone);}
.cdot{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:1px;}
.list{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 12px 18px; flex:1;}

/* le righe dell'elenco: la tessera scivola e sotto ci sono le azioni degli swipe.
   Da destra a sinistra: Salva e Condividi. Da sinistra a destra: la chiamata. */
.crow{position:relative; margin-bottom:8px;}
.crow .card{margin-bottom:0; z-index:1; transition:transform .22s ease; will-change:transform; touch-action:pan-y;}
.crow.trascinando .card{transition:none;}
.cact{position:absolute; inset:0; border-radius:3px; display:none; align-items:center; z-index:0;}
/* i tre pulsanti si scoprono col dito e aspettano il tocco */
.cact.right{background:var(--surface2); border:1px solid var(--rule); justify-content:flex-end; gap:2px; padding-right:10px;}
.crow.trascinando .cact.right, .crow.aperta .cact.right{display:flex;}
.ca{width:54px; height:54px; border:none; background:none; color:var(--bone);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:3px; -webkit-tap-highlight-color:transparent;}
.ca:active{transform:scale(.88);}
/* Chiama: verde, come il tasto di un telefono */
.ca-call{color:#5FBF87;}
/* senza numero il pulsante è spento: si vede, ma non promette niente */
.ca-call.off{color:var(--mut); opacity:.5;}
/* Condividi: rosa di casa */
.ca-share{color:var(--pink);}

.card{display:flex; gap:12px; padding:12px; border-radius:3px; background:var(--surface); margin-bottom:8px;
  border:1px solid var(--rule); position:relative; align-items:center;}
/* colonnina di sinistra: icona centrata rispetto alla tessera e stato sotto */
.side{flex:none; width:60px; display:flex; flex-direction:column; align-items:center; gap:5px;}
.side .st{font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.side .st.op{color:var(--pink);}
.side .st.cl{color:var(--mut);}
.card:active{transform:scale(.995);}
/* pallino fucsia in alto a destra: acceso = aperto adesso; da chiuso, niente */
/* (il pallino .odot delle tessere e' uscito di scena con la build 74) */
.card.spons{background:var(--surface2); border-color:rgba(244,239,230,.38);}
.thumb{width:60px;height:60px;border-radius:14px; flex:none; position:relative; overflow:hidden; background:#2A2726;}
.thumb .g{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.thumb .g svg{width:26px;height:26px;display:block;}
/* l'occhiello: la categoria per esteso sopra il nome, nel colore della categoria.
   Prima viveva in corpo 6,5 dentro l'icona: illeggibile e sempre tagliata. */
.info .kick{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.info{flex:1; min-width:0;}
.info .n{font-size:15px; font-weight:700; letter-spacing:-0.02em; display:flex; align-items:center; gap:6px;}
.badge-sp{font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.12em; background:var(--bone); color:var(--ink); padding:2.5px 5px; border-radius:2px; text-transform:uppercase;}
.info .note{font-size:12px; color:var(--mut); line-height:1.35; margin:3px 0 5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.meta{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--mut); flex-wrap:wrap;}
.meta .rk{color:var(--bone); opacity:.85; font-weight:600;}
.meta .op{color:var(--pink); font-weight:700;}
.meta .cl{color:var(--mut); font-weight:700;}
.meta .dist{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--bone); font-weight:600;}
.empty{text-align:center; color:var(--mut); font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; padding:36px 20px; line-height:1.6;}
/* firma di build: per riconoscere al volo se stai guardando l'ultima versione */
.buildstamp{text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut); opacity:.5; padding:20px 20px 26px;}
/* il link all'informativa privacy: discreto come la firma, ma riconoscibile */
.buildstamp a.bs-privacy{color:var(--mut); text-decoration:underline; text-underline-offset:2px;}
/* "Come si usa": la porta sempre aperta alla nota dei gesti, quando la
   scritta sulla mappa e' gia' sparita. Discreta come la firma. */
.buildstamp .bs-gesti{color:var(--mut); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}

/* ================= DETAIL · linguaggio MI. ================= */
.detail{position:absolute; inset:0; z-index:40; transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1); overflow:hidden;
  --mink:#0E0D0D; --msurface:#161414; --bone:#F4EFE6; --mmute:#9A9184;
  --mrule:rgba(244,239,230,0.13); --electro:#EB2B58;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;
  background:var(--mink); color:var(--bone);
  font-family:"Helvetica Neue","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
.detail.open{transform:translateY(0);}
.dscroll{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* il fiato in fondo non serve piu' (build 87): l'ultima cosa del foglio e'
     la barra dei pulsanti, che il suo fiato (safe area compresa) ce l'ha */
  padding-bottom:0;}
.dd-bar{display:flex; align-items:center; gap:12px; padding:calc(12px + var(--safe-top)) 20px 13px;
  border-bottom:1px solid var(--mrule); position:sticky; top:0; background:var(--mink); z-index:5;}
.dd-back{border:none; background:none; color:var(--bone); padding:2px 6px 2px 0; display:flex; align-items:center;}
/* stessa misura E stessa forma della testata: marchio + "around me", identici */
.dd-mark{font-size:21px; font-weight:800; letter-spacing:-0.04em; display:flex; align-items:baseline; gap:8px;}
.dd-mark.hasimg{align-items:flex-end; gap:9px;}
.dd-mark.hasimg .logosub{padding-bottom:1px;}
/* condividi e stellina: in alto a destra della testata, accanto al nome */
.dd-tools{position:absolute; top:16px; right:12px; display:flex; align-items:center;}
.dd-share{flex:0 0 auto; padding:5px 6px; border:none; background:none;
  color:var(--mmute); display:flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dd-share:active{transform:scale(.88); color:var(--bone);}
/* il pulsante delle liste (build 66): righe col +, in mezzo tra condividi e
   stellina — apre il foglio "Salva in", lo stesso del tenere premuto */
.dd-liste{flex:0 0 auto; padding:5px 6px; border:none; background:none;
  color:var(--mmute); display:flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dd-liste:active{transform:scale(.88); color:var(--bone);}
/* stellina dei preferiti: in alto a destra, sempre lì, sempre allo stesso posto */
.dd-star{flex:0 0 auto; margin-left:2px; margin-right:-6px; padding:5px 4px; border:none; background:none;
  color:var(--mmute); display:flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dd-star.on{color:var(--electro);}
.dd-star:active{transform:scale(.88);}
.dd-star svg{transition:transform .18s cubic-bezier(.3,1.6,.5,1);}
/* IL PAREGGIO DELLE ICONE (build 87). Misurate sul disegno: condividi
   occupava 20 unita' su 24, la lista 15, la stellina 17,8 — e la scala
   base non e' nemmeno la stessa (23px la stellina, 21 le altre). Le tre
   scale qui sotto portano tutte a circa 15,5px resi. La lista, fatta di
   linee sottili, sta un pelo sopra: a parita' vera sembrerebbe piu' piccola. */
.dd-share svg{transform:scale(.89);}
.dd-liste svg{transform:scale(1.18);}
.dd-star svg{transform:scale(.91);}
.dd-star.on svg{transform:scale(.97);}
/* l'etichetta sotto ogni icona: la parola che l'icona da sola non dice */
.dd-share,.dd-liste,.dd-star{flex-direction:column; gap:3px;}
.dd-tlbl{display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:.11em;
  text-transform:uppercase; line-height:1;}
.dd-head{padding:20px 20px 16px; position:relative;}
/* occhiello e nome lasciano l'angolo in alto a destra a condividi + stellina */
.dd-cat{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--electro); margin-bottom:9px; padding-right:86px;}
/* il nome del locale in Argent (build 78): come nei post. Tre valori ritarati,
   perche' erano tutti tagliati sulla Helvetica -- il peso 600 in Argent non
   esiste (il kit ha 400 e 700), la stretta a -0.035em fa scontrare i grazi, e
   1.02 di interlinea fa toccare le aste sui nomi su due righe.
   Per provarlo in corsivo, come il nome del locale nei post: font-style:italic. */
.dd-name{font-family:var(--serif); font-size:33px; font-weight:700;
  letter-spacing:-0.01em; line-height:1.06; padding-right:86px;}
/* indirizzo · zona · distanza */
.dd-addr{margin-top:13px; display:flex; gap:8px; align-items:flex-start;}
.dd-pin{flex:0 0 auto; margin-top:2px;}
.dd-via{font-size:14.5px; line-height:1.25; letter-spacing:-0.01em; color:var(--bone);}
.dd-geo{margin-top:4px; font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none; color:var(--mmute);}
.dd-where{margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--mmute); text-transform:uppercase;}
.dd-verdict{margin-top:17px; font-size:17px; line-height:1.38; letter-spacing:-0.015em; max-width:32ch;}
/* la foto della scheda: dopo l'indirizzo, prima della barra degli orari.
   Il riquadro ha una forma fissa (16:10) così la scheda non balla mentre
   l'immagine arriva; il taglio è al centro, mai deformato. */
.dd-foto{position:relative; margin:0 0 18px; line-height:0; background:#1B1918;}
.dd-foto img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
/* niente crediti sulla foto (scelta di Stefano): l'immagine resta pulita.
   Di chi è ogni foto resta comunque scritto in foto/foto.json e nel report
   della redazione, così la provenienza è sempre ricostruibile. */
@supports not (aspect-ratio: 1){ .dd-foto img{height:220px;} }

/* righello */
.dd-ruler{padding:4px 20px 16px;}
.dd-lane{position:relative; display:flex; align-items:center; gap:10px; height:16px;}
.dd-lane + .dd-lane{margin-top:7px;}
.dd-lbl{flex:0 0 52px; font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; color:var(--mmute); text-transform:uppercase; white-space:nowrap;}
.dd-rail{position:relative; flex:1; height:100%;}
.dd-primebg{position:absolute; left:0; right:0; top:6px; height:4px; background:rgba(244,239,230,.07); border-radius:1px;}
.dd-prime{position:absolute; top:5px; height:6px; background:var(--electro); border-radius:1px;}
.dd-band{position:absolute; left:0; right:0; top:4px; height:8px; background:rgba(244,239,230,.10); border-radius:1px;}
.dd-svc{position:absolute; top:4px; height:8px; background:var(--bone); opacity:.72; border-radius:1px;}
.dd-nowwrap{position:relative; height:0;}
/* con una corsia sola l'indicatore "adesso" si ferma sopra le ore, non le attraversa */
.dd-now{position:absolute; bottom:-24px; width:2px; height:30px; background:var(--electro);}
.dd-now::after{content:""; position:absolute; left:-3px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--electro);}
.dd-scale{position:relative; margin-left:56px; height:14px; margin-top:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--mmute);}
.dd-scale span{position:absolute; transform:translateX(-50%); white-space:nowrap;}
.dd-scale span:first-child{transform:none;}
.dd-scale span:last-child{transform:translateX(-100%);}
.dd-state{margin-top:15px; font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; line-height:1.7; font-weight:600;}
.dd-live{color:var(--bone);} .dd-dead{color:var(--mmute);} .dd-go{color:var(--electro);}
/* LA RIGA DI STATO (build 87): al posto del righello. Un pallino — rosa
   acceso se il locale e' aperto, spento se chiuso — e le frasi di sempre
   in parole normali, non piu' in maiuscolo da terminale. */
.dd-stato{display:flex; align-items:flex-start; gap:9px; padding:2px 20px 16px; font-family:var(--sans);}
.dd-dot{flex:none; width:7px; height:7px; border-radius:50%; background:rgba(244,239,230,.28); margin-top:6px;}
.dd-stato.on .dd-dot{background:var(--electro); box-shadow:0 0 0 4px rgba(235,43,88,.16);}
.dd-stlines{font-size:14px; line-height:1.5; color:var(--mmute); letter-spacing:0; text-transform:none; font-weight:400;}
.dd-stlines b{color:var(--bone); font-weight:600;}
.dd-stlines .dd-live,.dd-stlines .dd-dead{color:var(--mmute); font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; font-weight:400;}
.dd-stlines .dd-go{color:var(--electro); font-size:12.5px; margin-top:1px;}
/* LA BARRA DEI PULSANTI (build 87): ultima nel foglio, incollata al fondo
   dello schermo. La sfumatura sotto fa da fondale quando la barra copre il
   testo che scorre; arrivati in fondo, la barra si siede al suo posto. */
.dd-acts{position:sticky; bottom:0; z-index:6; display:flex; gap:8px;
  padding:14px 20px calc(16px + var(--safe-bot));
  background:linear-gradient(180deg, rgba(14,13,13,0), rgba(14,13,13,.95) 26%, var(--mink) 55%);}
.dd-btn{flex:1 1 0; min-width:0; text-align:center; padding:15px 2px; border-radius:3px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; border:none; cursor:pointer;
  font-weight:600; text-decoration:none; white-space:nowrap;}
.dd-btn.pink{background:var(--electro); color:#160A10;}
.dd-btn.white{background:var(--bone); color:var(--mink);}
.dd-btn.ghost{background:none; color:var(--bone); border:1px solid var(--mrule);}
/* dato mancante: il posto resta, il pulsante è spento. Mai un numero inventato. */
.dd-btn.off{background:none; color:var(--mmute); border:1px solid var(--mrule); opacity:.6; cursor:default;}
/* descrizione in tre righe (un tocco la apre se il testo è più lungo) */
/* La descrizione torna alla Helvetica (build 80): il graziato reggeva bene
   le due righe corte, ma sui testi lunghi degli articoli si legge peggio.
   Il nome del locale resta in Argent: la voce del magazine sta li'. */
/* Dalla build 87 il taglio vale per TUTTE le descrizioni ed e' a CINQUE
   righe (decisione di Stefano: il testo lungo si vede subito, almeno cinque
   righe): le corte non ci arrivano mai e restano intere, le lunghe si
   aprono con "Continua a leggere". Corpo a 17px: la descrizione e' salita
   in cima alla scheda ed e' il pezzo che si deve leggere meglio. */
.dd-desc{padding:0 20px 22px; font-family:var(--sans); font-size:17px; line-height:1.55; letter-spacing:0; color:var(--bone);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden;}
.dd-desc.open{-webkit-line-clamp:unset; line-clamp:unset; overflow:visible;}
.dd-apri{display:block; margin:-14px 20px 22px; padding:4px 0; border:none; background:none; text-align:left;
  color:var(--electro); font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dd-apri:active{opacity:.7;}
/* ledger */
.dd-ledger{border-top:1px solid var(--mrule);}
.dd-row{display:flex; align-items:baseline; gap:14px; padding:13px 20px; border-bottom:1px solid var(--mrule);}
.dd-key{flex:0 0 74px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; color:var(--mmute); text-transform:uppercase;}
.dd-val{font-family:var(--sans); font-size:14px; line-height:1.5; letter-spacing:0; flex:1; color:var(--bone);}
/* I link della tabella (sito, Instagram, email) restano BIANCHI (build 80:
   mai il blu del browser, mai il rosa a raffica) ma dalla build 87 sono
   SOTTOLINEATI, con un filo morbido: prima sembravano testo qualunque e
   nessuno capiva che si toccavano. */
.dd-val a.dd-iglink{color:var(--bone); text-decoration:underline;
  text-decoration-color:rgba(244,239,230,.4); text-underline-offset:3px; font-weight:inherit;}
.dd-val a.dd-iglink:active{opacity:.7;}
.dd-val em{font-style:normal; color:var(--mmute);}
/* la settimana nella riga Orari: un giorno per riga, oggi in evidenza.
   Da chiusa mostra SOLO oggi (occupava troppo spazio): un tocco apre
   tutta la settimana, un altro la richiude. */
.dd-val.dd-week{cursor:pointer; -webkit-tap-highlight-color:transparent;}
.dd-val.dd-week:not(.open) .dd-day:not(.now){display:none;}
.dd-val.dd-week .dd-day{display:flex; gap:12px; padding:1.5px 0; color:var(--mmute);}
.dd-val.dd-week .dd-day i{font-style:normal; flex:0 0 34px; text-transform:uppercase; letter-spacing:.08em;
  font-family:var(--mono); font-size:10.5px; padding-top:2px;}
/* doppio turno: pranzo e cena stanno sulla stessa riga finché ci stanno,
   e vanno a capo insieme senza mai spezzare un orario a metà */
.dd-val.dd-week .dd-day b{font-weight:inherit; flex:1; min-width:0;}
.dd-val.dd-week .dd-day.now{color:var(--bone); font-weight:700;}
.dd-val.dd-week .dd-day.now i{color:var(--electro);}
/* l'invito sotto: dice cosa succede al tocco, nei due sensi */
.dd-week .dd-more{display:block; margin-top:5px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--mmute);}
.dd-week .dd-more::after{content:"Tutta la settimana ▾";}
.dd-week.open .dd-more::after{content:"Solo oggi ▴";}
/* LA RIGA DELLA VERIFICA (build 87): fuori dalla tabella, col segno di
   spunta. E' metadato redazionale, non un contatto del locale: sta sotto,
   piccola, ed e' la prova concreta della frase del colophon. */
.dd-verifica{display:flex; align-items:center; gap:7px; margin:16px 20px 0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--mmute);}
.dd-verifica svg{flex:none; width:12px; height:12px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.dd-sib{display:block; color:var(--bone); text-decoration:none; padding:3px 0; cursor:pointer;}
.dd-sib:active{color:var(--electro);}
.dd-prose{font-family:"Helvetica Neue","Inter",system-ui,sans-serif; font-size:13.5px; line-height:1.5;}
/* chips */
.dd-chips{display:flex; flex-wrap:wrap; gap:6px; padding:16px 20px 22px;}
.dd-chip{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mmute);
  border:1px solid var(--mrule); border-radius:2px; padding:5px 8px;}
/* artwork */
.dd-shot{position:relative; line-height:0; border-top:1px solid var(--mrule);}
.dd-shot svg{display:block; width:100%; height:auto;}
.dd-shot figcaption{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  padding:16px 20px 14px; line-height:1; font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,239,230,.82);
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5));}
@media (prefers-reduced-motion:no-preference){
  /* il righello e le sue animazioni non ci sono piu' (build 87):
     resta il piccolo fiato d'ingresso sulla riga di stato */
  .dd-stato{animation:dd-rise .45s ease-out .1s both;}
  @keyframes dd-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}

/* sync bar (vista Salvati) */
.syncbar{margin:0 16px 10px; padding:9px 11px; border:1px solid var(--rule); border-radius:3px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.syncbar b{color:var(--bone); font-weight:600;}
.syncbar .sb-a{color:var(--pink); background:none; border:none; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 0; cursor:pointer;}
.syncbar .sb-a.ghost{color:var(--mut); margin-left:auto;}

/* account (email + password) */
.auth{position:absolute; inset:0; z-index:60; background:rgba(14,13,13,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;}
.au-panel{width:100%; max-width:430px; background:var(--ink); border-top:1px solid var(--rule);
  padding:0 20px calc(26px + var(--safe-bot)); color:var(--bone);}
.au-bar{display:flex; align-items:center; justify-content:space-between; padding:16px 0 12px;
  border-bottom:1px solid var(--rule); margin-bottom:18px;}
.au-mark{font-size:21px; font-weight:800; letter-spacing:-0.04em; display:flex; align-items:center;}
.au-x{border:none; background:none; color:var(--mut); font-size:15px; padding:4px;}
.au-title{margin:0; font-size:24px; font-weight:600; letter-spacing:-0.03em;}
.au-sub{margin:7px 0 18px; font-size:13px; color:var(--mut); line-height:1.4;}
.au-lbl{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); margin:12px 0 6px;}
.au-lbl em{font-style:normal; text-transform:none; letter-spacing:.04em;}
/* 16px come il campo di ricerca: sotto i 16 l'iPhone zooma da solo al tocco */
.au-in{width:100%; background:var(--surface); border:1px solid var(--rule); border-radius:3px;
  color:var(--bone); font-size:16px; padding:13px 12px; outline:none;}
.au-in:focus{border-color:rgba(244,239,230,.4);}
.au-err{margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--pink);
  text-transform:uppercase; line-height:1.5;}
.au-cta{width:100%; margin-top:16px; background:var(--pink); color:var(--ink); border:none; border-radius:3px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:15px 0;}
.au-cta:active{transform:scale(.99);}
.au-alt{display:block; width:100%; margin-top:12px; background:none; border:none; color:var(--mut);
  font-size:12.5px; padding:4px 0; text-align:center;}
.au-alt b{color:var(--bone);}

/* toast */
/* La riga della redazione: allineata al bordo delle righe della tabella (20px).
   Dalla build 80 e' una frase intera e non piu' una parola sola: serve il
   respiro fra le righe, altrimenti il monospazio si impasta. */
.dd-contact{margin:20px 20px 6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.65; color:var(--mmute);}
.dd-contact a{color:var(--pink); text-decoration:none;}

/* IL COLOPHON (build 87, asciugato nella 88). Niente marchio (il nome e'
   gia' nella frase, e la testata vera resta sopra il foglio): la frase di
   Stefano e i tre contatti in UNA riga di verbi — Scrivici, Seguici,
   Leggici. Il rosa resta al pulsante Prenota e a nient'altro. */
.dd-piede{margin:34px 20px 10px; padding-top:20px; border-top:1px solid var(--mrule); display:block;
  font-family:var(--sans); font-size:14px; letter-spacing:0; color:var(--mmute);}
.dd-colofone{margin:0; font-size:13.5px; line-height:1.55; color:var(--mmute); max-width:36ch;}
.dd-verbi{margin-top:16px; display:flex; gap:26px;}
.dd-verbi a{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; border-bottom:1px solid rgba(244,239,230,.35); padding-bottom:2px;}
.dd-verbi a:active{opacity:.7;}

.toast{position:absolute; left:50%; bottom:calc(320px + var(--safe-bot)); transform:translateX(-50%) translateY(14px);
  background:var(--bone); color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:10px 16px; border-radius:3px; z-index:70;
  opacity:0; transition:.25s; pointer-events:none; box-shadow:0 10px 26px rgba(0,0,0,.35); max-width:80%; text-align:center;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#app.sh-collapsed .dd-contact{margin:20px 20px 6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.65; color:var(--mmute);}
.dd-contact a{color:var(--pink); text-decoration:none;}

.toast{bottom:calc(80px + var(--safe-bot));}

/* L'invito alla schermata Home (solo iPhone in Safari, una volta sola).
   Un cartoncino discreto in basso: sta SOTTO la scheda di dettaglio (z 40),
   quindi una scheda aperta lo copre sempre; la crocetta lo chiude per sempre. */
.a2hs{position:fixed; left:12px; right:12px; bottom:calc(12px + var(--safe-bot)); z-index:30;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  padding:14px 40px 14px 14px; box-shadow:0 14px 34px rgba(0,0,0,.5);
  transform:translateY(16px); opacity:0; transition:.3s ease;}
.a2hs.show{transform:translateY(0); opacity:1;}
.a2hs-x{position:absolute; top:6px; right:6px; width:32px; height:32px; border:none; background:none;
  color:var(--mut); font-size:20px; line-height:32px; text-align:center; border-radius:50%;}
.a2hs-x:active{background:rgba(244,239,230,.08);}
.a2hs-t{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone);}
.a2hs-t em{font-style:normal; color:var(--pink);}
.a2hs-s{font-size:12px; color:var(--mut); margin-top:3px;}
.a2hs ol{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px;}
.a2hs li{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--bone);}
.a2hs li b{font-weight:600;}
.a2hs .a2hs-n{flex:none; width:18px; height:18px; border-radius:50%; background:var(--pink); color:var(--ink);
  font-family:var(--mono); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.a2hs svg{flex:none; width:16px; height:16px; stroke:var(--pink); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px;}

/* l'anello rosa sui pin dei salvati: i preferiti si vedono anche in mappa */
.fpin.sav .body{box-shadow:0 0 0 2.5px var(--pink), 0 5px 12px rgba(14,13,13,.35);}
.fpin.sel.sav .body{box-shadow:0 0 0 3px rgba(14,13,13,.22), 0 0 0 5.5px var(--pink), 0 6px 14px rgba(14,13,13,.4);}
#map.far .fpin.sav .body{box-shadow:0 0 0 2px var(--pink), 0 3px 8px rgba(14,13,13,.3);}

/* la X che elimina il banner-invito: ancorata in ALTO A DESTRA del
   riquadro, col simbolo centrato nel suo tondo — non segue piu' il testo */
.ctx{position:relative;}
.ctx .t{padding-right:26px;}
.ctx .t .ctx-x{position:absolute; top:5px; right:5px; width:26px; height:26px; line-height:26px;
  text-align:center; color:var(--mut); font-size:17px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.ctx .t .ctx-x:active{background:rgba(244,239,230,.1);}

/* la stellina dei preferiti in testata: accesa e' ROSA piena (come quella
   che salva un posto), spenta e' solo contorno. Lo sfondo del tondo non
   cambia: e' la stella a parlare. */
#savedBtn.on{background:rgba(244,239,230,.12);}
#savedBtn.on svg{stroke:var(--pink); fill:var(--pink);}
/* lo scorrimento della scheda non "aggancia" piu' effetti a catena del
   browser (rimbalzi, aggiorna-trascinando): il gesto di chiusura e lo
   scroll non si pestano i piedi */
/* "none" e non piu' "contain" (build 75): "contain" fermava solo gli
   effetti a catena, ma lasciava all'iPhone il suo elastico in cima -
   ed era lui la banda nera che si vedeva trascinando la scheda. */
.dscroll{overscroll-behavior:none;}

/* ================================================================
   VISTA DA COMPUTER (build 63) — sopra i 1000px di larghezza.
   La mappa vive sul 60% di sinistra; l'elenco delle schede sta FISSO
   sul 40% di destra, dall'alto in basso; la scheda singola si apre
   sopra quella stessa colonna. Mappa e schede si guardano insieme.
   La soglia (1000px) e' gemella di "schermone" dentro app.js.
   ================================================================ */
@media (min-width: 1000px){
  /* la mappa si ferma dove comincia la colonna delle schede */
  #map{right:40%;}
  /* la testata (marchio, ricerca, posizione) resta sopra la mappa */
  #head{right:40%;}

  /* il pannello diventa una colonna piena: niente manigliella, niente
     trascinamento, e le tre posizioni del telefono non contano piu' */
  #sheet{top:0; bottom:0; left:auto; right:0; width:40%;
    height:auto !important; border-radius:0; border-top:none;
    border-left:1px solid var(--rule); transition:none;}
  #sheet .grip{display:none;}
  .bar{padding-top:16px;}
  /* qualunque classe resti addosso al pannello, qui si vede sempre tutto */
  #sheet.collapsed .toggle{display:flex !important;}
  #sheet.collapsed .chips{display:flex !important;}
  #sheet.collapsed .list{display:block !important;}
  #sheet.collapsed .syncbar:not([hidden]){display:flex !important;}

  /* la scheda singola si apre sulla colonna di destra, non a tutto schermo:
     la mappa resta sott'occhio anche a scheda aperta */
  .detail{left:60%; border-left:1px solid var(--rule);}

  /* la bussola non ha piu' il bordo del pannello sotto: si sposta
     nell'angolo in basso a destra della mappa */
  #sheet .compass{right:auto; left:-56px; top:auto; bottom:16px;}

  /* la scritta della mappa non deve piu' scansare il pannello dal basso */
  .maplibregl-ctrl-bottom-right,
  #app.sh-collapsed .maplibregl-ctrl-bottom-right{margin-bottom:8px;}

  /* il pannello dei quartieri non si allarga su tutto lo schermo */
  .zpanel{right:auto; width:420px;}
}

/* ================= LISTE CON UN NOME (build 64) ================= */
/* Il foglio "Salva in": sale dal basso SOPRA la scheda di dettaglio (che
   sta a 40) — si arriva qui tenendo premuta la stellina di una scheda,
   quindi la scheda deve restare visibile sotto il velo. */
.sback{position:absolute; inset:0; z-index:44; background:rgba(14,13,13,.62);}
.spanel{position:absolute; left:0; right:0; bottom:0; z-index:45;
  background:var(--surface); border-radius:12px 12px 0 0; border-top:1px solid var(--rule);
  box-shadow:0 -12px 34px rgba(0,0,0,.55); padding-bottom:calc(14px + var(--safe-bot));
  max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; color:var(--bone);}
/* sulla vista da computer il foglio si allinea alla colonna delle schede */
@media (min-width:1000px){ .sback{left:60%;} .spanel{left:60%;} }
.sp-head{padding:8px 18px 4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut); display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.sp-who{color:var(--bone); letter-spacing:.02em; text-transform:none; font-family:var(--sans);
  font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sp-row{display:flex; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--rule); cursor:pointer;}
.sp-row:active{background:rgba(244,239,230,.06);}
.sp-head + .sp-row{border-top:none;}
.sp-i{flex:none; width:20px; display:flex; justify-content:center; color:var(--mut);}
.sp-i.pink{color:var(--pink);}
.sp-piu{font-size:17px; line-height:1; font-family:var(--mono); font-weight:700;}
.sp-n{flex:1; min-width:0;}
.sp-n b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-0.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sp-n i{display:block; font-style:normal; margin-top:2px; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut);}
.sp-nuova{color:var(--pink); font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;}
/* la spunta rosa: spenta e' solo un cerchio, accesa si riempie */
.sp-check{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--rule);
  display:flex; align-items:center; justify-content:center; color:transparent; transition:.15s;}
.sp-row.sel .sp-check{background:var(--pink); border-color:var(--pink); color:#160A10;}
.sp-foot{padding:12px 18px 2px;}
.sp-btn{width:100%; text-align:center; padding:15px 2px; border-radius:3px; border:none; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
  background:var(--pink); color:#160A10;}
.sp-btn:active{transform:scale(.99);}
/* la faccia col nome: battesimo o rinomina */
.sp-lbl{padding:10px 18px 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut);}
.sp-in{display:block; width:calc(100% - 36px); margin:10px 18px 0; padding:13px 14px; border-radius:8px;
  background:rgba(244,239,230,.08); border:1px solid var(--rule); color:var(--bone);
  font-family:var(--sans); font-size:16px; letter-spacing:-0.01em; outline:none; box-sizing:border-box;}
.sp-in:focus{border-color:rgba(235,43,88,.55);}
.sp-chips{display:flex; gap:7px; flex-wrap:wrap; padding:12px 18px 0;}
.sp-chip{font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 11px; border-radius:2px; background:none; color:var(--mut); border:1px solid var(--rule); cursor:pointer;}
.sp-chip:active{background:rgba(244,239,230,.08);}
.sp-nota{padding:10px 18px 0; font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--mut); line-height:1.6;}
.sp-err{padding:10px 18px 0; font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--pink);}

/* "Le mie liste": righe dentro la pelle del pannello dei quartieri */
.lst-riga .sp-n b{font-size:15px; font-weight:700;}
.lst-riga .sp-n i{display:inline-block; margin-top:3px; margin-right:8px;}
.lst-dots{display:inline-flex; gap:3px; vertical-align:1px;}
.lst-dot{width:6px; height:6px; border-radius:50%; display:inline-block;}

/* la barretta della lista aperta: Rinomina · Elimina, discreta come la syncbar */
.listabar{display:flex; align-items:center; gap:8px; padding:0 16px 10px;}
.lb-b{border:none; background:none; padding:2px 0; color:var(--mut); font-family:var(--mono);
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;}
.lb-b:active{color:var(--bone);}
.lb-sep{color:var(--mut); opacity:.5;}
/* il passo di conferma dell'eliminazione si accende rosa: non si cancella per sbaglio */
.lb-del.arm{color:var(--pink);}
#sheet.collapsed .listabar{display:none !important;}

/* la stellina della scheda: tenere premuto non deve far comparire menu o
   selezioni del sistema — il gesto appartiene alle liste */
.dd-star{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation;}
/* il cestino "togli da questa lista" negli swipe, quando una lista e' aperta */
.ca-tolgo{color:var(--mut);}
/* il tenere premuto vive anche sulle stelline scoperte dallo swipe:
   niente menu o selezioni del sistema nemmeno li' */
.ca{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
/* la presa coi puntini per riordinare le liste nel pannello */
.lst-drag{flex:none; border:none; background:none; color:var(--mut); padding:8px 2px 8px 12px;
  cursor:grab; touch-action:none; display:flex; align-items:center;}
.lst-drag:active{cursor:grabbing; color:var(--bone);}
/* la riga afferrata si "solleva": fondo chiaro e nome rosa, si vede da lontano */
.lst-riga.lst-sollevata{background:rgba(244,239,230,.07);}
.lst-riga.lst-sollevata .sp-n b{color:var(--pink);}

/* ================= L'INVITO ALLA NEWSLETTER (build 73) =================
   Vive in fondo all'elenco, dopo l'ultima tessera e prima della firma di
   build. Stessa pelle delle tessere (fondo surface, bordo rule), titolo
   in sans come i nomi dei locali e testo di servizio in mono, come tutto
   il resto che parla a nome dell'app. Il campo e' a 16px: sotto i 16
   l'iPhone ingrandisce la pagina da solo appena lo si tocca. */
.nl{position:relative; margin:14px 4px 2px; padding:16px 16px 14px;
  background:var(--surface); border:1px solid var(--rule); border-radius:3px;}
.nl-t{font-size:15.5px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--bone);}
.nl-t em{font-style:normal; color:var(--pink);}
.nl-s{margin-top:6px; font-family:var(--mono); font-size:10.5px; line-height:1.6;
  letter-spacing:.03em; color:var(--mut);}
.nl-f{display:flex; gap:7px; margin-top:13px;}
.nl-in{flex:1; min-width:0; background:rgba(244,239,230,.08); border:1px solid var(--rule);
  border-radius:3px; color:var(--bone); font-family:var(--sans); font-size:16px;
  letter-spacing:-0.01em; padding:12px; outline:none;}
.nl-in:focus{border-color:rgba(235,43,88,.55);}
.nl-in::placeholder{color:var(--mut);}
.nl-btn{flex:none; border:none; border-radius:3px; background:var(--pink); color:#160A10;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:0 15px; cursor:pointer;}
.nl-btn:active{transform:scale(.98);}
.nl-btn[disabled]{opacity:.55;}
/* l'esca per i robot: un campo che un essere umano non vede e non compila.
   Se arriva pieno, il modulo e' stato riempito da una macchina. */
.nl-bot{position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0;}
.nl-err{margin-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  color:var(--pink); line-height:1.5;}
.nl-nota{margin-top:11px; font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  color:var(--mut); line-height:1.6;}
.nl-nota a{color:var(--mut); text-decoration:underline; text-underline-offset:2px;}

/* ================= LA SCHEDA A FOGLIO (build 74) =================
   I tre pulsantini (condividi, liste, stellina) ora vivono nella barra
   in alto, a destra della freccia: valgono a ogni larghezza, e il nome
   non deve piu' scansarli. */
.dd-tools{position:static; top:auto; right:auto; margin-left:auto; display:flex; align-items:center;}
.dd-cat{padding-right:0;}
.dd-name{padding-right:0;}

/* Sul telefono la scheda non copre piu' tutto lo schermo: e' un foglio
   come il pannello dell'elenco - angoli tondi, manigliella disegnata sul
   bordo, sotto resta viva una striscia di mappa. Il corpo si spezza in
   tessere, come le righe dell'elenco. Da computer (sopra i 1000px) non
   cambia niente: vale il blocco della build 63 piu' in alto. */
@media (max-width: 999.98px){
  /* il foglio parte SOTTO la testata (build 75): l'app misura dove
     finisce (--testata, la scrive posizionaGesti) e il foglio si ferma
     li', con un fiato di 6px. Il marchio resta sempre in vista. */
  .detail{inset:auto 0 0 0; top:calc(var(--testata, 58px) + 6px); height:auto;
    border-radius:10px 10px 0 0;
    border-top:1px solid var(--mrule); box-shadow:0 -12px 34px rgba(0,0,0,.5);}
  .detail::before{content:""; position:absolute; top:9px; left:50%; margin-left:-20px;
    width:40px; height:4px; border-radius:3px; background:rgba(244,239,230,.22);
    z-index:9; pointer-events:none;}
  /* il marchio ora sta nel colophon in fondo (build 87): non e' piu' un
     doppione della testata, e' la firma della scheda — resta visibile */
  /* il foglio non arriva al notch: il fiato del sistema non serve piu',
     resta il posto per la manigliella. La barra chiude corta e la testa
     comincia subito: i fiati larghi erano di quando in mezzo c'era il
     marchio, senza erano diventati un buco (build 76). */
  .dd-bar{padding:16px 20px 5px;}
  .dd-head{padding:8px 20px 14px;}
  /* il righello non esiste piu' (build 87); resta tessera solo la foto.
     La riga di stato si allinea al nome (20px). */
  .dd-stato{padding:2px 20px 14px;}
  .dd-acts{padding:12px 20px calc(14px + var(--safe-bot));}
  /* la descrizione NON e' una tessera (build 80): niente riquadro dietro,
     niente bordo. E' testo che scorre, e va allineato al nome e all'indirizzo
     (20px), non al testo delle tessere. */
  .dd-desc{margin:0 20px 14px; border:none; background:none; padding:0; font-size:17px;}
  .dd-apri{margin:-8px 20px 14px;}
  .dd-foto{margin:0 12px 8px; border:1px solid var(--mrule); border-radius:3px; overflow:hidden;}
  /* la tabella non e' piu' una tessera (build 87): niente riquadro, solo i
     filetti tra le righe — e si allinea al nome e alla descrizione (20px) */
  .dd-ledger{margin:6px 0 0; border-top:1px solid var(--mrule);}
  .dd-row{padding:12px 20px;}
  .dd-row:last-child{border-bottom:none;}
  /* Contattaci si allinea al testo delle tessere (12 di margine + 12 di
     fiato interno = 24). La doppia voce serve a vincere sulla vecchia
     regola scritta con #app.sh-collapsed davanti. */
  #app .dd-contact, #app.sh-collapsed .dd-contact{margin:20px 24px 6px;}
  #app .dd-piede{margin:30px 20px 10px;}
}