/* Guscio Qispi — solo la testata e lo strato di ricerca.

   Isolato come stile/qispi.css: tutto sta sotto .qk-testata o sotto
   body[data-ricerca], e nessuna variabile globale viene ridefinita. Casa,
   Globo e Tua restano con la loro tavolozza.

   Caratteri: si usano quelli GIA' presenti nell'applicazione, e soltanto i
   tagli verificati. Instrument Sans 400/500/600 in caratteri/ sono lo stesso
   file con tre nomi (stesso SHA-256): i pesi 500 e 600 li sintetizzerebbe il
   browser. Qui quindi si dichiara solo il 400, e dove serve peso si usa
   Archivo, che e' variabile 400-800 per davvero. */

.qk-testata {
  --qk-oro: #E8B44A;
  --qk-vivo: #FF2E63;
  --qk-fondo: #0E0B14;
  --qk-fondo2: #171226;
  --qk-ink: #F2EFE9;
  --qk-ink2: #A79DB8;
  --qk-ink3: #8B839C;

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--qk-fondo);
  border-bottom: 1px solid rgba(242, 239, 233, .13);
}

/* --- marchio --- */
.qk-marchio {
  margin: 0;
  font: 800 21px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: -.03em;
}
.qk-marchio a { color: var(--qk-ink); text-decoration: none; display: block }
/* il bollo rosso: "qui sta accadendo qualcosa", stessa promessa del rosa
   del prototipo, non una decorazione */
.qk-marchio a::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--qk-vivo);
  box-shadow: 0 0 0 3px rgba(255, 46, 99, .22);
  vertical-align: middle;
}

/* --- freccia Indietro: prende il posto del marchio, non si aggiunge --- */
.qk-indietro {
  width: 44px; height: 44px;
  margin: -6px 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 239, 233, .13);
  border-radius: 999px;
  background: transparent;
  color: var(--qk-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.qk-indietro:hover { background: rgba(242, 239, 233, .08) }
.qk-indietro[hidden] { display: none }

/* --- campo di ricerca --- */
.qk-forma { min-width: 0; display: block }
.qk-etichetta {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.qk-campo {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(242, 239, 233, .22);
  border-radius: 999px;
  background: var(--qk-fondo2);
  color: var(--qk-ink);
  font: 400 15px/1 'Instrument Sans', system-ui, sans-serif;
}
.qk-campo::placeholder { color: var(--qk-ink3) }
.qk-campo:focus-visible,
.qk-indietro:focus-visible,
.qk-marchio a:focus-visible {
  outline: 3px solid var(--qk-oro);
  outline-offset: 2px;
}

/* --- contesto a destra: coordinate OPPURE suggerimento PULSE ------------

   Una larghezza fissa, uguale nei due casi e a tutte le misure. E' la
   regola che tiene ferma la testata: cambiando suggerimento, o passando da
   PULSE alle coordinate, la colonna non cambia di un pixel e il campo di
   ricerca non si sposta. Senza, ogni giro di rotazione sarebbe un
   assestamento della riga intera.

   L'altezza la fissa il campo di ricerca (44px + 20 di riempimento = 65):
   il contenuto qui dentro sta comodamente sotto, su una riga o su due, e
   non partecipa mai a decidere quanto e' alta la testata. */
.qk-contesto {
  width: 74px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.qk-contesto[data-modo="pulse"]   #coord { display: none }
.qk-contesto[data-modo="pulse"]   #qk-segnale { display: none }
.qk-contesto[data-modo="coord"]   .qk-pulse { display: none }
.qk-contesto[data-modo="coord"]   #qk-segnale { display: none }
.qk-contesto[data-modo="segnale"] .qk-pulse { display: none }
.qk-contesto[data-modo="segnale"] #coord { display: none }
/* qispi.css:335 nasconde #coord sulla Casa mobile, e la sua nota dice
   esattamente perche': li' mostrava soltanto il segnaposto vuoto. Quel
   motivo e' finito con questo incremento -- il modulo destro non mostra piu'
   coordinate vuote, se non ne ha mostra PULSE -- e tenere la regola oggi
   toglierebbe alla Casa mobile l'unica riga che dice DA DOVE stai
   ascoltando. Misurato: a 390px, con una radio in onda, il riquadro
   risultava largo zero. Il foglio originale resta intatto: questo arriva
   dopo nella cascata e vince per specificita', senza !important. */
.qk-contesto[data-modo="coord"] #coord { display: block }

.qk-testata #coord {
  font: 400 10px/1.3 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--qk-ink3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.qk-testata #coord span { display: block; white-space: nowrap }
.qk-testata #tagline { display: none }

/* --- qualcosa suona, ma non sappiamo da dove ---
   Stessa geometria del suggerimento: due righe a schermo stretto, una sola
   da tablet in su. Il contenitore non cambia misura passando da un modo
   all'altro, quindi la testata non si muove. */
.qk-segnale { text-align: right }
.qk-segnale-stato {
  display: block;
  font: 800 10px/1.3 'Archivo', system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--qk-ink);
  white-space: nowrap;
}

/* --- il suggerimento --- */
.qk-pulse {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  color: var(--qk-ink2);
}
.qk-pulse-cap {
  display: block;
  font: 800 8.5px/1.35 'Archivo', system-ui, sans-serif;
  letter-spacing: .18em;
  color: var(--qk-vivo);
}
.qk-pulse-breve {
  display: block;
  font: 800 10px/1.3 'Archivo', system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--qk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La forma distesa vive solo da 561px in su: vedi piu' sotto. */
.qk-pulse-lunga { display: none }
.qk-pulse:focus-visible { outline: 3px solid var(--qk-oro); outline-offset: 2px }

/* Dissolvenza minima al cambio: nessun movimento, nessun cambio di misura,
   nessun marquee. Solo la luce che rientra. */
@keyframes qk-entra { from { opacity: .2 } to { opacity: 1 } }
.qk-pulse.qk-entra { animation: qk-entra .32s ease }

/* --- ricerca aperta: il campo guadagna spazio, il contesto si ritira --- */
.qk-testata[data-ricerca="aperta"] .qk-contesto { display: none }
.qk-testata[data-ricerca="aperta"] .qk-marchio { display: none }
.qk-testata[data-ricerca="aperta"] .qk-campo { border-color: var(--qk-oro) }

@media (max-width: 560px) {
  .qk-marchio { font-size: 19px }
}

/* Stessa soglia di mobile.css (900px, la stessa che l'applicazione usa gia'
   per "siamo su un telefono o un tablet stretto"): sotto, Safari ingrandisce
   la pagina al focus se il carattere del campo e' sotto i 16px. Il campo
   era a 15px -- comodo, ma non abbastanza. Qui si tocca solo font-size,
   niente altro della riga: la geometria (altezza, padding, bersaglio)
   resta quella misurata e verificata. */
@media (max-width: 900px) {
  .qk-testata .qk-campo { font-size: 16px }
}

/* Da tablet in su ci sta la frase intera su una riga sola, com'e' giusto:
   "PULSE - Attraversa la cumbia". Lo spazio c'e' e la forma compatta la'
   sarebbe una scorciatoia inutile. */
@media (min-width: 561px) {
  .qk-contesto { width: 190px; height: 34px; justify-content: center }
  .qk-testata #coord { font-size: 11.5px; letter-spacing: .08em }
  .qk-testata #coord span { display: inline }
  .qk-testata #coord span + span::before { content: '\00a0\00b7\00a0' }
  .qk-pulse { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px }
  .qk-pulse-breve { display: none }
  .qk-pulse-lunga {
    display: block;
    font: 400 12px/1.3 'Instrument Sans', system-ui, sans-serif;
    color: var(--qk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .qk-pulse-cap::after { content: '\00a0\00b7'; letter-spacing: 0 }
  /* Sulla riga sola le due parti stanno accanto, come per il suggerimento. */
  .qk-segnale { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px }
  .qk-segnale-stato { display: inline; font-size: 11px }
}

/* ------------------------------------------------------------------
   Strato di ricerca.

   Non e' una seconda implementazione: e' la vista Cerca che esiste gia',
   con i suoi risultati e il suo motore. Qui si cambia solo come si
   presenta -- a pagina intera sotto la testata su telefono, pannello
   ampio su desktop -- e si aggiunge la disciplina dell'Impact Layer.
   ------------------------------------------------------------------ */

/* gerarchia: i titoli di sezione dei risultati devono leggersi come
   sezioni editoriali, non come righe di una griglia uguale a se stessa */
body[data-ricerca="aperta"] #cassetto .lbl,
body[data-ricerca="aperta"] #results .sez {
  font: 800 11.5px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A79DB8;
}

/* stato sincero mentre il catalogo non e' ancora pronto: una riga che
   dice cosa sta succedendo, mai un rettangolo nero */
.qk-stato {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 2px;
  font: 400 13px/1.45 'Instrument Sans', system-ui, sans-serif;
  color: #A79DB8;
}
.qk-stato::before {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: currentColor;
}
.qk-stato[data-tono="attesa"]::before { background: #FFB347 }
.qk-stato[data-tono="errore"]::before { background: #FF6B6B; border-radius: 0 }
.qk-stato[data-tono="offline"]::before {
  background: transparent;
  border: 2px dashed #8892A6;
}
/* la forma del pallino cambia col tono: lo stato si distingue anche senza
   colore, in scala di grigi e per chi non lo percepisce */

/* ------------------------------------------------------------------
   Stato vuoto di Cerca: non il catalogo intero (200 righe, ~13.700px,
   misurato). Le stesse pillole di PULSE lette dalla testata -- nessuna
   seconda lista di generi da tenere allineata a mano -- e un'azione
   esplicita per chi vuole davvero vedere tutto. #results vive fuori da
   .qk-testata, quindi niente var(--qk-oro) eccetera qui: sono le stesse
   tinte, scritte per esteso. */
.scoperta-vuota { padding: 4px 2px 8px }
.scoperta-pillole { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.scoperta-prova {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(242, 239, 233, .22);
  border-radius: 999px;
  background: transparent;
  color: #F2EFE9;
  font: 700 11.5px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .04em;
}
@media (hover: hover) { .scoperta-prova:hover { border-color: #E8B44A } }
.scoperta-tutte {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 4px;
  border: 0;
  border-top: 1px solid rgba(242, 239, 233, .13);
  background: transparent;
  color: #A79DB8;
  font: 400 13px/1.4 'Instrument Sans', system-ui, sans-serif;
  text-align: left;
}
@media (hover: hover) { .scoperta-tutte:hover { color: #F2EFE9 } }
.scoperta-prova:focus-visible,
.scoperta-tutte:focus-visible,
.mostra-altri:focus-visible {
  outline: 3px solid #E8B44A;
  outline-offset: 2px;
}

/* "Mostra altri": un blocco alla volta, non tutto il resto insieme. */
.mostra-altri {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 11px 4px;
  border: 1px solid rgba(242, 239, 233, .18);
  border-radius: 10px;
  background: transparent;
  color: #F2EFE9;
  font: 700 12.5px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .03em;
  text-align: center;
}
@media (hover: hover) { .mostra-altri:hover { border-color: #E8B44A } }

/* La riga scelta da PULSE resta riconoscibile mentre il segnale si collega
   e dopo l'avvio. Il bordo laterale e il fondo la distinguono anche senza
   affidarsi soltanto al colore; aria-current porta lo stesso stato fuori
   dalla sola presentazione. */
#results .item.in-ascolto {
  border-left: 3px solid #E8B44A;
  background: rgba(232, 180, 74, .08);
}

/* Una fonte che non ha risposto, detta ACCANTO ai risultati sopravvissuti e
   non al loro posto: il silenzio di Jamendo non cancella cio' che l'Archive
   ha trovato, e non diventa mai un "non esiste". */
.qk-guasto {
  margin-top: 14px;
  padding: 8px 10px;
  border-left: 2px solid #FF6B6B;
  font: 400 12px/1.45 'Instrument Sans', system-ui, sans-serif;
  color: #A79DB8;
}

/* Il battito del punto sul globo segue lo stato vero del lettore. Il PUNTO
   lo disegna MapLibre e resta dov'e': qui si governa solo il bagliore.
   In pausa resta acceso ma fermo -- il posto e' ancora quello, non sta
   succedendo niente. In riconnessione lampeggia piano e diverso: e' un
   terzo stato, non una pausa.
   Sta in questo foglio e non in struttura.css perche' e' roba di questo
   incremento, e arriva dopo nella cascata senza !important. */
#respiro.acceso.fermo { animation: none; opacity: .42; transform: scale(.9) }
@keyframes qk-riconnessione {
  0%, 100% { opacity: .14; transform: scale(.72) }
  50%      { opacity: .6;  transform: scale(.92) }
}
#respiro.acceso.riconnessione { animation: qk-riconnessione 1.1s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
  .qk-testata *, .qk-stato { transition: none !important; animation: none !important }
  /* Il suggerimento resta, fermo: e' il contenuto, non la decorazione. */
  .qk-pulse.qk-entra { animation: none }
  /* struttura.css spegne del tutto il bagliore a chi ha chiesto meno moto
     (opacity:0). Le due regole qui sopra sono piu' specifiche e glielo
     riaccenderebbero: non si cambia una decisione presa altrove passando
     di straforo da un foglio nuovo. */
  #respiro.acceso.fermo, #respiro.acceso.riconnessione { animation: none; opacity: 0 }
}

/* ------------------------------------------------------------------
   Ostacolo dimostrato, non supposto.

   stile/qispi.css:385 nasconde <header> da 901px in su quando la Casa e'
   aperta, per non avere due bande in cima (marchio nella testata + marchio
   dentro #nav). Misurato con la nuova testata: a 1440x900 risultava alta
   ZERO, quindi su desktop la ricerca globale semplicemente non esisteva.

   La ragione di quella regola resta valida — una sola intestazione — ma ora
   e' la testata a portare identita' E ricerca. Quindi si mostra lei e si
   ritira il marchio duplicato dentro la barra. Il foglio originale non
   viene toccato: questo arriva dopo nella cascata e vince senza
   !important.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
  body[data-vista="casa"] header.qk-testata { display: grid }
  body[data-vista="casa"] #nav .qk-navbrand { display: none }
}

/* ------------------------------------------------------------------
   Ordine della shell su desktop, secondo ostacolo dimostrato.

   stile/qispi.css:366 mette #nav a order:-1 per OGNI vista desktop, non
   solo la Casa. Il suo commento dice "lo sposta subito dopo <header>", ma
   order:-1 lo mette PRIMA di tutto -- era vero solo finche' <header>
   restava invisibile quasi ovunque su desktop (la vecchia testata, un
   semplice <h1>). Da quando la testata e' sempre visibile (la regola
   qui sopra, gia' in vigore da questo stesso file), order:-1 la scavalca
   davvero: navigazione e testata finiscono impilate nell'ordine
   sbagliato -- "due shell sovrapposte". Misurato a 1440x900: #nav
   compariva sopra header.qk-testata su OGNI vista, non solo sulla Casa.

   header e main condividono lo stesso order implicito (0) e si susseguono
   gia' nell'ordine giusto per posizione nel DOM: non basta pero' spostare
   SOLO #nav, perche' un valore intermedio (es. order:0 uguale a main)
   cadrebbe nello stesso gruppo di main e verrebbe comunque ordinato per
   posizione nel DOM (che per #nav e' DOPO main). Servono quattro ordini
   distinti, non uno spostato a caso. Solo su desktop: sotto i 901px la
   navigazione e' gia' la barra in basso, nell'ordine giusto per posizione
   nel DOM, e non deve ricevere nessun order esplicito. Il foglio originale
   non viene toccato: questo arriva dopo nella cascata e vince senza
   !important. */
@media (min-width: 901px) {
  header.qk-testata { order: 0 }
  #nav { order: 1 }
  main { order: 2 }
  #player { order: 3 }
}

/* ------------------------------------------------------------------
   Termina ascolto.

   Non ridisegna il lettore: prende le misure dai suoi fratelli in
   #transport e cambia solo cio' che il comando richiede. Quarantaquattro
   pixel pieni a tutte le misure -- lettore.css ne da' 40 ai pulsanti di
   trasporto e mobile.css 38, e per un comando che chiude una sessione il
   bersaglio minimo non si tratta.

   Specificita' 0,2,0 come '#transport #play': basta a battere
   '#transport button' senza !important, e non litiga con nessuna regola
   esistente, che nominano gli altri pulsanti per id.

   Su telefono resta visibile anche fuori dalla vista "ora": mobile.css
   nasconde prev/next/±15 elencandoli per id, e #stop non e' in
   quell'elenco. Il comando e' quindi sempre a un tocco, da qualunque
   schermata.
   ------------------------------------------------------------------ */
#transport #stop {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ink2, #A79DB8);
}
@media (hover: hover) {
  #transport #stop:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--ink, #F2EFE9) }
}
#transport #stop:focus-visible {
  outline: 3px solid #E8B44A;
  outline-offset: 2px;
}

/* La barra in basso non si copre MAI. #sugg (i suggerimenti della ricerca)
   e' position:absolute con z-index:5 e finiva sopra #nav, che non ne aveva
   nessuno: aperta la ricerca, i quattro bottoni diventavano intoccabili.
   Trovato da prove/rotte.py, che non riusciva piu' a cambiare vista.
   I suggerimenti sono un pannello della ricerca, non un velo sopra la
   navigazione. */
body[data-ricerca="aperta"] #nav { position: relative; z-index: 6 }