/* IL TELEFONO */
/* ------------------------------------------------ */
/* Solo scavalcamenti, come telefono.css della vetrina: qui c'e'
   soltanto cio' che sul piccolo va ripensato, non ricopiato.

   Le due soglie sono quelle del sito, 600 e 900. L'export ne aveva
   una sola, a 760px, e non era nemmeno in CSS: era una lettura di
   window.innerWidth rifatta a ogni resize, da cui il codice
   ricalcolava a mano padding, corpi e spaziature dei filtri. Qui il
   listener non esiste.

   Il grosso del lavoro l'hanno gia' fatto i clamp() e le griglie a
   auto-fit: sotto ci sono le poche cose che non bastavano. */


/* FINO A 899px: SENZA LA NAVIGAZIONE A PILLOLA */
/* ------------------------------------------------ */

@media (max-width: 899px) {
  /* La barra in alto perde le quattro schede e resta con il marchio
     e l'avatar: il logo puo' prendersi lo spazio che avanza. */
  .app-barra__interno {
    justify-content: space-between;
  }

  /* La tendina del profilo non deve uscire dallo schermo a destra
     quando la finestra e' stretta quanto la tendina stessa. */
  .app-profilo__tendina {
    min-width: min(236px, calc(100vw - var(--sp-8)));
  }
}


/* FINO A 599px: IL TELEFONO VERO */
/* ------------------------------------------------ */

@media (max-width: 599px) {
  /* Titolo e comando di ordinamento su due righe: affiancati, il
     gruppo dei due segmenti schiaccia il titolo a poche lettere. */
  .app-testa--riga {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-segmenti {
    width: 100%;
  }

  .app-segmento {
    flex: 1;
  }

  /* Il conteggio va sotto le pastiglie invece di stare in coda
     all'ultima: in fondo a una riga di pastiglie che vanno a capo
     finiva in posti imprevedibili. */
  .app-pastiglie .app-esito {
    width: 100%;
    margin-left: 0;
  }

  /* IL PIANO */
  /* Meno respiro ai lati, e la colonna della percentuale si stringe:
     sono trentotto pixel tolti al titolo, che a questa larghezza
     conta. */
  .piano__testa {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .piano__lato {
    width: 30px;
  }

  .piano__dettaglio {
    padding-right: var(--sp-3);
    padding-left: var(--sp-3);
  }

  /* Le due cifre sotto la barra vanno a capo invece di comprimersi:
     "Completato 10.000 € di 20.000 €" e i grammi non stanno insieme
     su trecentonovanta pixel senza diventare puntini di sospensione. */
  .piano__cifre {
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
  }

  .piano__versato {
    flex: 1 1 100%;
  }

  .piano__movimento {
    padding: var(--sp-3);
  }

  /* IL DOCUMENTO */
  /* Il titolo prende lo spazio che serve: qui una riga in piu' costa
     meno di una parola spezzata. */
  .documento {
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .documento__segno {
    width: 38px;
    height: 38px;
  }

  .documenti {
    padding: var(--sp-1);
  }

  /* LE NEWS */
  .news-scheda {
    padding: var(--sp-5);
  }

  /* IL PROFILO */
  /* Il bottone dell'appello va a tutta larghezza: in coda a un testo
     che occupa tre righe, spaiato a destra, sembra un errore. */
  .profilo-appello__azione,
  .profilo-coda .profilo-appello__azione {
    width: 100%;
    justify-content: center;
  }

  .profilo-sezioni {
    width: 100%;
  }

  .profilo-sezione {
    flex: 1;
    justify-content: center;
  }

  /* Salva e Annulla affiancati riempiono la riga invece di lasciare
     un vuoto a destra. */
  .profilo-azioni {
    flex-wrap: nowrap;
  }

  .profilo-salva,
  .profilo-annulla {
    flex: 1;
    padding: 0 var(--sp-3);
  }

  /* LO STATO VUOTO */
  .app-vuoto {
    padding: var(--sp-6) var(--sp-4);
  }
}


/* SENZA IL PUNTATORE */
/* ------------------------------------------------ */
/* Su uno schermo che si tocca il passaggio del puntatore non esiste:
   dopo un tocco lo stato di hover resta impresso, e sembra che
   l'elemento sia rimasto selezionato.

   Il valore a riposo va riscritto per esteso e non messo a inherit:
   inherit prenderebbe il fondo del contenitore, che non e' quello che
   questi elementi hanno quando nessuno li tocca. */

@media (hover: none), (pointer: coarse) {
  .documento:hover,
  .piano__testa:hover,
  .app-profilo__voce:hover,
  .piano__tutti:hover {
    background: none;
  }

  .app-ordina:hover,
  .app-vuoto__azzera:hover,
  .profilo-appello__azione:hover,
  .profilo-annulla:hover,
  .app-azzera:hover,
  .operatore-via:hover,
  .rubrica:hover {
    background: var(--superficie-chiara);
  }

  .app-ordina:hover {
    border-color: var(--bordo-su-chiaro);
  }

  .rubrica:hover {
    border-color: var(--bordo-su-chiaro-tenue);
    transform: none;
  }

  /* Le due che a riposo sono scure vanno rimesse scure, non chiare. */
  .operatore-via--scura:hover,
  .rubrica--attiva:hover {
    background: var(--fondo-scuro);
  }

  .rubrica--attiva:hover {
    border-color: var(--fondo-scuro);
  }
}