/* =============================================================================
   RADAR.casa — IL FOGLIO DELLA MAPPA
   Nato il 16/8/2026, turno 7. Accodato solo su `/mappa/` da `inc/mappa.php`,
   con `array( 'maplibre-gl', 'radar-ossatura' )`: è l'ultimo foglio della
   pagina **per dipendenza dichiarata**, non per fortuna.

   COSA STA QUI E COSA NO
   · Qui: le sei forme dei pin nel DOM (`.rpin`), la legenda sopra la mappa,
     i bersagli da 44 px e le due righe che rimettono a posto il vendor.
   · In `radar.css` §LA MAPPA: l'impalcatura della pagina — il foglio dei
     risultati, la tela, le tre posizioni sul telefono, i comandi di MapLibre.
     Quel blocco non si ripete qui: si estende.
   · In `radar-core/data/pin.php`: i colori, le lettere e le misure. Questo
     foglio **usa** `--tinta`, `--su`, `--pl` e `--pa`; a riempirli è
     `radar_mappa_variabili_pin()`, che li legge dalla sorgente. Un
     esadecimale scritto qui sarebbe la seconda copia → commit `159e9cb`.

   ⛔ QUELLO CHE QUESTA MAPPA NON HA, E VA DETTO
   Lo sfondo cartografico non c'è: l'estratto PMTiles servito da noi non è
   ancora stato costruito (MAPPA.md §8), e i tasselli di terzi **non si
   montano** — `INFORMATIVA.md` §7 è già pubblicata e promette che il browser
   di chi guarda «non contatta nessun altro sito». Quindi stasera la mappa è
   *pin su fondo pieno*, e non prova a somigliare al disegno nella cartografia.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1 · IL CONTENITORE DELLA TELA — la riga che rimetteva in piedi la mappa

   🚨 Misurato sul banco il 16/8/2026 a 1440 e a 375: `#mappa-tela` era alto
   **0 px** su tutte e due le larghezze. Non era un errore di JavaScript — il
   canvas WebGL c'era, `window.radarMappa` pure — era il contenitore a non
   avere altezza: `.maplibregl-map { position: relative }` del vendor usciva
   **dopo** `radar.css` (perché `header.php` accoda `radar-marchio` con
   `array( 'radar' )` prima ancora che parta `wp_enqueue_scripts`, e WordPress
   deve stampare `radar.css` per soddisfare quella dipendenza), copriva
   `.mappa__gl { position: absolute }` a parità di specificità, e `inset: 0`
   smetteva di applicarsi.

   👉 La regola sta qui, con un antenato in più, perché qui non può perdere: a
   0,2,0 batte lo 0,1,0 del vendor **in qualunque ordine** i fogli escano. Una
   dipendenza garantisce l'ordine, la specificità garantisce l'esito: si usano
   tutte e due.
   -------------------------------------------------------------------------- */
.mappa .mappa__gl {
	position: absolute;
	inset: 0;
}


/* -----------------------------------------------------------------------------
   2 · LE SEI FORME DEI PIN, NEL DOM

   Fonte: `_disegno/token.css` §LE SEI FORME DEI PIN — la sezione che quel file
   chiama «la cosa che vale di più». Le misure (30×30, 28×28, 26×26, 29×31,
   40×27, 28×28) arrivano da `data/pin.php` come `--pl` e `--pa`: qui c'è solo
   **com'è fatta** una forma con un certo nome, non quale categoria ce l'ha.

   ⚠ Sulla tela questi sei pin **non sono nodi del DOM**: sono immagini
   generate su canvas e date a MapLibre come `symbol` (MAPPA.md §3⚠ — a
   ventimila annunci i marker HTML uccidono la pagina). Il disegno su canvas
   sta in `assets/js/mappa.js` §immaginePin e legge la stessa tabella, quindi
   le due rese non possono divergere. Qui il pin esiste nella legenda, nelle
   pillole e in coda a ogni riga dei risultati — cioè nei tre posti dove è
   anche testo, misurabile e leggibile da un lettore di schermo.

   ⚠ Niente bordo bianco e niente ombra, ed è voluto: nel disegno li ha solo il
   pin **sulla mappa**, dove serve a staccarlo dalla cartografia (r.83-85 di
   `token.css`); la pastiglia dentro una pillola bianca non ha niente da cui
   staccarsi. Bordo e ombra li disegna il canvas.
   -------------------------------------------------------------------------- */
.mappa .rpin {
	/* Il fattore di scala del contesto. 1 = la misura vera del pin sulla mappa,
	   che è quella della legenda: una legenda che mostra il pin più piccolo di
	   com'è insegna un abbinamento e poi ne fa vedere un altro. */
	--k: 1;

	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--pl, 30px) * var(--k));
	height: calc(var(--pa, 30px) * var(--k));
	background: var(--tinta, var(--testo-2));
	color: var(--su, #FFFFFF);
	font: 700 calc(14px * var(--k))/1 var(--font);
	/* Il rimbalzo del disegno — `_disegno/schermate/_regole.css` §.rpin. Serve
	   alla selezione: la riga scelta ingrandisce il suo pin come fa la mappa. */
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

/* La lettera. Sta in un nodo suo per un motivo solo, ed è il rombo: la forma è
   ruotata di 45° e la lettera va controruotata, o «C» si legge di sbieco. */
.mappa .rpin__l { display: block; }

.mappa .rpin[data-forma="cerchio"]   { border-radius: 50%; }
.mappa .rpin[data-forma="quadrato"]  { border-radius: calc(6px * var(--k)); }
.mappa .rpin[data-forma="pastiglia"] { border-radius: 999px; }
.mappa .rpin[data-forma="goccia"]    { border-radius: calc(15px * var(--k)) calc(5px * var(--k)) calc(15px * var(--k)) calc(5px * var(--k)); }

.mappa .rpin[data-forma="rombo"] {
	border-radius: calc(5px * var(--k));
	transform: rotate(45deg);
}
.mappa .rpin[data-forma="rombo"] .rpin__l { transform: rotate(-45deg); }

/* L'esagono è l'unica forma che `border-radius` non sa fare. Il ritaglio è
   quello del disegno, vertice per vertice. */
.mappa .rpin[data-forma="esagono"] {
	clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%);
}

/* La misura piccola: dentro le pillole e in coda alle righe dei risultati.
   `.73` è 22/30, cioè la pastiglia da 22 px che il disegno mette nelle pillole
   (`_disegno/schermate/mappa.html` r.14). La lettera resta a 12 px come nel
   disegno invece di scalare con la forma: sotto gli 11 px una lettera bianca
   dentro un colore pieno smette di essere leggibile e diventa una macchia. */
.mappa .rpin--mini {
	--k: .73;
	font-size: 12px;
}


/* -----------------------------------------------------------------------------
   3 · LE PILLOLE — il comando principale, e un bersaglio vero

   🚨 Misurate a 1440 e a 375 il 16/8/2026: **37 px** di altezza, cioè sotto i
   44 di `_disegno/token.css` §misure (`--tocco`, 19 usi) e sotto i 44 di WCAG
   2.5.8. Il disegno ne dichiara 42 (r.14); qui vale il numero più severo dei
   due, perché è il comando che si usa di più su un telefono.
   -------------------------------------------------------------------------- */
.mappa .pillole .pillola {
	min-height: 44px;
	gap: 8px;
	padding: 0 14px 0 9px;
	font-size: 15px;
}

/* 🚨 A 375 QUATTRO CATEGORIE SU SEI STANNO FUORI, E NIENTE LO DICEVA — 19/8/2026

   Misurato: `.pillole` ha `scrollWidth` **855** dentro 375, e l'ultima pillola
   finisce a **839**. Scorreva già (`overflow-x: auto` in `radar.css`), ma senza
   un segno: si vedevano due pillole e mezza, e uno credeva che le categorie
   fossero quelle. Su un comando che questo stesso foglio chiama «il comando
   principale della mappa».

   ⛔ Mandarle a capo è stato misurato prima di scartarlo: `flex-wrap: wrap`
   porta `.mappa__comandi` da **116 a 220px**, cioè **104px in meno di mappa**
   su 597 — il 17 %, più dell'ottavo che `radar.css` §pillole già vieta. La
   mappa è il prodotto: non si impila.

   ⛔ E la prima strada è stata scartata GUARDANDOLA, non ragionandoci: il
   vecchio gioco dei due fondi `local`/`scroll` dipinge la sfumatura nello
   **sfondo** dell'elenco, e le pillole sono scatole opache che ci stanno sopra.
   Nel ritaglio a 390 il taglio era netto come prima: la sfumatura c'era e non
   si vedeva, perché cadeva dietro una pillola bianca. È il tipo di errore che
   nessun numero segnala.

   👉 Quindi una **maschera**, che agisce sull'elemento e su tutto quello che
   contiene, pillole comprese. E lo stato — c'è altro a destra? a sinistra? —
   lo scrive `mappa.js` §l'invito a scorrere in `data-altro`, perché il CSS da
   solo non sa dove sia arrivato un dito. Senza JavaScript le pillole scorrono
   come oggi: nessuna promessa in meno.

   ⚠ `-webkit-mask-image` accanto: su Safari sotto la 15.4 la proprietà nuda
   non esiste, e senza il prefisso la maschera non c'è — cioè si torna al
   difetto, proprio sui telefoni da cui arriva il traffico. */
.mappa .pillole[data-altro="destra"] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.mappa .pillole[data-altro="sinistra"] {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}

.mappa .pillole[data-altro="entrambi"] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}


/* -----------------------------------------------------------------------------
   3-bis · IL FILTRO «MESTIERE» — 5 gruppi invece di 43 pillole in fila
   30/8/2026, fronte F4. Gabriele: «non possiamo promettere professionisti e
   poi averli tutti insieme… che permetta di filtrare bene e non crei
   confusione, desktop e mobile». 43 termini in una riga sola sarebbero la
   stessa confusione spostata dalla mappa al filtro: qui si raggruppano per
   ramo (`data/tassonomie.php` §radar_servizio→`rami`) dentro un `<details>`
   nativo — apre/chiude senza JavaScript, come richiesto a riga 11 del
   template.

   ⚠ FUNZIONALE, NON LA RESA FINALE. Questo foglio fa in modo che la
   struttura sia usabile e raggiungibile — bersaglio 44px (§3 sopra, stessa
   regola), scorrimento orizzontale dentro ogni ramo aperto (stesse classi
   `.pillole`/`.pillola`, stesso `data-altro` di mappa.js). La densità e
   l'aspetto fine restano da guardare — `ui-qa` a 1440/768/375 — e non sono
   dichiarati «leggibili» qui: sono dichiarati «pronti per lo sguardo».
   -------------------------------------------------------------------------- */
.mappa .pillole-mestiere {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.mappa .pillole-mestiere__ramo {
	border: 1px solid var(--bordo);
	border-radius: 10px;
}

/* Il bersaglio del titolo segue la stessa regola di §3: mai sotto i 44px,
   perché è un comando che si tocca quanto le pillole che nasconde o rivela. */
.mappa .pillole-mestiere__titolo {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	list-style: revert;
	color: var(--testo);
}

.mappa .pillole-mestiere__titolo:focus-visible {
	outline: 2px solid var(--tinta, currentColor);
	outline-offset: -2px;
}

/* La riga di pillole dentro un ramo aperto: stesso `overflow-x` e stessa
   maschera di scorrimento di `.pillole--categorie`/`.pillole--chi` (§3), non
   una terza regola — un ramo da 22 mestieri (Lavori e mestieri) scorre come
   le 6 categorie già scorrono, con lo stesso invito che `mappa.js` scrive in
   `data-altro`. */
.mappa .pillole-mestiere__ramo .pillole--mestiere {
	padding: 6px 14px 10px;
}

/* 30/8/2026, fronte F4-bis — la pillola di un mestiere assente in questa vista
   (o il ramo intero, se nessuno dei suoi mestieri c'è) non si stampa affatto:
   vedi `templates/mappa.php` e `aggiornaPilloleMestiere()` in mappa.js, che
   scrivono l'attributo `hidden`. `.pillola` eredita il suo `display` da
   `radar.css`: senza questa riga esplicita `[hidden]` perderebbe contro quella
   regola a parità di specificità, e la pillola resterebbe visibile — lo stesso
   difetto già preso a `.cassetto__pannello[hidden]` più sotto. */
.mappa .pillole .pillola[hidden],
.mappa .pillole-mestiere__ramo[hidden] {
	display: none;
}

/* Un mestiere presente ma con zero risultati **solo perché l'utente l'ha già
   scelto** da un indirizzo condiviso (§templates/mappa.php): resta cliccabile
   per potersi togliere, ma si distingue — altrimenti sembrerebbe identica a
   una pillola che funziona, e il vicolo cieco tornerebbe uguale, solo con un
   passaggio in più prima di trovarlo.

   ⚠ S41 3/9: l'opacità sul testo intero (.75) portava `.pillola__conto` — un
   numero informativo, non decorativo, soglia 4,5:1 — a 3,37:1 su bianco.
   Corretto senza toccare il testo: la mutazione va sul fondo (superficie-alt
   invece di bianco) e sul segno colorato del pin, che è decorativo; il conto
   resta anche barrato, già sotto. Testo ed etichetta restano al colore pieno
   ereditato da `.pillole .pillola` (var(--testo), ~15:1 su superficie-alt) e
   da `.pillola__conto` (var(--testo-2), 5,34:1 su superficie-alt — misurato
   sul valore vero del token, #F6F2EC). */
.mappa .pillola--assente {
	background: var(--superficie-alt);
}

.mappa .pillola--assente .pillola__segno {
	opacity: .55; /* il quadretto colorato è decorativo (WCAG 1.4.1 lo copre la forma): qui l'opacità è ammessa */
}

.mappa .pillola--assente .pillola__conto {
	text-decoration: line-through;
}


/* -----------------------------------------------------------------------------
   4 · LA CODA DI UNA RIGA DEI RISULTATI
   La categoria porta la sua pastiglia, quindi il puntino tondo che `radar.css`
   le disegnava davanti con `::before` è diventato un secondo segno per la
   stessa cosa — e per giunta uno che perde la forma. Si spegne.
   -------------------------------------------------------------------------- */
.mappa .risultato__categoria::before,
.mappa .scheda-mappa__categoria::before { content: none; }

.mappa .risultato__categoria { gap: 6px; }

/* 19/8/2026, turno 12 — mestiere e comune di un professionista, al posto
   della pastiglia «Servizi» che diceva la stessa cosa su tutte e 36 le righe
   (Logos, guardando lo schermo — non l'aveva preso nessun metro). Testo
   semplice e non una pillola: non è una categoria da tre stati come
   affitto/vendita/…, è una descrizione, e vestirla da pillola avrebbe detto
   «guardami» a un dato che qui serve solo leggere. */
.mappa .risultato__mestiere {
	font-size: var(--t-5);
	color: var(--testo-2);
}


/* -----------------------------------------------------------------------------
   4-bis · LA RIGA COMUNE DEL FOGLIO IN MODO AGGREGATO
   MAPPA-COME-MAPS.md §9, S-AGGREGA, 5/9/2026. `radar_mappa_lista_comuni()`
   (inc/mappa.php) stampa `<li class="risultato--comune">`, apposta SENZA la
   classe base `.risultato` di radar.css: quella riga costa byte su una
   risposta che sull'Italia intera deve stare sotto i 60 KB (misurato sul
   banco: con `.risultato .risultato__titolo .risultato__totale` per esteso,
   65,6 KB; con questa forma più stretta, 55,7 KB). Quindi qui non si
   completa `.risultato`: si scrive da capo il minimo che serve, in un layout
   diverso — nome e totale sulla stessa riga, non su una griglia a due
   colonne come `.risultato__collegamento`, perché qui non c'è nessun link
   sotto da allineare.
   -------------------------------------------------------------------------- */
.mappa .risultato--comune {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem var(--passo);
	border-bottom: 1px solid var(--bordo);
	cursor: pointer;
	color: var(--testo);
}

.mappa .risultato--comune:hover,
.mappa .risultato--comune:focus-visible {
	background: var(--superficie-alt);
}

.mappa .risultato--comune b {
	font-weight: 700;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   5 · LA LEGENDA — «Ogni categoria ha un colore e una forma»
   Il pannello in basso a sinistra del disegno (`schermate/mappa.html`
   r.127-137). È la sola cosa che spiega l'abbinamento forma → categoria, ed è
   quello che rende le sei forme un'informazione invece di una decorazione.

   🟢 P2.2, 4/9/2026 — CHIUSA DI DEFAULT A OGNI LARGHEZZA, NON SOLO SUL
   TELEFONO. Fino a oggi §5-bis chiudeva la legenda solo sotto i 60rem
   («sopra lo spazio c'è», diceva il commento di allora) — ma con la barra
   unica di P2.2 la mappa a 1440 è enorme, e una legenda APERTA lì copre
   360×160px del suo angolo in basso a sinistra: lo stesso «ostacolo» che
   Gabriele aveva bocciato il 19/8, solo spostato di larghezza. Rilievo del
   coordinatore, 4/9 pomeriggio. Ora l'unica cosa che cambia fra le
   larghezze è LA POSIZIONE (in alto sul telefono, dove il foglio dei
   risultati sta in basso — §5-bis più sotto; in basso a sinistra sopra i
   60rem, dove il foglio è una colonna a fianco e non sotto): lo stato
   aperta/chiusa e il bottone che lo cambia sono identici ovunque, quindi
   una sola serie di regole, non due.

   ⚠ Tocca anche `mappa.js` §la legenda, DICHIARATO nel brief: due righe
   (il bottone parte sempre chiuso, non solo sotto i 60rem; il click
   funziona a ogni larghezza, non solo sotto). Nessun'altra riga di quel
   file cambia.
   -------------------------------------------------------------------------- */
.mappa__legenda {
	position: absolute;
	/* Sopra la riga dei riconoscimenti, che dall'8/9 sta sul fondo della tela
	   (§12): 16 px di margine suo + l'altezza della riga. */
	bottom: 44px;
	left: 16px;
	z-index: 3;
	max-width: calc(100% - 32px);
	padding: 0;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 999px;
	box-shadow: var(--ombra);
}

/* Aperta: il pannello pieno, stesse tre colonne e stesso testo di sempre. */
.mappa__legenda[data-legenda-stato="aperta"] {
	padding: 13px 15px;
	border-radius: 14px;
}

/* Il titolo è dentro un `<button>`: è quello che apre e chiude la legenda,
   a ogni larghezza da P2.2 — prima il cursore restava `default` sopra i
   60rem perché il bottone non faceva niente lì; ora fa sempre qualcosa. */
.mappa__legenda-interruttore {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 .9rem;
	background: none;
	border: 0;
	border-radius: inherit;
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.mappa__legenda[data-legenda-stato="aperta"] .mappa__legenda-interruttore {
	margin: 0 0 9px;
	padding: .6rem .7rem 0;
}

/* Il titolo intero — «Ogni categoria ha un colore e una forma» — è quello
   che legge un lettore di schermo: chiusa sta nel DOM ma si ritaglia dalla
   vista (sarebbe una pillola larga ~308px), perché a schermo la sostituisce
   `.mappa__legenda-corta` qui sotto. Aperta torna al suo aspetto pieno. */
.mappa__legenda-titolo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	max-width: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--testo-2);
}

.mappa__legenda[data-legenda-stato="aperta"] .mappa__legenda-titolo {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* L'etichetta corta — «Legenda» — è quella che si vede quando è chiusa. */
.mappa__legenda-corta {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--testo);
}

.mappa__legenda[data-legenda-stato="aperta"] .mappa__legenda-corta {
	display: none;
}

/* Una V rovesciata di due tratti: niente font di icone per una freccina.
   Ruota di 180° quando il pannello è aperto — la stessa convenzione di un
   `<details>` nativo. */
.mappa__legenda-segno {
	display: block;
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid var(--testo-2);
	border-bottom: 2px solid var(--testo-2);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.mappa__legenda[data-legenda-stato="aperta"] .mappa__legenda-segno {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.mappa__legenda-elenco {
	display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px 8px;
	margin: .5rem 0 0;
	padding: 0 .7rem .6rem;
	list-style: none;
}

.mappa__legenda[data-legenda-stato="aperta"] .mappa__legenda-elenco {
	display: grid;
}

.mappa__legenda-voce {
	display: flex;
	align-items: center;
	gap: 5px;
	max-width: none;
	font-size: 12px;
	line-height: 1;
	color: var(--testo);
}

/* 🟢 §5-bis — SOLO LA POSIZIONE CAMBIA SOTTO I 60REM, NON PIÙ LO STATO
   (quello è sopra, universale da P2.2). Trovato dal controllo finale del
   19/8/2026: sul telefono il foglio dei risultati sta in basso, e la
   legenda in basso a sinistra ci finiva SOTTO — 94×46px, esisteva, era
   accesa, e `elementFromPoint` al suo centro rendeva `risultato__collegamento`.
   Sul telefono la pastiglia va in alto, dove sopra la mappa non c'è niente;
   sopra i 60rem il foglio è una colonna A FIANCO, non sotto, e l'angolo in
   basso a sinistra resta libero — la posizione di base (bottom/left) va
   bene com'è. */
@media (max-width: 59.999rem) {
	.mappa__legenda {
		inset: .5rem auto auto .5rem;
		bottom: auto;
		right: auto;
		width: auto;
		max-width: calc(100% - 1rem);
	}
}


/* -----------------------------------------------------------------------------
   6 · CHI NON VUOLE IL MOVIMENTO
   La transizione a rimbalzo di `.rpin` è una gentilezza, non un'informazione:
   si toglie. La stessa preferenza la legge `mappa.js` (`durata()` e
   `rimbalza()`), che azzera le animazioni della telecamera e non ingrandisce
   il pin scelto a scatti — la mappa arriva grande subito.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mappa .rpin { transition: none; }
}


/* ==========================================================================
   8 · IL TITOLO DELLA PAGINA DI LUOGO — 17/8/2026

   Su `/mappa/` il titolo sta solo nell'albero di accessibilità: il disegno non
   mette un'intestazione sopra una mappa a tutto schermo, e ha ragione — quella
   pagina si spiega da sé.

   🚨 Su una pagina di **luogo** no, e il cancello visivo l'ha misurato: su
   `/mappa/cosenza/affitto/` la parola «Cosenza» aveva **zero occorrenze nel
   corpo visibile**. Il titolo c'era, era 1×1px, e il nome del posto viveva solo
   nel `<title>` e nell'indirizzo. Chi arrivava da una ricerca vedeva una mappa
   senza carta e non sapeva dove era finito.

   👉 Quindi qui il titolo **si vede**, e sta sopra le pillole perché è la prima
   cosa da leggere: dove sono. La classe la mette `templates/mappa.php`, che è
   l'unico posto che sa se un luogo c'è.

   ⚠ Piccolo e sobrio: non è la hero di `cerca`. Il corpo è quello
   dell'occhiello delle fasce, non quello di un titolone — sopra una mappa un
   titolo grosso ruba spazio al prodotto.
   ========================================================================== */

/* 🚨 8/9/2026 — non piu' una fascia a tutta larghezza sopra le pillole, ma
   una riga piccola in cima alla colonna dei risultati (→ il riquadro in
   `templates/mappa.php`). Il titolo resta, smette di prendersi una riga di
   mappa. */
.mappa__dove {
	margin: 0 0 2px;
	padding: 0;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--testo-2);
}

/* Sotto i 60rem la colonna è il foglio: da chiuso è alto 68 px e due righe di
   titolo se lo mangerebbero. Resta per chi legge con le orecchie. */
@media (max-width: 59.999rem) {
	.mappa__dove {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Sul telefono il foglio dei risultati copre già metà tela: il titolo resta,
   ma non si mangia una riga di mappa in più. */
@media (max-width: 59.999rem) {
	.mappa__dove {
		padding-top: .5rem;
		font-size: 1rem;
	}
}


/* ==========================================================================
   9 · IL CASSETTO — le ricerche salvate, 19/8/2026

   Il foglio dei risultati non si rifà: `radar.css` §Il foglio dei risultati ha
   già la testa, la maniglia e le tre posizioni, e le due misure sotto i 60rem
   stanno qui sopra (§5 e §8). Questa sezione appende **dentro** quella testa e
   niente di più.

   🚨 Sotto i 60rem il foglio chiuso è alto 4,25rem, e ci stanno la maniglia e
   il riepilogo e basta: una barra da 44px lì dentro uscirebbe dal foglio.
   Quindi da «chiuso» il cassetto sparisce, esattamente come già spariscono la
   lista, il taglio e il vuoto — e la maniglia, che è il gesto che quel foglio
   insegna, lo rimette in vista. La stella non è un comando da colpo di dito
   dentro un foglio chiuso: è la fine di una ricerca, e a quel punto il foglio
   è aperto.

   ⚠ 44px di altezza su tutti e due i comandi, come le pillole di §3: sono i
   44 di `--tocco` e di WCAG 2.5.8, ed è la stessa ragione — si premono col
   pollice, su un telefono, dentro Facebook.
   ========================================================================== */

.cassetto {
	margin-top: .5rem;
}

.cassetto__barra {
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

.cassetto__stella,
.cassetto__linguetta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 .7rem;
	font-family: var(--font);
	font-size: var(--t-5);
	font-weight: 600;
	line-height: 1.2;
	color: var(--testo);
	background: var(--superficie-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-piccolo, var(--raggio));
	cursor: pointer;
}

.cassetto__stella { flex: 1 1 auto; }
.cassetto__linguetta { flex: 0 0 auto; }

.cassetto__stella:hover,
.cassetto__linguetta:hover { border-color: var(--azione); }

/* Il segno della stella è decorativo e non deve rimpicciolire con il testo:
   è la parte che si riconosce prima di leggere.

   🚨 In scuro, su --superficie-alt, questo colore fa 4,40 — sotto la soglia
   di 4,5 del testo. È voluto: il carattere è decorazione dentro un bottone
   che porta già l'etichetta «Salva la ricerca» a contrasto 13,49, quindi
   1.4.3 non si applica, e vale la soglia dei componenti non testuali —
   1.4.11, 3:1 — che passa. Non alzare --azione per questo: un cancello
   automatico lo segnalerà comunque come rosso falso, e va letto così. */
.cassetto__segno {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--azione);
}

/* Il conteggio è un numero che cambia: cifre a larghezza fissa, o la linguetta
   salta di un pixel a ogni ricerca salvata. */
.cassetto__conto {
	min-width: 1.5em;
	padding: .05rem .35rem;
	font-size: var(--t-5);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--testo-2);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 999px;
}

.cassetto__pannello {
	margin-top: .5rem;
	padding: .6rem;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-medio, var(--raggio));
}

.cassetto__pannello[hidden] { display: none; }

/* 🚨 Questa riga è la difesa contro i sette giorni di Safari, e per questo sta
   in cima al pannello e non in fondo: chi legge dopo aver salvato dieci
   ricerche l'ha letta troppo tardi. */
.cassetto__avviso {
	margin: 0 0 .6rem;
	max-width: none;
	font-size: var(--t-5);
	line-height: 1.45;
	color: var(--testo-2);
}

.cassetto__albero,
.cassetto__rami {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Il rientro dice la parentela, e la riga verticale la rende leggibile anche
   quando i titoli vanno a capo — che sul telefono succede sempre. */
.cassetto__rami {
	margin-left: .55rem;
	padding-left: .55rem;
	border-left: 1px solid var(--bordo);
}

.cassetto__nodo {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: .45rem .5rem;
	font-family: var(--font);
	font-size: var(--t-5);
	line-height: 1.35;
	text-align: left;
	color: var(--testo);
	background: none;
	border: none;
	border-radius: var(--raggio-piccolo, var(--raggio));
	cursor: pointer;
}

.cassetto__nodo:hover { background: var(--superficie-alt); }

/* Il nodo da cui si è partiti si vede con la stessa barra a sinistra della riga
   scelta nei risultati: una convenzione sola per «sei qui». */
.cassetto__nodo[aria-current="true"] {
	font-weight: 600;
	background: var(--superficie-alt);
	box-shadow: inset 3px 0 0 var(--azione);
}

.cassetto__nessuna {
	padding: .45rem .5rem;
	font-size: var(--t-5);
	line-height: 1.45;
	color: var(--testo-2);
}

.cassetto__esporta {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: .6rem;
	font-family: var(--font);
	font-size: var(--t-5);
	font-weight: 600;
	color: var(--testo);
	background: var(--superficie-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-piccolo, var(--raggio));
	cursor: pointer;
}

.cassetto__esporta:hover { border-color: var(--azione); }

.cassetto__testo {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding: .5rem;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--testo);
	background: var(--superficie-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-piccolo, var(--raggio));
	resize: vertical;
}

.cassetto__testo[hidden] { display: none; }

.cassetto__detto {
	margin: .5rem 0 0;
	max-width: none;
	font-size: var(--t-5);
	color: var(--testo-2);
}

.cassetto__detto:empty { display: none; }

/* 🚨 IL PANNELLO APERTO SFONDAVA IL FOGLIO — misurato il 19/8/2026 a 375 E a 1440.

   `.foglio__testa` è `flex: none`: prende l'altezza del suo contenuto e non la
   discute. Col cassetto aperto quel contenuto diventava 228px dentro un foglio
   alto 229 sul telefono, e 799px dentro una colonna alta 672 sul largo con un
   albero di dodici nodi — cioè 127px di ricerche salvate stampate sotto il
   bordo, raggiungibili da nessuno.

   ⚠ E il cancello visivo dava verde tutte e due le volte, perché niente
   sbordava **a destra** e il documento non scorreva in orizzontale. È il tipo
   di svista che quel metro non prende: si trova guardando i numeri del foglio,
   non i suoi.

   👉 Allora dal foglio non si esce: è la testa a scorrere, e la lista si
   stringe da sola perché in `radar.css` è `flex: 1 1 auto; min-height: 0`.
   Vale a tutte e due le larghezze — sotto i 60rem il foglio ha un'altezza
   dichiarata (4,25rem, 45%, 100%), sopra è una colonna stirata alta quanto
   `.mappa__corpo`: in tutti e due i casi `max-height: 100%` si risolve. */
.foglio__testa {
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 🚨 UN GUASTO NON È UNA MAPPA VUOTA. La riga rossa nel foglio la stampa il
   server quando la pagina nasce guasta, e `mappa.js` §guasto() quando a
   fallire è una ricerca dopo. In tutti e due i casi si spegne con `hidden`, e
   `radar.css` per questa riga il caso non ce l'ha: `.foglio__taglio[hidden]` e
   `.foglio__vuoto[hidden]` sì, `.foglio__guasto[hidden]` no. Oggi regge lo
   stesso perché nessuno le dà un `display`, cioè per una cosa che non c'è: si
   scrive, invece di sperarci. */
.foglio__guasto[hidden] { display: none; }


/* Sul telefono, da «chiuso», il cassetto non c'è: vedi l'intestazione. */
@media (max-width: 59.999rem) {
	.foglio[data-stato="chiuso"] .cassetto { display: none; }
}


/* ==========================================================================
   10 · LA BARRA UNICA — P2.2, 4/9/2026

   BUCHI-PIRAMIDE-1 B4/C16 (PIRAMIDE-2.md §P2.2): a 1440 la mappa cominciava
   a 525px perché sopra c'erano Dove, sei pillole, tre pillole di «chi», la
   ricerca mestiere e tre cassetti — tutti impilati, tutti sempre aperti.
   DESIGN.md §1: «la mappa è il contenuto, l'interfaccia è la cornice». Qui
   sotto la testata resta **una riga sola**: Dove, le sei pillole di
   categoria (il comando principale, MAPPA.md §7 — restano sempre visibili,
   invariate) e il bottone «Filtri», che apre in un pannello proprio «chi»
   e «mestiere». Nessuna funzione cambia: stesso form, stessi nomi di campo
   — solo dove le cose stanno nel documento e come appaiono.

   Il resto (`.mappa`, `body.mappa-attiva`, flex a colonna) non si tocca:
   `.mappa__comandi` resta `flex: none` (radar.css) e `.mappa__corpo` resta
   `flex: 1 1 auto` — la mappa riempie da sola tutto quello che avanza sotto
   la barra, senza un calcolo `100svh - testata - barra` scritto a mano:
   la somma è già quello che il flex-column di `.mappa` fa per conto suo.
   ========================================================================== */

.mappa .mappa__comandi {
	/* Ancora per `.filtri__corpo` (filtri-mappa.css §6), che esce dal
	   flusso e si affianca sotto questa riga: senza un antenato posizionato
	   qui, un `position: absolute` risalirebbe fino al body. */
	position: relative;
}

.mappa .mappa__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	padding: .4rem var(--passo);
	/* Una riga sola: anche col wrap di riserva (schermi intermedi) non deve
	   mai avvicinarsi al tetto di 120px del criterio d'uscita. */
	max-height: 120px;
}

/* Il campo Dove: prima chiedeva tutta la riga per sé, ora è uno dei tre
   comandi della barra — una misura fissa e ragionevole, non elastica come
   prima, perché deve lasciare spazio alle pillole accanto. */
.mappa .mappa__barra .mappa__campo-dove {
	flex: 0 1 14rem;
	min-width: 8rem;
}

.mappa .mappa__valore-dove {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	color: var(--testo);
	font: inherit;
	font-size: var(--t-5);
}

.mappa .mappa__valore-dove::placeholder { color: var(--testo-2); }

.mappa .mappa__valore-dove:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 1px;
}

/* Le sei pillole di categoria: stesso markup e stesso comportamento di
   sempre (§3 più sopra), solo più compatte perché condividono la riga con
   Dove e «Filtri» invece di averla tutta per sé — «solo segno+nome,
   conteggio a fianco in piccolo» del criterio d'uscita. */
.mappa .mappa__barra .pillole--categorie {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}

.mappa .mappa__barra .pillole--categorie .pillola {
	min-height: 44px;
	padding: 0 10px 0 7px;
	gap: 6px;
	font-size: 13px;
}

.mappa .mappa__barra .pillole--categorie .pillola__conto {
	font-size: 11px;
}

/* P2.8, 5/9/2026 — etichetta e filetto davanti ai due gruppi, dentro la
   stessa fila che scorre (`.pillole`, radar.css §pillole): niente wrap, non
   toccano l'altezza di riga (align-items:center eredita i 44px della
   pillola più alta). Stessa forma della piccola maiuscoletta di
   `cerca.css` (.cerca__gruppo-etichetta), qui coi token della mappa. */
.mappa .mappa__barra .pillole--categorie .pillole__etichetta-gruppo {
	flex: none;
	padding-left: 2px;
	font: 600 11px/1.2 var(--font-mono, inherit);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--testo-2);
	white-space: nowrap;
}

.mappa .mappa__barra .pillole--categorie .pillole__filetto {
	flex: none;
	align-self: stretch;
	width: 1px;
	margin: 6px 2px;
	background: var(--bordo);
}

.mappa .mappa__barra .filtri { flex: 0 0 auto; }

/* --- A 390: Dove + «Filtri» su una riga, le pillole su un'altra che scorre
   dentro di sé --------------------------------------------------------
   Chiude A7 (BUCHI-PIRAMIDE-1: «a 375 la riga delle categorie scorre oltre
   il bordo»): `.pillole` ha già `overflow-x: auto` (radar.css §pillole),
   qui serve solo che la RIGA che le contiene sia larga quanto lo schermo e
   non l'intera fila affiancata a Dove — `min-width: 0` è la stessa difesa
   già documentata su `.mappa` più sopra in questo file (la fila chiede la
   sua larghezza intera a un flex item, che di suo non si stringe mai). */
@media (max-width: 59.999rem) {
	/*
	 * `flex-basis: 0`, non `auto`: con `auto` il campo prendeva l'intera riga
	 * (343px su 375) e spingeva «Filtri» a capo — misurato aprendo il DOM,
	 * non solo il CSS: `getBoundingClientRect()` di `.filtri` cadeva su una
	 * seconda riga, e la casella della prima pillola finiva sopra la
	 * legenda della mappa, che con la barra ora compatta comincia molto più
	 * in alto di prima. Con la base a 0 il campo cresce SOLO nello spazio
	 * che «Filtri» lascia libero sulla stessa riga.
	 */
	.mappa .mappa__barra .mappa__campo-dove {
		flex: 1 1 0;
		min-width: 0;
		order: 1;
	}

	.mappa .mappa__barra .filtri {
		order: 2;
	}

	.mappa .mappa__barra .pillole--categorie {
		order: 3;
		flex: 1 1 100%;
		min-width: 0;
	}
}


/* ==========================================================================
   11 · IL FOGLIO A 390 — PANNELLO DAL BASSO, LE DUE ALTEZZE DEL CRITERIO

   Il meccanismo (maniglia, tre stati, `mappa.js`) non si tocca: solo le due
   altezze del criterio d'uscita di P2.2 — 40vh chiuso/a metà, 85vh pieno —
   al posto del 45%/100% di prima. `.mappa` raddoppia la specificità di
   `.foglio[data-stato="…"]` (radar.css, 0,2,0 contro 0,1,0), stessa tecnica
   già usata per `.mappa__gl` più sopra in questo file.
   ========================================================================== */
@media (max-width: 59.999rem) {
	.mappa .foglio[data-stato="meta"]  { height: 40vh; }
	.mappa .foglio[data-stato="pieno"] { height: 85vh; }
}


/* ==========================================================================
   12 · IL PIEDE, IN UNA RIGA SUA SOTTO LA MAPPA — P2.2, 4/9/2026

   Rilievo del coordinatore: l'attribuzione (Titolare, P.IVA, Informativa,
   OSM, Overture) che MapLibre disegna dentro `#mappa-tela` (angolo in basso
   a destra, sopra la scala) si sovrapponeva alla mappa. `templates/mappa.php`
   la stampa ORA una seconda volta come riga vera del documento, fuori dalla
   tela — qui si spegne quella dentro la tela (sarebbe una duplicazione a
   schermo, non un secondo dato: l'informazione resta la stessa, letta due
   volte) e si dà alla riga nuova un aspetto sobrio.

   Nessun calcolo `100svh - testata - barra - piede` scritto a mano: `.mappa`
   è già `display: flex; flex-direction: column` (radar.css) con
   `.mappa__corpo` a `flex: 1 1 auto` — un fratello `flex: none` in più (il
   piede) si prende solo lo spazio che gli serve, e la mappa si restringe da
   sola per farglielo, con la stessa specificità (0,2,0) già in uso in tutto
   questo file per vincere sul vendor.
   ========================================================================== */
/* Solo il controllo di attribuzione, non tutto `.maplibregl-ctrl-bottom-right`:
   quel contenitore porta anche la scala (`ScaleControl`, mappa.js) — non
   attribuzione, non duplicata da niente qui sotto, resta al suo posto. */
.mappa .maplibregl-ctrl-attrib {
	display: none;
}

/*
 * Sguardo d'insieme, 4/9/2026 sera — IL FONDO CHIARO ROMPEVA L'INSIEME.
 *
 * Bocciato dal coordinatore: la mappa non scorre (è la mappa il contenuto,
 * non una sezione — DESIGN.md §1), quindi questa riga è l'UNICA cosa che
 * l'utente vede sotto la mappa. Con `--superficie` (bianco/chiaro) era una
 * fascia chiara al posto del piede nero che chiude le altre sei pagine del
 * sito (`footer.php`, `.pieDiPagina`, fondo `--inchiostro`): stessi token,
 * stesso fondo, stesso testo chiaro — non si richiama `.pieDiPagina` (fuori
 * dal mio perimetro, e vive comunque nascosta da `body.mappa-attiva`), le
 * si dà lo stesso aspetto.
 *
 * Altezza: 40-48px del criterio, una riga sola su schermi larghi — a 390
 * (mappa.css più sotto) può andare su due righe, tetto 72px.
 */
/* 🚨 8/9/2026 — L'ATTRIBUZIONE TORNA SULLA MAPPA, E SMETTE DI ESSERE
   UNA STRISCIA.
   Gabriele: *«i riconoscimenti a OpenStreetMap devono essere più leggeri e
   integrati sulla mappa, non la striscia enorme che prende tutto il
   footer»*. Misurato prima: una fascia **1900×40 px di inchiostro pieno**
   sotto la carta, cioè 40 px tolti al prodotto su una pagina che è la mappa.

   Il 4/9 quella riga era stata messa fuori dalla tela per una ragione buona
   (il controllo di MapLibre finiva sopra la scala), ma la cura è stata
   peggiore del male: un rimedio all'inganno di un sovrapposto risolto
   mangiando un pezzo di mappa.

   👉 Ora sta DENTRO la tela, appoggiata sul fondo, senza fondo pieno: una
   sfumatura che si spegne verso l'alto e un'ombra sul testo, che è come si
   tiene leggibile una scritta su una fotografia. La mappa si riprende i suoi
   40 px.
   ⚠ `pointer-events: none` sulla riga e `auto` sui suoi collegamenti: una
   striscia trasparente larga quanto la mappa che rubasse il trascinamento
   sarebbe un difetto invisibile e insopportabile — si vede la mappa, non si
   riesce a spostarla.
   ⚠ I collegamenti restano tutti e sei e tutti a **un clic**: Informativa e
   «Come ordiniamo i risultati» sono obblighi (art. 22 c. 4-bis Cod. Cons.),
   e non finiscono dietro un bottone da aprire. */
.mappa .mappa__piede {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	margin: 0;
	padding: 26px 16px 8px;
	max-width: none;
	background: linear-gradient(to top, rgba(10, 8, 6, .58) 0%, rgba(10, 8, 6, .34) 45%, rgba(10, 8, 6, 0) 100%);
	border-top: 0;
	font-size: 11px;
	line-height: 1.45;
	color: #F3EEE8;
	text-shadow: 0 1px 2px rgba(10, 8, 6, .85);
	pointer-events: none;
}

.mappa .mappa__piede a {
	pointer-events: auto;
}

/* La scala di MapLibre sta anche lei in basso a destra: sale sopra la riga,
   o le due si accavallano. Solo su `.mappa`, non in home: lì la riga dei
   riconoscimenti è quella di MapLibre e la scala non c'è. */
.mappa .maplibregl-ctrl-bottom-right {
	bottom: 26px;
}

/* Sotto i 60rem la riga va a due capi (misurato: 67 px a 390) e la scala le
   finirebbe dentro: sale sopra tutta la riga, non di mezza. */
@media (max-width: 59.999rem) {
	.mappa .maplibregl-ctrl-bottom-right {
		bottom: calc(var(--mappa-foglio-chiuso, 68px) + 82px);
	}
}

/* Nascosta di default, la mostra solo la media query sotto i 60rem (§12
   più sotto): senza questa riga un `<span>` è `inline` di suo, e in un
   qualunque contesto fuori dalle due media query (nessuno oggi, ma un
   foglio di stampa sì) si vedrebbero insieme sia «Overture» sia «Overture
   Maps Foundation». */
.mappa .mappa__piede-corto { display: none; }

.mappa .mappa__piede a {
	color: #FFFFFF;
	text-underline-offset: .2em;
}

.mappa .mappa__piede a:hover { color: var(--oro-vivo, #E8B341); }

@media (max-width: 59.999rem) {
	.mappa .mappa__piede {
		/* ⚠ Sul telefono il foglio dei risultati (`.foglio`, z-index 4) è
		   appoggiato in fondo alla tela e coprirebbe questa riga: misurato
		   subito dopo lo spostamento dell'8/9 — l'attribuzione c'era e non si
		   vedeva, che è come non averla. Sale sopra il foglio **chiuso**.
		   ⚠ `--mappa-foglio-chiuso` è l'altezza del foglio da chiuso: la
		   maniglia più la riga del conto. È un numero misurato (68 px a 390,
		   375 e 430), non calcolabile in CSS perché dipende dal contenuto:
		   **chi cambia la testa del foglio rimisuri questo**.
		   ⚠ Col foglio tirato su (`meta`/`pieno`) la riga resta sotto e viene
		   coperta: è il comportamento di ogni mappa con un foglio, e i
		   collegamenti tornano visibili appena lo si richiude. */
		bottom: calc(var(--mappa-foglio-chiuso, 68px) + 8px);
		white-space: normal;
		line-height: 1.5;
	}

	/* 5/9/2026, MAPPA-COME-MAPS.md G4 — sei voci a 11px non stanno in 2 righe
	   a 390 (misurato: 3 rese, `Range.getClientRects()`). «Come ordiniamo i
	   risultati» non è l'obbligo legale (quello resta: Informativa, OSM,
	   Overture) — si toglie lei sola sotto i 60rem, non un calcolo sull'
	   altezza che potrebbe restare verde mentre il testo si accavalla. */
	.mappa .mappa__piede-extra { display: none; }

	/* «Overture» invece di «Overture Maps Foundation»: anche dopo la riga
	   sopra restavano 3 righe rese (misurato). Il nome intero resta il nome
	   accessibile (`aria-label` sull'`<a>`, template) — qui si sceglie solo
	   quale `<span>` si vede. */
	.mappa .mappa__piede-lungo { display: none; }
	.mappa .mappa__piede-corto { display: inline; }
}

@media (min-width: 60rem) {
	.mappa .mappa__piede-corto { display: none; }
}


/* ==========================================================================
   13 · LA LINGUETTA — la colonna appare e scompare, ≥ 60rem

   P210, 5/9/2026, MAPPA-COME-MAPS.md §7.2 punto 3 / §7.6 H3. Un bottone sul
   bordo fra `.foglio` e `.mappa__tela`: FRATELLO di `.foglio` dentro
   `.mappa__corpo` (`templates/mappa.php`), non figlio — se stesse dentro
   sparirebbe con lei (`display:none`) e con lei sparirebbe il bersaglio da
   tastiera che H5 chiede a colonna chiusa (Prometeo, rilievo 12/v). `.mappa`
   raddoppia la specificità per la stessa ragione di sempre in questo file.
   ========================================================================== */

/*
 * P210-v2, 5/9/2026 — PIÙ VISIBILE (rilievo del coordinatore): 1,25×3rem
 * (20×48px) si perdeva contro il bordo della colonna. ≥ 24×64px, come
 * chiesto, con lo stesso sfondo/bordo/ombra di ogni superficie del sito
 * (`.pannello-scheda`, i comandi di MapLibre) — non è un elemento a sé,
 * è la stessa lingua visiva.
 */
.mappa .mappa__linguetta {
	position: absolute;
	top: 50%;
	left: 24rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 4rem;
	padding: 0;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 0 var(--raggio) var(--raggio) 0;
	box-shadow: var(--ombra);
	transform: translateY(-50%);
	transition: left .22s ease;
}

.mappa .mappa__linguetta:hover,
.mappa .mappa__linguetta:focus-visible { background: var(--superficie-alt); }

.mappa .mappa__linguetta-segno {
	width: .65rem;
	height: .65rem;
	border-left: 2px solid var(--testo-2);
	border-bottom: 2px solid var(--testo-2);
	transform: rotate(45deg);
}

/*
 * IL TESTO — «al passaggio e per gli screen reader» (rilievo del
 * coordinatore): di norma ritagliato come `.solo-per-lettori` (stessa
 * tecnica, clip-path — mai una sbiadita, sempre presente per chi non
 * vede lo schermo); su `:hover`/`:focus-visible` DEL BOTTONE diventa una
 * bolla visibile accanto alla linguetta, senza spostare né duplicare il
 * nodo. Uno solo dei due usi alla volta: chi passa il mouse la VEDE, chi
 * naviga con lo screen reader la SENTE — mai tutti e due insieme, e mai
 * nessuno dei due.
 */
.mappa .mappa__linguetta-testo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mappa .mappa__linguetta:hover .mappa__linguetta-testo,
.mappa .mappa__linguetta:focus-visible .mappa__linguetta-testo {
	position: absolute;
	top: 50%;
	left: 100%;
	z-index: 4;
	width: auto;
	height: auto;
	margin: 0 0 0 .5rem;
	padding: .3rem .6rem;
	overflow: visible;
	clip-path: none;
	color: var(--testo);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
	transform: translateY(-50%);
	font-size: var(--t-5);
	font-weight: 600;
}

/* Colonna chiusa: la bolla si aprirebbe FUORI dalla tela (la linguetta è
   a `left:0`) — si sposta a destra del bottone comunque, ma qui serve
   dirlo perché a `left:0` «a destra» è l'unico verso possibile: nessuna
   correzione in più serve, `left:100%` regge in entrambi gli stati. */

/* Colonna chiusa: la linguetta segue il bordo della tela (che ora comincia
   a 0) e la freccia punta dall'altra parte — «riapri». */
.mappa .mappa__linguetta[aria-expanded="false"] {
	left: 0;
	border-radius: 0 var(--raggio) var(--raggio) 0;
}

.mappa .mappa__linguetta[aria-expanded="false"] .mappa__linguetta-segno {
	transform: rotate(225deg);
}

@media (max-width: 59.999rem) {
	/* «A 390 la linguetta non c'è» — H3. Nasce già `hidden` dal template e
	   `mappa.js` non la scopre sotto i 60rem: questa riga è solo la seconda
	   difesa, per se un domani qualcosa la togliesse in JavaScript senza
	   guardare la larghezza. */
	.mappa .mappa__linguetta { display: none; }
}


/* ==========================================================================
   14 · IL PANNELLO DI SELEZIONE, PER LARGHEZZA

   L'aspetto (token, colori, tipografia) sta in `radar.css` §IL PANNELLO DI
   SELEZIONE. Qui solo DOVE sta e QUANTO spazio prende, che cambia con la
   larghezza e con lo stato della colonna — mai col contenuto.
   ========================================================================== */

@media (max-width: 59.999rem) {
	/*
	 * Sotto i 60rem il pannello SOSTITUISCE la lista dentro il foglio —
	 * §7.6 H1-390 — non le sta sopra: i due contendevano lo stesso spazio
	 * (Prometeo, rilievo 9), e la lista è comunque a un tocco di distanza
	 * («← Elenco»).
	 */
	.mappa .foglio[data-pannello] .risultati,
	.mappa .foglio[data-pannello] .foglio__taglio,
	.mappa .foglio[data-pannello] .foglio__vuoto,
	.mappa .foglio[data-pannello] .foglio__guasto {
		display: none;
	}

	.mappa .foglio[data-pannello] .pannello-scheda {
		flex: 1 1 auto;
		min-height: 0;
		border-bottom: 0;
	}

	/*
	 * ⚠ SENZA QUESTE DUE RIGHE IL CORPO NON SI FERMA AL BORDO DEL FOGLIO.
	 * `.foglio` non ha (e non deve avere: `.risultati` scorre già da sé)
	 * un `overflow: hidden` proprio — misurato: senza `flex: 1 1 auto` +
	 * `min-height: 0` qui, `.pannello-scheda__corpo` cresce alla sua
	 * altezza naturale e la sborda fuori dal rettangolo del foglio di
	 * decine di pixel invece di scorrere al suo interno (H1-390, rilievo
	 * 9 di Prometeo: è lo stesso motivo per cui `.risultati` li ha già).
	 */
	.mappa .foglio[data-pannello] .pannello-scheda__corpo {
		flex: 1 1 auto;
		min-height: 0;
		/*
		 * Anche il poco che si può: `.85rem`/`.4rem` (radar.css, per la
		 * colonna larga dove lo spazio non manca) qui costano 34px di
		 * spazio verticale su ~193px disponibili — misurato con
		 * `_diag_altezze.py` (usa e getta). Non basta da solo a evitare lo
		 * scorrimento su ogni scheda (i 44px per bottone di WCAG 2.5.8 e
		 * `.foglio__testa` esistente — 108px, non mio da ridisegnare qui —
		 * restano fissi), ma riduce quanto serve scorrere.
		 */
		padding: .35rem .5rem .25rem;
		gap: .2rem;
	}

	.mappa .foglio[data-pannello] .pannello-scheda__indietro {
		margin-top: .2rem;
	}

	.mappa .foglio[data-pannello] .pannello-scheda__testa {
		gap: .15rem;
	}

	.mappa .foglio[data-pannello] .pannello-scheda__azioni-blocco {
		gap: .25rem;
	}

	.mappa .foglio[data-pannello] .pannello-scheda__icona-voce {
		gap: .15rem;
	}

	/* La foto piccola e affiancata al testo, non a piena larghezza sopra:
	   a piena larghezza (3/2) da sola supera i 2/3 dei 338-380px utili del
	   foglio a «metà» (misurato, Prometeo rilievo 9) e le azioni non
	   ci stanno più senza scorrere. */
	.mappa .pannello-scheda__corpo {
		grid-template-columns: 4.5rem 1fr;
		align-items: start;
	}

	.mappa .pannello-scheda__foto {
		width: 4.5rem;
		height: 4.5rem;
		aspect-ratio: auto;
		grid-column: 1;
	}

	/*
	 * 🚨 SENZA QUESTA RIGA IL TITOLO VA A CAPO SU CINQUE RIGHE, MISURATO.
	 * La foto non c'è su ogni scheda (`dati.miniatura` è spesso `null`): se
	 * manca, `.pannello-scheda__testa` diventa il PRIMO figlio del grid, e
	 * l'auto-placement di CSS Grid la mette nella prima colonna — quella
	 * stretta da 4,5rem pensata per la foto, non nell'`1fr` largo. Un
	 * titolo lungo ("Stradale Salentina Srl") in 72px si spezza riga per
	 * parola: misurato con `_diag_altezze.py` (usa e getta, cancellato a
	 * fine fronte), 76,8px di altezza per il solo titolo — quasi metà
	 * dello spazio utile del foglio a «metà». `grid-column: 2` fissa la
	 * colonna a prescindere da cosa la precede nel DOM.
	 */
	.mappa .pannello-scheda__testa { grid-column: 2; }

	.mappa .pannello-scheda__extra,
	.mappa .pannello-scheda__azioni-blocco {
		grid-column: 1 / -1;
	}

	/*
	 * P210-v2 — i bottoni tondi sono già compatti di loro (44px il cerchio,
	 * 11px il nome sotto): tre voci da 4,5rem l'una stanno comode nei ~330px
	 * utili del foglio a 390, senza bisogno di un padding ridotto come
	 * serviva alle pillole `.pulsante` piene di prima.
	 */
}

@media (min-width: 60rem) {
	/* Colonna chiusa: galleggia sopra la mappa, 360px — §7.2 punto 1. */
	.mappa .pannello-scheda--galleggiante {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 3;
		width: 360px;
		max-height: calc(100% - 2rem);
		border: 1px solid var(--bordo);
		border-radius: var(--raggio-grande);
		box-shadow: var(--ombra);
	}

	.mappa .pannello-scheda--galleggiante .pannello-scheda__corpo {
		max-height: 100%;
	}
}

/* --------------------------------------------------------------------------
   DISEGNA UN'AREA — 8/9/2026

   Sta in basso a destra della tela, dalla parte opposta alla legenda: sono i
   due comandi che vivono sulla carta e non devono contendersi l'angolo.
   ⚠ Sopra la riga dei riconoscimenti (§12) e sopra la scala, con lo stesso
   scarto: i tre pezzi in basso stanno su tre altezze diverse apposta.
   -------------------------------------------------------------------------- */
.mappa__disegno {
	position: absolute;
	right: 16px;
	bottom: 70px;
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	max-width: calc(100% - 32px);
}

.mappa__disegno-apri,
.mappa__disegno-bottone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: 0 14px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 999px;
	box-shadow: var(--ombra);
	color: var(--testo);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.mappa__disegno-apri:hover,
.mappa__disegno-bottone:hover { background: var(--superficie-alt); }

.mappa__disegno-apri:focus-visible,
.mappa__disegno-bottone:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

/* Il segno: un pentagono tratteggiato, che è quello che si sta per fare. */
.mappa__disegno-segno {
	width: 14px;
	height: 14px;
	border: 1.5px dashed currentColor;
	border-radius: 3px;
	transform: rotate(12deg);
}

/* La barra del disegno: una riga di comandi sullo stesso filo del bottone che
   ha sostituito. Va a capo su schermo stretto invece di uscire dalla tela. */
.mappa__disegno-barra {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	box-shadow: var(--ombra);
}

.mappa__disegno-barra[hidden] { display: none; }

.mappa__disegno-nota {
	font-size: .875rem;
	color: var(--testo-2);
}

.mappa__disegno-bottone {
	min-height: 36px;
	box-shadow: none;
	font-size: .875rem;
}

.mappa__disegno-bottone--fine {
	background: var(--azione);
	border-color: transparent;
	color: var(--azione-testo);
}

.mappa__disegno-bottone--fine:hover { background: var(--azione-hover); }

/* ⚠ Un bottone spento deve **sembrare** spento: «Cerca in quest'area» nasce
   disabilitato perché sotto i tre punti un'area non esiste, e senza questa
   regola sembrerebbe premibile e non farebbe niente. */
.mappa__disegno-bottone[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

@media (max-width: 59.999rem) {
	.mappa__disegno {
		right: 12px;
		left: 12px;
		bottom: calc(var(--mappa-foglio-chiuso, 68px) + 46px);
		max-width: none;
	}
}

/* La parola accanto al numero nelle righe aggregate (`radar_mappa_lista_comuni()`,
   8/9/2026): più piccola e in tono minore del numero, che resta il dato. */
.risultato__unita {
	margin-left: .25em;
	font-size: .8em;
	font-weight: 400;
	color: var(--testo-2);
}

/* =============================================================================
   LA FINESTRELLA AL VOLO — LOTTO F, 10/9/2026 (terza squadra sul lotto)
   mappa.js, §«LA FINESTRELLA AL VOLO», e mappa.php la costruiscono e la
   riempiono: qui mancava lo stile, in nessun foglio del tema. Senza
   `position: absolute` sul nodo, `transform: translate()` (pixel assoluti da
   `mappa.project()`) lo spostava dal suo punto nel flusso normale del
   documento — dentro `#mappa-tela` significava "in un angolo qualsiasi",
   mai sul segnaposto. Trovato misurando sul banco, non leggendo il codice.
   ========================================================================= */

.finestrella-pin {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	max-width: min(260px, calc(100% - 16px));
	pointer-events: auto;
}

.finestrella-pin__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: .65rem .75rem;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
}

/* Solo un'etichetta: non è una casella premibile come nei filtri. */
.finestrella-pin__categoria { cursor: default; }

.finestrella-pin__riga {
	margin: 0;
	font-size: var(--t-5);
	color: var(--testo-2);
}

.finestrella-pin__scheda {
	align-self: stretch;
	padding: .4rem .8rem;
	font-size: var(--t-5);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--azione);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.finestrella-pin__scheda:hover { background: var(--azione-hover); }
.finestrella-pin__scheda:focus-visible { outline: 3px solid var(--azione); outline-offset: 2px; }

/* Il quadratino ruotato a 45°, mezzo fuori dal corpo: due lati portano il
   bordo della carta (quelli rivolti verso l'esterno), gli altri due restano
   senza, per non disegnare una seconda linea dentro il riquadro.
   `finestrellaPosiziona()` (mappa.js) sposta `left` in pixel via JS — qui
   solo la forma e il verso. */
.finestrella-pin__freccia {
	position: absolute;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-top: 0;
	border-left: 0;
	transform: rotate(45deg);
}

/* `finestrella-pin--sotto`: il riquadro sta SOTTO il pin (vicino al bordo
   superiore della mappa — punto 4 del brief), quindi la freccia punta in su. */
.finestrella-pin--sotto .finestrella-pin__freccia {
	bottom: auto;
	top: -7px;
	border-top: 1px solid var(--bordo);
	border-left: 1px solid var(--bordo);
	border-bottom: 0;
	border-right: 0;
}

/* Il nome dentro la finestrella al volo — LOTTO F, 10/9/2026.
   Il nome arriva dall'elenco a lato (mappa.js, `finestrellaDaElenco()`), non
   dal punto: qui si veste, non si decide. */
.finestrella-pin__nome {
	margin: .45rem 0 0;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.25;
	color: var(--testo);
}

.finestrella-pin__coda {
	margin: .15rem 0 0;
	font-size: .85rem;
	color: var(--testo-2);
}