/* 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 L'ISOLA IN ALTO */
/* ------------------------------------------------ */
/* Qui c'erano due regole, e non ci sono piu' perche' non hanno piu'
   un bersaglio: la barra in alto che si riorganizzava senza le quattro
   schede, e la tendina del profilo che non doveva uscire dallo schermo
   a destra. Sotto i 900 pixel la barra in alto non esiste e la tendina
   nemmeno — l'avatar e' la quinta voce dell'isola in basso e porta
   dritto al profilo. Vale la pena scriverlo invece di lasciare il
   vuoto: sono due scavalcamenti che qualcuno potrebbe rimettere. */

@media (max-width: 899px) {
  /* Lo spazio che il segnalibro si prende in alto a destra. E' fuori
     dal flusso, quindi non lo tiene lontano da se': senza questa riga
     un titolo lungo gli finisce sotto, e ci finisce in silenzio,
     perche' due elementi sovrapposti non fanno errori.

     Centoquaranta pixel: il logo alto 22 e' largo 83 — sta in un
     rapporto di 480 a 127 — piu' i ventiquattro di riempimento a
     sinistra della fascia, i sedici a destra e un respiro. */
  .app-titolo {
    padding-right: 140px;
  }

  /* Su Oro il segnalibro non c'e', quindi il titolo si riprende la
     riga intera: «Ciao Marco» e' corto, ma un riempimento che tiene
     lontano un elemento inesistente e' un pixel che nessuno sa
     spiegare l'anno dopo. */
  .app:has(#oro:target) .app-titolo,
  .app:not(:has(.app-vista:target)) .app-titolo {
    padding-right: 0;
  }
}


/* 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;
  }

  /* La seconda meta' del sommario dell'operatore su una riga sua. Il
     punto in cui spezzare non e' dove finisce lo spazio: e' dopo i
     due punti, dove finisce la prima affermazione. */
  .app-sommario__seguito {
    display: block;
  }

  /* IL PATRIMONIO */
  /* Il marchio accanto ai grammi torna alla misura che ci sta. Su
     schermo largo e' 1,2em con quaranta pixel di stacco; qui il
     pannello ha 294 pixel di larghezza interna, e a quelle misure il
     marchio va a capo — non si rompe niente, ma una riga in piu' per
     un marchio costa piu' di quanto renda. Un em e trentadue pixel
     stanno accanto alla cifra, misurato. */
  .patrimonio__riga-grammi {
    column-gap: var(--sp-8);
  }

  .patrimonio__marchio {
    height: 1em;
  }

  /* IL PIANO */
  /* Meno respiro ai lati. La regola che stringeva .piano__lato a 30
     pixel non c'e' piu': quella colonna e' sparita quando la
     percentuale e' salita sopra la barra, e adesso il titolo ha
     tutta la riga. */
  .piano__testa {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .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 */
  /* Etichetta a sinistra e valore a destra, sulla stessa riga, con una
     linea tenue fra un campo e l'altro. Erano etichetta sopra e valore
     sotto: la sola scheda Anagrafica occupava circa seicento pixel per
     sei campi, cioe' due schermate e mezza di telefono per sei righe
     di testo.

     Il valore si allinea a destra e puo' andare a capo: un indirizzo
     e un codice fiscale non stanno in mezza riga, e troncarli sarebbe
     peggio che mandarli a capo. */
  .profilo-riga {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--bordo-su-chiaro-tenue);
  }

  .profilo-righe > .profilo-riga:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .profilo-riga__voce {
    flex: none;
  }

  .profilo-riga__valore {
    margin-top: 0;
    text-align: right;
  }

  /* 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);
  }
}


/* I BERSAGLI DA TOCCARE */
/* ------------------------------------------------ */
/* Pastiglie, segmenti e azzeramenti sono alti 34, 34 e 36 pixel, ed e'
   la misura giusta: piu' alti diventerebbero pulsanti, e non lo sono
   — dicono «sto guardando questi», non «premi qui». Ma un dito ha
   bisogno di 44.

   I due requisiti non sono in conflitto se si separa cio' che si VEDE
   da cio' che si TOCCA. Uno pseudo-elemento che deborda sopra e sotto
   allarga l'area sensibile senza spostare un pixel di quello che si
   disegna. E' la tecnica standard, e la ragione per cui esiste e'
   esattamente questa.

   Solo qui e non anche su schermo largo: con un puntatore 34 pixel si
   colpiscono senza pensarci, e su schermo largo le pastiglie sono
   vicine fra loro — aree invisibili che si sovrappongono ruberebbero
   i clic alla vicina. */

@media (max-width: 899px) {
  .app-pastiglia,
  .app-segmento,
  .app-azzera,
  .app-vuoto__azzera,
  .profilo-sezione {
    position: relative;
  }

  .app-pastiglia::after,
  .app-segmento::after,
  .app-azzera::after,
  .app-vuoto__azzera::after,
  .profilo-sezione::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 0;
    bottom: -5px;
    left: 0;
  }
}


/* 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;
  }

  /* Quella che a riposo e' scura va rimessa scura, non chiara. Erano
     due: la tessera bruna del telefono non c'e' piu', il numero ha il
     suo pannello. */
  .rubrica--attiva:hover {
    background: var(--fondo-scuro);
  }

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