/* ==========================================================================
   RADAR.casa — LA SCHEDA DEL PROFESSIONISTA
   Serve a `single-professionista.php` e alle funzioni di `inc/fiducia.php` che
   quella pagina chiama. Si accoda dopo `radar.css` e dipende da lui.

   🚨 PERCHÉ QUESTO FILE ESISTE, E QUAL È LA SUA REGOLA
   L'aspetto di questa pagina è un requisito, non una rifinitura: c'è un disegno
   fatto e approvato, ed è un file — `_disegno/schermate/artigiani.html`, il
   markup vero, più `_disegno/token.css` per misure, raggi, ombre e pesi. La
   specifica a parole è `03 Progetti/radar.casa/DISEGNO-ESTRATTO.md` §3, e serve
   per le REGOLE (l'ordine dei blocchi, quale numero da quale funzione); per
   l'ASPETTO comanda il markup del disegno.

   ⛔ **Nessun esadecimale in nessuna dichiarazione.** Ogni colore è un token di
   `radar.css`, che è di Logos e li ha misurati — compresi i quattro corretti il
   15/8/2026 (`--verificato` `#25674A`, `--verificato-velo`, `--azione` in
   scuro, i sei pin in variante chiara), che qui si **usano** e non si
   ridichiarano: un valore scritto due volte diverge al primo ritocco, e la
   copia sbagliata è quella che qualcuno leggerà. Gli unici due esadecimali del
   file stanno **dentro dei commenti**, e sono citazioni.

   Le sole cose che questo foglio dichiara di suo sono **due ombre e quattro
   raggi** (§1): non esistono in `radar.css` e servono a questa pagina sola.

   ⛔ **Nessun attributo `style` nel markup che questo foglio veste.** Una CSP
   con `style-src` severa lo bloccherebbe (TECNICA.md §8), e in tutto il tema
   non ce n'è nemmeno uno. È il motivo per cui la barra dell'istogramma ha una
   classe e non una larghezza in linea → §Istogramma.

   ⛔ **Zero JavaScript.** *«Un annuncio deve aprirsi anche con la rete del
   telefono in ascensore»* (8/8/2026). Il carosello è `overflow-x` più
   `scroll-snap`; le note si aprono con `<details>`.

   INDICE
     1. Le due ombre del disegno
     2. La testa: pastiglia, nome, P. IVA, voto
     3. I lavori recenti — il carosello senza script
     4. Il pannello: CTA, i tre numeri, il telefono riservato
     5. Le stelle
     6. Il voto e l'istogramma
     7. Le recensioni e la replica
     8. Altri artigiani con identità verificata
     9. Scuro, movimento, zoom, stampa
    10. Il corpo a due colonne — sotto soglia, una sola
   ========================================================================== */

/* ==========================================================================
   1. LE DUE OMBRE DEL DISEGNO
   `--elev-3` e `--elev-4` vengono da `_disegno/token.css` e in `radar.css` non
   ci sono: lì c'è `--ombra`, che è la falda leggera di tutte le superfici. Il
   disegno ne vuole due più profonde, e le vuole in due punti soli — il pannello
   appiccicato e le schede in coda quando ci passi sopra.

   ⚠ Stanno scritte QUI e non in `radar.css` perché servono a questa pagina
   sola, e stanno sotto `.scheda` e non su `:root` perché non diventino un token
   di tutti per sbaglio. Se un domani un'altra schermata le vuole, salgono in
   `radar.css` e questo blocco sparisce.

   ⚠ In scuro la stessa ombra non si vede: su un fondo `#171310` un'ombra bruna
   al 13% è invisibile, e senza ombra il pannello si appiattisce sul fondo. Si
   scurisce e si alza l'opacità, come fa già `--ombra` di `radar.css`.
   ========================================================================== */

.scheda {
	--elev-3: 0 14px 34px rgba(31, 27, 24, .12);
	--elev-4: 0 24px 60px rgba(31, 27, 24, .13);

	/* I raggi del disegno, e **solo** quelli: 999 · 50% · 9 · 11 · 12 · 16 · 18 · 26
	   (`_disegno/token.css` §MISURE), più il 10 del tema.
	   ⚠ Il 15/8/2026 il cancello visivo ha trovato qui dentro tre raggi che non
	   stavano in nessuna delle due scale — 14 px sulla recensione, 7 px sulle due
	   pastiglie verdi, 2 px sul lucchetto — e li ha bocciati. Una scala esiste per
	   non avere il quattordicesimo valore «che stava bene lì»: sono tornati
	   rispettivamente a 16, 9 e nessuno. */
	--raggio-pannello: 26px;
	--raggio-scheda: 16px;
	--raggio-piccolo: 9px;
	--raggio-interno: 12px;
}

/* Le stesse due ombre in scuro. Era un `@media (prefers-color-scheme: dark)`
   fino al 16/8/2026: adesso la coppia sta su una riga sola e i tre stati li
   decide il `color-scheme` che `radar.css` §tema mette su `:root` — di lì
   `.scheda` lo eredita, non deve dichiarare niente.

   ⚠ Un'ombra non è un colore e `light-dark()` prende solo colori: la coppia va
   sul colore **dentro** l'ombra.
   ⚠ Il cancello è `@supports` e non la doppia dichiarazione, perché dentro una
   custom property una funzione ignota **vince** invece di essere scartata e chi
   la usa perde il valore. Misurato il 16/8/2026 → `radar.css` §tema. */
@supports (color: light-dark(#000, #fff)) {
	.scheda {
		--elev-3: 0 14px 34px light-dark(rgba(31, 27, 24, .12), rgba(0, 0, 0, .5));
		--elev-4: 0 24px 60px light-dark(rgba(31, 27, 24, .13), rgba(0, 0, 0, .55));
	}
}

/* ==========================================================================
   2. LA TESTA — pastiglia del mestiere, nome, P. IVA, voto
   ========================================================================== */

/* --- La copertina --------------------------------------------------------
   Foto in testa con la pastiglia della categoria appoggiata sopra.

   ⚠ **La pastiglia sta in ALTO a sinistra, e le due fonti non vanno
   d'accordo**: il markup del disegno (`artigiani.html:79`) la mette a
   `top:14px; left:14px`, la specifica a parole (`DISEGNO-ESTRATTO.md` §3,
   colonna destra punto 2) dice «in basso a sinistra». Vince il markup, perché
   per l'aspetto la fonte è quello e la specifica serve alle regole. La riga
   esiste perché la prossima volta la differenza si veda subito invece di
   sembrare una svista.

   ⚠ `aspect-ratio` e non l'altezza fissa di 230 px del disegno: quei 230 px
   stanno dentro un mock largo 430, e qui la colonna è più larga e cambia con lo
   zoom. La proporzione è la stessa (43:23); l'altezza la ricava il browser. */
.scheda .copertina {
	position: relative;
	aspect-ratio: 43 / 23;
	margin: 0 0 var(--passo);
	overflow: hidden;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	background: var(--superficie-alt);
}

.scheda .copertina__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 18%;   /* i visi e le insegne stanno in alto */
	display: block;
}

.scheda .copertina__categoria {
	position: absolute;
	inset-block-start: .875rem;
	inset-inline-start: .875rem;
}

/* Sopra una foto qualunque serve un fondo pieno, non il trasparente della
   pillola: il contrasto con un'immagine non si può misurare, quindi non ci si
   appoggia — si mette una superficie sotto e si misura su quella. */
.scheda .copertina__categoria .pillola {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	color: var(--testo);
	text-decoration: none;
	box-shadow: var(--ombra);
}

.scheda .copertina__categoria .pillola--servizi { --tinta: var(--pin-servizi); }

/* --- La testata di categoria: la copertina che non c'è ---------------------
   P2.3 (4/9/2026): sostituisce il banner grigio, solo per il pubblico — chi
   ha `edit_post` vede anche l'invito sotto. Il gradiente è un velo, non un
   fondo pieno: `::before` lo stende a bassa opacità così testo e segno
   restano a piena leggibilità sopra, e l'interfaccia resta desaturata come
   chiede DESIGN.md §1. `--pin-servizi` è la stessa tinta della pillola
   categoria qui sopra: un professionista è sempre «Servizi». */
.scheda .testata-categoria {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-block-size: 120px;
	margin: 0 0 var(--passo);
	padding: 1rem 1.25rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	background: var(--superficie-alt);
	overflow: hidden;
}

.scheda .testata-categoria::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--pin-servizi), transparent);
	opacity: .16;
}

@media (min-width: 60rem) {
	.scheda .testata-categoria { min-block-size: 180px; padding: 1.75rem 2rem; }
}

.scheda .testata-categoria__segno {
	position: relative;
	flex: none;
	display: flex;
}

.scheda .testata-categoria__segno .pillola__segno {
	width: 2.75rem;
	height: 2.75rem;
}

@media (min-width: 60rem) {
	.scheda .testata-categoria__segno .pillola__segno { width: 4rem; height: 4rem; }
}

.scheda .testata-categoria__etichetta {
	position: relative;
	font-size: var(--t-5);
	font-weight: 600;
	color: var(--testo);
}

/* L'invito, solo per chi può correggerlo (`edit_post` nel template). */
.scheda .testata-categoria__avviso {
	margin: 0 0 var(--passo);
	font-size: .9375rem;
	color: var(--testo-2);
}

.scheda .testata-categoria__avviso a { color: var(--marchio); }

/* Coordinatore 4/9/2026, 16:16: con la testata che già dice «Servizi ·
   Idraulico», la pillola mestiere subito sotto (`.azienda__mestieri`,
   `single-professionista.php` r.158) ripete la stessa informazione. Le due
   sono fratelli dentro `.azienda__testa` (la testata sostituisce la
   copertina, la pillola stampa comunque dopo): si nasconde solo quando la
   testata precede — quindi solo senza foto — con un selettore di fratelli
   successivi, senza toccare il PHP e senza condizionare la stampa della
   pillola sulla copertina vera, che la tiene. */
.scheda .testata-categoria ~ .azienda__mestieri { display: none; }

/* La pastiglia porta la forma del pin (`.pillola__segno` + `data-forma`), che
   `radar.css` disegna già: qui si aggiunge solo la tinta, perché fuori da
   `.annuncio__categorie` la corrispondenza slug → variabile non era dichiarata.
   Un professionista è sempre della categoria madre «Servizi». */
.scheda .azienda__mestieri .pillola--servizi { --tinta: var(--pin-servizi); }

/* La partita IVA che non passa il validatore: esce il motivo, non il numero. */
.scheda .azienda__identita--manca {
	font-size: var(--t-5);
	color: var(--testo-2);
	max-width: 60ch;
}

.scheda .azienda__mestieri .pillola {
	text-decoration: none;
	color: var(--testo);
}

.scheda .azienda__mestieri .pillola:hover { background: var(--superficie-alt); }

/* Il nome dell'azienda è il titolo della pagina, e nel disegno è in serif con
   il tracciamento stretto: la stessa ricetta di `h1` in `radar.css`, che qui
   non si ripete — si lascia fare a lui. Sotto, la riga secondaria. */
.scheda .azienda__identita {
	margin: 0 0 .5rem;
	color: var(--testo-2);
	max-width: none;
}

.scheda .azienda__piva .dato__valore {
	display: inline;
	font-weight: 600;
	color: var(--testo);
	letter-spacing: .04em;   /* è un codice da ricopiare sul VIES, non una parola */
}

/*
 * Lotto I, I3 — logo e slogan sulla scheda pubblica (rosso del cancello,
 * 10/9/2026). Il logo sta ACCANTO al nome (56px, la misura di un'icona, non
 * di una copertina) e lo slogan SOTTO: nessun blocco nuovo, dentro la
 * testata che c'è già — la pagina non deve allungarsi mentre aspetta il
 * disegno di semplificazione (I4, `[[DISEGNO-SCHEDA-PROFESSIONISTA-
 * SEMPLIFICATA]]`).
 */
.scheda .azienda__nome-riga {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.scheda .azienda__logo {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--raggio);
	border: 1px solid var(--bordo);
	object-fit: contain;
	background: var(--superficie);
}

.scheda .azienda__slogan {
	margin: 0 0 .5rem;
	font-size: var(--t-5);
	font-style: italic;
	color: var(--testo-2);
}

/* La riga del voto: numero, stelle, e il collegamento all'istogramma. */
.scheda .azienda__voto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: 0 0 var(--passo);
	max-width: none;
}

.scheda .azienda__voto-media {
	font-size: var(--t-3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   3. I LAVORI RECENTI — il carosello senza una riga di script
   `overflow-x` più `scroll-snap-type: x mandatory`: lo scorrimento per dita il
   browser lo sa già fare, e con la tastiera il contenitore è raggiungibile
   (`tabindex="0"` nel template) e si scorre con le frecce.

   ⚠ Sostituisce la griglia di `.galleria` di `radar.css` **solo dentro questa
   pagina**: sull'annuncio le foto restano una griglia, e lì è giusto — sono il
   contenuto, non un accessorio della scheda.
   ========================================================================== */

.scheda .lavori { margin: 0 0 calc(var(--passo) * 2); }

.scheda .lavori__testa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem var(--passo);
	margin-bottom: .75rem;
}

.scheda .lavori__titolo {
	font-size: var(--t-3);
	margin: 0;
}

.scheda .lavori__conto {
	margin: 0;
	font-size: var(--t-5);
	color: var(--testo-2);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	max-width: none;
}

.scheda .lavori .galleria {
	display: flex;
	gap: .75rem;
	grid-template-columns: none;   /* spegne la griglia di radar.css */
	margin: 0;
	padding-bottom: .5rem;         /* lo spazio della barra di scorrimento */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
}

.scheda .lavori .galleria img {
	flex: none;
	inline-size: 15rem;
	block-size: 11rem;
	object-fit: cover;
	scroll-snap-align: start;
	border-radius: var(--raggio-interno);
	border: 1px solid var(--bordo);
}

/* La prima esce dalla griglia di `radar.css`, dove occupava tutta la riga. */
.scheda .lavori .galleria .galleria__prima {
	grid-column: auto;
	aspect-ratio: auto;
	inline-size: 22rem;
}

.scheda .lavori .galleria:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ==========================================================================
   4. IL PANNELLO — la CTA, i tre numeri, il telefono riservato
   `radar.css` lo tiene già appiccicato in alto dai 60rem: qui si cambia solo
   quello che il disegno chiede in più, cioè il raggio e la profondità.
   ========================================================================== */

.scheda .fiducia {
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-4);
	padding: calc(var(--passo) * 1.25);
}

/* «Chi pubblica» — coordinatore 4/9/2026, 16:32: `.fiducia__titolo`
   (`radar.css`, non scoperto qui) è la sola eyebrow ancora Public Sans fra
   gli h2 della scheda; l'ho scritto in SCHEDA.md come già uniforme e non lo
   era. Si veste da qui, `inc/fiducia.php` intatto. Solo `font-family`:
   maiuscolo/spaziatura/colore restano — sono l'eyebrow anche su annuncio.php,
   che non ha `.scheda` e quindi questa riga non lo tocca. */
.scheda .fiducia__titolo { font-family: var(--font-titolo); }

/* --- I tre dati accanto al pulsante, non in fondo -------------------------
   P2.3 (4/9/2026), DESIGN.md §7: «i segnali stanno accanto al pulsante di
   contatto». `inc/fiducia.php` (non mio: non si tocca) stampa nell'ordine
   titolo → chi pubblica → badge → MODULO (con dentro il pulsante) → i tre
   numeri → telefono/nota → l'avviso sulla caparra → la zona. Spostare i
   numeri PRIMA del modulo nel markup vorrebbe dire riscrivere quella
   funzione, fuori dal perimetro di questa zona.

   Si ottiene lo stesso risultato in vista: `.fiducia` diventa una colonna
   flessibile e ai suoi figli diretti si dà un `order` esplicito — a
   TUTTI, non solo ai numeri, perché in un flex container un `order`
   assente vale `0` e un figlio non ordinato scavalcherebbe quelli con
   `order` positivo, portandosi dietro anche l'avviso sulla caparra e la
   zona (che devono restare DOPO il pulsante). Il DOM non cambia — la
   struttura che i lettori di schermo e la tabulazione seguono resta quella
   di `inc/fiducia.php` — cambia solo dove finiscono i pixel, che è la parte
   di competenza di questo foglio.

   Risultato: titolo, chi pubblica, badge, **i tre numeri**, il modulo (col
   pulsante in fondo), telefono/nota, **l'avviso caparra**, zona — i numeri
   stanno sopra tutto il blocco «Scrivi a…», quindi sopra il pulsante che ci
   sta dentro; la caparra resta dov'era, cioè dopo. */
.scheda .fiducia {
	display: flex;
	flex-direction: column;
}

.scheda .fiducia > .fiducia__titolo  { order: 1; }
.scheda .fiducia > .chi              { order: 2; }
.scheda .fiducia > .fiducia__badge   { order: 3; }
.scheda .fiducia > .fiducia__fatti   { order: 3; } /* radar_fiducia_anzianita(), quando stampa */
.scheda .fiducia > .fiducia__numeri  { order: 4; margin-block: 0 var(--passo); }
.scheda .fiducia > .radar-richiesta,
.scheda .fiducia > .fiducia__azione  { order: 5; }
.scheda .fiducia > .fiducia__telefono,
.scheda .fiducia > .fiducia__riservato,
.scheda .fiducia > .fiducia__nota    { order: 6; }
.scheda .fiducia > .fiducia__caparra { order: 7; }
.scheda .fiducia > .zona             { order: 8; }

/* --- La CTA: 56 px, tutta larga, ed è l'unico verde della pagina ---------
   Il pulsante vero è quello del modulo di `Radar_Richiesta_Impresa`, che porta
   la sua classe: si veste quella invece di aggiungerne una nostra al suo
   markup, che non è di questo tema. */
.scheda .fiducia__azione {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 3.5rem;        /* 56 px, e in rem regge lo zoom */
	padding: .5rem 1.25rem;
	border: 0;
	border-radius: var(--raggio-interno);
	background: var(--azione);
	color: var(--azione-testo);
	font: inherit;
	font-weight: 600;
	font-size: 1.125rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.scheda .fiducia__azione:hover {
	background: var(--azione-hover);
	color: var(--azione-testo);
	transform: translateY(-2px);
}

/* S41 3/9 — `.radar-richiesta__invia` ora porta anche `.pulsante` nel markup
   (Radar_Richiesta_Impresa, riga 619): la forma (999px, --azione) e l'hover
   li dà quella classe, come già fa `.fiducia__azione` due righe sopra. Qui
   restano solo le misure che il pannello scheda vuole in più — non si tocca
   `.fiducia__azione`, che è di un'altra squadra (v. ossatura.css §9). Scelta:
   DESIGN.md non decide la forma del pulsante; nel tema vivo `.pulsante` è già
   la base di ogni altro invio (Salva, Registrati, Trova, attesa, fiducia__azione
   stesso) — restavano indietro solo questi due, ora allineati. */
.scheda .radar-richiesta__invia {
	inline-size: 100%;
	min-block-size: 3.5rem;
	font-size: 1.125rem;
	transition: background .18s ease, transform .18s ease; /* .pulsante transiziona solo background */
}

.scheda .radar-richiesta__invia:hover {
	transform: translateY(-2px);
}

/* --- Le etichette del modulo: tornano di corpo, non un'altra lingua ------
   P2.3 (4/9/2026): `ossatura.css:817` veste `.radar-richiesta form label` in
   maiuscoletto monospazio — giusto per «le tre porte» (`Radar_Attesa`), dove
   quello stile è la firma della pagina. La STESSA classe `.radar-richiesta`
   la usa anche `Radar_Richiesta_Impresa::modulo()` sulla scheda del
   professionista (radar-core, non di questo tema): lì il maiuscoletto stona
   con tutto il resto — h1 e h2 in serif, corpo normale altrove — perché
   quella pagina non l'ha mai chiesto, l'ha solo ereditato dalla stessa
   classe.

   ⛔ Non si tocca `ossatura.css`: cambierebbe anche «le tre porte». Si vince
   per specificità, scoprendo qui `.scheda` in testa (0,2,2 contro 0,1,2 —
   niente `!important`), così l'effetto resta chiuso in questa pagina. Vale
   anche per la casella dell'informativa, che è un `<label>` come gli altri e
   quindi rientra nella stessa regola. */
.scheda .radar-richiesta form label {
	font-family: var(--font);
	font-size: 1rem;              /* 16 px, il corpo del sito */
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: var(--testo);
}

/* La casella dell'informativa: stessa famiglia e stesso maiuscolo tolto, ma
   un filo più piccola perché è testo legale d'accompagnamento, non un campo
   da compilare — coerente con `.testata-categoria__avviso` qui sopra, che
   usa la stessa misura per lo stesso ruolo. */
.scheda .radar-richiesta form label[for="radar-richiesta-consenso"] {
	font-size: .9375rem;           /* 15 px */
	font-weight: 400;
}

/* --- I tre numeri, subito sotto il pulsante -------------------------------
   Il disegno: lista bordata, righe separate da 1 px, etichetta a sinistra in
   `--testo-2`, valore a destra in 700 tabular-nums. La separazione di 1 px si
   fa con il `gap` su un fondo colorato, non con dei bordi: così l'ultima riga
   non ha una riga di troppo sotto e non serve un `:last-child` che la tolga.

   ⚠ `.dato` e `.dato__valore` sono di `radar.css` e portano già le cifre
   tabellari: si riusano invece di riscriverle. Qui si cambia solo la
   disposizione, da colonna a riga. */

.scheda .fiducia__numeri { margin: .75rem 0; }

.scheda .numeri {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--bordo);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-interno);
	overflow: hidden;
}

.scheda .numeri__riga {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	padding: .75rem .875rem;
	background: var(--superficie);
}

.scheda .numeri__riga dt {
	margin: 0;
	font-size: 1rem;
	color: var(--testo-2);
}

.scheda .numeri__riga .dato__valore {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/* --- Il numero che non c'è, con scritto perché ---------------------------
   ⚠ Questo blocco è metà del valore della pagina, e non è un ripiego: dice al
   professionista **cosa gli manca** invece di mentirgli, e dice a chi legge che
   qui i numeri o si dimostrano o non si stampano. Sta chiuso perché è una nota
   e non un avviso — chi vuole sapere lo apre, e si apre senza JavaScript. */

.scheda .numeri__manca {
	margin-top: .5rem;
	font-size: var(--t-5);
	color: var(--testo-2);
}

/* ⚠ 44 px e non 28: `_disegno/token.css` fissa `--tocco: 44px` come altezza
   minima dei bersagli, ed è la misura di casa (19 usi nel disegno). WCAG 2.2
   AA se ne accontenterebbe di 24, ma qui la riga è larga quanto il pannello e
   il pollice non deve cercarla — chi legge questa nota di solito sta guardando
   il numero che le sta sopra, con una mano sola. */
.scheda .numeri__manca > summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: .5rem 0;
	min-block-size: 2.75rem;
}

.scheda .numeri__manca > p {
	margin: .25rem 0 0;
	padding: .625rem .75rem;
	background: var(--superficie-alt);
	border-radius: var(--raggio);
	line-height: 1.6;
	max-width: none;
}

/* --- Il telefono che sta dietro un account -------------------------------
   Il numero non entra nel markup (DESIGN.md §5 difesa 4). Lo stato però si
   disegna: è una porta, non un buco.

   ⛔ **Senza `.scheda` davanti**, come il badge: questo blocco lo stampa
   `radar_fiducia_telefono()`, che serve anche l'annuncio — e l'annuncio non ha
   un `<article class="scheda">`. Con il prefisso restava mezzo vestito di là,
   che è lo stesso difetto trovato sul badge il 15/8/2026. */

.fiducia__riservato {
	display: flex;
	gap: .625rem;
	margin: .75rem 0 0;
	padding: .75rem;
	background: var(--superficie-alt);
	border-radius: var(--raggio);
	font-size: var(--t-5);
	line-height: 1.6;
	color: var(--testo);
	max-width: none;
}

.fiducia__riservato strong { display: block; }

/* Il lucchetto, disegnato: l'arco è il bordo superiore di un tondo tagliato a
   metà, il corpo è il riquadro sotto. Nessun file di icone. */
.fiducia__riservato-segno {
	position: relative;
	flex: none;
	inline-size: .75rem;
	block-size: .625rem;
	margin-top: .45rem;
	background: var(--testo-2);
}

.fiducia__riservato-segno::before {
	content: "";
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: 50%;
	inline-size: .5rem;
	block-size: .375rem;
	translate: -50% 0;
	border: 2px solid var(--testo-2);
	border-block-end: 0;
	border-start-start-radius: 999px;
	border-start-end-radius: 999px;
}

/* ==========================================================================
   4-bis. IL BADGE, E IL PESO CHE CRESCE COL LIVELLO
   DESIGN.md §5 vuole che il peso visivo cresca da un livello al successivo, e
   `_disegno/token.css:107-118` dice di quanto. Fino al 15/8/2026 non cresceva:
   il cancello visivo ha misurato **33 px / 600 14px / raggio 999 / fondo
   trasparente** per «Identità verificata», e **31 px** sull'annuncio.

   🚨 **LA NUMERAZIONE NON SI TOCCA.** Il disegno conta quattro livelli partendo
   dall'email; il tema ne ha tre e l'email l'ha esclusa apposta — l'assenza non
   si decora. Quindi si adatta il disegno al tema, non il tema al disegno:

     tema 1 Telefono  = disegno 2  → 46 px · 500 17px · contorno, trasparente
     tema 2 Identità  = disegno 3  → 50 px · 600 18px · contorno + velo
     tema 3 Immobile  = disegno 4  → 54 px · 700 18,8px · pieno, senza contorno

   ⚠ **Perché adesso il fondo tenue si può usare, e prima no.** `radar.css`
   (§IL BADGE DI VERIFICA) vietava il fondo tenue con una misura in mano:
   `--verificato` su `--superficie-alt` faceva 4,29:1. Quella misura era presa
   sul **beige caldo**, che è il fondo sbagliato: il badge sta sul velo verde
   `--verificato-velo`, che esiste in `radar.css` dal 15/8/2026 e su cui la
   stessa parola fa **5,90:1** in chiaro e **6,07:1** in scuro. Il contrasto si
   misura sulla coppia che si usa — è la stessa lezione che aveva già corretto
   `#B37A00` e poi `#2E7D5B`.

   ⛔ **Niente `.scheda` davanti a queste regole**: il badge esce anche
   sull'annuncio, che non ha un `<article class="scheda">`. Per lo stesso motivo
   qui i raggi sono letterali e non i token di §1, che sono sotto `.scheda`: 11 e
   12 stanno nella scala del disegno.
   ========================================================================== */

.fiducia__badge > .badge[data-livello] {
	justify-content: center;
	border-radius: 11px;
	line-height: 1.2;
}

/* 🚨 E SULLA SCHEDA DELL'ANNUNCIO LE MISURE QUI SOTTO **NON VALGONO**.
   `assets/css/annuncio.css` §r. 416-421 impone a tutti i badge del corpo
   `min-height: var(--tocco)` (44 px), `padding: 0 14px` e il raggio piccolo,
   **per il bersaglio da toccare col dito** — stessa specificità di queste
   regole, e viene caricato dopo. Misurato in pagina il 26/8/2026: **44 px,
   padding 0 14px, raggio 9 px su tutti e quattro**.
   👉 Quindi qui dentro le altezze e le imbottiture valgono sulla **scheda del
   professionista**, dove `annuncio.css` non si carica; sull'annuncio la scala
   la portano **il bordo e il colore**, che nessuno sovrascrive. Non e' un
   difetto da correggere: il bersaglio a 44 px viene prima. È una promessa che
   il commento non deve fare.
   📌 Trovato dal cancello finale del 26/8/2026, che ha confrontato quello che
   il CSS dichiara con quello che la pagina calcola.

   🚨 IL LIVELLO 0 È QUELLO CHE AVRANNO TUTTI, E FINO AL 26/8/2026 ERA L'UNICO
   SENZA VESTITO.

   Le regole qui sotto coprivano `data-livello` **1, 2 e 3**, e lo 0 — che in
   `radar-core/data/verifiche.php` è **«Email confermata»** — cadeva sul `.badge`
   generico: corpo piu' piccolo, spunta appiccicata al testo, bordo grigio
   invece che verde, accanto a un «Telefono verificato» fatto bene.
   👉 E il 26/8 Gabriele ha deciso di **accendere email e telefono** come
   verifiche automatiche: cioè al lancio «Email confermata» sarà il badge **piu'
   diffuso del sito**. Su un sito il cui prodotto è il badge, il segnale che
   hanno tutti non può essere quello che sembra di seconda classe.
   ⚠ Resta comunque **il piu' leggero dei quattro**, ed è giusto: il disegno
   (`_disegno/schermate/fiducia.html`) dice che il peso cresce col livello, «dal
   contorno sottile del primo al pieno del quarto». Leggero non vuol dire
   trascurato.
   📌 Trovato dal cancello finale del 26/8/2026, che l'ha visto **guardando la
   pagina**: nessuna delle 95 asserzioni esercitava quella chiave. */
.fiducia__badge > .badge[data-livello="0"] {
	min-block-size: 2.875rem;   /* 46 px, come il primo: la forma è la stessa */
	padding: .25rem 1rem;
	gap: .5625rem;
	font-size: 1.0625rem;       /* 17 px */
	font-weight: 500;
	border: 1px solid color-mix(in srgb, var(--verificato) 55%, transparent);
	background: transparent;
}

.fiducia__badge > .badge[data-livello="1"] {
	min-block-size: 2.875rem;   /* 46 px */
	padding: .25rem 1rem;
	gap: .5625rem;
	font-size: 1.0625rem;       /* 17 px */
	font-weight: 500;
	border: 1px solid var(--verificato);
	background: transparent;
}

.fiducia__badge > .badge[data-livello="2"] {
	min-block-size: 3.125rem;   /* 50 px */
	padding: .25rem 1.125rem;
	gap: .625rem;
	font-size: 1.125rem;        /* 18 px */
	font-weight: 600;
	border: 1px solid var(--verificato);
	background: var(--verificato-velo);
}

/* Il livello 3 è il solo che si riempie, ed è giusto che sia l'ultimo: il verde
   pieno è il peso massimo che questa pagina può spendere senza mettersi a
   litigare con il pulsante. `box-shadow: none` toglie l'alone che `radar.css`
   gli metteva quando il fondo doveva restare trasparente — adesso il fondo c'è,
   e l'alone sarebbe un secondo bordo. */
.fiducia__badge > .badge[data-livello="3"] {
	min-block-size: 3.375rem;   /* 54 px */
	padding: .25rem 1.25rem;
	gap: .625rem;
	font-size: 1.175rem;        /* 18,8 px */
	font-weight: 700;
	border: 0;
	border-radius: 12px;
	background: var(--verificato);
	color: var(--azione-testo);
	box-shadow: none;
}

/* La spunta del livello pieno sta su fondo verde, quindi eredita il colore del
   testo e non quello del badge: `currentColor` lo fa già, ma il segno di
   `radar.css` nasce pensato per un contorno — qui gli si dà un filo in più di
   corpo perché su fondo pieno un tratto sottile sparisce. */
.fiducia__badge > .badge[data-livello="3"] .badge__segno { border-width: 0 .2em .2em 0; }

/* ==========================================================================
   4-ter. CHI PUBBLICA, COME PERSONA — 26/8/2026
   ⚠ Si chiamava «4-bis» come la sezione dei badge qui sopra: due nomi uguali
      in un foglio solo, corretto il 26/8/2026 su segnalazione del cancello.

   Il pannello si intitolava «Chi pubblica» e non diceva chi: nessun nome,
   nessun volto. Qui c'è il tondo con le iniziali, il nome e il ruolo.

   🚨 L'ETICHETTA COL NOME INTERO È CSS PURA, E NON È UN VEZZO.
   La scheda dell'annuncio non carica JavaScript (DESIGN.md §8): un tooltip
   scritto in JS qui non ci sarebbe. Da cui `::after` su `data-intero`.

   ⚠ E si apre su `:hover` **e** su `:focus-visible`: una cosa che si vede solo
   passandoci sopra col mouse non esiste per chi naviga con la tastiera, e su un
   telefono non esiste per nessuno — lì vale il tocco, che dà il fuoco.
   ⚠ `aria-label` sul nome porta già il nome intero a chi legge con le orecchie:
   l'etichetta è `aria-hidden` per non farglielo sentire due volte.
   ========================================================================== */

.chi {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin-block-end: var(--passo);
}

.chi__iniziali {
	flex: none;
	inline-size: 3.25rem;         /* 52 px, come il disegno */
	block-size: 3.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--marchio) 12%, #fff);
	color: var(--marchio);
	font-weight: 700;
	font-size: 1.0625rem;         /* 17 px */
	letter-spacing: .02em;
}

.chi__testo {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-inline-size: 0;
}

.chi__nome {
	position: relative;
	font-size: 1.1875rem;         /* 19 px */
	font-weight: 600;
	line-height: 1.2;
	inline-size: fit-content;
}

/* Il nome intero. Sta sopra, non accanto: in un pannello da 372 px accanto
   non ci sta, e uscirebbe dal riquadro invece di aprirsi.

   🚨 IL TETTO ALLA LARGHEZZA NON È PRUDENZA, È UNA CORREZIONE.
   La prima stesura aveva `white-space: nowrap` **senza** un tetto: un nome
   lungo — «Maria De Luca Rossi» sono già 18 caratteri, e il controllo
   indipendente ne ha provato uno da **63** — usciva dal pannello e finiva
   tagliato dal bordo della pagina. Adesso la riga va a capo quando serve, e
   più larga del pannello non diventa mai.
   📌 Trovato dal controllo indipendente del 26/8/2026, che l'ha visto
   leggendo il CSS: **non è stato confermato a video**, e una cattura a 375 px
   con un nome lungo resta da fare. */
.chi__nome[data-intero]::after {
	content: attr(data-intero);
	position: absolute;
	inset-block-end: calc(100% + .375rem);
	inset-inline-start: 0;
	z-index: 2;
	max-inline-size: min(17rem, 90vw);
	padding: .375rem .625rem;
	border-radius: var(--raggio);
	background: var(--testo);
	color: var(--fondo);
	font-size: .8125rem;          /* 13 px */
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	pointer-events: none;
}

/* 🚨 `:focus`, NON `:focus-visible`, E QUESTA RIGA È IL TELEFONO.
   La prima stesura apriva l'etichetta su `:hover` e `:focus-visible`, col
   commento che diceva «sul telefono vale il tocco, che dà il fuoco».
   ⚠ Non è vero: `:focus-visible` esiste apposta per **distinguere** la
   tastiera dal puntatore, e su un elemento non nativamente interattivo un tap
   non lo fa scattare. Cioè su un telefono — dove `:hover` non esiste — il nome
   intero sarebbe stato **irraggiungibile per chiunque**, che è esattamente la
   cosa che questa etichetta doveva evitare.
   👉 L'etichetta si apre su `:focus` (che il tap dà), l'anello del fuoco resta
   su `:focus-visible` (che il tap giustamente non dà): due pseudo-classi
   diverse perché rispondono a due domande diverse.
   📌 Trovato dal controllo indipendente del 26/8/2026. */
.chi__nome[data-intero]:hover::after,
.chi__nome[data-intero]:focus::after {
	opacity: 1;
	visibility: visible;
}

/* Il fuoco si vede: ci si arriva col tasto di tabulazione, e un bersaglio
   che prende il fuoco senza mostrarlo è un vicolo cieco (WCAG 2.4.7). */
.chi__nome[data-intero]:focus-visible {
	outline: 2px solid var(--azione);
	outline-offset: 3px;
	border-radius: 3px;
}

.chi__ruolo {
	color: var(--testo-2);
	font-size: .8125rem;          /* 13 px */
	line-height: 1.4;
}

/* Chi ha chiesto di non vedere le animazioni non le vede nemmeno qui. */
@media (prefers-reduced-motion: reduce) {
	.chi__nome[data-intero]::after { transition: none; }
}

/* ==========================================================================
   4-quater. LA ZONA, NON IL CIVICO — 26/8/2026

   Il campo è **pieno di proposito**: non c'è nessuna carta sotto (serve
   l'estratto PMTiles, MAPPA.md §8) e MapLibre è JavaScript, che su questa
   pagina non si carica. ⛔ Non si disegnano strade finte per «fare mappa»:
   chi guarda le leggerebbe come vere.

   ⚠ Il cerchio è **tratteggiato** apposta. Un cerchio pieno con un bordo netto
   si legge come un confine misurato; il tratteggio dice «da qualche parte qui
   dentro», che è quello che il dato sostiene davvero.
   ========================================================================== */

.zona {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	margin-block-start: var(--passo);
	padding-block-start: var(--passo);
	border-block-start: 1px solid var(--bordo);
}

.zona__titolo {
	margin: 0;
	font-size: .9375rem;         /* 15 px: è un sottotitolo del pannello */
	font-weight: 600;
	line-height: 1.2;
}

.zona__campo {
	position: relative;
	border-radius: var(--raggio);
	overflow: hidden;
	background: var(--superficie-alt);
	aspect-ratio: 16 / 10;
}

.zona__disegno {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.zona__cerchio {
	fill: color-mix(in srgb, var(--pin-affitto) 13%, transparent);
	stroke: var(--pin-affitto);
	stroke-width: .8;
	stroke-dasharray: 3 2.5;
	vector-effect: non-scaling-stroke;
}

.zona__punto {
	fill: var(--pin-affitto);
	stroke: var(--superficie);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

.zona__nota {
	margin: 0;
	color: var(--testo-2);
	font-size: .8125rem;         /* 13 px */
	line-height: 1.5;
}

.zona__nota strong { color: var(--testo); }

/* In stampa il campo pieno è una macchia di inchiostro che non dice niente:
   resta la frase, che è la parte che porta l'informazione. */
@media print {
	.zona__campo { display: none; }
}

/* ==========================================================================
   5. LE STELLE
   Ritagliate, non scritte: `★` non è nel font del sito e finirebbe in un
   ripiego di sistema — cinque stelle di un altro disegno in mezzo a una riga
   del nostro. Stessa tecnica di `.pillola__segno` e `.badge__segno`.

   ⚠ Il colore pieno è `--attenzione`, che in `radar.css` è misurato 5,26:1 su
   `--superficie`: qui è un elemento grafico e gliene basterebbero 3, ma è la
   stessa tinta ambrata del disegno e passa comunque la soglia del testo.
   Le stelle vuote sono `--bordo`: sono l'assenza, e l'assenza non si decora.
   ========================================================================== */

.stelle {
	display: inline-flex;
	align-items: center;
	gap: .1em;
	vertical-align: -.1em;
}

.stelle__una {
	inline-size: .95em;
	block-size: .95em;
	flex: none;
	background: var(--bordo);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.stelle__una--piena { background: var(--attenzione); }

/* ==========================================================================
   6. IL VOTO E L'ISTOGRAMMA
   ========================================================================== */

.scheda .voto {
	display: flex;
	flex-wrap: wrap;
	gap: 1.375rem;
	align-items: flex-start;
	margin: 0 0 var(--passo);
	padding: calc(var(--passo) * 1.25);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
}

.scheda .voto__sintesi {
	flex: none;
	min-inline-size: 7rem;
}

/* Il numerone del disegno: serif, tracciamento stretto, cifre tabellari. */
.scheda .voto__media {
	margin: 0;
	font-family: var(--font-titolo);
	font-size: clamp(2.75rem, 3.96vw, 3.75rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	max-width: none;
}

.scheda .voto__stelle {
	margin: .375rem 0 0;
	font-size: 1.125rem;
	line-height: 1;
	max-width: none;
}

.scheda .voto__quante {
	margin: .375rem 0 0;
	font-size: var(--t-5);
	line-height: 1.4;
	color: var(--testo-2);
	max-width: 18ch;
}

/* --- L'istogramma --------------------------------------------------------
   Cinque righe `cifra · barra · conteggio`. La barra è alta 8 px, raggio 4,
   fondo `--superficie-alt`, riempimento `--testo`: **non colorato**, ed è una
   scelta del disegno che vale la pena rispettare — cinque barre colorate
   accanto a un pulsante verde sarebbero cinque cose che chiedono attenzione
   nello stesso centimetro.

   ⚠ Le larghezze del disegno erano `width:12px` sulla cifra e `width:22px` sul
   conteggio: qui sono `min-inline-size` in `ch`, perché con il
   `letter-spacing: .12em` che l'utente può imporre (WCAG 1.4.12) una larghezza
   fissa taglia il numero invece di allargarsi. */

.scheda .istogramma {
	flex: 1 1 11rem;
	display: flex;
	flex-direction: column;
	gap: .375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scheda .istogramma__riga {
	display: flex;
	align-items: center;
	gap: .625rem;
	max-width: none;
}

.scheda .istogramma__voto,
.scheda .istogramma__quante {
	font-size: var(--t-5);
	line-height: 1;
	color: var(--testo-2);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	flex: none;
}

.scheda .istogramma__voto { min-inline-size: 1ch; }

.scheda .istogramma__quante {
	min-inline-size: 2.5ch;
	text-align: right;
}

.scheda .istogramma__barra {
	flex: 1;
	block-size: .5rem;
	border-radius: 4px;
	background: var(--superficie-alt);
	overflow: hidden;
}

.scheda .istogramma__parte {
	display: block;
	block-size: 100%;
	background: var(--testo);
	border-radius: 4px;
}

/* ⚠ VENTUNO CLASSI INVECE DI UN `style` IN LINEA.
   Un attributo `style="width:63%"` lo blocca una CSP con `style-src` severa
   (TECNICA.md §8), e in tutto il tema non ce n'è nemmeno uno. Le classi vanno
   di 5 in 5: su una barra alta 8 px il mezzo passo non si distingue, e **il
   numero esatto è scritto lì accanto**, che è dove la precisione serve. Il
   passo esatto lo arrotonda il PHP → `radar_fiducia_recensioni()`. */
.scheda .istogramma__parte--0   { inline-size: 0; }
.scheda .istogramma__parte--5   { inline-size: 5%; }
.scheda .istogramma__parte--10  { inline-size: 10%; }
.scheda .istogramma__parte--15  { inline-size: 15%; }
.scheda .istogramma__parte--20  { inline-size: 20%; }
.scheda .istogramma__parte--25  { inline-size: 25%; }
.scheda .istogramma__parte--30  { inline-size: 30%; }
.scheda .istogramma__parte--35  { inline-size: 35%; }
.scheda .istogramma__parte--40  { inline-size: 40%; }
.scheda .istogramma__parte--45  { inline-size: 45%; }
.scheda .istogramma__parte--50  { inline-size: 50%; }
.scheda .istogramma__parte--55  { inline-size: 55%; }
.scheda .istogramma__parte--60  { inline-size: 60%; }
.scheda .istogramma__parte--65  { inline-size: 65%; }
.scheda .istogramma__parte--70  { inline-size: 70%; }
.scheda .istogramma__parte--75  { inline-size: 75%; }
.scheda .istogramma__parte--80  { inline-size: 80%; }
.scheda .istogramma__parte--85  { inline-size: 85%; }
.scheda .istogramma__parte--90  { inline-size: 90%; }
.scheda .istogramma__parte--95  { inline-size: 95%; }
.scheda .istogramma__parte--100 { inline-size: 100%; }

/* ==========================================================================
   7. LE RECENSIONI E LA REPLICA
   ========================================================================== */

.scheda .recensioni__elenco {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scheda .recensione {
	padding: 1.125rem 1.25rem;
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	max-width: none;
}

.scheda .recensione__testa {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
	margin-bottom: .5rem;
}

.scheda .recensione__chi { font-weight: 600; }

.scheda .recensione__dove,
.scheda .recensioni__resto {
	font-size: var(--t-5);
	color: var(--testo-2);
}

/* Il segnale della prova: pastiglia sul velo verde, con il punto pieno. Il
   `--verificato` di `radar.css` è stato portato a `#25674A` il 15/8/2026
   proprio perché su questo velo il valore di prima faceva 4,38:1 — sotto AA. */
.scheda .recensione__prova {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	padding: .25rem .5625rem;
	border-radius: var(--raggio-piccolo);
	background: var(--verificato-velo);
	color: var(--verificato);
	font-size: var(--t-5);
	font-weight: 600;
	line-height: 1.3;
}

.scheda .recensione__prova-segno {
	inline-size: .4375rem;
	block-size: .4375rem;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

/* Le stelle della singola recensione vanno a destra, dove le mette il disegno:
   `margin-inline-start:auto` e non un `float`, così con poco spazio scendono
   sotto invece di sovrapporsi al nome. */
.scheda .recensione__voto {
	margin-inline-start: auto;
	font-size: 1rem;
	line-height: 1;
}

.scheda .recensione__testo {
	margin: 0 0 .875rem;
	line-height: 1.6;
}

/* --- La replica del professionista ---------------------------------------
   Rientrata e su un fondo diverso, perché è una voce diversa: chi legge deve
   vedere in un colpo d'occhio dove finisce il cliente e dove comincia
   l'impresa. Non si nasconde mai, nemmeno sotto una recensione da una stella
   → DESIGN.md §6. */

.scheda .recensione__replica {
	padding: .9375rem 1rem;
	background: var(--superficie-alt);
	border-radius: var(--raggio-interno);
}

.scheda .recensione__replica-chi {
	margin: 0 0 .3125rem;
	font-size: var(--t-5);
	font-weight: 600;
	max-width: none;
}

.scheda .recensione__replica-testo {
	margin: 0;
	line-height: 1.6;
	max-width: none;
}

.scheda .recensioni__resto { margin: .75rem 0 0; }

/* ==========================================================================
   7-bis. DOVE LAVORA
   I comuni serviti in pillole. La mappa alta 280 px coi cerchi arancio **non
   c'è**, e la sua assenza è scritta in pagina: vorrebbe MapLibre, cioè WebGL,
   cioè JavaScript, e la scheda ne ha zero per la regola dell'8/8/2026.
   Il riquadro del «perché» è quieto di proposito — è una spiegazione, non un
   avviso: se gridasse sembrerebbe un errore, e non lo è.
   ========================================================================== */

.scheda .dove { margin: calc(var(--passo) * 2) 0 0; }

.scheda .dove__titolo {
	font-size: var(--t-3);
	margin-bottom: .75rem;
}

.scheda .dove__comuni {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}

.scheda .dove__comuni li { max-width: none; }

.scheda .dove__comuni .pillola {
	text-decoration: none;
	color: var(--testo);
}

.scheda .dove__comuni .pillola:hover { background: var(--superficie-alt); }

.scheda .dove__raggio { margin: 0 0 .75rem; }

.scheda .dove__senza-mappa {
	margin: 0;
	padding: .875rem 1rem;
	background: var(--superficie-alt);
	border-radius: var(--raggio);
	font-size: var(--t-5);
	line-height: 1.6;
	color: var(--testo);
	max-width: none;
}

/* ==========================================================================
   8. ALTRI ARTIGIANI CON IDENTITÀ VERIFICATA
   Tre schede in coda alla sezione. Il titolo è un claim, e la query lo
   rispetta: escono solo quelle con livello 2 e la data della verifica
   → `single-professionista.php`.
   ========================================================================== */

.scheda .altri {
	margin-top: calc(var(--passo) * 2.5);
	padding-top: calc(var(--passo) * 1.5);
	border-top: 1px solid var(--bordo);
}

.scheda .altri__titolo {
	font-family: var(--font-titolo);
	font-size: var(--t-2);
	font-weight: 400;
	margin-bottom: 1.25rem;
}

/* «Recensioni» — coordinatore 4/9/2026, 16:16: era l'unico h2 della scheda
   senza una regola sua, quindi cadeva sul generico `h2 { font-size: var(--t-2) }`
   di radar.css (niente `font-family`) e restava sans-grassetto mentre tutti
   gli altri titoli di sezione (`.lavori__titolo`, `.dove__titolo`,
   `.altri__titolo`) sono serif. `#recensioni-titolo` è di `inc/fiducia.php`
   (non mio: non si tocca) — si veste da qui, stessa ricetta degli altri. */
.scheda #recensioni-titolo {
	font-family: var(--font-titolo);
	font-weight: 400;
}

.scheda .altri__elenco {
	display: grid;
	gap: var(--passo);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.scheda .altri__voce { max-width: none; }

.scheda .altri__collegamento {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	overflow: hidden;
	color: var(--testo);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.scheda .altri__collegamento:hover {
	transform: translateY(-4px);
	box-shadow: var(--elev-3);
	color: var(--testo);
}

.scheda .altri__foto {
	block-size: 11.875rem;
	overflow: hidden;
	background: var(--superficie-alt);
}

.scheda .altri__foto img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.scheda .altri__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: 1rem 1.125rem 1.125rem;
	flex: 1;
}

.scheda .altri__corpo p { margin: 0; max-width: none; }

.scheda .altri__mestiere .pillola--servizi { --tinta: var(--pin-servizi); }

.scheda .altri__nome {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

.scheda .altri__dove,
.scheda .altri__voto-quante {
	font-size: var(--t-5);
	color: var(--testo-2);
}

.scheda .altri__voto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
}

.scheda .altri__voto-media,
.scheda .altri__voto-quante {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.scheda .altri__voto-media { font-weight: 700; }

.scheda .altri__verificato {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	padding: .25rem .5rem;
	border-radius: var(--raggio-piccolo);
	background: var(--verificato-velo);
	color: var(--verificato);
	font-size: var(--t-5);
	font-weight: 600;
}

/* La spunta, disegnata con due bordi: la stessa di `.badge__segno` in
   `radar.css`, che qui non si può riusare perché sta dentro un altro blocco.
   Il segno accompagna sempre la parola — il colore da solo non porta mai
   l'informazione (WCAG 1.4.1). */
.scheda .altri__verificato-segno {
	inline-size: .4em;
	block-size: .7em;
	flex: none;
	border: solid currentColor;
	border-width: 0 .16em .16em 0;
	rotate: 45deg;
	margin-top: -.2em;
}

/* Il richiamo in fondo alla scheda: non è un pulsante — tutta la scheda è già
   il collegamento — ma ne ha l'aspetto, perché è lì che l'occhio si ferma. */
.scheda .altri__vedi {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 2.875rem;
	margin-top: auto;
	padding: .5rem 1rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	font-weight: 500;
}

.scheda .altri__collegamento:hover .altri__vedi { background: var(--superficie-alt); }

/* ==========================================================================
   9. SCURO, MOVIMENTO, ZOOM, STAMPA
   ⚠ Lo scuro NON ha un blocco suo, ed è la cosa giusta: ogni colore qui sopra
   è un token di `radar.css`, che dal 16/8/2026 li ribalta con `light-dark()` e
   `color-scheme` — quindi anche i tre stati del commutatore in testata arrivano
   qui gratis, senza una riga in più. Le sole cose che avevano bisogno di un
   ribaltamento sono le due ombre, e stanno in §1 accanto alla loro
   dichiarazione chiara — non in una coda lontana dove nessuno le troverebbe.
   ========================================================================== */

/* `radar.css` spegne già ogni animazione e transizione per chi non le vuole.
   Qui resta da spegnere lo scatto del carosello, che è uno scorrimento e non
   una transizione: `scroll-snap` su un movimento non voluto dà la nausea a chi
   soffre di disturbi vestibolari. */
@media (prefers-reduced-motion: reduce) {
	.scheda .lavori .galleria { scroll-snap-type: none; }
	.scheda .altri__collegamento:hover { transform: none; }
	.scheda .radar-richiesta__invia:hover,
	.scheda .fiducia__azione:hover { transform: none; }
}

/* Sotto i 30rem — cioè un telefono stretto, o un telefono normale al 200% di
   zoom — il pannello dei numeri e la sintesi del voto vanno stretti: le righe
   passano da «etichetta a sinistra, valore a destra» a due righe, che è quello
   che `flex-wrap` fa già da sé. Qui si toglie solo l'allineamento a destra del
   valore, che a capo non ha più senso. */
@media (max-width: 30rem) {
	.scheda .numeri__riga .dato__valore { text-align: left; }
	.scheda .istogramma { flex-basis: 100%; }
}

/* ⚠ In stampa un `<details>` chiuso porta via con sé il suo contenuto, e questa
   è la pagina che qualcuno stampa per portarsela dietro: la ragione per cui un
   numero non c'è è esattamente ciò che vuole avere sotto gli occhi. Si riapre,
   con le due righe che servono ai browser vecchi e a quelli nuovi — stessa
   ricetta di `.fiducia__badge` in `radar.css`.
   Il carosello in stampa si srotola: su carta non si trascina niente. */
@media print {
	.scheda .numeri__manca > p { display: block; }
	.scheda .numeri__manca::details-content { content-visibility: visible; block-size: auto; }

	.scheda .lavori .galleria {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.scheda .fiducia { box-shadow: none; }
	.scheda .altri { break-inside: avoid; }
	.scheda .recensione { break-inside: avoid; }
}

/* ==========================================================================
   10. IL CORPO A DUE COLONNE — SOTTO SOGLIA, UNA SOLA
   `radar.css` mette due colonne dai 60rem SEMPRE — giusto quando la sinistra
   ha abbastanza dentro da reggerle, sbagliato quando no.

   🚨 Misurato il 2/9/2026 su `/professionista/cozzolino-infissi/` (un solo
   blocco vero nella sinistra, «Dove lavora»): il vuoto sotto la sinistra era
   **~980px a 960 e ~1457px a 1920**, mentre la destra («Chi pubblica»)
   restava piena. E non è la scheda rara: su un campione di 28 prese
   dall'archivio, **27 avevano lo stesso identico unico blocco**. È la
   scheda tipica, non l'eccezione — sono la maggioranza delle 145.000.

   `single-professionista.php` conta i blocchi veri della sinistra PRIMA di
   aprire `.azienda__corpo` (foto, testo, anni, tag, recensioni vere, dove) e
   aggiunge questa classe quando sono meno di due. Sotto soglia:
     · il corpo torna a una colonna, come già fa da solo sotto i 60rem —
       il pannello «Chi pubblica» scende sotto invece di restare a fianco
       di un vuoto;
     · la sinistra si riempie con «Altri professionisti con identità
       verificata» (§8), spostato qui da fine pagina invece che restare a
       valle a piena larghezza — contenuto vero, non un riempitivo. Se la
       scheda è ricca la classe non compare, e questo file non cambia niente
       per lei: la prova che non regredisce è `_prove/esercita-scheda-piede.py`.

   ⚠ Specificità a due classi apposta (`.scheda .azienda__corpo--scarna`):
   basta a vincere su `.azienda__corpo` di `radar.css` senza toccarlo — è un
   token di Logos, non si tocca in questo cantiere — e non serve
   `!important`. */
@media (min-width: 60rem) {
	.scheda .azienda__corpo--scarna {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   IL SEGNAPOSTO DELL'IMPRESA SENZA FOTO — 7/9/2026.
   Prende lo STESSO riquadro della copertina vera (43:23): con e senza foto la
   scheda ha la stessa forma, e non balla il giorno che la foto arriva.
   Fondo nel colore della categoria, molto attenuato: si vede che è un posto
   in attesa, non una fotografia. Il disegno al tratto, quando c'è, sta al
   centro; l'invito in basso parla a chi potrebbe essere il titolare.
   -------------------------------------------------------------------------- */

.scheda .testata-categoria--riquadro {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	aspect-ratio: 43 / 23;
	margin: 0 0 var(--passo);
	padding: clamp(18px, 3vw, 34px);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	background:
		radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--servizi, #E69F00) 16%, transparent), transparent 70%),
		var(--superficie-alt);
	text-align: center;
	overflow: hidden;
}

.scheda .testata-categoria--riquadro .testata-categoria__disegno {
	width: clamp(64px, 9vw, 104px);
	height: auto;
	opacity: .75;
}

.scheda .testata-categoria--riquadro .testata-categoria__etichetta {
	font: 600 .9375rem/1.3 var(--font);
	color: var(--testo-2);
}

.scheda .testata-categoria__invito {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--testo-2);
}

.scheda .testata-categoria__invito a {
	font-weight: 600;
	white-space: nowrap;
}