/* casa e carosello, risultati e scatole, scheda artista

   Parte di un foglio unico diviso in cinque. L'ORDINE dei <link> 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. */

  /* ---------- casa e barra in basso: esistono solo sul telefono ----------
     Qui stanno spente. Le accende la media query in fondo: sopra i 900px il
     desktop deve restare identico a com'era. */
  #casa,#nav,#tua-vuota,#np-cover-big{display:none}
  /* L'unico pulsante pieno oltre al play: e' l'invito d'ingresso, e come il
     play si deve trovare senza cercarlo. Due righe perche' "Sorprendimi" da
     solo non dice cosa succede se lo premi. */
  /* Non piu' pieno d'oro: era l'unico invito che si imponeva sullo
     schermo, e con le pillole dei generi sopra risultava un secondo
     protagonista invece di un'opzione fra le altre. Niente background/
     border/color qui sotto vuol dire ereditare lo stile base dei bottoni
     (button{background:var(--bg3);border:1px solid var(--line)} in
     struttura.css) -- "scuro come gli altri", letteralmente. */
  #lucky-casa{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
    width:calc(100% - 32px);margin:16px 16px 2px;padding:10px 16px;
    text-align:left}
  #lucky-casa .t{font:600 14px var(--display)}
  #lucky-casa .s{font:400 11px var(--sans);opacity:.6}
  /* Le pillole dei generi, in cima alla casa. Stessi nomi e colori del
     selettore del globo (GENERI in dati.js), stesso idioma visivo -- il
     pallino dice il colore PRIMA di premere, accesa=piena -- ma sono un
     widget diverso: qui una tocca sola alla volta, e sotto compare lo
     scaffale di quel genere invece di un globo che sul telefono non c'e'. */
  /* Griglia piena, bordo a bordo: 2 colonne, 5 per colonna. grid-auto-flow
     e' COLUMN e non row, apposta -- con quello di default i dieci generi si
     sarebbero impaginati a coppie (1,2 / 3,4 / ...), qui invece la prima
     colonna e' i primi cinque di GENERI e la seconda gli altri cinque,
     esattamente come si leggerebbe un elenco dall'alto in basso. */
  #casa-generi{display:grid;grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(5,1fr);grid-auto-flow:column;gap:6px;
    padding:14px 16px}
  #casa-generi button{justify-content:flex-start;padding:8px 13px}
  #casa-generi .pallino{display:inline-block;width:7px;height:7px;border-radius:50%;
    margin-right:6px;flex:0 0 auto}
  /* Due colonne lasciano abbastanza posto perche' nessun nome si tagli
     (misurato: 175px a testa a 390px di schermo) -- l'ellissi resta solo
     come rete di sicurezza, non come piano. */
  #casa-generi button span{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0}
  #casa-generi button.on{border-color:var(--gold);color:var(--gold)}
  #casa-generi button.on.tinta{color:#0B0F14}
  #casa-generi button.on.tinta .pallino{background:#0B0F14 !important;opacity:.45}
  #scaffali{padding:16px 0 22px}
  .scaffale{margin-bottom:26px}
  /* Ingrandito da 15px: al confronto diretto coi titoli di sezione di
     Spotify (stesso screenshot di riferimento), a parita' di scala erano
     molto piu' piccoli -- non un difetto di nitidezza (il font-smoothing
     c'era gia' in base.css, e a piena risoluzione il testo era gia'
     pulito), solo una scelta tipografica piu' timida. */
  .scaffale h2{font:700 19px/1.25 var(--display);margin:0 0 12px;padding:0 16px;
    letter-spacing:-.01em}
  /* Carosello: scorre in orizzontale per conto suo. Il contenimento sta qui,
     non sul corpo -- la pagina non deve slittare per colpa di una fila. */
  /* align-items:flex-start, non il default (stretch): senza, ogni tessera
     si allunga fino al fratello piu' alto della fila, e la bandiera (o la
     copertina) di chi ha il nome piu' corto scivola in basso invece di
     restare incollata al tetto -- misurato 8px di scarto fra un paese a
     una riga e uno a due. Sbagliato prima metterlo su .tessera: quella
     proprieta' governa come UN CONTENITORE dispone i suoi figli, non come
     un figlio si posiziona nel SUO contenitore -- serve sulla .fila. */
  .fila{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;padding:0 16px 2px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    /* senza questo lo scatto allinea la prima tessera al bordo del
       contenitore e si mangia il margine: misurato scrollLeft=16 su un
       padding-left di 16, cioe' esattamente annullato. Il margine dello
       scatto e' scroll-padding, non padding. */
    scroll-padding-left:16px}
  .fila::-webkit-scrollbar{display:none}
  .tessera{flex:0 0 auto;width:132px;background:none;border:none;padding:0;
    border-radius:0;text-align:left;display:block;scroll-snap-align:start}
  @media(hover:hover){.tessera:hover:not(:disabled){background:none}}
  .tessera .fig{width:132px;height:132px;border-radius:12px;overflow:hidden;
    background:var(--bg3);border:1px solid var(--line);
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  /* un'immagine sola occupa tutte e quattro le caselle */
  .tessera .fig.una{grid-template-columns:1fr;grid-template-rows:1fr}
  .tessera .fig img{width:100%;height:100%;object-fit:cover;display:block}
  /* Le caselle sono quattro ma le immagini chieste sono otto: le riserve
     entrano da sole quando agganciaCopertine() toglie una forma d'onda. */
  .tessera .fig img:nth-child(n+5){display:none}
  /* mosaico ancora da caricare, o senza copertine: resta il marchio */
  .tessera .fig.vuota{background:var(--bg3) var(--marchio) center/46% no-repeat}
  .tessera .t1{font:500 13px/1.3 var(--sans);color:var(--ink);margin-top:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tessera .t2{font:400 11.5px var(--sans);color:var(--ink2);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  #nav{flex:0 0 auto;background:var(--bg2);border-top:1px solid var(--line)}
  #nav button{flex:1;background:none;border:none;border-radius:0;
    padding:9px 2px calc(9px + env(safe-area-inset-bottom));color:var(--ink2);
    font:500 10.5px var(--sans);flex-direction:column;gap:3px}
  @media(hover:hover){#nav button:hover:not(:disabled){background:none}}
  #nav button.on{color:var(--gold)}

  .big{font:600 22px/1.25 var(--display);word-break:break-word;letter-spacing:-.01em}
  .sub{font:500 14px/1.45 var(--sans);color:var(--gold);margin-top:6px}
  /* L'unica cosa cliccabile del lettore: il nome dell'artista porta alla sua
     scheda. Resta un button (tastiera, lettori di schermo) ma non ne veste i
     panni -- deve leggersi come la riga di testo che era prima. La freccia
     serve al dito: senza hover, niente altro direbbe che si puo' toccare. */
  .artlink{padding:0;background:none;border-color:transparent;border-radius:0;
    font:inherit;color:inherit;max-width:100%;text-align:left;gap:5px}
  @media(hover:hover){.artlink:hover:not(:disabled){background:none;border-color:transparent;
    color:var(--ink)}}
  .artlink .i{width:14px;height:14px}
  /* fra due artisti in collaborazione: separa senza sembrare cliccabile */
  #np-sub .sep{color:var(--ink2)}
  .meta{font:400 12px/1.5 var(--sans);color:var(--ink2);margin-top:6px}
  .src{font:400 10.5px var(--sans);letter-spacing:.12em;color:var(--ink2);margin-top:8px}

  .chipbar{display:flex;gap:8px;flex-wrap:wrap}
  .chipbar button{padding:8px 13px;font-size:12.5px}
  #source{display:flex;gap:3px;margin-bottom:9px;background:var(--bg);padding:4px;border-radius:11px}
  /* L'attributo hidden da solo non basta: vale quanto una regola del
     browser e questo 'display:flex' lo batte. Stessa trappola di
     specificita' gia' presa due volte col tasto play. */
  #source[hidden]{display:none}
  #source button{flex:1;background:none;border-color:transparent;color:var(--ink2);
    padding:8px 2px;font-size:10.5px}
  @media(hover:hover){#source button:hover:not(:disabled){background:rgba(255,255,255,.04);border-color:transparent}}
  #source button.on{background:var(--bg3);border-color:transparent;color:var(--ink)}
  /* Non c'e' piu' un campo da affiancare: la riga tiene una sola azione, e
     la tiene in coda invece che in testa. Allineata a sinistra sotto la
     testata sembrava il pulsante rimasto orfano di una casella; in coda si
     legge come cio' che e', un'aggiunta a quello che il campo sta gia'
     facendo. */
  .searchrow{display:flex;gap:8px;justify-content:flex-end}
  #find{font-size:12.5px;padding:8px 13px}

  .list .item{padding:12px 8px 12px 0;border-bottom:1px solid var(--line);cursor:pointer;
    border-radius:8px;transition:background .12s}
  @media(hover:hover){.list .item:hover{background:rgba(255,255,255,.035)}}
  @media(hover:hover){.list .item:hover .t1{color:var(--gold)}}
  /* senza questo il testo va a capo dentro il bottone: come figlio di un
     flex che si restringe (.item), un button eredita flex-shrink:1 e nessun
     white-space:nowrap di suo */
  .list .item [data-rimostra]{flex:0 0 auto;white-space:nowrap}
  .t1{font:500 14px/1.35 var(--sans)}
  .t2{font:400 12px var(--sans);color:var(--ink2);margin-top:4px}

  /* La scorciatoia alla scheda artista: la prima cosa utile da poter
     cliccare, quindi la copertina piu' grande di tutto l'elenco (la
     stessa misura del ritratto nella scheda, per continuita' quando ci
     si arriva davvero). */
  .artcard{display:flex;align-items:center;gap:14px;padding:14px;
    margin-bottom:16px;background:var(--bg3);border:1px solid var(--line);
    border-radius:12px;cursor:pointer;transition:border-color .12s}
  @media(hover:hover){.artcard:hover{border-color:var(--gold)}}
  @media(hover:hover){.artcard:hover .t1{color:var(--gold)}}
  /* 18px e non 15: e' la prima cosa da cliccare quando hai cercato un
     nome, ma si leggeva come una riga qualunque dell'elenco */
  .artcard .t1{font:600 18px/1.25 var(--display)}
  .artcard .t2{font:400 12.5px var(--sans);color:var(--ink2);margin-top:4px}

  /* Gli elementi dell'Archive sono scatole (un concerto, una raccolta):
     la copertina grande e' quello che fa capire cosa sono, come un banco
     di dischi -- l'elenco compatto sotto resta per le tracce singole
     delle altre fonti, dove la copertina non aiuta a scegliere. */
  .griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:14px;margin-bottom:18px}
  .scatola{cursor:pointer}
  .scatola .capsula{position:relative}
  .scatola .cop{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
  .scatola .add{position:absolute;top:6px;right:6px;width:30px;height:30px;
    padding:0;border-radius:50%;background:rgba(8,10,13,.6);
    border-color:transparent;color:#fff}
  @media(hover:hover){.scatola .add:hover{background:rgba(8,10,13,.82);border-color:transparent;
    color:var(--gold)}}
  .scatola .t1{font:500 12.5px/1.3 var(--sans);margin-top:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  @media(hover:hover){.scatola:hover .t1{color:var(--gold)}}
  .scatola .t2{font:400 10.5px var(--sans);color:var(--ink2);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* i filtri ripetono l'aspetto delle etichette: si legge che sono la stessa cosa */
  #filtri button{font:400 10px var(--sans);letter-spacing:.08em;padding:6px 10px;border-radius:7px}
  .row{padding:10px 0;border-bottom:1px solid var(--line);font:400 13px var(--sans);
    display:flex;gap:10px;align-items:baseline}
  .row .t{font:400 11px var(--sans);color:var(--ink2);min-width:40px}
  /* la riga riporta dentro al sito, quindi si comporta da riga cliccabile:
     la freccia e' la stessa chevron degli elenchi, e resta spenta finche'
     non ci passi sopra */
  .row[data-i]{cursor:pointer}
  @media(hover:hover){.row[data-i]:hover{color:var(--ink)}}
  .row .verso{color:transparent;display:inline-flex;flex:0 0 auto}
  @media(hover:hover){.row[data-i]:hover .verso{color:var(--gold)}}
  /* la riga di una radio o di una playlist nel registro: due zone cliccabili,
     non piu' una sola -- il nome porta dritto ad ascoltare, il bottone apre
     la storia di cosa ha suonato (vedi renderLog). */
  .tocca-gruppo{cursor:pointer}
  @media(hover:hover){.tocca-gruppo:hover{color:var(--ink)}}
  .verso-btn{padding:0;width:28px;height:28px;background:none;border-color:transparent;
    color:var(--ink2);border-radius:7px;flex:0 0 auto}
  @media(hover:hover){.verso-btn:hover{background:rgba(255,255,255,.07);color:var(--gold);border-color:transparent}}
  .storia{padding-left:8px}
  /* le due pillole del registro: stesso trattamento di button.go/Sorprendimi
     -- piene, testo scuro, un raggio piccolo da bottone e non da pillola. */
  #log .row{align-items:center}
  .badge-giorno,.badge-tipo{display:inline-flex;align-items:center;flex:0 0 auto;
    padding:3px 7px;border-radius:6px;font:600 10px var(--sans);letter-spacing:.02em;
    background:var(--gold);color:#1A1206}
  .badge-tipo .i{width:10px;height:10px}
  /* la tessera "da manifesto" davanti al primo brano di ogni giorno diverso
     nella storia di una radio (vedi manifesto() in app.js): a sinistra
     quando (numero del giorno grande, mese sotto), a destra a che punto di
     quel giorno (il giorno della settimana, l'ora esatta sotto).
     Un font solo, Instrument Sans, peso 400 ovunque -- niente IBM Plex
     Mono qui, e' in dubbio (vedi CLAUDE.md/note se lo si toglie altrove),
     niente grassetto. Le due righe di ogni colonna centrate l'una
     sull'altra (mancava su mf-quando, ed e' per questo che il blocco non
     tornava dritto), cosi' il blocco si legge giustificato invece che
     sbandato a sinistra. */
  .manifesto{display:flex;align-items:center;gap:9px;flex:0 0 auto}
  .manifesto .mf-data{display:flex;flex-direction:column;align-items:center;line-height:1.25}
  .manifesto .mf-n{font:400 19px var(--sans);color:var(--ink)}
  .manifesto .mf-m{font:400 13px var(--sans);letter-spacing:.03em;text-transform:uppercase;
    color:var(--ink)}
  .manifesto .mf-quando{display:flex;flex-direction:column;align-items:center;line-height:1.25}
  .manifesto .mf-g{font:400 13px var(--sans);letter-spacing:.03em;text-transform:uppercase;
    color:var(--ink)}
  .manifesto .mf-t{font:400 13px var(--sans);color:var(--ink)}
  .q{padding:10px 0;border-bottom:1px solid var(--line);font:400 13px var(--sans);
    display:flex;gap:10px;cursor:pointer;color:var(--ink2);align-items:center}
  @media(hover:hover){.q:hover{color:var(--ink)}}
  .q.now{color:var(--gold);font-weight:500}
  .q .n{min-width:24px;font:400 11px var(--sans);color:#5C6672}

  #links,#vicini,#nulla-vicini,#nulla-link,#scheda-link{display:flex;gap:8px;flex-wrap:wrap}
  #links a,#vicini button,#nulla-vicini button,#nulla-link a,#scheda-link a{font:500 12.5px var(--sans);
    color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;
    border:1px solid var(--line);border-radius:9px;padding:8px 12px;background:var(--bg3)}
  @media(hover:hover){#links a:hover,#vicini button:hover,#nulla-vicini button:hover,#nulla-link a:hover,#scheda-link a:hover{
    border-color:var(--gold);color:var(--gold);background:var(--bg3)}}
  #links a.exact,#nulla-link a.exact,#scheda-link a.exact{border-color:var(--gold);
    background:var(--gold-dim);color:var(--gold)}
  /* max-height/overflow: stesso valore gia' usato da #listmenu, stesso
     componente (bottoni impilati in un riquadro --bg3) -- ora che il
     picker puo' includere anche le "vicine" la lista puo' farsi lunga. */
  #picker{display:none;border:1px solid var(--line);background:var(--bg3);border-radius:12px;
    padding:13px;margin-bottom:16px;max-height:52vh;overflow:auto}
  #picker button{display:block;width:100%;text-align:left;margin-top:6px;font-weight:500}

  /* ---------- scheda artista, e "dentro la scatola" ----------
     Stesse regole per i due pannelli: sono la stessa idea (una cosa sola
     che prende il cassetto, con il tasto per tornare indietro), e devono
     somigliarsi anche quando ci si passa da uno all'altro. */
  #scheda .testa,#dentro .testa{display:flex;gap:13px;align-items:flex-start}
  #scheda .nome,#dentro .nome{font:600 19px/1.2 var(--sans)}
  #scheda .che,#dentro .che{font:400 12px var(--sans);color:var(--ink2);margin-top:5px}
  #scheda .bio{font:400 12.5px/1.55 var(--sans);color:var(--ink2);margin-top:11px}
  #scheda .indietro,#dentro .indietro{margin-bottom:11px}
  /* "Ne hanno scritto": gli articoli delle riviste. Sono link ESTERNI per
     forza -- leggere l'articolo vuol dire andare da loro, ed e' anche la
     condizione della licenza (attribuzione e fonte visibili). Stesso caso
     gia' accettato per "Riascoltalo altrove" e "Chi e' l'artista": li'
     uscire e' lo scopo della sezione, non un incidente. */
  .art{display:block;padding:9px 0;border-top:1px solid var(--line);text-decoration:none}
  .art:first-child{border-top:0;padding-top:0}
  .art .at{font:500 13px/1.4 var(--sans);color:var(--ink)}
  @media(hover:hover){.art:hover .at{color:var(--gold)}}
  .art .am{font:400 11px var(--sans);color:var(--ink2);margin-top:3px}
  .art .ae{font:400 12px/1.5 var(--sans);color:var(--ink2);margin-top:5px}
  /* il numero di traccia: stessa colonna della coda, cosi'
     l'elenco si legge come una scaletta e non come righe di ricerca */
  #dentro .n{min-width:24px;font:400 11px var(--sans);color:#5C6672}
  /* Mentre si guarda dentro una scatola, i risultati di prima non c'entrano
     piu' niente e restavano sotto la scaletta (visto fotografando: sotto le
     tracce comparivano le emittenti dell'ultima ricerca). Si nascondono con
     una classe invece che toccando i display uno per uno, cosi' alla
     chiusura ognuno ritrova lo stato che aveva -- filtri ed extra-fonti
     hanno una logica propria che non va sovrascritta. */
  #cassetto-corpo.dentro > #stat,
  #cassetto-corpo.dentro > #filtri,
  #cassetto-corpo.dentro > #extra-fonti,
  #cassetto-corpo.dentro > #results{display:none}
  /* La scheda artista si nasconde ma resta viva: chiudendo la scatola
     torna com'era, col suo tasto per uscire. Se venisse distrutta si
     resterebbe sui risultati dell'artista senza via d'uscita. */
  #cassetto-corpo.dentro > #scheda{display:none!important}

  /* "Cerco..." puo' restare a schermo per qualche secondo davvero (si
     aspettano radio+archivio+tre fonti in parallelo): senza questo sembra
     bloccato, con questo si vede che sta ancora lavorando. Nessun timer
     nuovo -- la classe la toglie musicSearch() appena tutte le fonti hanno
     risposto. */
  #stat.cercando{animation:cerco-pulse 1.1s ease-in-out infinite}
  @keyframes cerco-pulse{0%,100%{opacity:1}50%{opacity:.45}}