/* Attesa di pagina col logo — solo per attese di pagina intera o di scheda,
   mai per i piccoli "Loading…" dentro liste e riquadri (Dorian, 11/9/2026).
   Sta in un file suo, caricato nell'<head>: api.js arriva in fondo alla
   pagina, e uno stile iniettato da lì lascerebbe il logo senza stile per
   un istante.

   Due usi:
   1. il contenitore da nascondere prende .citt-loading, e dentro gli si
      mette <div class="citt-loader">…</div>. Togliendo la classe il loader
      sparisce e il contenuto compare già pieno (Settings, The Study…);
   2. un elemento solo, .citt-page-loader, al posto della pagina o della
      lista: lo si nasconde quando i dati arrivano, oppure gli si scrive
      dentro il messaggio d'errore (le pagine di dettaglio, gli indici).
   3. .citt-wait su un elemento che serve anche da stato vuoto o d'errore:
      ne nasconde il contenuto e mostra il logo finché la classe non viene
      tolta (le schede di The Study).
   L'<img> ha width/height anche nell'HTML: se questo file tardasse, il logo
   resta piccolo invece di comparire a 480px. */

.citt-loading > :not(.citt-loader) { display: none !important; }
.citt-loader { display: none; }
.citt-loading > .citt-loader, .citt-page-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; flex: 1; width: 100%; min-height: 70vh;
  font-size: 13px; color: var(--text-dim, #7a7870); text-align: center; line-height: 1.6;
  /* compare solo se l'attesa supera ~200 ms: su una connessione veloce un
     loader lampo sarebbe esso stesso un flash */
  opacity: 0; animation: cittLoaderIn .35s ease .2s forwards;
}
.citt-page-loader.in-list { min-height: 45vh; }
/* sopra la tela dei grafi, che occupa tutto lo schermo sotto la barra */
.citt-page-loader.over-canvas {
  position: fixed; top: var(--tb-h, 0); left: 0; right: 0; bottom: 0;
  min-height: 0; width: auto; pointer-events: none; z-index: 4;
}
.citt-wait { display: flex !important; align-items: center; justify-content: center; min-height: 45vh; }
.citt-wait > * { display: none !important; }
.citt-wait::before {
  content: ''; width: 44px; height: 44px;
  background: url(icons/logo-piccolo.svg) center / contain no-repeat;
  opacity: 0; animation: cittLoaderIn .35s ease .2s forwards, cittLoaderBreath 2.4s ease-in-out .55s infinite;
}
.citt-loader img, .citt-page-loader img {
  width: 44px; height: 44px;
  animation: cittLoaderBreath 2.4s ease-in-out infinite;
}
.citt-loader-err {
  font-size: 12px; color: var(--text-dim, #7a7870); text-align: center; line-height: 1.6;
}
.citt-loader-err a { color: var(--gold, #e8b84b); text-decoration: none; }

@keyframes cittLoaderIn { to { opacity: 1; } }
@keyframes cittLoaderBreath {
  0%, 100% { opacity: .35; filter: drop-shadow(0 0 0 rgba(232,184,75,0)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 10px rgba(232,184,75,.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .citt-loader img, .citt-page-loader img, .citt-wait::before { animation: none; opacity: .7; }
}