/* variabili, tema scuro, marchio, icone, anteprime

   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. */

  :root{
    /* La faccia in ombra del globo. Prima il pannello era una scocca chiara
       accanto a una finestra scura; ora e' la stessa notte che continua,
       cosi' il bordo fra i due smette di essere una cucitura. */
    --bg:#070A0E; --bg2:#0D1319; --bg3:#151C24; --bg4:#1F2731;
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
    --ink:#E7EAED; --ink2:#8792A0;
    /* Un accento solo, e non e' scelto a tavolino: e' gia' il colore dei
       puntini delle emittenti sul globo. Lo stesso oro dice "questo si
       ascolta" sulla mappa e nel pannello. */
    /* larghezza della colonna di destra: la usano sia la griglia sia il
       bordo del cassetto, che le sta appoggiato contro */
    --colonna:380px;
    --gold:#D8B25C; --gold-dim:rgba(216,178,92,.13);
    --lamp:#FF5D47;
    /* Il marchio come segnaposto: sta qui perche' lo usano sia le tessere
       degli elenchi sia i mosaici della casa. ATTENZIONE: il '#' dei colori
       e' gia' codificato una volta (%23) -- ricodificarlo da' %2523 e il
       browser riceve un colore non valido, non disegna nulla e non protesta.

       UNA Q, non piu' il pianeta con l'anello orbitale. Il disegno precedente
       aveva tre elementi sovrapposti (ellisse mascherata, arco, coda) con
       tratto al 5% del riquadro, mentre le icone dell'app stanno al 7,1%
       (viewBox 24, stroke-width 1.7, vedi .i). Su una tessera da 42px il
       marchio ne occupa 24: a quella misura i tre tratti si impastavano e il
       risultato si leggeva come uno sbaffo, non come un segno voluto.
       Fotografato prima e dopo alle dimensioni vere.

       Ora: un cerchio e una coda, allo stesso 7% delle icone. La coda parte
       DENTRO il cerchio, cosi' e' insieme la gamba della Q e un frammento
       dell'orbita che c'era prima. Nessuna maschera, nessun tracciato
       sovrapposto: due forme che a 24px restano due forme.

       Resta uno sfondo CSS e non un <img>: nessuna richiesta di rete, niente
       da annunciare a chi usa uno screen reader, e soprattutto continua a
       ricomparire da solo quando agganciaCopertine() toglie un logo morto --
       il meccanismo non e' stato toccato, e' bastato cambiare il disegno. */
    --marchio:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23414C59%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2246%22%20r%3D%2226%22%2F%3E%3Cpath%20d%3D%22M57%2057%2076%2078%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --display:'Archivo',system-ui,sans-serif;
    --sans:'Instrument Sans',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  /* niente slittamento laterale: l'asse orizzontale e' bloccato ovunque.
     E' il sintomo — la causa (parole lunghe che non vanno a capo) sta piu'
     sotto, sui contenitori di testo. */
  html,body{height:100%;max-width:100%;overflow-x:hidden}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
       font-size:14px;display:flex;flex-direction:column;overflow-y:hidden;
       -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
       text-rendering:optimizeLegibility;
       /* iOS ingrandisce da solo il testo di certi blocchi: cosi' facendo
          cambia le misure e puo' far sfondare quello che qui torna giusto */
       -webkit-text-size-adjust:100%;
       /* il dito puo' scorrere in verticale e pizzicare per ingrandire, ma
          non trascinare la pagina di lato: e' la garanzia sul gesto, quella
          sul layout la danno le regole qui sopra */
       touch-action:pan-y pinch-zoom}
  .lbl{display:block;font:500 11px var(--sans);color:var(--ink2);margin-bottom:7px;
    letter-spacing:.06em;text-transform:uppercase}
  .note{font:400 13px/1.55 var(--sans);color:var(--ink2)}
  /* i link dentro il testo prendono l'oro come tutto il resto: il blu di
     default del browser sarebbe il secondo accento del progetto */
  .note a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line)}
  @media(hover:hover){.note a:hover{border-bottom-color:var(--gold)}}
  /* separato dal resto della colonna: e' una nota di piede, non una
     sezione fra le altre */
  #fonte-aperta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
    font-size:12px}
  .pending{font:400 12.5px var(--sans);color:var(--ink2);opacity:.72}

  /* ---------- icone: disegnate qui dentro, nessuna raccolta esterna ----------
     Tratto solo, spessore unico, colore ereditato: ogni icona prende da sola
     lo stato del pulsante che la contiene. */
  .i{width:20px;height:20px;display:block;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .i.solid{fill:currentColor;stroke:none}
  .i.sm{width:16px;height:16px}

  /* ---------- anteprime ----------
     Tessera quadrata sempre presente, anche quando l'immagine non c'e': se
     comparisse solo a volte, l'elenco salterebbe di lato a ogni riga. */
  .cop{flex:0 0 auto;width:42px;height:42px;border-radius:8px;overflow:hidden;
    background:var(--bg3) var(--marchio) center/58% no-repeat;
    border:1px solid var(--line);display:block}
  /* Il fondo serve perche' il marchio e' lo SFONDO della tessera, non
     un'immagine che la copertina sostituisce: senza, i loghi delle
     emittenti (PNG con trasparenza) lasciavano vedere l'anello orbitale
     in mezzo alle lettere -- visto su Radio Red Phuket. Si da' un fondo
     all'immagine invece di spegnere il marchio, cosi' quando
     agganciaCopertine() toglie un logo morto il marchio torna da solo. */
  .cop img{width:100%;height:100%;object-fit:cover;display:block;
    background:var(--bg3)}
  /* Su img.cv, non su .cop: e' la classe che ogni copertina/logo/ritratto
     porta ovunque nell'app (agganciaCopertine() la usa come aggancio), non
     una scelta di stile — un filtro qui vale per tutte in un colpo solo.
     Non tocca il marchio segnaposto, che e' uno sfondo CSS della tessera,
     non un <img>: si accende solo quando una foto vera e' caricata. */
  img.cv{filter:contrast(1.06) saturate(1.1)}
  .cop.sm{width:32px;height:32px;border-radius:7px}
  .cop.lg{width:44px;height:44px}
  /* il ritratto della scheda artista: stessa tessera, piu' grande. Per molti
     musicisti viventi non esiste un'immagine libera e resta il solo marchio,
     che e' esattamente il caso gia' previsto qui sopra. */
  .cop.xl{width:74px;height:74px;border-radius:10px}

  /* ---------- scheletri di caricamento ----------
     La forma di quello che sta arrivando, non un rettangolo generico: il
     disegno riusa le classi vere (.cop, .fig, .t1, .che...), quindi misure,
     raggi e spaziature sono gia' quelle del contenuto finale e la
     sostituzione non sposta niente.

     NIENTE ORO: nell'app l'oro dice "scelto" o "si puo' toccare", e uno
     scheletro non e' ne' l'uno ne' l'altro. Un grigio appena piu' chiaro del
     fondo (--bg4, lo stesso dei rilievi) e nient'altro. */
  .sk{position:relative;overflow:hidden;
    background-color:var(--bg4);background-image:none;border-radius:8px}
  /* La barra e' alta .72em: cosi' l'altezza della riga la decide il testo che
     verra' (il suo line-height), non lo scheletro. */
  .sk-r{display:inline-block;vertical-align:middle;height:.72em;border-radius:4px}
  /* le righe di un paragrafo, una sotto l'altra */
  .sk-r.sk-p{display:block;margin:.42em 0}
  /* il posto di un pulsante: stessa altezza e stesso raggio di button */
  .sk-chip{display:inline-block;height:33px;border-radius:9px}
  /* Il gruppo non deve esistere per l'impaginazione: dentro una .fila
     sarebbe un solo elemento flessibile e le tessere si impilerebbero. */
  .sk-gruppo{display:contents}
  /* Un riflesso che attraversa, lento. Non un lampeggio: l'opacita' non
     cambia mai, si muove soltanto una banda chiarissima. */
  .sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
    animation:sk-riflesso 1.9s ease-in-out infinite}
  @keyframes sk-riflesso{to{transform:translateX(100%)}}
  /* chi ha chiesto meno movimento vede la forma ferma, che basta */
  @media(prefers-reduced-motion:reduce){.sk::after{display:none;animation:none}}