/* comandi, testata, corpo, pannello, pieghevoli, cassetto
Parte di un foglio unico diviso in cinque. L'ORDINE dei in
index.html E' la cascata: spostare un file piu' su o piu' giu' cambia chi
vince fra due regole di pari peso. I tagli cadono tutti fuori dai blocchi
(verificato contando le graffe), perche' spezzare dentro un @media
romperebbe silenziosamente meta' foglio. */
/* ---------- comandi ---------- */
button{background:var(--bg3);border:1px solid var(--line);color:var(--ink);
padding:9px 14px;font:500 13px var(--sans);border-radius:9px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
transition:background .14s,border-color .14s,color .14s}
@media(hover:hover){button:hover:not(:disabled){background:var(--bg4);border-color:var(--line2)}}
button:active:not(:disabled){transform:translateY(.5px)}
button:disabled{opacity:.34;cursor:default}
button.go{background:var(--gold);border-color:transparent;color:#1A1206;font-weight:600}
@media(hover:hover){button.go:hover:not(:disabled){background:#E5C071;border-color:transparent}}
button.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}
input[type=text]{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line);
color:var(--ink);padding:11px 13px;font:400 14px var(--sans);border-radius:9px;outline:none}
input[type=text]::placeholder{color:#6B747F}
input[type=text]:focus{border-color:var(--gold)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:5px}
@media(hover:hover){::-webkit-scrollbar-thumb:hover{background:#2C3742}}
/* ---------- testata ---------- */
header{background:var(--bg);border-bottom:1px solid var(--line);padding:13px 20px;
display:flex;align-items:baseline;gap:14px;flex:0 0 auto}
h1{font:600 19px/1 var(--display);font-stretch:104%;letter-spacing:-.01em;margin:0}
#tagline{margin:0;font:400 13px var(--sans);color:var(--ink2)}
#coord{font:400 11.5px var(--sans);color:var(--ink2);margin-left:auto;letter-spacing:.02em}
/* ---------- corpo ---------- */
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) var(--colonna);
min-height:0;position:relative}
#stage{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 45%,
#0E151D 0%,#090D12 55%,#06080B 100%)}
canvas{position:absolute;inset:0;touch-action:none;cursor:grab;display:block}
#globe-tools{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px;z-index:2}
#globe-tools button{width:38px;height:38px;padding:0;border-radius:10px;
background:rgba(13,19,25,.66);border-color:var(--line);color:var(--ink2);
backdrop-filter:blur(10px)}
@media(hover:hover){#globe-tools button:hover:not(:disabled){background:rgba(31,39,49,.82);color:var(--ink)}}
#globe-tools button.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}
#zoomlevel{position:absolute;right:16px;top:198px;width:38px;text-align:center;
font:400 11px var(--sans);color:var(--ink2);z-index:2}
/* #hint non esiste piu': il suo testo sta nella riga dei messaggi, vedi
index.html e diag() in app.js. Con lui se ne va la regola che lo
scansava dalla riga, che era nata proprio dalla loro sovrapposizione. */
/* stato vuoto sopra al globo */
#empty{position:absolute;inset:0;display:none;place-items:center;z-index:3;
background:rgba(7,10,14,.76);backdrop-filter:blur(3px)}
#empty .card{max-width:360px;text-align:center;padding:26px;border-radius:14px;
border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
#empty .card h2{font:600 20px/1.2 var(--display);margin:0 0 8px}
/* ---------- pannello ---------- */
#panel{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
background:var(--bg2)}
/* Sul desktop basta stare fuori dai .pane, che scorrono per conto loro:
la barra resta ferma da sola. Su mobile il pannello scorre insieme alla
pagina, e serve 'sticky' (vedi la media query). */
#search{position:relative;flex:0 0 auto;padding:14px 20px 13px;
border-bottom:1px solid var(--line);background:var(--bg2)}
/* sopra al pannello, non dentro il flusso: aprendo i suggerimenti tutto il
resto non deve scendere di duecento pixel per poi risalire. Niente ombra
(qui non si usano rilievi): a dire che e' un piano diverso ci pensa la
tinta piu' cupa, la stessa del binario del selettore. Non --bg3, che e'
gia' il fondo dei pulsanti: i chip ci sparirebbero dentro. */
#sugg{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;
padding:14px 20px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
#sugg.on{display:block}
/* i titoli dell'Archive sono spesso identificatori senza spazi
('gd77-05-08.sbd.hicks.4982.sbeok.shnf'): senza questo sfondano il
pannello in larghezza ed e' da li' che nasceva lo slittamento. */
.pane{display:none;padding:20px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;
overflow-wrap:anywhere}
.pane.on{display:block}
.sec{margin-bottom:24px}
.sec:last-child{margin-bottom:0}
/* Il difetto da cui nasce tutto questo lavoro: sezioni disegnate vuote,
che spiegano cosa apparirebbe invece di mostrare qualcosa. Se dentro
c'e' solo un segnaposto, la sezione non si disegna affatto. Vale a
qualunque larghezza: era in mobile.css, ma il difetto non e' del
telefono. Un'attesa vera (`pending` senza `vuoto`) resta visibile. */
#pane-now .sec:has(.vuoto){display:none}
/* ---------- sezioni pieghevoli (coda, ascolti recenti) ---------- */
.pieghevole{border-top:1px solid var(--line);padding-top:14px}
.pieghevole .testa{display:flex;width:100%;align-items:center;gap:8px;
background:none;border:none;border-radius:0;padding:0 0 12px;text-align:left}
@media(hover:hover){.pieghevole .testa:hover:not(:disabled){background:none}}
.pieghevole .testa .lbl{margin:0}
.conto{margin-left:auto;font:400 11px var(--sans);color:var(--ink2)}
/* la freccia e' il segno di apertura: la stessa chevron degli elenchi */
.pieghevole .testa::after{content:'';width:7px;height:7px;margin-left:4px;
border-right:1.6px solid var(--ink2);border-bottom:1.6px solid var(--ink2);
transform:rotate(45deg) translate(-2px,-2px)}
.pieghevole.chiusa .testa::after{transform:rotate(-45deg) translate(0,2px)}
.pieghevole.chiusa .corpo{display:none}
/* ---------- cassetto dei risultati ---------- */
#cassetto{position:absolute;top:0;right:var(--colonna);bottom:0;width:352px;z-index:4;
display:flex;flex-direction:column;background:var(--bg2);
border-left:1px solid var(--line);transform:translateX(101%);
transition:transform .18s ease-out;visibility:hidden}
#cassetto.on{transform:none;visibility:visible}
#cassetto-testa{flex:0 0 auto;display:flex;align-items:center;
padding:10px 12px 10px 20px;border-bottom:1px solid var(--line)}
#cassetto-testa .maniglia{display:none}
#cassetto-chiudi{margin-left:auto;width:32px;height:32px;padding:0;
background:none;border-color:transparent;color:var(--ink2)}
#cassetto-corpo{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
padding:16px 20px 20px;overflow-wrap:anywhere}
/* Il selettore di cosa mostrare sul globo. Sta SOPRA la tela, non sopra al
pannello: e' un comando del globo come i tasti di zoom, e deve poter
convivere con un elenco aperto.
Su schermo largo va a capo; sul telefono scorre in orizzontale, perche'
li' due file di pillole mangerebbero il globo. Andare a capo anche sul
monitor e' obbligato da quando le pillole sono dodici e grandi come le
altre: a 1440 la fila misura 1067px in 984px di spazio, e con la barra di
scorrimento nascosta le ultime due sparivano senza dirlo. */
#globo-filtri{
position:absolute; top:10px; left:12px; right:64px; z-index:3;
padding-bottom:2px;
}
#globo-filtri::-webkit-scrollbar{display:none}
/* La misura e' quella delle chipbar di tutto il resto (12,5px / 8px 13px):
erano rimpicciolite apposta per il telefono, ma su un monitor finivano
per essere i bottoni piu' piccoli della pagina. Il ridimensionamento sta
ora nel media query qui sotto, dove serve davvero. */
#globo-filtri button{
flex:0 0 auto; background:rgba(11,15,20,.78); backdrop-filter:blur(6px);
border-color:var(--line); border-radius:2px;
}
/* Accesa = piena, come le etichette nell'elenco: la stessa idea detta nello
stesso modo nei due posti. Il colore lo mette il JS, che sa di che genere
si tratta; qui si dichiara solo che il testo va scuro sopra al pieno. */
#globo-filtri button.on{border-color:var(--gold); color:var(--gold)}
#globo-filtri button.on.tinta{color:#0B0F14}
#globo-filtri button.on.tinta .pallino{background:#0B0F14 !important; opacity:.45}
@media(max-width:900px){
#globo-filtri{right:12px; top:8px;
flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
#globo-filtri button{font-size:11.5px; padding:5px 10px} }
/* Su schermo largo il selettore diventa una COLONNA a sinistra, e non ruba
niente al globo: `baseR()` e' min(larghezza,altezza)/2-26, quindi su ogni
desktop il globo e' limitato dall'ALTEZZA e la larghezza in piu' resta
fondo nero ai lati. Misurato: 152px sprecati per lato a 1280x800, 182 a
1440x900, 332 a 1920x1080, 472 a 2560x1440. A 1440 se ne potrebbero
togliere 312 prima che il globo cominci a rimpicciolire.
Sotto i 1200 quel margine si esaurisce e si torna alle pillole in
orizzontale sopra al globo: li' lo spazio non c'e' davvero.
Si ferma a 52px dal fondo per non finire sopra alla riga dei messaggi. */
@media(min-width:1200px){
#globo-filtri{
flex-direction:column; align-items:stretch; flex-wrap:nowrap;
/* 140 e non di piu': 12 di margine + 140 = 152px, che e' esattamente il
vuoto per lato a 1280x800, la finestra piu' stretta in cui la colonna
compare. Cosi' non tocca il globo nemmeno li'. */
width:140px; right:auto; bottom:52px;
overflow-y:auto; overflow-x:hidden; justify-content:flex-start;
}
/* justify-content e NON text-align: i bottoni sono display:flex, e su un
contenitore flex text-align non fa niente -- il pallino restava a 49px
dal bordo invece che a 13. Incolonnati, i pallini si scorrono con
l'occhio: e' meta' del motivo per cui la colonna e' meglio della fila. */
#globo-filtri button{ justify-content:flex-start; }
}
/* Il pallino del genere dentro la pillola: dice di che colore diventeranno i
puntini PRIMA di premere, invece di farlo scoprire per tentativi. */
#globo-filtri .pallino{
display:inline-block; width:7px; height:7px; border-radius:50%;
margin-right:6px; vertical-align:1px;
}
/* Le righe dell'elenco che compare toccando un punto denso: nome e luogo
sopra, generi sotto. Il bottone diventa una colonna invece di una riga
sola, se no il secondo livello finisce accanto al nome. */
#picker button{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; }
#picker .chi{ font-size:12.5px }
#picker .dove{ color:var(--muted); font-weight:400 }
#picker .gen{ display:flex; flex-wrap:wrap; gap:4px }
#picker .gen i{
font-style:normal; font-size:10px; letter-spacing:.02em;
color:var(--muted); border:1px solid var(--line); border-radius:2px;
padding:1px 6px;
}
/* ---------- globo geografico Qispi ----------
Il vecchio canvas resta nel documento per il confronto sul branch, ma
quando MapLibre parte e' il nuovo motore a possedere tutto il palco. */
/* Il cielo stellato dietro al globo. Sta QUI e non su #stage perche' questo
riquadro aveva un fondo OPACO (#111817) che copriva il palco: qualunque
cosa si mettesse dietro non si sarebbe vista, ed e' per questo che il
primo tentativo di stelle non ne mostrava nemmeno una. La tela WebGL e'
gia' trasparente fuori dalla sfera, quindi non serve altro.
L'immagine e' disegnata da noi (qispi/immagini/genera_cielo.py): nessuna
licenza da rispettare, 19 KB in WebP. Il colore pieno resta sotto come
ripiego, cosi' se l'immagine non arriva si torna esattamente a com'era. */
#globe-map{
position:absolute;inset:0;display:none;
background:#05070C url('../qispi/immagini/cielo-stellato.webp') center/cover
}
#stage.maplibre-attivo #globe-map{display:block}
#stage.maplibre-attivo #globe{display:none}
#stage.maplibre-attivo #night{display:none}
#stage.maplibre-attivo #zoomlevel{top:154px}
#stage.maplibre-attivo .maplibregl-canvas{cursor:grab;touch-action:none}
#stage.maplibre-attivo .maplibregl-canvas:active{cursor:grabbing}
#stage.maplibre-attivo .maplibregl-ctrl-top-right{top:12px;right:62px}
/* Sopra la striscia dei messaggi, non sotto. #diag e' in sovraimpressione sul
bordo basso di ed e' alta esattamente una riga (vedi lettore.css):
il bottone (i) stava nello stesso angolo e ne restava coperto per 20 dei
suoi 24px -- misurato a 1440, 1000 e 390 di larghezza, si vedeva solo una
fettina scura e il clic finiva su #diag. L'attribuzione non si apriva:
non e' un dettaglio estetico, e' il credito che ODbL e CC BY richiedono.
Il rialzo e' incondizionato anche quando la striscia e' vuota e sparisce:
una riga di distacco dal bordo si legge come voluta, e legare la regola
alla presenza del messaggio la farebbe saltare a ogni sintonia.
--riga-diag e' la stessa altezza di #diag, dichiarata una volta sola in
lettore.css: non si puo' ripetere `1.4em` qui, perche' un em qui vale
quanto il testo di questo elemento, non quanto quello della striscia. */
#stage.maplibre-attivo .maplibregl-ctrl-bottom-right{
right:8px;bottom:calc(var(--riga-diag) + 8px)}
#stage.maplibre-attivo .maplibregl-ctrl-attrib{
border:1px solid rgba(255,255,255,.12);border-radius:8px;
background:rgba(5,10,12,.84);color:var(--muted);font-size:9px;opacity:.86;
backdrop-filter:blur(8px)
}
#stage.maplibre-attivo .maplibregl-ctrl-attrib.maplibregl-compact{
width:24px;min-width:24px;min-height:24px;margin:0;padding:0;border-radius:50%
}
#stage.maplibre-attivo .maplibregl-ctrl-attrib.maplibregl-compact-show{
width:auto;max-width:min(430px,calc(100vw - 20px));padding:4px 28px 4px 7px;
border-radius:8px
}
/* La scia del volo verso la radio accesa. Classe e direzione le mette
flyTo() nel modulo: e' l'unico punto da cui passa un movimento che
l'utente non ha fatto con le proprie mani.
Il primo tentativo sfocava tutta la tela in modo uniforme, ed e' stato
scartato: non e' cosi' che si vede il movimento. In una ripresa vera resta
a fuoco il punto verso cui si va, e il resto si allunga in scia verso il
punto da cui si viene.
Qui il velo non ha contenuto proprio: sfoca cio' che gli sta SOTTO
(backdrop-filter) e viene poi ritagliato da una maschera, che decide DOVE
quella sfocatura si vede. La maschera e' un'ellisse trasparente al centro
-- li' la mappa resta intatta -- che sfuma verso il nero ai bordi, dove il
velo copre del tutto.
La direzione: --scia-x/--scia-y spostano il centro dell'ellisse dalla
parte OPPOSTA all'origine, cosi' la fascia sfocata resta piu' spessa dal
lato da cui si viene ed e' li' che si legge la scia. A volo fermo tornano
al centro e la maschera e' simmetrica.
backdrop-filter sta solo nella regola .in-volo, mai a riposo: un filtro
dichiarato -- anche a zero -- costringe il browser a una passata di
composizione su tutta l'area a ogni fotogramma, per sempre, per un effetto
che dura due secondi ogni tanto. La transizione lo interpola comunque
partendo da `none`, trattandolo come identita'.
-webkit-: iPhone. Il telefono e' il posto dove questo effetto si guarda,
quindi il prefisso non e' cortesia, e' il caso principale. */
#scia{
position:absolute;inset:0;z-index:1;pointer-events:none;
--scia-x:50%; --scia-y:50%;
-webkit-mask-image:radial-gradient(ellipse 46% 46% at var(--scia-x) var(--scia-y),
transparent 0 38%,rgba(0,0,0,.55) 72%,#000 100%);
mask-image:radial-gradient(ellipse 46% 46% at var(--scia-x) var(--scia-y),
transparent 0 38%,rgba(0,0,0,.55) 72%,#000 100%);
/* USCITA -- la transizione dichiarata qui e' quella verso lo stato di
riposo, cioe' quando la classe viene tolta. Dura piu' del doppio
dell'entrata e con una curva che frena in coda: la scia si scioglie
invece di sparire di scatto.
Perche' contava: la classe si toglie su 'moveend', quindi fino
all'ultimo istante del volo la sfocatura e' ancora piena, e poi in due
decimi non c'era piu'. La telecamera decelera e la sfocatura no: era
quello lo strappo. */
transition:-webkit-backdrop-filter .5s cubic-bezier(.16,.8,.3,1),
backdrop-filter .5s cubic-bezier(.16,.8,.3,1)
}
#stage.maplibre-attivo.in-volo #scia{
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
/* ENTRATA -- corta e svelta: il volo comincia subito e la scia deve
esserci gia'. */
transition:-webkit-backdrop-filter .2s ease-out,backdrop-filter .2s ease-out
}
/* L'arrivo: un anello che si allarga e si spegne una volta sola sul punto
dove il volo sta finendo. Serve a dare un punto d'arrivo allo sguardo, che
dopo una traversata si e' perso -- e a dire "e' questa" senza scriverlo.
E' un elemento del palco, non un livello di MapLibre: dura meno di un
secondo a mappa quasi ferma, e disegnarlo con la mappa vorrebbe dire
ricalcolare un livello a ogni fotogramma per un cerchio che non si muove.
Oro, lo stesso #EFC84D del punto della radio in ascolto (vedi il livello
'punto-corrente' nel modulo): l'anello si chiude su quel punto, e di un
altro colore sarebbero sembrate due cose diverse.
Un pixel e non due: a due era un anello ingombrante, e ingombrante e' il
contrario di quello che deve fare -- indicare e togliersi di mezzo.
Sfuma da trasparente e torna a trasparente: nasce e muore senza stacchi,
invece di comparire gia' acceso.
Tre anelli e non uno, sfalsati come un radar: parte il primo, e gli altri
due lo inseguono a un sesto di secondo l'uno dall'altro, quindi in ogni
istante sono piu' piccoli di quello davanti. Ognuno e' un elemento vero e
non un pseudo-elemento: la pulsazione e' una scala, e un pseudo-elemento
erediterebbe quella del genitore invece di scalare per conto suo.
L'oro sbiadisce di anello in anello -- il primo pieno, gli altri al 70 e
al 45 per cento -- se no i tre cerchi sembrano tre cose e non una che si
allontana. */
#arrivo{position:absolute;z-index:2;pointer-events:none;width:0;height:0}
/* L'alone che respira sul punto della radio in ascolto. Non e' l'arrivo, che
e' un gesto e finisce: questo resta finche' quella radio suona, e serve a
ritrovare "dove sono" tornando sul globo dopo essere stati altrove --
che e' il percorso che l'app incoraggia.
Lentissimo apposta, e mai del tutto opaco: deve stare sotto la soglia
dell'attenzione. Un battito veloce su un elemento sempre presente diventa
in pochi secondi insopportabile.
Elemento del palco e non livello di MapLibre: cosi' l'animazione la porta
avanti il compositore e a mappa ferma non gira una riga di codice. Il
modulo lo riposiziona solo mentre la mappa si muove. */
#respiro{
position:absolute;z-index:2;pointer-events:none;opacity:0;
width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
/* Un bagliore, non un anello. Il primo tentativo era un bordo da un pixel:
segnalato che l'oro piatto sembrava sciatto, ed era vero -- una
circonferenza netta su una fotografia satellitare si legge come un
disegno appoggiato sopra, non come una luce che viene da li'.
La sfumatura va a zero PRIMA del bordo del riquadro (72%), se no si
vedrebbe il taglio netto del cerchio proprio dove dovrebbe svanire. */
background:radial-gradient(circle,
rgba(246,217,122,.40) 0%,
rgba(239,200,77,.24) 30%,
rgba(239,200,77,.09) 52%,
rgba(239,200,77,0) 72%)
}
#respiro.acceso{animation:respiro 3.6s ease-in-out infinite}
@keyframes respiro{
0%,100%{opacity:.18;transform:scale(.62)}
45%{opacity:.95;transform:scale(1.06)}
72%{opacity:.5;transform:scale(1.3)}
}
#arrivo span{
position:absolute;left:0;top:0;opacity:0;
width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
border:1px solid #EFC84D
}
#arrivo span:nth-child(2){border-color:rgba(239,200,77,.7)}
#arrivo span:nth-child(3){border-color:rgba(239,200,77,.45)}
#arrivo.pulsa span{animation:arrivo-pulsa .8s cubic-bezier(.17,.72,.29,1)}
#arrivo.pulsa span:nth-child(2){animation-delay:.16s}
#arrivo.pulsa span:nth-child(3){animation-delay:.32s}
@keyframes arrivo-pulsa{
0%{opacity:0;transform:scale(.28)}
20%{opacity:.85}
100%{opacity:0;transform:scale(3.1)}
}
/* Chi ha chiesto meno movimento non riceve nemmeno questo: e' decorazione,
e il volo resta e arriva dove deve comunque. */
@media(prefers-reduced-motion:reduce){
#stage.maplibre-attivo.in-volo #scia{
-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
#arrivo span,#arrivo.pulsa span,#respiro,#respiro.acceso{animation:none;opacity:0}
}
#stage.maplibre-attivo .maplibregl-ctrl-attrib a{color:var(--ink2)}
#stage.maplibre-attivo .maplibregl-ctrl-attrib-button{filter:invert(1) opacity(.7)}
#stage.maplibre-attivo::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:#03070a;opacity:1;transition:opacity .18s ease-out
}
#stage.maplibre-pronto::before{opacity:0}
#stage.maplibre-attivo::after{
content:'PREPARO IL MONDO';position:absolute;left:50%;top:50%;z-index:2;
transform:translate(-50%,-50%);color:var(--ink2);opacity:1;
/* Come il velo qui sopra: e' una scritta, non un comando. Senza questa
riga restava una fascia invisibile di ~130x10px NEL CENTRO ESATTO del
globo che mangiava i tocchi -- e per sempre, perche' opacity:0 nasconde
ma non smette di intercettare. Misurato a globo pronto: a 4px dal
centro il tocco arrivava a #stage invece che alla mappa, a 10px si'. */
pointer-events:none;
font:600 10px var(--sans);letter-spacing:.14em;transition:opacity .12s
}
#stage.maplibre-pronto::after{opacity:0}
#globo-luogo{
/* z-index 6, sopra la riga dei messaggi (5, vedi lettore.css): sul
telefono il pannello arriva quasi a fondo schermo e la striscia gli
tagliava il bordo inferiore. Passa sopra perche' e' contenuto che
l'utente ha aperto apposta, mentre l'invito "scegli un puntino" a quel
punto e' gia' ridondante -- e i messaggi veri (sintonia, errore)
arrivano dopo che toccare una radio ha chiuso il pannello. */
position:absolute;left:18px;bottom:54px;z-index:6;
/* La dissolvenza in uscita: la classe la mette e la toglie
chiudiPannello() nel modulo. Nessuna transizione in ENTRATA -- il
pannello si apre dove il dito ha appena toccato, e farlo comparire piano
lo staccherebbe dal gesto. */
opacity:1;transform:none;transition:opacity .15s ease-out,transform .15s ease-out;
width:min(420px,calc(100% - 96px));
/* --alt-max e' anche il tetto che usa posizionaPannello() nel modulo, che
lo incrocia con lo spazio rimasto sopra il lettore: dichiarato una volta
sola qui, se no i due valori si separano al primo ripensamento. */
--alt-max:min(58vh,520px);max-height:var(--alt-max);
padding:18px 18px 16px;border:1px solid rgba(140,233,184,.2);
border-radius:16px;background:rgba(7,12,14,.91);color:var(--ink);
box-shadow:0 22px 70px rgba(0,0,0,.38);backdrop-filter:blur(16px);
/* Colonna flessibile con l'elenco che si comprime per restare dentro
max-height, non il contrario: prima il pannello (senza overflow
dichiarato, quindi 'visible' di default) lasciava le ultime radio
disegnate FUORI dal proprio bordo arrotondato ogni volta che
titolo+meta+lista superavano insieme il tetto di altezza -- misurato,
20px di lista oltre il bordo del pannello su un luogo da 40 radio.
overflow:hidden qui e' la rete di sicurezza; il vero contenimento lo
fa #globo-luogo-radio con flex:1/min-height:0 qui sotto. */
display:flex;flex-direction:column;overflow:hidden;
}
#globo-luogo[hidden]{display:none}
#globo-luogo .lbl{color:#8CE9B8;margin:0 36px 7px 0}
#globo-luogo h2{margin:0 36px 4px 0;font:600 22px/1.12 var(--display)}
#globo-luogo > .note{margin:0 36px 12px 0}
#globo-luogo-chiudi{
position:absolute;right:10px;top:10px;width:34px;height:34px;padding:0;
border-color:transparent;background:transparent;color:var(--ink2);font-size:22px
}
/* flex:1/min-height:0 (non un max-height fisso in vh) fa si' che la lista
prenda esattamente lo spazio che avanza sotto titolo e meta, qualunque
sia la loro altezza: e' lo stesso schema gia' in uso per #casa in
qispi.css, qui applicato allo stesso problema (figlio scorrevole dentro
un genitore con un tetto di altezza). */
/* La barra di scorrimento resta nascosta: si scorre lo stesso (rotella,
trascinamento, tastiera), ma dentro un pannello piccolo e arrotondato
quella riga verticale era solo rumore. Stessa scelta gia' fatta per il
carosello "Ascolta Berlino" della Casa, vedi qispi.css. */
#globo-luogo-radio{display:grid;gap:7px;overflow:auto;flex:1;min-height:0;scrollbar-width:none}
#globo-luogo-radio::-webkit-scrollbar{display:none}
#globo-luogo .radio-luogo{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
width:100%;min-height:48px;padding:9px 12px;text-align:left;
border-color:rgba(140,233,184,.16);border-radius:10px;background:rgba(17,25,27,.9)
}
/* Passaggio del mouse e focus da tastiera dicevano la stessa cosa in una
regola sola. Ora sono separate: il passaggio vale solo dove c'e' un mouse,
il focus deve restare ovunque -- e' come si naviga senza toccare lo
schermo. */
@media(hover:hover){#globo-luogo .radio-luogo:hover{
border-color:rgba(216,178,92,.75);background:rgba(29,37,37,.96)
}}
#globo-luogo .radio-luogo:focus-visible{
border-color:rgba(216,178,92,.75);background:rgba(29,37,37,.96)
}
#globo-luogo .radio-luogo strong,#globo-luogo .radio-luogo small{display:block}
#globo-luogo .radio-luogo strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#globo-luogo .radio-luogo small{
margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10.5px
}
#globo-luogo .radio-luogo .azione{color:var(--gold);font-size:17px}
@media(max-width:900px){
#stage.maplibre-attivo #globe-tools{right:10px;top:58px}
#stage.maplibre-attivo #zoomlevel{right:10px;top:184px}
#stage.maplibre-attivo .maplibregl-ctrl-top-right{display:none}
/* #globo-luogo-radio non ha piu' un max-height suo sotto i 900px: con
flex:1/min-height:0 sul genitore (vedi sopra) si adatta gia' da solo
al 48% qui sotto, qualunque sia l'altezza di titolo e meta -- un
secondo tetto fisso qui avrebbe potuto tornare a scoprire il bordo
del pannello nello stesso modo del difetto appena corretto. */
#globo-luogo{left:12px;right:12px;bottom:12px;width:auto;max-height:48%;padding:15px}
}
/* pointer-events:none durante la dissolvenza: per quel sesto di secondo il
pannello e' ancora nel documento e coi suoi bottoni, e un tocco li' dentro
accendeva una radio da un elenco che l'utente aveva appena chiuso.
Scoperto dalla prova, che cliccando "attraverso" il pannello in uscita ha
sintonizzato Radio Deejay invece di riaprire il pannello. E' la stessa
trappola gia' vista con #stage::after e con la striscia dei messaggi: cio'
che si vede appena continua a ricevere i tocchi finche' non glielo si
vieta. */
#globo-luogo.in-uscita{opacity:0;transform:translateY(6px) scale(.985);pointer-events:none}
@media(prefers-reduced-motion:reduce){
#globo-luogo,#globo-luogo.in-uscita{transition:none}
}