/* =============================================================================
   RADAR.casa — I FILTRI DELLA MAPPA A DUE LIVELLI
   Squadra S12 · FILTRI MAPPA, 2/9/2026. Vedi FILTRI-MAPPA.md.

   COSA STA QUI E COSA NO
   · Qui: il pannello a 375px («Filtri»), il contenitore dei rami/mestiere
     riscritto (`.filtro-mestiere`, sostituisce `.pillole-mestiere` come
     classe del contenitore — le classi dei FIGLI, `.pillole-mestiere__ramo`
     e `.pillole-mestiere__titolo`, non cambiano e restano vestite da
     `mappa.css` §3-bis, non toccato), la ricerca dentro i filtri, «Azzera
     <ramo>», «Mostra tutto».
   · In `radar.css`: `.pillole`/`.pillola`/`.pillola__casella` — il bersaglio
     da 44px, la casella nascosta ma raggiungibile da tastiera, il bordo
     acceso quando spuntata. Non si ripete qui.
   · In `mappa.css` (un'altra squadra ci lavora sullo stile, S12 non la
     tocca): le sei forme dei pin, `.pillole-mestiere__ramo`/`__titolo`,
     `.pillola--assente`.

   Solo token `--radar-*` (`radar.css` righe 22-87), come da vincolo del
   brief — nessun esadecimale nuovo.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1 · IL CONTENITORE DEL MESTIERE — sostituisce il layout che `mappa.css`
   dava a `.pillole-mestiere` (flex a colonna, gap, larghezza piena): il
   contenitore ha un nome nuovo (`.filtro-mestiere`) perché ha figli nuovi
   (la ricerca globale, i «più richiesti»), quindi la vecchia regola non lo
   troverebbe più.
   -------------------------------------------------------------------------- */
.mappa .filtro-mestiere {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

/* «Più richiesti»: stessa cornice del ramo (`.pillole-mestiere__ramo` in
   mappa.css: bordo, raggio), ma senza `<summary>` — sempre aperto, nessun
   `<details>` da cliccare. */
.mappa .pillole-mestiere__preferiti {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mappa .pillole-mestiere__preferiti .pillole-mestiere__titolo {
	/* Qui è un `<p>`, non un `<summary>`: niente cursore a manina, niente
	   freccina — non si apre né si chiude, dice solo cosa si sta guardando. */
	margin: 0;
	cursor: default;
}

/* Il numero acceso dentro un ramo, accanto al suo nome — visibile anche
   chiuso, così si sa cosa c'è dentro senza aprire. Stessa forma della
   pastiglia numerica che il foglio dei risultati già usa altrove
   (`--radar-corpo-5`, cifre tabulari): un badge, non una seconda pillola. */
.mappa .pillole-mestiere__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	margin-left: .5em;
	padding: 0 .35em;
	border-radius: var(--radar-raggio-pillola);
	background: var(--radar-azione);
	color: var(--radar-azione-testo);
	font-size: var(--radar-corpo-5);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Il corpo di un ramo aperto: la ricerca, le pillole, l'azzera — in colonna,
   con lo stesso passo delle altre parti del filtro. */
.mappa .pillole-mestiere__corpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 6px;
}

/* Un ramo i cui mestieri sono finiti tutti fra i «più richiesti» — vedi
   templates/mappa.php: il ramo resta (badge, «Azzera»), la griglia no. */
.mappa .pillole-mestiere__vuoto {
	margin: 0;
	padding: 0 14px;
	color: var(--radar-testo-secondario);
	font-size: var(--radar-corpo-5);
}


/* -----------------------------------------------------------------------------
   2 · LA RICERCA DENTRO I FILTRI — globale (sopra tutto) e per ramo (dentro
   il `<details>` aperto). Stesso campo nei due casi, stessa altezza minima
   di 44px di una pillola: è un comando quanto le caselle che filtra.
   -------------------------------------------------------------------------- */
.mappa .filtro-mestiere__ricerca,
.mappa .pillole-mestiere__ricerca-ramo {
	display: block;
	padding: 0 var(--radar-passo);
}

.mappa .pillole-mestiere__ricerca-ramo {
	padding: 0 14px;
}

/* ⚠ Contestazione Codex, 2/9/2026 sera (giro 2, punto 7) — SENZA questa
   riga i due campi restano visibili anche senza JavaScript: le due classi
   sopra hanno specificità (0,2,0), più alta di `[hidden]` da solo (0,1,0),
   quindi `display: block` vinceva sempre sull'attributo. Un campo che si
   vede e non filtra niente è esattamente il «controllo morto» che questa
   pagina promette di non avere (templates/mappa.php riga 11) — stessa
   cautela già presa per `.filtri__apri`/`.filtri__corpo` più sotto, qui
   dimenticata la prima volta. */
.mappa .filtro-mestiere__ricerca[hidden],
.mappa .pillole-mestiere__ricerca-ramo[hidden] {
	display: none;
}

.mappa .filtro-mestiere__cerca-campo,
.mappa .pillole-mestiere__ricerca-campo {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--radar-bordo);
	border-radius: var(--radar-raggio);
	background: var(--radar-superficie);
	color: var(--radar-testo);
	font: inherit;
	font-size: var(--radar-corpo-4);
}

.mappa .filtro-mestiere__cerca-campo::placeholder,
.mappa .pillole-mestiere__ricerca-campo::placeholder {
	color: var(--radar-testo-secondario);
}

.mappa .filtro-mestiere__cerca-campo:focus-visible,
.mappa .pillole-mestiere__ricerca-campo:focus-visible {
	outline: 3px solid var(--radar-azione);
	outline-offset: 1px;
}

/* Una pillola che il testo digitato scarta: sparisce dalla vista ma resta
   nel DOM (nessun `hidden` — quell'attributo lo scrive `mappa.js` per un
   motivo suo, «zero risultati nella zona», e i due stati non devono
   scavalcarsi). Vedi filtri-mappa.js §2.

   ⚠ Due classi, non una — contestazione Codex, 2/9/2026 sera: la ricerca
   globale e quella dentro un ramo devono poter nascondere la STESSA
   pillola per due motivi diversi e indipendenti, senza che cancellare
   l'una tolga l'effetto dell'altra. Regole separate, stesso effetto. */
.mappa .pillola--nascosta-ricerca-globale,
.mappa .pillola--nascosta-ricerca-ramo {
	display: none;
}

/* Un ramo (o il blocco «più richiesti») senza nessuna pillola rimasta dopo
   la ricerca: si spegne anche lui, non resta un titolo sopra il vuoto. */
.mappa .pillole-mestiere__ramo--filtro-vuoto {
	display: none;
}


/* -----------------------------------------------------------------------------
   3 · «AZZERA <RAMO>» E «MOSTRA TUTTO»
   -------------------------------------------------------------------------- */
/* Bersaglio da 44px, stessa regola di ogni comando di questo pannello
   (§3-bis di mappa.css) — contestazione Codex, 2/9/2026 sera: 32px era
   sotto la soglia che i commenti dello stesso file rivendicavano altrove. */
.mappa .pillole-mestiere__azzera-ramo {
	align-self: flex-start;
	margin: 0 14px;
	padding: .5rem .1rem;
	min-height: 44px;
	border: none;
	background: none;
	color: var(--radar-testo-secondario);
	font-size: var(--radar-corpo-5);
	text-decoration: underline;
	cursor: pointer;
}

.mappa .pillole-mestiere__azzera-ramo:hover,
.mappa .pillole-mestiere__azzera-ramo:focus-visible {
	color: var(--radar-testo);
}

.mappa .pillole-mestiere__azzera-ramo:focus-visible {
	outline: 3px solid var(--radar-azione);
	outline-offset: 1px;
}

/* Stesso trattamento di «Aggiorna» qui accanto (`.pulsante--quieto`,
   radar.css), ma un link, non un invio — FILTRI-MAPPA.md §3: «una casella
   di caselle di spunta non sa mandare "niente selezionato", un link sì». */
.mappa .filtri__azzera {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .75rem;
	color: var(--radar-testo-secondario);
	font-size: var(--radar-corpo-5);
	text-decoration: underline;
	white-space: nowrap;
}

.mappa .filtri__azzera:hover,
.mappa .filtri__azzera:focus-visible {
	color: var(--radar-testo);
}


/* -----------------------------------------------------------------------------
   4 · IL PANNELLO A 375px — «Filtri (N)»
   Stesso schema del foglio dei risultati (`.foglio__maniglia`, radar.css):
   un bottone in cima, un corpo sotto. Sopra i 60rem il bottone è nascosto
   (già `hidden` da JavaScript) e il corpo resta sempre visibile, come oggi.
   Nasce SENZA `hidden` sul corpo: senza JavaScript i filtri restano tutti
   aperti a ogni larghezza — mai un pannello chiuso senza un modo di aprirlo.
   -------------------------------------------------------------------------- */
.mappa .filtri__apri {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	min-height: 44px;
	margin-bottom: 6px;
	border: 1px solid var(--radar-bordo);
	border-radius: var(--radar-raggio);
	background: var(--radar-superficie);
	color: var(--radar-testo);
	font: inherit;
	font-size: var(--radar-corpo-4);
	font-weight: 600;
	cursor: pointer;
}

/* `[hidden]` batte `display: flex` solo se non c'è una regola più specifica
   dopo di lei nella cascata — qui la scrivo esplicita, stessa cautela già
   presa in mappa.css per `.pillole-mestiere__ramo[hidden]`. */
.mappa .filtri__apri[hidden] {
	display: none;
}

.mappa .filtri__apri:not([hidden]) {
	display: flex;
}

.mappa .filtri__apri:focus-visible {
	outline: 3px solid var(--radar-azione);
	outline-offset: 2px;
}

.mappa .filtri__apri-conto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 .4em;
	border-radius: var(--radar-raggio-pillola);
	background: var(--radar-superficie-alt);
	color: var(--radar-testo-secondario);
	font-size: var(--radar-corpo-5);
	font-variant-numeric: tabular-nums;
}

/* Almeno un filtro attivo: il conto si vede da lontano, stesso verde delle
   voci verificate — non è uno stato di errore, è uno stato scelto. */
.mappa .filtri__apri--attivi .filtri__apri-conto {
	background: var(--radar-verificato-velo);
	color: var(--radar-verificato);
	font-weight: 700;
}

/* `[hidden]` esplicito, stessa cautela di `.pillole-mestiere__ramo[hidden]`
   in mappa.css: senza, un'altra regola a parità di specificità potrebbe
   vincere e lasciare il pannello visibile — la stessa causa del difetto già
   preso lì il 30/8/2026. JavaScript lo scrive solo sotto i 60rem: sopra,
   `.filtri__corpo` non riceve mai `hidden` e questa regola non si applica
   mai — resta la fila di pillole di sempre. */
.mappa .filtri__corpo[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------------
   6 · IL PANNELLO, UN OVERLAY A OGNI LARGHEZZA — P2.2, 4/9/2026

   Fino a oggi il bottone «Filtri» esisteva SOLO sotto i 60rem (la regola che
   stava qui lo nascondeva sopra con `!important`, e `filtri-mappa.js`
   teneva `.filtri__corpo` sempre aperto e nel FLUSSO della pagina): è
   proprio quell'accatastamento — Dove, sei pillole, tre pillole di «chi»,
   la ricerca mestiere, tre cassetti, tutti impilati — che teneva la mappa a
   525px a 1440 (BUCHI-PIRAMIDE-1 B4/C16). Il criterio d'uscita di P2.2
   chiede il bottone «Filtri» a OGNI larghezza: qui il pannello esce dal
   flusso del form ed è sempre un pannello fluttuante, con la sua barra di
   scorrimento — largo `24rem` sul desktop (la stessa misura del foglio dei
   risultati qui accanto), pieno schermo sotto i 60rem.

   ⚠ Ancora in `.mappa__comandi` (`position: relative`, mappa.css §10): senza
   quell'antenato posizionato, `position: absolute` risalirebbe al `<body>`
   e il pannello finirebbe ancorato all'angolo della pagina, non sotto la
   barra dei comandi.
   -------------------------------------------------------------------------- */
.mappa .filtri__corpo {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 6;
	width: min(24rem, 100%);
	max-height: 70vh;
	margin: 0;
	padding: .5rem 0 .75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--radar-superficie);
	border: 1px solid var(--radar-bordo);
	border-top: none;
	border-radius: 0 0 var(--radar-raggio-grande) var(--radar-raggio-grande);
	box-shadow: var(--radar-ombra);
}

@media (max-width: 59.999rem) {
	.mappa .filtri__corpo {
		width: 100%;
		max-height: 75vh;
	}
}

/* La testa del pannello (mappa.php §la testa del pannello): il titolo e la
   «x» — un secondo modo di chiuderlo oltre Esc e il clic fuori, per chi usa
   il mouse su un pannello che ora galleggia sopra l'elenco. */
.mappa .filtri__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 0 var(--radar-passo) .4rem;
	border-bottom: 1px solid var(--radar-bordo);
}

.mappa .filtri__titolo {
	font-size: var(--radar-corpo-4);
	font-weight: 600;
	color: var(--radar-testo);
}

/* La regola per `.filtri__gruppo-etichetta» (le due intestazioni
   «Immobili»/«Servizi» di P2.8) è tolta con lei, S-BARRA-MAPPA 5/9/2026:
   `templates/mappa.php` non stampa più quei due <p>, annullati da
   CONFRONTO-HOME.md §3 — una regola senza markup che la usi è peso morto. */

.mappa .filtri__chiudi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 -.5rem 0 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--radar-testo-secondario);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.mappa .filtri__chiudi:hover,
.mappa .filtri__chiudi:focus-visible {
	color: var(--radar-testo);
	background: var(--radar-superficie-alt);
}

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


/* -----------------------------------------------------------------------------
   5 · «FILTRI ATTIVI» — LA PILLOLA DI STATO
   Debito PIRAMIDE.md riga 3.3, chiuso qui: mancava per «chi», e in realtà
   mancava per tutti — un cassetto in cima al pannello con una pillola per
   OGNI VALORE scelto (categoria, chi pubblica, mestiere), non uno schema
   diverso a seconda del gruppo. Markup e stato: filtri-mappa.js §0-ter.
   Nasce vuoto e `hidden`: niente da mostrare finché l'utente non tocca
   qualcosa (la ragione è la stessa di `.filtri__apri-conto` più sopra).
   -------------------------------------------------------------------------- */
.mappa .filtri__attivi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.mappa .filtri__attivi[hidden] {
	display: none;
}

/* Stesso bersaglio da 44px di ogni comando di questo pannello (§3), sulla
   «x» — non sulla pillola intera, che resta compatta quanto il suo testo. */
.mappa .filtri__chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	padding: 0 .1em 0 .75em;
	border: 1px solid var(--radar-bordo);
	border-radius: var(--radar-raggio-pillola);
	background: var(--radar-superficie-alt);
	color: var(--radar-testo);
	font-size: var(--radar-corpo-5);
}

.mappa .filtri__chip-nome {
	white-space: nowrap;
}

.mappa .filtri__chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--radar-testo-secondario);
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}

.mappa .filtri__chip-x:hover,
.mappa .filtri__chip-x:focus-visible {
	color: var(--radar-testo);
	background: var(--radar-superficie);
}

.mappa .filtri__chip-x:focus-visible {
	outline: 3px solid var(--radar-azione);
	outline-offset: 1px;
}


/* -----------------------------------------------------------------------------
   7 · LE SEI PILLOLE DELLA BARRA, SCURE COME QUELLE DELLA HOME
   S-BARRA-MAPPA, 5/9/2026 — CONFRONTO-HOME.md §3: P2.8 è annullata («la
   barra di ricerca è brutta», Gabriele 5/9 19:2x), la barra torna alla forma
   del disegno del 9/8 e le pillole prendono la stessa veste scura appena
   rifatta in home (`cerca.css` §6, S-HOME-1).

   ⚠ Non è una classe condivisa con `.cerca__pillola`: `cerca.css` è di
   un'altra squadra e non si tocca da qui (fuori dal mio perimetro). Quello
   che SI condivide sono i TOKEN che quella regola usa — `--inchiostro` e
   `--su-inchiostro`, globali in `ossatura.css` (non scoped a `cerca.css`) —
   così il fondo e il testo risultano IDENTICI (stesso valore risolto,
   stesso `getComputedStyle`) senza duplicare esadecimali a mano né una
   riga di quella regola.

   Specificità: 5 classi (`.pillola:not(.pillola--assente)` conta doppio),
   contro le 4 di `.mappa .mappa__barra .pillole--categorie .pillola` in
   `mappa.css` — vince a prescindere dall'ordine dei fogli (qui `filtri-
   mappa.css` carica comunque dopo, `inc/mappa.php`). L'esclusione di
   `.pillola--assente` è voluta: quella pillola resta col trattamento
   chiaro/`superficie-alt` e il conto barrato che `mappa.css` le dà già
   (S41, contrasto misurato) — il fondo scuro è solo per le pillole vive. */
/* ⚠ Trovato misurando (non a occhio): il campo «Dove» porta ancora
   `margin-top:9.6px;margin-bottom:8px` dalla porzione di `cerca.css` che
   `inc/mappa.php` accoda inline per questa pagina (S2-MAPPA-INIZIO/FINE,
   pensata per l'impilamento verticale della home) — niente qui glieli
   toglieva mai. Su un flex item quel margine entra nel «margin box» che
   `align-items: center` usa per l'altezza della riga: 44+9.6+8=61.6px,
   più dei 44+6 del bottone «Filtri», e la barra saliva a 74,4px invece dei
   ≤72 del criterio. Non si tocca `cerca.css` (di un'altra squadra): si
   azzera qui, nell'ultimo foglio della pagina. */
.mappa .mappa__barra .mappa__campo-dove {
	margin: 0;
}

.mappa .mappa__barra .pillole--categorie .pillola:not(.pillola--assente) {
	border-color: var(--inchiostro);
	background: var(--inchiostro);
	color: var(--su-inchiostro, #F7F2EB);
}

.mappa .mappa__barra .pillole--categorie .pillola:not(.pillola--assente) .pillola__conto {
	color: var(--su-inchiostro-soft, var(--su-inchiostro));
}

/* -----------------------------------------------------------------------------
   7 · I DUE BOTTONI CHE APRONO IL PANNELLO — 7/9/2026.

   Gabriele: «la selezione dei filtri deve essere più evidente. Ogni filtro deve
   essere un menù a tendina, con le sottocategorie». Il filtro a due livelli
   c'era già; quello che mancava era che si vedesse. Ora la barra porta due
   bottoni con un nome — «Tipo di professionista» e «Altri filtri» — e sembrano
   quello che sono: tendine. La freccia gira quando il pannello è aperto.
   ⚠ Il pannello resta un overlay (§6): aperto fisso teneva la mappa a 525 px.
   -------------------------------------------------------------------------- */

.mappa .filtri__apri {
	gap: .5rem;
}

.mappa .filtri__apri-freccia {
	width: .5rem;
	height: .5rem;
	margin-inline-start: .1rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-.12em) rotate(45deg);
	transition: transform .18s ease;
}

.mappa .filtri__apri[aria-expanded="true"] .filtri__apri-freccia {
	transform: translateY(.06em) rotate(-135deg);
}

/* Il bottone dei mestieri è il secondo livello: si vede che è quello che porta
   più lontano, senza gridare. Stessa forma degli altri, un filo più marcato. */
.mappa .filtri__apri--mestieri {
	border-color: color-mix(in srgb, var(--radar-testo) 34%, transparent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.mappa .filtri__apri-freccia { transition: none; }
}

/* -----------------------------------------------------------------------------
   8 · IL PANNELLO RIMESSO IN PIEDI — 8/9/2026

   Gabriele, guardando il vivo: «è orribile esteticamente, non si vede per metà,
   non è per niente comprensibile, non è un lavoro pianificato». Aveva ragione su
   tutti e quattro i punti, e ognuno aveva una causa misurabile — nessuna era
   questione di gusto.

   ┌──────────────────────────────────────────────────────────────────────────┐
   │ 1. IL PANNELLO NON STAVA SOTTO IL BOTTONE CHE LO APRIVA.                 │
   │    `.filtri__corpo` era `position:absolute; left:0` ancorato a           │
   │    `.mappa__comandi`, cioè al bordo sinistro della barra, mentre         │
   │    `.filtri` (i bottoni) è un elemento che va a capo dentro una riga     │
   │    flessibile. Misurato: i bottoni stanno a x=1692 con la finestra a     │
   │    1900, a x=16 a 1280, a x=182 a 390 — e il pannello sempre a x=0.      │
   │    Si premeva a destra e si apriva a sinistra.                           │
   │ 2. IL CONTENUTO ERA TAGLIATO A METÀ.                                     │
   │    `.pillole` (radar.css) è per costruzione una fila che scorre in       │
   │    orizzontale: `flex-wrap:nowrap; overflow-x:auto`. Serve nella barra   │
   │    in cima; dentro un pannello largo 384 px fa uscire le pillole dal     │
   │    bordo — **104 elementi** oltre il margine destro, misurati. Da fuori  │
   │    sembra un errore di impaginazione, ed è la cosa che si nota per prima.│
   │ 3. I DUE BOTTONI ERANO IMPILATI.                                         │
   │    `.filtri__apri { width: 100% }`: due bottoni a tutta larghezza uno    │
   │    sopra l'altro, che di una barra di comandi non sembrano parte.        │
   │ 4. SUL TELEFONO ERA UN RIQUADRO GALLEGGIANTE SOPRA LA MAPPA.             │
   │    A 390 px un pannello con dentro dodici pillole, una ricerca e tre     │
   │    rami non è un menù: è una finestra che copre il prodotto a metà.      │
   └──────────────────────────────────────────────────────────────────────────┘

   👉 Le quattro cure, nell'ordine:
     · i bottoni tornano in fila (`.filtri` è una riga flessibile) e il pannello
       si ancora **a loro**, non alla barra;
     · da che lato si apre lo decide `filtri-mappa.js` misurando lo spazio, e lo
       scrive in `data-allinea`: è l'unica cosa che il CSS da solo non può
       sapere, perché dipende da dove i bottoni sono finiti;
     · dentro il pannello le pillole **vanno a capo**: nessuna fila che scorre,
       nessun taglio;
     · sotto i 60rem il pannello diventa un foglio a tutto schermo con la sua
       testa ferma in alto e un pulsante «Vedi i risultati» in fondo. I filtri
       si applicano subito (mappa.js, `change`): quel pulsante non conferma
       niente, chiude — e per questo si chiama così e non «Applica», che
       prometterebbe un'azione che è già avvenuta.
   -------------------------------------------------------------------------- */

.mappa .filtri {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* ⚠ Senza queste due righe il contenitore prende la larghezza dei due
	   bottoni affiancati (misurato: 391 px dentro una finestra da 390, con
	   17 px di scorrimento orizzontale della PAGINA) e `flex-wrap` non serve
	   a niente, perché non c'è niente che lo stringa. Con il limite, a 390
	   i due bottoni vanno a capo da soli. */
	min-width: 0;
	max-width: 100%;
}

/* I bottoni prendono la larghezza del loro nome, non tutta la riga. */
.mappa .filtri__apri:not([hidden]) {
	display: inline-flex;
	width: auto;
	margin-bottom: 0;
	padding: 0 14px;
	white-space: nowrap;
}

/* Il pannello sotto i bottoni. `top: calc(100% + 8px)` sul contenitore dei
   bottoni, non sulla barra: si apre dove si è premuto. */
.mappa .filtri__corpo {
	top: calc(100% + 8px);
	left: 0;
	right: auto;
	width: min(30rem, calc(100vw - 2rem));
	max-height: min(70vh, 34rem);
	padding: 0 0 .75rem;
	border: 1px solid var(--radar-bordo);
	border-radius: var(--radar-raggio-grande);
	overflow-x: hidden;
}

/* Quando i bottoni stanno nella metà destra dello schermo il pannello si apre
   verso sinistra, o uscirebbe dalla finestra. Lo scrive il JavaScript. */
.mappa .filtri[data-allinea="destra"] .filtri__corpo {
	left: auto;
	right: 0;
}

/* ⚠ QUI si toglie il taglio: dentro il pannello le pillole vanno a capo.
   `.pillole` resta quella che è nella barra in cima — una fila che scorre —
   perché lì è giusta; è solo dentro il pannello che non lo è. */
.mappa .filtri__corpo .pillole {
	flex-wrap: wrap;
	overflow-x: visible;
}

.mappa .filtri__corpo .pillola {
	max-width: 100%;
}

.mappa .filtri__corpo .pillola__nome {
	overflow-wrap: anywhere;
}

/* La testa resta visibile mentre si scorre: in un pannello alto 34rem il
   titolo e la «x» non devono scappare in cima. */
.mappa .filtri__testa {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-top: .5rem;
	background: var(--radar-superficie);
}

/* Il pulsante di chiusura in fondo: solo sul telefono, dove il pannello è a
   tutto schermo e la «x» in cima può essere lontana dal pollice. */
.mappa .filtri__fine {
	display: none;
}

@media (max-width: 59.999rem) {
	/* Il foglio a tutto schermo. `position: fixed` e non `absolute`: deve
	   coprire la pagina, non il contenitore dei bottoni. */
	.mappa .filtri__corpo {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		max-height: none;
		height: 100dvh;
		padding: 0;
		border: 0;
		border-radius: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mappa .filtri__testa {
		flex: none;
		padding: .9rem var(--radar-passo) .7rem;
		border-bottom: 1px solid var(--radar-bordo);
	}

	.mappa .filtri__titolo {
		font-size: var(--radar-corpo-3);
		font-weight: 700;
	}

	.mappa .filtri__fine {
		position: sticky;
		bottom: 0;
		display: block;
		margin-top: auto;
		padding: .75rem var(--radar-passo) calc(.75rem + env(safe-area-inset-bottom, 0px));
		background: var(--radar-superficie);
		border-top: 1px solid var(--radar-bordo);
	}

	.mappa .filtri__fine-bottone {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		border: none;
		border-radius: var(--radar-raggio);
		background: var(--radar-azione);
		color: var(--radar-azione-testo);
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	.mappa .filtri__fine-bottone:focus-visible {
		outline: 3px solid var(--radar-testo);
		outline-offset: 2px;
	}
}

/* -----------------------------------------------------------------------------
   9 · LA SPUNTA SI DEVE VEDERE — 8/9/2026

   Dall'8/9 le pillole del pannello nascono **spente** (`mappa.php`, il riquadro
   sopra `$radar_mestiere_acceso`): la spunta non è più lo stato normale, è una
   scelta. E una scelta che si distingue solo per un bordo grigio un filo più
   marcato — quello che dava `radar.css` §pillole con `--tinta` non impostata —
   non si vede: è per questo che il pannello «non era comprensibile».

   👉 Dentro il pannello una pillola scelta prende il fondo pieno, come la
   categoria scelta nella barra in cima: stesso linguaggio in due posti, non due
   modi di dire la stessa cosa.
   ⚠ Non si tocca `.pillole` in generale: nella barra le categorie hanno la loro
   `--tinta` (il colore del pin) e quel trattamento è giusto lì.
   -------------------------------------------------------------------------- */
.mappa .filtri__corpo .pillole .pillola:has(.pillola__casella:checked) {
	border-color: var(--radar-inchiostro, var(--inchiostro));
	background: var(--radar-inchiostro, var(--inchiostro));
	color: var(--su-inchiostro, #F7F2EB);
	box-shadow: none;
	font-weight: 600;
}

.mappa .filtri__corpo .pillole .pillola:has(.pillola__casella:checked) .pillola__conto {
	color: var(--su-inchiostro-soft, #B3A69B);
}

/* -----------------------------------------------------------------------------
   10 · LA BARRA STA IN UNA RIGA, E LA MAPPA SI RIPRENDE LO SPAZIO — 8/9/2026

   Gabriele: «la barra che si apre sotto il menù principale, se apre così estesa
   porta via un pezzo di mappa; dobbiamo trovare un modo per occupare meno spazio
   e soprattutto lasciare più spazio alla mappa».

   Misurato prima, con la testata sopra:
     1900 → barra  58 px, mappa 765   (una riga: qui andava già bene)
     1440 → barra 110 px, mappa 713   (DUE righe: i filtri vanno a capo)
      390 → barra 121 px, mappa 660   (TRE righe)

   La causa a 1440 non è la larghezza dei comandi, è che **le pillole non si
   stringono**: `.pillole` è una fila che scorre, quindi potrebbe stare in
   qualunque larghezza, ma senza `min-width: 0` un contenitore flessibile non
   scende mai sotto la misura del suo contenuto — e spingeva i filtri a capo.
   👉 Le pillole diventano l'elemento elastico della riga: prendono quello che
   avanza e il resto lo scorrono, che è quello che sanno fare.
   ⚠ Il campo e i filtri NON si stringono (`flex: none`): sono i due comandi che
   devono restare leggibili e cliccabili: se si stringe qualcosa, si stringe la
   fila che ha già il suo modo di gestirlo.
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) {
	.mappa .mappa__barra {
		flex-wrap: nowrap;
		padding-block: .35rem;
	}

	.mappa .mappa__barra > .pillole {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mappa .mappa__barra .mappa__campo-dove,
	.mappa .mappa__barra .filtri {
		flex: none;
	}
}

/* Sotto i 60rem: due righe invece di tre. Il campo prende la sua riga (ci si
   scrive dentro, deve essere largo), pillole e filtri si dividono la seconda. */
@media (max-width: 59.999rem) {
	.mappa .mappa__barra {
		padding-block: .35rem;
		gap: .4rem .5rem;
	}

	.mappa .mappa__barra .mappa__campo-dove {
		flex: 1 0 100%;
	}

	.mappa .mappa__barra > .pillole {
		flex: 1 1 0;
		min-width: 0;
	}

	.mappa .mappa__barra .filtri {
		flex: none;
	}
}