/* Radar Qispi -------------------------------------------------------------
   Superficie autonoma di scoperta. Tutto resta sotto #radar: nessuna regola
   modifica Casa, Cerca, Globo o Tua per somiglianza accidentale. */

#radar{
  display:none; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  color:var(--ink); background:
    radial-gradient(circle at 82% 7%,rgba(234,77,151,.17),transparent 28%),
    radial-gradient(circle at 8% 46%,rgba(79,163,247,.13),transparent 31%),
    #090b10;
  padding:clamp(24px,4vw,58px) clamp(16px,4vw,58px) 64px;
}
body[data-vista="radar"] #radar{display:block}

.radar-testa{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr);
  align-items:end; gap:clamp(20px,5vw,84px); max-width:1240px; margin:0 auto 30px;
  padding:0 0 24px; border:0; border-bottom:1px solid rgba(214,222,230,.2);
  background:none;
}
.radar-testa h2{
  margin:7px 0 0; max-width:780px;
  font:800 clamp(45px,7.3vw,108px)/.82 var(--display);
  letter-spacing:-.065em; text-transform:uppercase;
}
.radar-kicker,.radar-modulo>.lbl,.radar-segnale-copy>.lbl{
  color:#D8B25C; font:600 11.5px/1.2 var(--sans);
  letter-spacing:.12em; text-transform:uppercase;
}
.radar-testa p{
  margin:0; max-width:390px; color:#A8B3BE; font:400 15px/1.55 var(--sans);
}

#radar-corpo{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px;
  max-width:1240px; margin:0 auto;
}
.radar-modulo{
  position:relative; min-width:0; overflow:hidden; border:1px solid rgba(214,222,230,.18);
  background:rgba(18,22,29,.9); border-radius:clamp(18px,2vw,30px);
  padding:clamp(20px,2.4vw,34px);
}
.radar-numero{
  position:absolute; top:18px; right:20px; z-index:2;
  color:rgba(214,222,230,.56); font:500 11.5px/1 var(--sans); letter-spacing:.12em;
}

/* 01 — il segnale principale: materia che urta il bordo, non una card
   rettangolare con una fotografia decorativa. */
.radar-segnale{
  grid-column:span 7; min-height:390px; display:grid;
  grid-template-columns:minmax(0,1fr) 128px; align-items:end;
  background:linear-gradient(137deg,#261128 0 42%,#12161d 42% 100%);
}
.radar-segnale::before{
  content:""; position:absolute; width:330px; height:330px; left:-105px; top:-126px;
  border:30px solid #ef4f98; border-radius:50%; opacity:.9;
}
.radar-segnale::after{
  content:""; position:absolute; width:185px; height:26px; left:94px; top:94px;
  border-radius:20px; background:#f5cf62; transform:rotate(-31deg);
}
.radar-segnale-copy,.radar-attesa{position:relative;z-index:1;align-self:end}
.radar-segnale-copy h3,.radar-attesa h3{
  margin:11px 0 9px; max-width:620px; overflow-wrap:anywhere;
  font:700 clamp(31px,4vw,62px)/.94 var(--display); letter-spacing:-.045em;
}
.radar-segnale-copy p,.radar-attesa p{
  margin:0; color:#A8B3BE; font:400 14px/1.45 var(--sans);
}
.radar-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.radar-azioni button,.radar-riprova{min-height:44px}
.radar-segnale-logo{position:relative;z-index:1;align-self:end}
.radar-segnale-logo .fig{
  width:128px;height:128px;display:block;border-radius:24px;overflow:hidden;
  background-color:#111820;background-position:center;background-repeat:no-repeat;background-size:cover;
  border:1px solid rgba(255,255,255,.19);box-shadow:0 18px 42px rgba(0,0,0,.32)
}
.radar-segnale-logo .fig img{width:100%;height:100%;object-fit:cover;display:block}
.radar-segnale-forma{position:absolute;right:-72px;top:38px;width:270px;height:270px;opacity:.28}
.radar-segnale-forma i{position:absolute;inset:0;border:2px solid #e7eef5;border-radius:50%}
.radar-segnale-forma i:nth-child(2){inset:28px}
.radar-segnale-forma i:nth-child(3){inset:58px}

/* 02 — sei rotte da imboccare, non sei filtri da spuntare. La differenza
   la fanno tre cose: la traiettoria disegnata dentro ogni tessera, gli
   angoli che ruotano di tessera in tessera e le altezze che non si
   allineano (align-items:start) -- una fila di riquadri identici e'
   esattamente cio' che un pannello di filtri sembra. */
.radar-rotte{grid-column:span 5;background:#12161d}
.radar-generi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;align-items:start}
.radar-generi button{
  position:relative;overflow:hidden;
  min-height:100px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;
  align-content:start;justify-content:stretch;text-align:left;padding:13px;border-radius:16px;
  background:#191f28;border-color:rgba(214,222,230,.14)
}
/* la traiettoria: una scia che entra ed esce dalla tessera, inclinata in
   modo diverso a ogni rotta. E' decorazione pura -- sta in basso, oltre la
   riga della frase, non copre nessun testo e non riceve il tocco. */
.radar-generi button::after{
  content:"";position:absolute;right:-24px;bottom:13px;width:92px;height:1.5px;
  background:linear-gradient(90deg,rgba(239,79,152,0),rgba(239,79,152,.8));
  transform:rotate(-26deg);transform-origin:right center;pointer-events:none
}
.radar-generi button:nth-child(3n+1){border-radius:30px 14px 14px 14px;min-height:116px}
.radar-generi button:nth-child(3n+2){border-radius:14px 30px 14px 14px}
.radar-generi button:nth-child(3n){border-radius:14px 14px 30px 14px;min-height:108px}
.radar-generi button:nth-child(3n+2)::after{transform:rotate(-13deg)}
.radar-generi button:nth-child(3n)::after{transform:rotate(-40deg)}
.radar-generi button strong{font:700 18px/1 var(--display);letter-spacing:-.02em}
.radar-generi button>span:last-child{
  grid-column:1/-1;align-self:end;color:#95A2AE;font:400 12.5px/1.25 var(--sans)
}
.radar-genere-indice{margin-right:8px;color:#ef4f98;font:600 10px/1 var(--sans)}

/* 03 — sei coordinate di sei paesi, composte e non elencate.

   Com'era: righe tutte uguali separate da filetti, su un unico fondo verde
   pieno. Su telefono le due colonne diventavano una e il modulo si
   allungava per circa settecento pixel: le sei emittenti si leggevano come
   i record di un archivio e il verde diventava la tinta della pagina.

   Com'e': tessere di misura diversa su due colonne, con la coordinata usata
   come segno editoriale invece che come intestazione ripetuta. Il verde
   resta un accento -- la fascia in alto del modulo e due tessere -- e le
   differenze fra le tessere sono di riempimento, spessore del bordo, raggio
   e corpo del carattere, quindi si vedono anche in scala di grigi. Quali
   emittenti compaiono non cambia: lo decide radioDaPaesiDiversi(). */
.radar-mondo{
  grid-column:span 8;
  background:linear-gradient(180deg,#0d2b2c 0,#101318 172px);
  border-color:rgba(105,213,201,.26)
}
.radar-coordinate-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px
}
.radar-coordinate-grid button{
  position:relative;display:grid;justify-items:start;align-content:start;gap:5px;
  min-height:44px;text-align:left;padding:15px 15px 16px;
  border:1px solid rgba(214,222,230,.17);border-radius:16px;background:#12161d;
  /* struttura.css da' a ogni button justify-content:center. Su un button
     display:grid quello centra la colonna, e un nome corto finiva in mezzo
     alla tessera mentre uno lungo -- che riempiva la riga -- restava a
     sinistra: due allineamenti diversi nella stessa griglia. */
  justify-content:start
}
/* Le tessere larghe le decide larghezzeRadar() in app.js, leggendo il nome
   vero: a 390px una colonna e' larga circa centocinquanta pixel e un nome
   lungo li' dentro andrebbe spezzato in briciole. Meglio dargli la riga
   intera che troncarlo. */
.radar-coordinate-grid button[data-largo]{grid-column:1/-1;padding-right:42px}
/* la freccia sta solo dove c'e' spazio per lei: sulle tessere strette
   ruberebbe trenta pixel proprio dove il nome ne ha piu' bisogno, ed e'
   decorazione (aria-hidden), non un comando a parte */
.radar-coordinate-grid button:not([data-largo]) .radar-freccia{display:none}
/* apertura della sezione: due tinte tagliate in diagonale e il nome piu'
   grande. Resta un accento, non un secondo eroe -- il punto focale della
   pagina e' la Frequenza del giorno, modulo 01. */
.radar-coordinate-grid button:nth-child(1){
  padding:20px 42px 20px 20px;border-radius:28px 16px 16px 16px;
  background:linear-gradient(107deg,#123536 0 52%,#12161d 52%);
  border-color:rgba(105,213,201,.36)
}
.radar-coordinate-grid button:nth-child(1) strong{font-size:27px;line-height:1}
.radar-coordinate-grid button:nth-child(1) .radar-coord{font-size:12.5px}
/* solo contorno, senza riempimento: e' la differenza che regge meglio di
   tutte quando il colore non c'e' */
.radar-coordinate-grid button:nth-child(3n+2){
  background:transparent;border-color:rgba(214,222,230,.34);
  border-radius:16px 28px 16px 16px
}
.radar-coordinate-grid button:nth-child(3n){
  background:#1b202a;border-radius:16px 16px 16px 28px
}
/* Le tessere larghe che non aprono la sezione girano la coordinata di
   novanta gradi e la usano come dorso: e' il cambio di orientamento
   tipografico che rompe la ripetizione, e la coordinata resta leggibile
   per intero. */
.radar-coordinate-grid button[data-largo]:not(:nth-child(1)){
  grid-template-columns:auto minmax(0,1fr);column-gap:15px;row-gap:4px;
  /* il testo si centra sul dorso invece di appoggiarsi in cima: la
     coordinata girata e' alta quanto e' lunga, e con l'allineamento in alto
     restava un vuoto sotto al nome */
  align-content:center;padding-left:13px
}
.radar-coordinate-grid button[data-largo]:not(:nth-child(1)) .radar-coord{
  grid-row:1/3;align-self:stretch;writing-mode:vertical-rl;
  padding:1px 0 1px 7px;border-left:2px solid #69d5c9
}
.radar-coordinate-grid button[data-largo]:not(:nth-child(1)) strong,
.radar-coordinate-grid button[data-largo]:not(:nth-child(1)) small{grid-column:2}
@media(hover:hover){
  .radar-coordinate-grid button:hover{border-color:rgba(105,213,201,.6)}
}
.radar-coordinate-grid strong{margin:0;font:650 17px/1.12 var(--display);overflow-wrap:anywhere}
.radar-coordinate-grid small{color:#A8B3BE;font:400 12.5px/1.3 var(--sans);overflow-wrap:anywhere}
.radar-coord{color:#69d5c9;font:600 11px/1.1 var(--sans);letter-spacing:.08em}
.radar-freccia{position:absolute;right:16px;bottom:16px;color:#69d5c9;font-size:20px;line-height:1}

/* 04 — memoria locale; il bordo tratteggiato la distingue dai segnali del
   catalogo prima ancora di leggere l'etichetta. */
/* Lo span 4 (invece di 5) rompe di proposito la simmetria con la riga
   sopra: due righe uguali da 7+5 sarebbero quattro riquadri a scacchiera,
   cioe' la griglia regolare che si voleva evitare. */
.radar-scia{grid-column:span 4;border-style:dashed;background:#17141e}
#radar-ritorni{display:grid;gap:7px;margin-top:20px}
#radar-ritorni button{
  display:grid;grid-template-columns:25px minmax(0,1fr) auto;grid-template-rows:auto auto;
  justify-content:stretch;text-align:left;min-height:68px;padding:10px 8px;border:0;border-radius:8px;background:transparent
}
#radar-ritorni button:hover{background:rgba(255,255,255,.04)}
#radar-ritorni button>span{grid-row:1/3;color:#d7a8d1;font:500 10px/1.4 var(--sans)}
#radar-ritorni strong{font:600 14px/1.2 var(--sans);overflow-wrap:anywhere}
#radar-ritorni small{color:#94A0AB;font:400 12px/1.3 var(--sans)}
#radar-ritorni b{grid-column:3;grid-row:1/3;align-self:center;color:#d7a8d1;font-size:18px}
.radar-vuoto{margin:0;max-width:390px;color:#A8B3BE;font:400 14px/1.5 var(--sans)}

@media(min-width:901px){
  body[data-vista="radar"] main{display:flex;flex-direction:column}
  body[data-vista="radar"] #stage,
  body[data-vista="radar"] #cassetto,
  body[data-vista="radar"] #panel{display:none}
  /* La tessera d'apertura e' larga quanto tutto il modulo: un taglio a
     meta' la lascerebbe verde per quattrocento pixel dopo la fine del
     nome. Qui il taglio si stringe e la tinta torna a essere un cuneo
     dietro al testo, non mezza tessera vuota. */
  .radar-coordinate-grid button:nth-child(1){
    background:linear-gradient(107deg,#123536 0 34%,#12161d 34%)
  }
}

@media(max-width:900px){
  body[data-vista="radar"] #radar{display:block;flex:1;min-height:0;overflow-y:auto}
  .radar-testa{grid-template-columns:1fr;gap:14px;margin-bottom:14px;padding-bottom:18px}
  .radar-testa h2{font-size:clamp(43px,15vw,66px)}
  .radar-testa p{font-size:13px;max-width:310px}
  #radar-corpo{display:block}
  .radar-modulo{margin-bottom:10px;padding:20px}
  .radar-segnale{min-height:370px;grid-template-columns:minmax(0,1fr) 84px}
  .radar-segnale-logo .fig{width:84px;height:84px;border-radius:18px}
  .radar-segnale-copy h3,.radar-attesa h3{font-size:36px}
  .radar-generi button{min-height:92px}
  .radar-generi button:nth-child(3n+1){min-height:106px}
  .radar-generi button:nth-child(3n){min-height:99px}
  /* Le due colonne restano anche qui: era proprio la colonna unica a fare
     la parete verticale segnalata su iPhone. */
  .radar-coordinate-grid{gap:8px}
  .radar-coordinate-grid button{padding:13px 13px 14px}
  .radar-coordinate-grid button[data-largo]{padding-right:40px}
  .radar-coordinate-grid button:nth-child(1){padding:17px 40px 17px 17px}
  .radar-coordinate-grid button:nth-child(1) strong{font-size:23px}
  body.con-lettore #radar{padding-bottom:calc(var(--lettore-h,72px) + 20px)}
}

@media(max-width:430px){
  #radar{padding:20px 12px 38px}
  .radar-generi{gap:7px}
  .radar-generi button{padding:11px}
  /* Il modulo aveva 20px di riempimento per lato: quaranta pixel tolti
     proprio alle due colonne che devono ospitare i nomi per intero. */
  .radar-mondo{padding:18px 14px}
  .radar-coordinate-grid{gap:7px}
  .radar-coordinate-grid button{padding:12px 11px 13px}
  .radar-coordinate-grid button:nth-child(1){padding:16px 38px 16px 15px}
  .radar-coordinate-grid button[data-largo]:not(:nth-child(1)){column-gap:12px;padding-left:11px}
  .radar-coordinate-grid strong{font-size:16px}
  .radar-segnale{grid-template-columns:1fr}
  .radar-segnale-logo{position:absolute;right:18px;top:58px}
  .radar-segnale-copy{padding-top:110px}
}

@media(prefers-reduced-motion:reduce){
  #radar *{scroll-behavior:auto;transition-duration:.01ms;animation-duration:.01ms}
}