/* IL VESTITO DELLA PAGINA DEL VISITATORE (Pezzo 8, tappa 8b).
 *
 * Sta in un file a parte e non dentro la pagina perche' lo scudo (Pezzo 7) vieta gli
 * stili scritti dentro i tag: `style-src 'self'` e `style-src-attr 'none'`. Non e'
 * pignoleria — e' la riga che, se un domani finisse in pagina un testo malandrino,
 * impedisce che diventi qualcosa di eseguibile.
 *
 * ⚠️ E' pensato per il TELEFONO IN VERTICALE, che e' il mestiere di questa pagina. Sul
 * computer funziona lo stesso, con la mappa piu' larga. Il pannello dell'organizzatore,
 * che invece si disegna per lo schermo grande (P8-D3), ha un foglio tutto suo.
 *
 * ⚠️ L'attribuzione «© OpenStreetMap contributors» non si tocca e non si nasconde,
 * nemmeno di qui: e' un obbligo della licenza dei dati E delle condizioni d'uso, e c'e'
 * una guardia che legge questo foglio apposta.
 */

:root {
  --testo: #17202b;
  --testo-tenue: #5a6b7d;
  --sfondo: #ffffff;
  --sfondo-tenue: #f2f4f7;
  --bordo: #dde3ea;
  --accento: #1f3a5f;
  --accento-testo: #ffffff;
  --attesa-mappa: #e8e4dd;
  --ombra: 0 2px 10px rgba(0, 0, 0, 0.18);
  --ombra-alta: 0 6px 26px rgba(0, 0, 0, 0.26);
  --avviso-sfondo: #fdf3d8;
  --avviso-bordo: #e6cf94;
  --avviso-testo: #6b5316;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--sfondo);
}

/* La pagina e' una colonna: barra dei filtri, mappa (che si prende tutto lo spazio che
 * avanza), eventuale riga di avviso. La striscia della nota di trasparenza in fondo non
 * c'e' piu': tolta il 29/07 per decisione di Carlo.
 *
 * ⚠️ Nessuna altezza scritta a mano da nessuna parte: le strisce si misurano da sole e la
 * mappa riempie il resto. Con un'altezza fissa, una riga che va a capo si taglierebbe. */
body {
  display: flex;
  flex-direction: column;
}

/* Serve perche' `hidden` non perda contro `display: flex` degli elementi qui sotto. */
[hidden] {
  display: none !important;
}

/* --- La barra dei filtri --------------------------------------------------------- */

#barra-filtri {
  position: relative; /* serve alla sfumatura qui sotto, che si appoggia al bordo destro */
  flex: 0 0 auto;
  background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  z-index: 1100; /* sopra la mappa: Leaflet usa fino a 800 per i suoi livelli */
}

/* ⭐ L'INDIZIO CHE LE CATEGORIE CONTINUANO (trovato da Carlo sull'anteprima, 29/07).
 *
 * ⛔ IL PROBLEMA: con dieci categorie la barra esce dallo schermo e le pastiglie di destra
 * si raggiungono scorrendo col dito — ma niente lo dice, e chi non prova a trascinare non
 * scopre mai che esistono. Alla festa vuol dire non trovare i bagni.
 *
 * ⚠️ La classe «continua» la mette e la toglie il programma, e SOLO finche' c'e' davvero
 * altro da vedere: una sfumatura accesa sempre non e' un indizio, e' una decorazione.
 *
 * `pointer-events: none` e' la riga importante: la sfumatura sta SOPRA le pastiglie, e
 * senza di questa si mangerebbe il dito di chi tocca l'ultima categoria a destra. */
#barra-filtri::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.2rem;
  pointer-events: none;
  /* ⚠️ Si parte da «transparent» e non da un bianco trasparente: sul TEMA SCURO lo sfondo
   * e' scuro, e un bianco che sfuma lascerebbe un alone grigiastro sopra le pastiglie. */
  background: linear-gradient(to right, transparent, var(--sfondo));
  opacity: 0;
  transition: opacity 0.15s ease;
}

#barra-filtri.continua::after {
  opacity: 1;
}

/* Chi ha chiesto al telefono di non animare niente (mal di testa, vertigini) non deve
 * vedere la sfumatura comparire in dissolvenza: compare e basta. */
@media (prefers-reduced-motion: reduce) {
  #barra-filtri::after {
    transition: none;
  }
}

/* Le pastiglie scorrono di lato invece di andare a capo: alla festa le categorie possono
 * essere otto o dieci, e tre righe di pastiglie si mangerebbero mezzo telefono. */
#filtri {
  display: flex;
  gap: 0.45rem;
  /* ⚠️ Le zone sicure anche qui (V-9): in orizzontale la prima pastiglia finiva sotto il
   * bordo curvo del telefono e non si riusciva a toccarla. */
  padding: 0.55rem calc(0.7rem + env(safe-area-inset-right)) 0.55rem calc(0.7rem + env(safe-area-inset-left));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pastiglia {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem; /* comodo da centrare col pollice */
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--sfondo-tenue);
  color: var(--testo-tenue);
  font: inherit;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
}

/* ⚠️ Acceso e spento NON si distinguono solo dal colore: la pastiglia accesa e' anche
 * piu' scura e in grassetto, e porta `aria-pressed`. Chi non distingue bene i colori
 * deve capire lo stesso quali categorie sta guardando. */
.pastiglia.accesa {
  border-color: var(--accento);
  background: var(--accento);
  color: var(--accento-testo);
  font-weight: 600;
}

.pastiglia:not(.accesa) .pastiglia-emoji {
  filter: grayscale(1);
  opacity: 0.55;
}

.pastiglia-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.pastiglia-quanti {
  min-width: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.pastiglia.accesa .pastiglia-quanti {
  background: rgba(255, 255, 255, 0.22);
}

.pastiglia:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: 2px;
}

/* --- La mappa --------------------------------------------------------------------- */

#mappa {
  flex: 1 1 auto;
  min-height: 0; /* senza questo la mappa non si lascia rimpicciolire e spinge fuori il resto */
  background: var(--attesa-mappa); /* colore d'attesa: se le tessere non arrivano non resta bianco */
}

/* IL SEGNALINO.
 *
 * E' un elemento con una classe e non un'immagine fissa apposta: la migrazione 4 (loghi
 * degli espositori) dovra' potergli mettere intorno una cornicetta colorata senza che
 * questo pezzo venga rifatto. */
.segnalino-corpo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* 🎨 IL BORDO PRENDE IL COLORE DELLA CATEGORIA (R-N3).
   *
   * Il colore lo scrive il programma su `--colore-categoria`, leggendolo dal pacchetto
   * pubblico. ⚠️ IL VALORE DI RIPIEGO VIVE QUI E IN NESSUN ALTRO POSTO: se la categoria
   * un colore non ce l'ha, il programma non tocca niente e vale questo. Scriverlo anche
   * di la' sarebbe la solita seconda verita' che col tempo diverge. */
  border: 3px solid var(--colore-categoria, var(--accento));
  background: var(--sfondo);
  /* L'ANELLO BIANCO SOTTILE intorno al bordo, e non e' decorazione: e' quello che fa
   * funzionare gli stessi dodici colori sia sulla mappa chiara sia su quella scura —
   * senza, un colore scuro su fondo scuro sparisce. E' la parte dell'anteprima del 25/07
   * che Carlo ha approvato a occhio. L'ombra di sempre resta, attaccata dopo. */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    var(--ombra);
  font-size: 1.1rem;
  line-height: 1;
}

/* Senza emoji si disegna un pallino pieno: uno stand che esiste e non si vede e' uno
 * stand che alla festa non trova nessuno (caso X10). */
.segnalino-pallino {
  background: var(--accento);
}

.segnalino-pallino::before {
  content: "●";
  color: var(--accento-testo);
  font-size: 0.85rem;
}

/* --- Il fumetto ------------------------------------------------------------------- */

/* 🏷️ IL LOGO GRANDE DELL'ESPOSITORE, in cima al fumetto (decisione L-i del 28/07).
 *
 * ⚠️ IL FONDO CHIARO E LA CORNICE SOTTILE SONO IL CASO R-8, non un vezzo: un marchio
 * quasi bianco, o con lo sfondo trasparente, senza di loro sembrerebbe un buco nel
 * fumetto. Il server rifa' ogni logo dentro un quadrato di 320 punti SENZA deformarlo,
 * quindi qui basta lasciargli lo spazio e centrarlo. */
.fumetto-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⭐ 31/07, guardando l'anteprima: «troppo grande, ci va solo un logo, ridurrei il
   * riquadro di un buon 40%» — e subito dopo la precisazione: «non in altezza, in
   * LARGHEZZA (ridurre la base)». Quindi l'altezza resta quella che ha visto, e il
   * riquadro si stringe al 60% della larghezza del fumetto, centrato. Poi, stretto anche
   * il fumetto, ha chiesto di riallargare la base dell'immagine di un terzo: 60% → 80%. */
  width: 80%;
  height: 7.5rem;
  margin: 0 auto 0.6rem;
  padding: 0.4rem;
  border: 1px solid var(--bordo);
  border-radius: 0.6rem;
  background: #ffffff;
}

.fumetto-logo img {
  /* Il logo ci sta DENTRO, sempre: la cornice non e' uno stampo. */
  max-width: 100%;
  max-height: 100%;
  /* Senza questo, un marchio molto largo verrebbe schiacciato. */
  object-fit: contain;
}

.fumetto-titolo {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.25;
}

.fumetto-categoria {
  margin: 0 0 0.35rem;
  color: var(--testo-tenue);
  font-size: 0.82rem;
}

.fumetto-descrizione {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  /* Una descrizione puo' arrivare a 500 caratteri: se un fumetto diventasse alto quanto
   * lo schermo coprirebbe la mappa. Oltre una certa altezza si scorre dentro il fumetto. */
  max-height: 11rem;
  overflow-y: auto;
  /* Un testo lunghissimo senza spazi (un indirizzo web incollato) sfonderebbe il
   * riquadro di lato: qui va a capo lo stesso. */
  overflow-wrap: anywhere;
}

/* --- Il messaggio sopra la mappa --------------------------------------------------- */

/* Sta sopra la mappa e non nel flusso: cosi' comparire o sparire non fa saltare
 * l'inquadratura di chi sta guardando. */
#messaggio {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200; /* sopra la mappa e sopra la barra dei filtri */
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border-radius: 0.7rem;
  background: var(--sfondo);
  box-shadow: var(--ombra-alta);
  text-align: center;
  line-height: 1.45;
}

#messaggio p {
  margin: 0;
}

#messaggio .bottone {
  margin-top: 0.8rem;
  min-height: 2.6rem;
  padding: 0.5rem 1.2rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accento);
  color: var(--accento-testo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* --- L'ELENCO DEGLI STAND: il tondo e il foglio che sale (R-N7, decisione V-1) ------ */

/* ⚠️ COM'ERA PRIMA, e perche' e' cambiato. Fino al 29/07 questo era una BARRA larga nel
 * flusso della pagina, sotto la mappa, e il motivo scritto qui era che un tondo
 * galleggiante avrebbe coperto l'angolo dell'attribuzione di OpenStreetMap.
 *
 * Carlo, guardando l'anteprima, ha preferito il tondo — e ha ragione sul seguito: qui
 * arriveranno il «dove mi trovo» e il «naviga», che come barre si mangerebbero mezzo
 * telefono. Il vincolo dell'attribuzione NON e' stato accantonato: si rispetta tenendo la
 * colonna staccata dal fondo, e c'e' una guardia che lo pretende (L-9 ter). */

/* LA COLONNA DEI COMANDI CHE GALLEGGIANO SULLA MAPPA (decisione di Carlo, 29/07).
 *
 * ⚠️ `bottom` NON e' zero, ed e' la riga piu' importante di questo blocco: nell'angolo in
 * basso a destra Leaflet scrive «© OpenStreetMap contributors», alta circa 18 pixel.
 * Coprirla vale quanto nasconderla, ed e' un obbligo di licenza. C'e' una guardia che
 * legge questo numero e diventa rossa se scende (L-9 ter in test/pezzo7-guardie.test.js).
 *
 * ⚠️ `column-reverse`: il primo bottone scritto nella pagina e' quello PIU' IN BASSO,
 * cioe' il piu' comodo per il pollice. I prossimi (il «dove mi trovo» e il «naviga»
 * della Tappa 2) si aggiungono sopra, e chi ha imparato dove stava l'elenco lo ritrova. */
#comandi-mappa {
  position: fixed;
  /* ⚠️ Zone sicure (V-9): in orizzontale il tondo finiva sotto il bordo curvo del telefono. */
  right: calc(0.8rem + env(safe-area-inset-right));
  bottom: 2.2rem;
  z-index: 1200; /* sopra la mappa e i controlli di Leaflet, sotto il foglio che sale */
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6rem;
}

/* ⚠️ A foglio aperto i tondi spariscono: il foglio arriva a tre quarti dello schermo e li
 * coprirebbe a meta', lasciando spuntare mezzo bottone che non si capisce se si tocca.
 * Si nascondono davvero (`display: none`) e non solo di vista: un bottone invisibile ma
 * ancora raggiungibile con la tastiera e' una trappola per chi non vede. */
.foglio-aperto #comandi-mappa {
  display: none;
}

/* IL TONDO.
 *
 * 3,2rem = poco piu' di 51 pixel: sopra il minimo di 44 che le linee guida chiedono per
 * qualcosa che si tocca col dito. Alla festa, di sera, con le mani impegnate, un bersaglio
 * piccolo si sbaglia. */
.tondo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accento);
  color: var(--accento-testo);
  box-shadow: var(--ombra-alta);
  cursor: pointer;
}

.tondo-disegno {
  width: 1.5rem;
  height: 1.5rem;
}

.tondo:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: 3px;
}

/* ⭐⭐ QUANTO SALE IL FOGLIO — UNA MISURA SOLA, letta da tutti quelli che la usano.
 *
 * ⛔ IL DIFETTO CHE QUESTA RIGA CHIUDE (deciso con Carlo il 29/07). Il numero era scritto
 * a mano in DUE posti: qui e sull'attribuzione di OpenStreetMap, che a foglio aperto si
 * alza per non finirci sotto. Due copie della stessa misura divergono sempre, prima o poi:
 * basta cambiarne una e il foglio COPRE l'attribuzione — che vale quanto nasconderla, ed
 * e' un obbligo di licenza. E la pagina continuerebbe a funzionare benissimo, quindi non
 * se ne accorgerebbe nessuno.
 *
 * ⚠️ E il numero e' il PIU' PICCOLO fra due cose, non piu' una frazione secca:
 *   - tre quarti dello SCHERMO: e' il gusto (la mappa deve restare viva sotto, V-1);
 *   - tutto lo schermo MENO 6rem: e' lo spazio che deve restare libero sopra, perche' li'
 *     ci stanno la barra delle categorie e, in fondo alla mappa, l'attribuzione.
 * Su un telefono normale vince il primo e non cambia niente. Su uno schermo basso (il
 * telefono girato in orizzontale) vince il secondo, e il foglio sale un po' meno invece di
 * spingere l'attribuzione fuori dal riquadro della mappa, dove Leaflet la taglia via. */
/* ⭐ LO SCHERMO CHE SI VEDE DAVVERO, e quanto se n'e' presa la tastiera (decisione V-10 di
 * Carlo, 29/07).
 *
 * ⛔ IL DIFETTO, visto da lui sull'anteprima col telefono in ORIZZONTALE: toccando la
 * casella della ricerca salta su la tastiera, che si prende meta' schermo e si mangia TUTTO
 * il foglio — niente casella, niente elenco, resta solo la maniglia. Si scrive alla cieca.
 *
 * ⚠️ Il motivo e' che la tastiera NON accorcia la pagina: le si siede sopra. `100vh` continua
 * a valere quanto prima, e il foglio, che ci si misurava sopra, finisce sotto la tastiera.
 *
 * Questi due numeri li riscrive il programma, che chiede al browser quanto se ne vede
 * davvero (`misuraLaTastiera`). ⚠️ I valori scritti qui sono quelli di SEMPRE: se il
 * programma non parte, o il browser non sa rispondere, non cambia niente per nessuno. */
:root {
  --schermo: 100vh;
  --tastiera: 0px;
  --foglio-sale: min(calc(var(--schermo) * 0.72), calc(var(--schermo) - 6rem));
}

/* ⭐ TASTIERA APERTA: comanda lei, e la mappa aspetta il suo turno.
 *
 * ⛔ IL PRIMO TENTATIVO NON BASTAVA, e l'ha bocciato Carlo sull'anteprima (29/07). Si lasciava
 * libera una striscia in cima (4rem) per la barra delle categorie e per l'attribuzione: in
 * orizzontale, sopra la tastiera, di spazio ne restava cosi' poco che nel foglio ci stava
 * SOLO la maniglia. Casella e risposte restavano invisibili: si scriveva ancora alla cieca.
 *
 * ✅ DECISIONE SUA, con la conseguenza detta e accettata: mentre si scrive in orizzontale il
 * foglio si prende TUTTO lo schermo sopra la tastiera. Sopra ci finiscono la barra delle
 * categorie e la striscia di mappa con «© OpenStreetMap contributors» — coperte, per il
 * tempo in cui si scrive, e di nuovo li' appena la tastiera si chiude. E' lo stesso che fanno
 * le mappe grandi: mentre si scrive, la mappa non la sta guardando nessuno.
 *
 * ⚠️ Non c'e' niente che NASCONDE l'attribuzione: nessuna regola la spegne e nessuna la
 * spinge fuori schermo (le guardie L-9 e L-9 bis restano in piedi e verdi). Resta al suo
 * posto dentro la mappa, con un pannello davanti che si tira giu' col dito.
 *
 * ⚠️ Vale in verticale come in orizzontale: e' lo stesso difetto, in orizzontale si vede
 * solo prima. E appena la tastiera si chiude, la classe se ne va e torna tutto com'era. */
body.tastiera-aperta {
  --foglio-sale: var(--schermo);
}

/* ⚠️ E l'attribuzione NON si alza sopra un foglio che ormai copre tutto: la spingerebbe
 * fuori dal riquadro della mappa, dove Leaflet la taglia via — e li' non tornerebbe piu'
 * nemmeno chiudendo la tastiera. Resta appoggiata sopra la tastiera, dentro la mappa. */
body.tastiera-aperta.foglio-aperto .leaflet-bottom {
  bottom: var(--tastiera);
}

/* ⭐ SCHERMO BASSO = telefono girato in ORIZZONTALE (decisione V-8 di Carlo, 29/07).
 *
 * ⛔ IL DIFETTO, visto da lui sull'anteprima: girando il telefono il foglio si mangiava
 * quasi tutto e della mappa restava una striscia di due dita. La decisione V-1 dice che la
 * mappa deve restare VIVA sotto il foglio: una striscia non e' una mappa viva.
 *
 * Adesso di mappa ne resta almeno un TERZO dello schermo. Parole sue: «se vogliono vedere
 * la mappa abbassano la finestra o mettono in verticale».
 *
 * Il conto: tutto lo schermo, meno la barra delle categorie (~4rem), meno il terzo di mappa
 * che deve restare (33vh) = 67vh - 4rem. ⚠️ In VERTICALE non cambia niente: li' vince il
 * primo termine, cioe' i tre quarti di sempre. */
@media (max-height: 30rem) {
  :root {
    --foglio-sale: min(calc(var(--schermo) * 0.72), calc(var(--schermo) * 0.67 - 4rem));
  }
}

/* IL FOGLIO CHE SALE DAL BASSO (decisione V-1).
 *
 * ⚠️ `padding` con le ZONE SICURE del telefono (decisione V-9 di Carlo, 29/07). Girando
 * il telefono in orizzontale, il bordo curvo e il notch si mangiavano l'inizio delle
 * righe: «Cerca uno stand» e i nomi degli stand risultavano tagliati a sinistra. Non e'
 * estetica — alla festa, di sera, un nome tagliato a meta' non si legge.
 * Sui telefoni che non hanno niente da schivare, quei valori sono zero e non cambia nulla. */
.foglio {
  position: fixed;
  right: 0;
  /* ⚠️ NON `0` (decisione V-10): «in fondo alla pagina» e «in fondo a cio' che si vede» sono
   * la stessa cosa solo finche' non c'e' la tastiera. Con la tastiera aperta lo zero e'
   * sotto di lei, e il foglio ci sparisce dentro. Da chiusa il numero vale zero e non
   * cambia niente. */
  bottom: var(--tastiera);
  left: 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1300; /* sopra la mappa, sopra la barra dei filtri, sotto il messaggio */
  display: flex;
  flex-direction: column;
  max-height: var(--foglio-sale);
  background: var(--sfondo);
  border-top: 1px solid var(--bordo);
  border-radius: 1rem 1rem 0 0;
  box-shadow: var(--ombra-alta);
  /* Da chiuso se ne sta fuori schermo, pronto a salire. `visibility` lo toglie anche al
   * dito e al lettore di schermo, che `transform` da solo non farebbe. */
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.24s ease-out,
    visibility 0.24s;
}

.foglio.aperto {
  transform: translateY(0);
  visibility: visible;
}

/* Chi ha chiesto al telefono meno animazioni non deve vedersi salire niente. */
@media (prefers-reduced-motion: reduce) {
  .foglio {
    transition: none;
  }
}

/* ⚠️ Col foglio aperto, l'attribuzione di OpenStreetMap si sposta SOPRA il foglio invece
 * di finirci sotto. Non e' un vezzo: le condizioni d'uso pretendono che resti visibile, e
 * coprirla con un pannello sarebbe nasconderla.
 *
 * ⭐ Si alza ESATTAMENTE di quanto sale il foglio, perche' legge la stessa identica misura
 * (`--foglio-sale`). Prima il numero era riscritto qui a mano: due copie che, il giorno in
 * cui una cambia e l'altra no, fanno coprire l'attribuzione senza un rosso da nessuna
 * parte. C'e' una guardia che pretende questa `var()` (L-9 quater). */
body.foglio-aperto .leaflet-bottom {
  /* ⚠️ Il foglio parte da sopra la tastiera (V-10): l'attribuzione deve salire di tutti e
   * due i pezzi, altrimenti con la tastiera aperta le finisce dietro. */
  bottom: calc(var(--tastiera) + var(--foglio-sale));
  transition: bottom 0.24s ease-out;
}

/* La maniglia: si tira giu' col dito per richiudere, o si tocca. */
.foglio-maniglia {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.2rem;
  cursor: grab;
  /* Senza questo il browser interpreta lui il trascinamento e la maniglia non risponde. */
  touch-action: none;
}

.foglio-barretta {
  width: 2.75rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--bordo);
}

.foglio-maniglia:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: -3px;
}

/* La ricerca sta IN CIMA al foglio (decisione V-1) e non scorre via con l'elenco: chi ha
 * scorso in fondo a cinquanta stand deve poter cambiare ricerca senza risalire. */
/* ⚠️ `position: relative` perche' la × qui sotto si appoggia dentro la casella, sul suo
 * bordo destro. */
.foglio-cerca {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0.9rem 0.7rem;
}

#cerca {
  width: 100%;
  min-height: 2.9rem;
  /* ⚠️ Il vuoto a destra e' piu' largo: e' il posto della ×. Senza, una parola lunga le
   * finirebbe sotto e non si leggerebbe piu' ne' l'una ne' l'altra. */
  padding: 0.55rem 3rem 0.55rem 0.8rem;
  border: 1px solid var(--bordo);
  border-radius: 0.6rem;
  background: var(--sfondo-tenue);
  color: var(--testo);
  font: inherit;
  font-size: 1rem; /* ⚠️ sotto i 16px iOS ingrandisce la pagina da solo quando si scrive */
}

#cerca:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: 1px;
}

/* ⚠️ Alcuni telefoni disegnano una loro × dentro le caselle di tipo «search». Ne avremmo
 * due, una accanto all'altra: quella del telefono si toglie, la nostra la governiamo noi
 * (compare solo quando serve, e riporta il segno sulla casella). */
#cerca::-webkit-search-cancel-button {
  display: none;
}

/* LA × CHE SVUOTA LA RICERCA (decisione V-7 di Carlo, 29/07).
 *
 * ⚠️ E' larga e alta 2,75rem — 44 pixel — anche se il disegno dentro e' piccolo: e' il
 * minimo che le linee guida chiedono per qualcosa che si tocca col dito. Un bersaglio piu'
 * piccolo, di sera e con le mani impegnate, si sbaglia. */
#svuota-cerca {
  position: absolute;
  right: 1rem;
  top: 0.075rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--testo-tenue);
  cursor: pointer;
}

#svuota-cerca:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: -3px;
}

/* L'elenco vero: e' lui che scorre, non tutto il foglio. */
.foglio-elenco {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.9rem 1rem;
  /* Sui telefoni con la barra di sistema in basso, l'ultima riga non ci finisce sotto. */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.elenco-gruppo {
  position: sticky; /* il titoletto della categoria resta in vista mentre si scorre */
  top: 0;
  margin: 0;
  padding: 0.5rem 0 0.35rem;
  background: var(--sfondo);
  color: var(--testo-tenue);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.elenco-righe {
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

/* Ogni riga e' un bottone alto quanto un polpastrello: alla festa si tocca in piedi, al
 * buio, con un bicchiere in mano. */
.elenco-riga {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: none;
  color: var(--testo);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  line-height: 1.3;
  cursor: pointer;
  /* Un titolo lunghissimo senza spazi non deve sfondare il foglio di lato. */
  overflow-wrap: anywhere;
}

.elenco-riga:focus-visible {
  outline: 3px solid #7aa7d9;
  outline-offset: -3px;
}

.elenco-vuoto {
  margin: 1.2rem 0;
  color: var(--testo-tenue);
  text-align: center;
  line-height: 1.45;
}

/* LA RIGA DELLA DECISIONE V-4: «la ricerca non mente mai».
 *
 * Si distingue dal resto perche' non e' un risultato: e' un avviso su qualcosa che il
 * visitatore stesso ha nascosto, e che puo' riprendersi con un dito. */
.elenco-nascosti {
  margin-top: 0.8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--avviso-bordo);
  border-radius: 0.6rem;
  background: var(--avviso-sfondo);
  color: var(--avviso-testo);
  text-align: center;
}

.elenco-nascosti p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

.elenco-nascosti .bottone {
  min-height: 2.6rem;
  padding: 0.5rem 1.2rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accento);
  color: var(--accento-testo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* --- La riga di avviso ------------------------------------------------------------- */

#avviso {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: var(--avviso-sfondo);
  border-top: 1px solid var(--avviso-bordo);
  color: var(--avviso-testo);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}

/* ⭐ COL FOGLIO APERTO L'AVVISO PASSA IN CIMA (cura C5, voce 4 della verifica del 28/07).
 *
 * ⛔ IL DIFETTO: questa riga sta in fondo alla pagina, e in fondo alla pagina ci sta anche il
 * foglio dell'elenco — opaco e sopra tutto. Chi tiene aperto l'elenco, va su un'altra
 * applicazione e torna mentre la rete non risponde, si vede scrivere «Non sono riuscito ad
 * aggiornare la mappa» SOTTO il foglio: non la legge, e intanto continua a fidarsi di una
 * mappa che potrebbe essere vecchia. Alla festa e' lo scenario normale: rete satura la sera,
 * ed e' proprio con l'elenco aperto che si cercano gli stand.
 *
 * ⚠️ Il livello (1400) e' piu' alto di quello del foglio (1300) di proposito: e' l'unico modo
 * perche' la frase passi DAVANTI. C'e' una guardia che confronta i due numeri (L-9 quinquies)
 * e diventa rossa da sola se un domani il foglio sale e questa riga no.
 *
 * ⚠️ Il bordo passa da sopra a sotto e si aggiunge lo spazio del notch: in cima allo schermo
 * un bordo superiore non lo vede nessuno, e senza il margine di sicurezza la frase finirebbe
 * sotto la tacca della fotocamera. */
body.foglio-aperto #avviso {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1400;
  padding-top: calc(0.5rem + env(safe-area-inset-top));
  padding-right: calc(0.9rem + env(safe-area-inset-right));
  padding-left: calc(0.9rem + env(safe-area-inset-left));
  border-top: 0;
  border-bottom: 1px solid var(--avviso-bordo);
  box-shadow: var(--ombra-alta);
}

#senza-programmi {
  margin: 0;
  padding: 0.8rem 0.9rem;
  background: var(--avviso-sfondo);
  color: var(--avviso-testo);
  text-align: center;
}

/* ⚠️ QUI C'ERA LA VESTE DELLA NOTA DI TRASPARENZA (`#nota-trasparenza`), la striscia in
 * fondo alla pagina. Tolta insieme alla nota il 29/07, per decisione di Carlo.
 * La mappa adesso arriva piu' in basso: sotto di lei resta solo la riga di avviso, che
 * compare solo quando serve. */

/* --- IL TEMA SCURO (decisione P7-D1 del 27/07) ------------------------------------- */

/* Lo sfondo scuro NON arriva da un secondo fornitore: lo facciamo noi, scurendo il
 * disegno delle tessere chiare. Cosi' resta un solo estraneo che vede la zona guardata
 * dal visitatore, e nello scudo un solo indirizzo preciso.
 *
 * Il filtro tocca SOLO il disegno della mappa: i segnalini, i fumetti e l'attribuzione
 * restano come sono — quest'ultima dev'essere ben leggibile per obbligo di licenza.
 *
 * ⚠️ Il tema lo sceglie l'ORGANIZZATORE nelle impostazioni della festa, non il telefono:
 * la mappa che vedono 500 persone dev'essere la stessa per tutti. */
.tema-scuro .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.75);
}

.tema-scuro {
  --testo: #e9eef5;
  --testo-tenue: #a9b7c8;
  --sfondo: #1b2430;
  --sfondo-tenue: #141c26;
  --bordo: #2f3d4e;
  --accento: #6ea8de;
  --accento-testo: #10171f;
  --attesa-mappa: #1b2430;
  --avviso-sfondo: #3a3122;
  --avviso-bordo: #6b5a2e;
  --avviso-testo: #f0dfae;
}

.tema-scuro .pastiglia-quanti {
  background: rgba(255, 255, 255, 0.12);
}

.tema-scuro .leaflet-popup-content-wrapper,
.tema-scuro .leaflet-popup-tip {
  background: var(--sfondo);
  color: var(--testo);
}

/* L'attribuzione resta ben visibile anche sullo scuro: si cambiano solo i colori, mai
 * la sua presenza. */
.tema-scuro .leaflet-control-attribution {
  background: rgba(27, 36, 48, 0.86);
  color: var(--testo-tenue);
}

.tema-scuro .leaflet-control-attribution a {
  color: var(--accento);
}

.tema-scuro .leaflet-bar a {
  background: var(--sfondo);
  color: var(--testo);
  border-bottom-color: var(--bordo);
}

/* --- Schermo grande ---------------------------------------------------------------- */

/* Sul computer la mappa e' larga: il messaggio non deve diventare una striscia enorme e
 * le pastiglie possono respirare un po' di piu'. */
@media (min-width: 48rem) {
  #filtri {
    padding: 0.65rem 1rem;
  }
}