/* la barra in basso
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. */
/* ---------- lettore ---------- */
#player{flex:0 0 auto;border-top:1px solid var(--line);position:relative;background:var(--bg2)}
/* La copertina del lettore, non quella delle liste: .cop (base.css) da'
a ogni tessera uno sfondo --bg3 e un bordo, per staccarla dalla riga in
cui vive -- utile in un elenco fitto, sbagliato qui, dove la copertina
e' sola e deve sembrare parte della pagina, non un riquadro sopra.
Stesso colore per tutte e due, --bg2: #np-cover sta dentro #player
(background:var(--bg2), qui sopra) e #np-cover-big dentro #panel, che
ha lo STESSO --bg2 (struttura.css) -- non il fondo pagina --bg come
presunto al primo giro: #sec-nowplay e #pane-now in mezzo sono
trasparenti, e' #panel a dipingere davvero. Verificato risalendo la
catena dei genitori invece di fidarsi della lettura del foglio.
Solo il COLORE si tocca (background-color, non lo shorthand
background): lo shorthand porterebbe via anche il marchio segnaposto
che .cop disegna quando il logo manca, e quello deve restare. */
#np-cover{background-color:var(--bg2);border-color:transparent}
#np-cover-big{background-color:var(--bg2);border-color:transparent}
#bar{display:flex;align-items:center;gap:18px;padding:12px 20px}
#transport{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#transport button{width:40px;height:40px;padding:0;background:none;border-color:transparent;
color:var(--ink2);border-radius:50%}
@media(hover:hover){#transport button:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--ink);
border-color:transparent}}
/* il tasto centrale e' l'unica superficie piena del lettore: si trova
senza guardare, che e' quello che serve mentre si guida */
/* '#transport #play' e non '#play': la regola qui sopra e' id+elemento e
quindi pesa di piu' del solo id — senza questo il tasto centrale perde
il suo cerchio e diventa uguale agli altri */
#transport #play{width:52px;height:52px;border-radius:50%;background:var(--ink);
color:var(--bg);border-color:transparent}
@media(hover:hover){#transport #play:hover:not(:disabled){background:#FFF;color:var(--bg);
border-color:transparent;transform:scale(1.04)}}
#play.busy{opacity:.5}
#nowbox{flex:0 0 292px;min-width:0;display:flex;align-items:center;gap:10px}
#nowtext{flex:1;min-width:0}
#to-list{flex:0 0 auto;width:34px;height:34px;padding:0;background:none;
border-color:transparent;color:var(--ink2);border-radius:50%}
@media(hover:hover){#to-list:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--gold);border-color:transparent}}
#to-list:disabled{opacity:.3}
/* il menu delle playlist sta sopra la barra, cosi' si sceglie senza
lasciare il lettore: e' tutto il punto del pulsante */
#listmenu{display:none;position:absolute;bottom:calc(100% + 8px);left:20px;z-index:40;
border:1px solid var(--line2);background:var(--bg3);border-radius:13px;padding:12px;
min-width:230px;max-width:min(320px,calc(100vw - 40px));max-height:52vh;overflow:auto;
box-shadow:0 12px 34px rgba(0,0,0,.55);overflow-wrap:anywhere}
#listmenu button{display:block;width:100%;text-align:left;margin-top:6px;font-weight:500}
#now-title{font:500 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#now-sub{font:400 12.5px var(--sans);color:var(--ink2);margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#seekwrap{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
/* il trascinamento sulla barra e' dell'app, non del browser: senza questo
sul telefono il gesto veniva letto come scorrimento della pagina */
#seek{flex:1;height:26px;display:flex;align-items:center;cursor:pointer;min-width:70px;
touch-action:none}
#track{width:100%;height:4px;border-radius:2px;background:var(--bg4);position:relative}
#fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);border-radius:2px}
#knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;
background:var(--ink);transform:translate(-50%,-50%);opacity:0;transition:opacity .14s}
@media(hover:hover){#seek:hover #knob{opacity:1}}
#time{font:400 11.5px var(--sans);color:var(--ink2);flex:0 0 auto}
#live{display:none;align-items:center;gap:8px;font:600 11px var(--sans);
letter-spacing:.12em;color:var(--lamp);flex:1}
#live b{width:8px;height:8px;border-radius:50%;background:var(--lamp);
box-shadow:0 0 8px rgba(255,93,71,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#live b{animation:none}
button,.list .item,#knob{transition:none}}
/* i salti restano numeri: '15' si legge subito, un'icona che voglia
dire 'quindici secondi' no */
#back15,#fwd15{font:400 11px var(--sans)}
#volwrap{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--ink2)}
#vol{width:88px;accent-color:var(--gold)}
/* Altezza fissa di una riga, SEMPRE, anche da vuota: la riga si riempie e
si svuota di continuo (diag('') a ogni sintonia riuscita, a ogni genere
spento) e senza un'altezza propria ogni messaggio faceva salire e
scendere tutta l'interfaccia sopra. I messaggi contengono nomi di brani
e di emittenti e possono essere lunghi: si tagliano coi puntini invece
di andare a capo, e l'intero resta nel title (lo mette diag()).
In SOVRAIMPRESSIONE sul bordo basso di (gia' position:relative,
vedi struttura.css) e non piu' in flusso: una riga che entra ed esce
non deve ridimensionare il contenuto sopra: da figlia in flusso lo
spingeva su e giu' di 29,5px a ogni messaggio. Fondo pieno e bordo
perche' ora passa SOPRA il contenuto e deve restare leggibile.
z-index 5: sopra il globo e i suoi comandi (1-4), sotto il menu delle
playlist (40) che e' un vero strato aperto dall'utente.
pointer-events:none perche' passando sopra si e' messa davanti al
bottone (i) dell'attribuzione della mappa, che sta nello stesso angolo:
misurato a 1440, 1000 e 390 di larghezza, il bottone e' alto 24px a
y 790 e la striscia comincia a y 794, quindi copre gli ultimi 20 e il
clic finiva su #diag. L'attribuzione non si apriva piu' -- e non e' un
dettaglio estetico, e' il credito che ODbL e CC BY chiedono. Qui dentro
non c'e' niente da cliccare: e' testo, lo scrive diag(). */
/* L'altezza sta in una variabile perche' la usa anche struttura.css, per
tenere il bottone (i) della mappa sopra la striscia invece che sotto:
scritta due volte, prima o poi una delle due cambia da sola. */
:root{--riga-diag:calc(1.4 * 12.5px + 12px)}
#diag{position:absolute;left:0;right:0;bottom:0;z-index:5;
pointer-events:none;
font:400 12.5px/1.4 var(--sans);color:var(--ink2);
padding:6px 20px;height:var(--riga-diag);
background:var(--bg2);border-top:1px solid var(--line);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nessun messaggio, nessuna striscia: da vuota sparisce invece di lasciare
una banda che non dice niente (succede in Casa, dove il globo non c'e' e
quindi il suo invito non viene nemmeno scritto). L'altezza fissa qui
sopra continua a valere quando un messaggio c'e', che era il suo scopo:
evitare che il testo che cambia faccia ballare l'interfaccia. */
#diag:empty{display:none}
#diag.warn{color:var(--lamp)}
.q .qn{flex:1;min-width:0}
.q .qa{display:block;font-size:11.5px;color:var(--ink2);margin-top:3px}
.q button{padding:0;width:28px;height:28px;background:none;border-color:transparent;
color:var(--ink2);border-radius:7px}
@media(hover:hover){.q button:hover:not(:disabled){background:rgba(255,255,255,.07);color:var(--ink);border-color:transparent}}
.list .item button{padding:0;width:30px;height:30px;background:none;border-color:transparent;
color:var(--ink2);border-radius:8px;flex:0 0 auto}
@media(hover:hover){.list .item button:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--ink);
border-color:transparent}}
#lists .row{gap:8px}
#lists .row button{padding:6px 11px;font-size:12px}