/* IL GUSCIO DELL'AREA CLIENTI */
/* ------------------------------------------------ */
/* L'impianto dell'applicazione: la barra in alto, le due navigazioni,
   il menu del profilo, la fascia che dichiara la dimostrazione, e la
   pagina che si vede quando l'interruttore e' spento.

   Nessun valore letterale di colore, ombra, raggio o durata: solo
   var(). Le uniche misure scritte per esteso sono strutturali — una
   larghezza massima, l'altezza di un bottone — e quelle sono qui
   perche' non appartengono al tema del sito.

   L'export otteneva tutto questo con 353 attributi di stile e un
   listener su resize che ricalcolava i padding a mano. Qui il
   telefono e' CSS, sulle due soglie del sito. */


/* MISURE PROPRIE DELL'APPLICAZIONE */
/* ------------------------------------------------ */
/* La colonna dell'app e' piu' stretta di quella della vetrina: e'
   un'interfaccia da leggere, non una pagina da percorrere. */

.app {

  /* --- Le due larghezze --- */
  /* Novecentosessanta, deciso dal proprietario il 3 settembre 2026, e
     non e' un ritocco: era 1180, e a 1180 la pagina si legge come un
     sito largo, non come un'applicazione. Un cruscotto che si tiene
     stretto sembra un prodotto; uno che si allarga fin dove arriva
     lo schermo sembra una pagina.

     Il prezzo lo paga una cosa sola, la griglia delle news: a 1180 le
     tre colonne erano da 356 pixel, qui sarebbero 304 — troppo poco
     per un titolo di articolo. Quindi a 960 le news passano a DUE
     colonne da 468, che e' piu' larga di quanto fossero prima. Il
     dettaglio del piano su due colonne regge senza cambiare niente:
     456 per colonna contro i 566 di prima.

     La seconda misura e' la colonna di prosa: una riga comoda sta fra
     75 e 85 caratteri, in un sans geometrico un carattere e' largo
     circa mezzo corpo, quindi a 18 pixel 85 caratteri fanno 765 e 75
     ne fanno 675. Settecento e' al centro, e adesso e' quasi tutta la
     larghezza disponibile — il che va bene: un articolo dentro
     l'applicazione non ha bisogno di margini larghi. */
  --app-larghezza: 960px;
  --app-lettura: 700px;

  /* Il margine laterale. Trentadue pixel da 800 in su, sedici sul
     telefono piu' stretto: sotto i 400 pixel un margine di trentadue
     per lato si mangia il sedici per cento della riga. */
  --app-gutter: clamp(16px, 4vw, 32px);

  /* --- Le due isole --- */
  /* Quella in alto e' la stessa forma della barra della vetrina, e
     non per somiglianza: il cliente che preme «Login» sul sito e
     arriva qui deve riconoscere di essere ancora in casa. Prima erano
     due prodotti diversi — la' un oggetto flottante in vetro, qui una
     fascia bruna piena alta ottantuno pixel con dentro una pillola
     dorata che luccicava ogni sei secondi.

     Quella in basso ha lo stacco e il raggio dell'export, tarati
     perche' il pollice ci arrivi senza spostare la mano. */
  --app-isola-alta: 56px;
  --app-isola-bassa-alta: 60px;
  --app-isola-stacco: var(--sp-4);
  --app-isola-stacco-basso: 12px;
  --app-raggio-isola: 26px;

  /* Il ritiro e il ritorno non durano uguale, ed e' voluto: il ritiro
     lo decide la pagina, il ritorno risponde a un'intenzione — si e'
     risalito apposta — e deve sembrare immediato. */
  --app-ritiro: .26s;
  --app-ritorno: .18s;

  /* --- I raggi, per ruolo --- */
  /* Il raggio uniforme su ogni superficie e' uno dei motivi per cui
     l'interfaccia di prima sembrava generica: una pastiglia, una card
     e un pannello a tutta larghezza non si arrotondano uguale. Nomi
     di ruolo e non di taglia, cosi' chi scrive una regola sa che cosa
     sta arrotondando invece di indovinare fra «m» e «l». */
  --app-raggio-campo: 8px;
  --app-raggio-card: 14px;
  --app-raggio-pannello: 22px;

  /* --- La scala tipografica --- */
  /* Sette gradini: 12 14 16 18 22 32 48. Ridichiara i nomi del tema
     invece di aggiungerne di nuovi, cosi' le regole gia' scritte si
     spostano tutte insieme; e la vetrina non si muove di un pixel,
     perche' la ridichiarazione sta su .app e non su :root.

     Il pavimento e' misurato, non stimato. Il 3 settembre 2026 tre
     classi scrivevano a dieci pixel IN MAIUSCOLO SPAZIATO, che a
     quella misura e' la combinazione meno leggibile che esista: un
     rapporto di contrasto conforme non salva un testo che una persona
     di sessant'anni non vede. Da qui: niente sotto i 12. */
  --testo-xxs: 12px;
  --testo-xs: 12px;
  --testo-s: 14px;
  --testo-m: 16px;
  --testo-l: 18px;
  --testo-xl: 22px;
  --testo-xxl: 32px;

  /* Il gradino da 48 ha un nome di ruolo e non di taglia perche' e'
     ammesso in un punto solo di tutta l'applicazione: i grammi in
     cima alla dashboard. E' l'unico elemento fuori scala che la
     schermata puo' avere. */
  --testo-patrimonio: 48px;

  /* Il taglio 300 di Jost su un'etichetta di quattordici pixel non e'
     eleganza: e' un testo che si assottiglia fino a sparire. Dentro
     l'applicazione il leggero e' 400. Non tocca il corpo degli
     articoli letti qui dentro, che arriva da pagine.css e non usa
     questo nome. */
  --peso-leggero: 400;

  min-height: 100vh;
  background: var(--fondo-chiaro);
}


/* I SIMBOLI */
/* ------------------------------------------------ */
/* La misura arriva da chi li ospita, scrivendo --simbolo. Cosi' lo
   stesso tracciato serve la barra a 21px e le righe a 20. */

.simbolo {
  flex: none;
  width: var(--simbolo, 1.35em);
  height: var(--simbolo, 1.35em);
  fill: currentColor;
}


/* IL BOTTONE DELL'APPLICAZIONE */
/* ------------------------------------------------ */
/* Non riusa .bottone della vetrina: quello vive in componenti.css,
   che il guscio non carica. Stessi token, forma dell'export. */

/* Quarantotto pixel sul telefono, quarantaquattro da 900 in su: sul
   piccolo il pulsante e' un bersaglio per un pollice, sul grande per
   un puntatore, e cinquantaquattro erano troppi per entrambi.

   Raggio 8 come i campi e le pastiglie, non pieno. Il raggio pieno
   resta agli avatar e alle isole. */
.app-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-8);
  border: none;
  border-radius: var(--app-raggio-campo);
  font-family: inherit;
  font-size: var(--testo-s);
  font-weight: var(--peso-forte);
  cursor: pointer;
}

@media (min-width: 900px) {
  .app-bottone {
    min-height: 44px;
  }
}

/* Qui girava il riflesso: la stessa sequenza a sei secondi che
   attraversa il testo dorato della vetrina, ereditata dall'export.
   Tolta il 3 settembre 2026, e la ragione vale la pena di scriverla:
   su una vetrina un oro che luccica invita, in un'applicazione dove
   si guardano i propri risparmi lo stesso oro sembra una promessa.
   Nelle applicazioni bancarie contemporanee non luccica niente.

   Poi e' andato via anche il gradiente. C'era rimasto un dislivello
   di due fermate sull'asse verticale, e su un pulsante largo quanto
   la pagina bastava a farlo sembrare un tasto lucido di plastica: un
   gradiente che si vede su una superficie grande e' un effetto, non
   un materiale. Tinta unita, la stessa dei fregi e delle barre.

   Il testo e' bruno scuro su oro pieno, misurato nella pagina a
   6,89:1 — mezzo mondo sopra il minimo di 4,5 — e legge come una
   targa incisa, non come un pulsante che chiede di essere premuto.
   E l'ombra e' quella
   dell'oggetto, non --ombra-passaggio, che e' un alone dorato
   acceso. */
.app-bottone--oro {
  background: var(--accento);
  box-shadow: var(--ombra-scheda-app);
  color: var(--testo-su-chiaro);
}

.app-bottone--scuro {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
  box-shadow: var(--ombra-card-scura);
}

.app-bottone--largo {
  width: 100%;
}


/* L'ISOLA IN ALTO */
/* ------------------------------------------------ */
/* Da 900px in su. Sotto non esiste: sul telefono la fascia in alto e'
   sparita del tutto — erano settantadue pixel su ottocentoquarantatre
   che contenevano un logo e un avatar, cioe' nessuna informazione, e
   mettevano l'unica via per il profilo e per l'uscita nell'angolo in
   alto a destra, il punto piu' lontano dal pollice.

   Fixed e non sticky: una barra che si ritrae deve poter uscire dal
   flusso senza lasciare un buco dove stava. */

.app-isola {
  position: fixed;
  top: var(--app-isola-stacco);
  left: 50%;
  z-index: var(--z-testata);
  display: none;
  width: min(var(--app-larghezza), calc(100% - 2 * var(--app-gutter)));
  transform: translateX(-50%);
  transition: transform var(--app-ritorno) var(--curva-uscita),
              opacity var(--app-ritorno) var(--curva-uscita);
}

/* Il ritiro e' una traslazione e non una dissolvenza: la barra
   scivola fuori dal bordo su cui e' ancorata. L'opacita' accompagna,
   non guida. La durata piu' lunga sta qui e non nella regola sopra,
   perche' una transizione prende i tempi dello stato di ARRIVO. */
.app-isola[data-nascosta] {
  opacity: 0;
  transform: translateX(-50%) translateY(-140px);
  pointer-events: none;
  transition-duration: var(--app-ritiro);
}

.app-isola__interno {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw, 24px);
  height: var(--app-isola-alta);
  padding: 0 var(--sp-2) 0 var(--sp-5);
  border-radius: var(--raggio-pillola);
  box-shadow: var(--ombra-isola-app);
}

/* Il vetro sta su uno strato SOTTO, non sull'isola stessa, ed e' la
   stessa ragione scritta in struttura.css per la barra della vetrina:
   un elemento con backdrop-filter diventa la radice di sfondo per
   tutto cio' che contiene, e un suo discendente che chiede a sua
   volta una sfocatura finisce per sfocare il vuoto. Con la sfocatura
   sull'isola, la tendina del profilo restava semitrasparente senza
   sfocare niente, e sopra un testo diventava illeggibile. */
.app-isola__interno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vetro-scuro-fitto);
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
}

/* Dove la sfocatura non esiste il vetro diventa quasi opaco. Non e'
   un ripiego visibile: nessuno si accorge della differenza, mentre un
   fondo al 72 per cento senza niente dietro che lo sfochi lascia
   passare il testo della pagina sotto le voci del menu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-isola__interno::before {
    background: rgb(var(--rgb-fondo-scuro) / .96);
  }
}

/* Il marchio e' dentro un collegamento verso il sito. Il contenitore
   e' un elemento in piu' nella riga flessibile, quindi si prende lui
   il `flex: none` e resta alto quanto l'immagine: senza `display:
   flex` il collegamento sarebbe alto come una riga di testo e la sua
   area cliccabile sborderebbe sotto il logo. */
/* Quarantaquattro pixel di altezza anche se il logo ne e' alto trenta:
   e' un collegamento, quindi un bersaglio, e un bersaglio alto trenta
   e' sotto il minimo. L'immagine resta della sua misura e si centra
   dentro. */
.app-barra__casa {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: opacity var(--durata-media) var(--curva-standard);
}

.app-barra__casa:hover {
  opacity: .78;
}

.app-barra__logo {
  display: block;
  height: 30px;
  width: auto;
}


/* IL MARCHIO CHE SCORRE, SUL TELEFONO */
/* ------------------------------------------------ */
/* Prima conseguenza dell'aver tolto la fascia in alto: il marchio non
   e' piu' sempre in vista. Torna qui, in cima al contenuto e dentro
   il flusso, quindi scorre via alla prima passata — e non serve
   riportarlo, perche' chi e' dentro l'applicazione sa dov'e'.

   Sta sulla RIGA DEL TITOLO, a destra, e non su una riga sua: una
   riga in piu' solo per un logo costava cinquantasei pixel della
   prima schermata, ed era esattamente il difetto per cui la fascia in
   alto e' stata tolta.

   Ci arriva con position: absolute e non entrando dentro .app-testa,
   perche' i titoli stanno dentro le sei viste e il marchio e' uno
   solo: metterlo nel flusso vorrebbe dire ripeterlo sei volte. Lo
   stacco dall'alto e' lo stesso riempimento di .app-corpo, cosi' il
   suo riquadro comincia dove comincia la riga del titolo, e
   align-items lo centra dentro. */

/* IL SEGNALIBRO.
   L'inchiostro del marchio e' oro, e oro su crema misura 2,11:1 —
   il rapporto piu' basso di tutta l'applicazione. Su un marchio non
   c'e' una regola che lo vieti, ma non si vedeva, ed e' l'unica cosa
   che dice a chi sta su una vista qualsiasi dove si trova.

   Invece di schiarirlo o ingrandirlo, gli si mette sotto il bruno:
   oro su bruno misura 6,9:1. La forma e' una fascia che ENTRA DAL
   BORDO DESTRO e non si vede dove finisce, con l'estremita' sinistra
   tagliata a punta come la coda di un segnalibro. Uscire dallo
   schermo e' cio' che la fa sembrare attaccata alla pagina invece che
   appoggiata sopra — una targhetta staccata dal bordo sarebbe stata
   la stessa forma di tutte le altre card, cioe' sicura e anonima.

   Stessa trama metallica e stesso filo chiaro del pannello del
   patrimonio: quando questa applicazione dipinge il bruno, lo
   dipinge sempre allo stesso modo. */
.app-marchio {
  position: absolute;
  /* Sei pixel sopra il riempimento della colonna: la fascia e' alta
     40 e la riga del titolo 28, e questo la centra su di essa. */
  top: calc(clamp(18px, 3.4vw, 30px) - 6px);
  /* Zero, e vuol dire il bordo dello schermo. Qui c'era un valore
     negativo, scritto credendo che un elemento fuori dal flusso si
     posizionasse dentro il riempimento del contenitore: non e' cosi',
     il riferimento e' il riquadro che il riempimento lo COMPRENDE.
     La fascia sbordava quindi di sedici pixel oltre lo schermo, e a
     uscire era proprio il suo riempimento destro: il logo finiva
     esatto sul bordo, senza un pixel di respiro, e sembrava tagliato.
     Misurato: fascia 283-406 su una finestra da 390, logo a 390. */
  right: 0;
  z-index: var(--z-contenuto);
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--app-gutter) 0 var(--sp-6);
  background: var(--grad-trama-metallo), var(--fondo-scuro);
  box-shadow: var(--filo-interno-chiaro);
  /* Un rettangolo con i due angoli di sinistra appena smussati.

     Ci sono passate due forme sbagliate prima di questa. La punta a
     triangolo stonava perche' in questa interfaccia non esiste un
     angolo vivo — le card sono a 14, i pannelli a 22, le isole e gli
     avatar sono pieni — e una punta acuta si leggeva come un pezzo di
     un altro progetto. Il capo tondo pieno andava troppo dall'altra
     parte: diventava una linguetta, cioe' una cosa da tirare.

     Otto pixel su quaranta di altezza: si vede che non e' un angolo
     retto e non si vede altro. A destra resta squadrato perche' li'
     non finisce, esce dallo schermo. */
  border-radius: var(--app-raggio-campo) 0 0 var(--app-raggio-campo);
}

/* Sulla dashboard no: li' il marchio e' gia' scritto grande accanto
   ai grammi, a mezzo centimetro di distanza, e due volte la stessa
   cosa sulla stessa schermata si legge come una svista.

   Le due righe sono la stessa coppia che accende «Oro» nella barra —
   il frammento, oppure nessun frammento, che vuol dire la prima
   vista — quindi non e' un'eccezione da ricordare: e' la stessa
   meccanica scritta una seconda volta. */
.app:has(#oro:target) .app-marchio,
.app:not(:has(.app-vista:target)) .app-marchio {
  display: none;
}

.app-marchio__logo {
  display: block;
  height: 22px;
  width: auto;
}


/* LA FASCIA DI RITORNO */
/* ------------------------------------------------ */
/* Seconda conseguenza dell'aver tolto la fascia in alto. Questa
   striscia stava DENTRO la testata, e il commento di app.html ne
   spiegava la ragione: essendo dentro una barra gia' appiccicata,
   restava in vista senza dover sapere quanto quella barra fosse
   alta — e la testata cambiava altezza al variare della larghezza.

   Tolta la testata sul telefono, la striscia sta in cima alla vista
   di lettura e si appiccica da sola a top: 0. Puo' farlo proprio
   perche' sopra di lei non c'e' piu' niente di fisso.

   Su schermo largo l'isola galleggia sopra il contenuto, quindi lo
   stacco lo scrive la media query in fondo al file. */

.app-ritorno {
  --simbolo: 16px;
  position: sticky;
  top: 0;
  z-index: var(--z-sollevato);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-scheda-app);
  transition: transform var(--app-ritorno) var(--curva-uscita),
              opacity var(--app-ritorno) var(--curva-uscita);
}

/* Si ritrae come le due isole, e lo decide lo stesso script: la
   fascia porta data-isola, quindi isola.js la trova insieme a loro e
   le mette lo stesso attributo. Mentre si legge un articolo questa
   fascia E' la navigazione, e due oggetti fissi in cima che si
   comportano in modo diverso sono la cosa che fa sembrare rotta
   un'interfaccia.

   Centoquaranta pixel come l'isola, e non «meno la propria altezza»:
   sul telefono la fascia e' appiccicata a filo del bordo e le
   basterebbe la propria altezza, ma da 900 in su e' appiccicata
   ottanta pixel piu' in basso, sotto l'isola, e li' la propria
   altezza non la porterebbe fuori dallo schermo. Un valore solo che
   basta a tutte e due, con l'opacita' che accompagna. */
.app-ritorno[data-nascosta] {
  opacity: 0;
  transform: translateY(-140px);
  pointer-events: none;
  transition-duration: var(--app-ritiro);
}

.app-ritorno__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
}

.app-ritorno__voce:hover {
  color: var(--accento-su-chiaro-forte);
}

/* La freccia e' quella in avanti, rovesciata. Un tracciato all'indietro
   non c'e' nel repertorio, e specchiarne uno e' esattamente cio' che
   una freccia all'indietro e'. */
.app-ritorno__segno {
  transform: scaleX(-1);
}

/* Il conteggio dell'elenco a cui si torna. Non si accorcia e non si
   nasconde sul telefono: e' cio' che rende il pulsante una promessa
   precisa — non «torna indietro», ma «torna a quei quindici». Se lo
   spazio non basta si taglia con i puntini, che dicono comunque da
   quale rubrica si e' partiti. */
.app-ritorno__filtro {
  overflow: hidden;
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* LE QUATTRO VOCI, E IL FILO CHE SCORRE */
/* ------------------------------------------------ */
/* Da 900px in su. Qui c'era una pillola dorata piena, con il
   gradiente a cinque fermate della vetrina e un'ombra ad alone:
   dentro un'isola in vetro era la cosa piu' pesante dello schermo.

   L'elemento che la disegnava non e' stato buttato — e' diventato un
   filo d'oro di due pixel sotto l'etichetta. Scorre da una voce
   all'altra con la stessa transizione e le stesse quattro regole di
   :has(:target) in fondo al file, quindi la navigazione continua a
   funzionare per intero a JavaScript spento. Stessa meccanica, molto
   meno rumore. */

.app-schede {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: none;
  align-self: stretch;
}

.app-schede__pillola {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% / 4);
  height: 2px;
  border-radius: var(--raggio-pillola);
  background: var(--accento);
  /* Posizione di partenza: la prima scheda. Le altre tre le decidono
     le regole :has(:target) in fondo a questo file. Qui c'era
     `var(--pillola-x, 0)`, residuo di quando a spostare la pillola
     era JavaScript: nessun file scriveva piu' quella variabile, e il
     valore giusto usciva dalla riserva invece che da una decisione.
     Una leva che non comanda niente e' peggio di nessuna leva. */
  transform: translateX(0);
  transition: transform var(--durata-media) var(--curva-standard),
              opacity var(--durata-rapida) var(--curva-standard);
}

.app-scheda {
  --simbolo: 21px;
  position: relative;
  z-index: var(--z-contenuto);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 100%;
  color: var(--testo-su-scuro-attenuato);
  transition: color var(--durata-media) var(--curva-standard);
}

.app-scheda__nome {
  overflow: hidden;
  font-size: var(--testo-s);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-scheda:hover {
  color: var(--testo-su-scuro);
}


/* IL MENU DEL PROFILO */
/* ------------------------------------------------ */
/* Un <details> nativo, come il contatto della vetrina e' un <dialog>
   nativo: si apre, si chiude e si gira da tastiera senza script. */

/* Vive solo dentro l'isola in alto, quindi solo da 900px in su: sul
   telefono l'avatar e' la quinta voce dell'isola in basso e non apre
   niente, porta dritto al profilo. Una tendina di tre voci su un
   telefono e' un passaggio in piu' che non porta informazione. */
.app-profilo {
  position: relative;
  flex: none;
  display: none;
  margin-left: auto;
}

.app-profilo__apri {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-2) 0 var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--raggio-pillola);
  cursor: pointer;
  list-style: none;
  transition: background var(--durata-rapida) var(--curva-standard),
              border-color var(--durata-rapida) var(--curva-standard);
}

/* Safari disegna ancora il triangolino con questo pseudo-elemento. */
.app-profilo__apri::-webkit-details-marker {
  display: none;
}

.app-profilo__apri:hover,
.app-profilo[open] .app-profilo__apri {
  background: var(--velo-chiaro);
  border-color: var(--bordo-su-chiaro-tenue);
}

.app-profilo__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bordo-su-chiaro-forte);
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-tenue);
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
}

.app-profilo__gallone {
  color: var(--testo-su-scuro-tenue);
  transition: transform var(--durata-rapida) var(--curva-standard);
}

.app-profilo[open] .app-profilo__gallone {
  transform: rotate(180deg);
}

/* La tendina e' lo STESSO VETRO dell'isola da cui pende, non un
   pannello chiaro appoggiato sopra: deve leggersi come la barra che
   si allunga, non come un secondo oggetto. Era avorio pieno, e nel
   mezzo di una barra scura sembrava una finestra di un'altra
   applicazione.

   La sfocatura puo' stare QUI, direttamente sulla tendina, e non su
   uno strato sotto: la ragione e' la stessa per cui il vetro
   dell'isola sta su ::before invece che sull'isola. Un elemento con
   backdrop-filter diventa la radice di sfondo per tutto cio' che
   contiene — ma non per i suoi fratelli. La tendina e' dentro
   .app-profilo, che e' figlio di .app-isola__interno e non del suo
   ::before: quindi non e' dentro nessuna radice di sfondo, e la sua
   sfocatura sfoca davvero la pagina che le passa sotto. */
.app-profilo__tendina {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  z-index: var(--z-sollevato);
  display: grid;
  gap: 2px;
  min-width: 236px;
  padding: var(--sp-2);
  border-radius: var(--raggio-m);
  background: var(--vetro-scuro-pannello);
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
  box-shadow: var(--ombra-isola-app);
  animation: entrata-breve var(--durata-rapida) var(--curva-standard) both;
  color: var(--testo-su-scuro);
}

/* Dove la sfocatura non c'e', il vetro diventa quasi opaco: un fondo
   al 72 per cento senza niente che lo sfochi lascerebbe leggere il
   testo della pagina attraverso le voci del menu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-profilo__tendina {
    background: rgb(var(--rgb-fondo-scuro) / .96);
  }
}

.app-profilo__chi {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--bordo-su-scuro-tenue);
}

.app-profilo__nome {
  color: var(--testo-su-scuro);
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
}

.app-profilo__email {
  color: var(--testo-su-scuro-tenue);
  font-size: var(--testo-s);
  font-weight: var(--peso-leggero);
}

.app-profilo__voce {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--raggio-s);
  color: var(--testo-su-scuro);
  font-size: var(--testo-m);
  transition: background var(--durata-rapida) var(--curva-standard);
}

.app-profilo__segno {
  color: var(--accento-tenue);
}

.app-profilo__voce:hover {
  background: var(--velo-chiaro);
  color: var(--testo-su-scuro);
}

/* Il rosso pieno su questo fondo non si legge: qui va la versione
   portata sul bruno, non il --allerta della vetrina. */
.app-profilo__voce--esci {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bordo-su-scuro-tenue);
  border-radius: var(--raggio-s);
  color: var(--allerta-su-scuro);
}

.app-profilo__voce--esci .app-profilo__segno {
  color: var(--allerta-su-scuro);
}

.app-profilo__voce--esci:hover {
  background: rgb(var(--rgb-allerta) / .3);
  color: var(--allerta-su-scuro);
}


/* LA COLONNA DEL CONTENUTO */
/* ------------------------------------------------ */

/* LA COLONNA, L'ISOLA E IL PIEDE HANNO LA STESSA LARGHEZZA
   ------------------------------------------------------
   Ed e' la cosa che qui era piu' sbagliata di tutte, perche' si vede
   senza saperla nominare: la barra era larga quanto lo schermo sopra
   un contenuto largo 1120, quindi i suoi bordi e i bordi delle card
   non cadevano sulla stessa verticale.

   La regola e' che il bordo dell'isola cada sul bordo della card. Il
   contenuto quindi si blocca a --app-larghezza PIU' i due margini,
   non a --app-larghezza: cosi' dentro il riempimento le card sono
   larghe esattamente 1180, che e' quanto e' larga l'isola.

   Da qui esce da sola la soglia dei 1244 pixel, che non e' scritta da
   nessuna parte: 1180 piu' 32 per lato. E' il punto esatto in cui il
   contenuto smetterebbe di toccare i bordi della finestra, e sopra
   quel punto la pagina e' identica su 1440, 1920, 2560 e 3440. */

.app-corpo {
  /* Il riferimento del marchio, che sul telefono e' appoggiato in
     alto a destra fuori dal flusso. Senza questa riga si
     aggancerebbe alla finestra e resterebbe fermo mentre la pagina
     scorre. */
  position: relative;
  max-width: calc(var(--app-larghezza) + 2 * var(--app-gutter));
  margin: 0 auto;
  padding: clamp(18px, 3.4vw, 30px) var(--app-gutter) var(--sp-10);
}


/* L'ISOLA IN BASSO, SUL TELEFONO */
/* ------------------------------------------------ */
/* Fino a 899px, ed e' l'unica navigazione che resta. Stesso vetro di
   quella in alto: sono due disposizioni dello stesso oggetto, non due
   oggetti.

   Nessun bordo su nessuna delle due. C'era un filo in
   --bordo-su-scuro-tenue, cioe' oro chiarissimo al 18 per cento, e
   sopra il vetro semitrasparente non leggeva come oro: leggeva come
   una riga bianca di contorno, che e' esattamente cio' che un oggetto
   in vetro non deve avere. A staccare l'isola dalla pagina bastano il
   fondo e l'ombra.

   Cinque voci e non quattro. La quinta e' l'avatar, che prima stava
   nell'angolo in alto a destra — il punto piu' lontano dal pollice su
   un telefono tenuto in una mano — ed era l'unica via per il profilo,
   la sicurezza e l'uscita. */

.app-isola-bassa {
  position: fixed;
  /* LO STESSO STACCO SU TRE LATI, e per questo e' scritto con lo
     stesso token: l'isola galleggia dentro una cornice uniforme,
     invece di stare vicina al bordo di sotto e lontana da quelli di
     fianco. Erano sedici pixel per lato, poi ventiquattro, poi
     trentadue contro i dodici di sotto; la differenza si vedeva.
     Allineati il 15 settembre 2026 su richiesta del proprietario.

     Su un telefono da 390 la barra passa da 326 a 366 pixel per
     cinque voci: 73 a testa invece di 65, e la voce piu' larga —
     «Documenti» a dieci pixel di corpo — ne misura 52. */
  left: var(--app-isola-stacco-basso);
  right: var(--app-isola-stacco-basso);
  bottom: calc(var(--app-isola-stacco-basso) + env(safe-area-inset-bottom));
  z-index: var(--z-testata);
  display: flex;
  transition: transform var(--app-ritorno) var(--curva-uscita),
              opacity var(--app-ritorno) var(--curva-uscita);
}

.app-isola-bassa[data-nascosta] {
  opacity: 0;
  transform: translateY(140px);
  pointer-events: none;
  transition-duration: var(--app-ritiro);
}

.app-isola-bassa__interno {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  height: var(--app-isola-bassa-alta);
  padding: 0 var(--sp-1);
  border-radius: var(--app-raggio-isola);
  box-shadow: var(--ombra-isola-app);
}

/* Stesso strato sotto, stessa ragione dell'isola in alto. */
.app-isola-bassa__interno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vetro-scuro-fitto);
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-isola-bassa__interno::before {
    background: rgb(var(--rgb-fondo-scuro) / .96);
  }
}

.app-scheda-bassa {
  --simbolo: 22px;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  color: var(--testo-su-scuro-attenuato);
  transition: color var(--durata-rapida) var(--curva-standard);
}

/* Dieci pixel, e sono l'unica eccezione al pavimento dei dodici. La
   ragione: questa non e' una scritta da leggere ma l'etichetta di
   un'icona, e il significato lo porta l'icona. Alzarla a dodici su
   cinque voci larghe settanta pixel manderebbe «Documenti» ai
   puntini di sospensione, che e' il contrario della leggibilita'. */
.app-scheda-bassa__nome {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il punto sotto l'etichetta al posto della pastiglia dorata piena:
   su un fondo semitrasparente quella pesava come un mattone. */
.app-scheda-bassa::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
  opacity: 0;
  transition: opacity var(--durata-rapida) var(--curva-standard);
}

/* La quinta voce. Il filo verticale la stacca dalle quattro sezioni
   perche' non e' una sezione: e' chi sei.

   LARGA QUANTO LE ALTRE, e non piu' stretta. Era `flex: none` con una
   larghezza fissa di 52 pixel, piu' un margine e un riempimento a
   SINISTRA e non a destra: fra la cella storta e la larghezza diversa
   dalle altre quattro, le iniziali finivano spostate verso il bordo
   destro dell'isola. Con cinque celle uguali e il contenuto centrato
   in ognuna, i cinque simboli cadono a distanze uguali e il primo e
   l'ultimo restano alla stessa distanza dai due bordi: non c'e' niente
   da tarare, e' la griglia che lo fa.

   Il filo resta un bordo di un pixel — mezzo pixel di spostamento,
   che non si vede — invece di un riempimento, che si vedeva. */
.app-scheda-bassa--profilo {
  border-left: 1px solid var(--bordo-su-scuro-tenue);
}

.app-scheda-bassa__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--raggio-cerchio);
  background: rgb(var(--rgb-accento) / .16);
  color: var(--accento-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-s);
  transition: border-color var(--durata-rapida) var(--curva-standard);
}


/* LA VOCE ATTIVA, SENZA JAVASCRIPT */
/* ------------------------------------------------ */
/* La vista in vista e' quella puntata dal frammento. Quando non ce
   n'e' nessuno vale la prima, e :not(:has(:target)) e' il modo di
   dirlo senza script. Anche il movimento della pillola e' CSS: cinque
   regole, una per destinazione. Nessuno script tocca la barra. */

/* La lettura di un articolo tiene accesa News: non e' una sesta
   destinazione, e' dove si finisce partendo da li'. Senza questa riga
   la barra si spegnerebbe tutta mentre si legge, e sembrerebbe di
   essere usciti dall'applicazione — che e' esattamente la cosa che la
   vista di lettura esiste per evitare. */
.app-scheda--attiva,
.app:has(#oro:target) [data-scheda="oro"],
.app:has(#movimenti:target) [data-scheda="oro"],
.app:not(:has(.app-vista:target)) [data-scheda="oro"],
.app:has(#documenti:target) [data-scheda="documenti"],
.app:has(#news:target) [data-scheda="news"],
.app:has(#lettura:target) [data-scheda="news"],
.app:has(#operatore:target) [data-scheda="operatore"] {
  color: var(--accento-tenue);
}

.app-scheda-bassa--attiva,
.app:has(#oro:target) [data-scheda-bassa="oro"],
.app:has(#movimenti:target) [data-scheda-bassa="oro"],
.app:not(:has(.app-vista:target)) [data-scheda-bassa="oro"],
.app:has(#documenti:target) [data-scheda-bassa="documenti"],
.app:has(#news:target) [data-scheda-bassa="news"],
.app:has(#lettura:target) [data-scheda-bassa="news"],
.app:has(#operatore:target) [data-scheda-bassa="operatore"] {
  color: var(--accento-tenue);
}

.app-scheda-bassa--attiva::after,
.app:has(#oro:target) [data-scheda-bassa="oro"]::after,
.app:has(#movimenti:target) [data-scheda-bassa="oro"]::after,
.app:not(:has(.app-vista:target)) [data-scheda-bassa="oro"]::after,
.app:has(#documenti:target) [data-scheda-bassa="documenti"]::after,
.app:has(#news:target) [data-scheda-bassa="news"]::after,
.app:has(#lettura:target) [data-scheda-bassa="news"]::after,
.app:has(#operatore:target) [data-scheda-bassa="operatore"]::after {
  opacity: 1;
}

/* L'avatar in fondo prende un anello d'oro invece del punto: e' gia'
   un cerchio, e un punto sotto un cerchio sono due segnali per la
   stessa cosa. Prima non aveva nessuno stato attivo, perche' non era
   una voce di navigazione — era una tendina in cima allo schermo. */
.app:has(#profilo:target) .app-scheda-bassa__iniziali,
.app:has(#sicurezza:target) .app-scheda-bassa__iniziali {
  border-color: var(--accento);
}


/* IL PIEDE */
/* ------------------------------------------------ */
/* Leggero, uguale in tutte le viste, e allineato alla stessa
   larghezza del contenuto e dell'isola: e' il terzo elemento che deve
   cadere sulla stessa verticale degli altri due.

   Su schermo largo e' una riga sola. Sul telefono si impila, e li' lo
   spazio in fondo deve lasciar respirare l'isola bassa, che e' fissa
   e coprirebbe «Torna al sito»: e' l'ultima riga della pagina, quindi
   e' proprio quella che l'isola nasconderebbe. */

.app-pie {
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.app-pie__interno {
  --simbolo: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  max-width: calc(var(--app-larghezza) + 2 * var(--app-gutter));
  margin: 0 auto;
  padding: var(--sp-6) var(--app-gutter)
           calc(var(--app-isola-bassa-alta)
              + var(--app-isola-stacco-basso)
              + env(safe-area-inset-bottom)
              + var(--sp-6));
  color: var(--testo-su-chiaro-tenue);
  font-size: var(--testo-xxs);
}

.app-pie__logo {
  display: block;
  height: 22px;
  width: auto;
}

.app-pie__garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
}

.app-pie__garanzia {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.app-pie__segno {
  color: var(--accento-su-chiaro);
}

/* Va a capo per scelta, non per esaurimento dello spazio. Il conto:
   marchio, tre garanzie e quattro voci legali fanno circa 1300 pixel
   a dodici di corpo, e la riga ne ha 1180 — quindi UNA riga sola non
   sta, a nessuna larghezza. Lasciato al caso, ad andare a capo era
   «Torna al sito», che restava solo in fondo a destra come se ci
   fosse finito per sbaglio.

   Con la base al cento per cento la rottura cade qui, e le due righe
   si leggono: chi siamo e che garanzie diamo, poi le informative. */
.app-pie__legale {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  order: 1;
}

.app-pie__voce:hover {
  color: var(--accento-su-chiaro);
}

/* Spinto a destra da quello che avanza, cosi' su una riga sola sta
   all'estremita' opposta al marchio e la riga si legge come una
   frase: chi siamo, che garanzie diamo, come si esce. */
.app-pie__ritorno {
  margin-left: auto;
}

.app-pie__casa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--accento-su-chiaro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
}

.app-pie__casa:hover {
  color: var(--accento-su-chiaro-forte);
}


/* L'USCITA, IN FONDO AL PROFILO */
/* ------------------------------------------------ */
/* Solo sul telefono: sul desktop «Esci» e' rimasta nella tendina
   dell'avatar, che sul telefono non esiste piu'.

   Fondo chiaro con filo e testo nel rosso della palette, non un
   pulsante rosso pieno: quello sarebbe l'elemento piu' acceso di
   tutta l'applicazione per l'azione che nessuno cerca per prima. Lo
   stacco di 48 pixel e la linea sopra dicono che qui finisce la
   pagina e comincia un'altra cosa. */

.app-uscita {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-su-chiaro-tenue);
}

.app-uscita__voce {
  --simbolo: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  border: 1px solid rgb(var(--rgb-allerta) / .4);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
  color: var(--allerta);
  font-size: var(--testo-m);
  font-weight: var(--peso-medio);
  transition: background var(--durata-rapida) var(--curva-standard);
}

.app-uscita__voce:hover {
  background: rgb(var(--rgb-allerta) / .07);
  color: var(--allerta);
}


/* LA CONFERMA */
/* ------------------------------------------------ */
/* Un <dialog> nativo, come il popup di contatto della vetrina. Il
   fondo scurito e' ::backdrop, che il browser disegna da solo: non
   serve un secondo elemento a coprire la pagina. */

.app-conferma {
  max-width: min(340px, calc(100vw - var(--sp-8)));
  padding: var(--sp-6);
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-card);
  background: var(--superficie-chiara);
  box-shadow: var(--ombra-pannello-app);
  color: var(--testo-su-chiaro);
}

.app-conferma::backdrop {
  background: rgb(var(--rgb-fondo-scuro) / .58);
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
}

.app-conferma__testo {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  line-height: var(--interlinea-stretta);
}

.app-conferma__azioni {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.app-conferma__annulla,
.app-conferma__esci {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--bordo-su-chiaro-tenue);
  border-radius: var(--app-raggio-campo);
  background: var(--superficie-chiara);
  color: var(--testo-su-chiaro);
  font-family: inherit;
  font-size: var(--testo-m);
  cursor: pointer;
}

.app-conferma__esci {
  border-color: rgb(var(--rgb-allerta) / .4);
  color: var(--allerta);
  font-weight: var(--peso-medio);
}


/* QUANDO L'INTERRUTTORE E' SPENTO */
/* ------------------------------------------------ */

.spento {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sezione-y) var(--gutter);
  text-align: center;
}

.spento__riquadro {
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  max-width: 34rem;
}

.spento__marchio {
  width: 140px;
  height: auto;
}

.spento__titolo {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-stretta);
}

.spento__testo {
  color: var(--testo-su-chiaro-attenuato);
  font-size: var(--testo-l);
  line-height: var(--interlinea-ampia);
}


/* LE DUE SOGLIE */
/* ------------------------------------------------ */
/* L'export aveva un solo spartiacque, a 760px, deciso in JavaScript e
   riletto a ogni resize. Qui sono le due del sito, in CSS. */

@media (min-width: 900px) {
  /* block e non flex, ed e' una distinzione che costa mezz'ora se la
     si sbaglia: con display: flex l'isola diventa un contenitore
     flessibile, il suo interno un elemento flessibile che si stringe
     sul contenuto, e la barra si rimpicciolisce fino alle quattro
     etichette invece di tenere la larghezza dichiarata. La larghezza
     c'era ed era giusta; a decidere era il figlio. */
  .app-isola {
    display: block;
  }

  .app-profilo {
    display: block;
  }

  .app-schede {
    display: flex;
  }

  .app-isola-bassa,
  .app-uscita,
  .app-marchio {
    display: none;
  }

  /* Qui sotto non c'e' piu' l'isola bassa da scavalcare: lo spazio in
     fondo al piede torna quello di un piede. */
  .app-pie__interno {
    padding-bottom: var(--sp-8);
  }

  /* L'isola in alto e' fissa e galleggia SOPRA il contenuto: lo
     stacco che le lascia posto va scritto qui, perche' sul telefono
     l'isola in alto non esiste e quello spazio sarebbe un buco. */
  .app-corpo {
    padding-top: calc(var(--app-isola-stacco)
                    + var(--app-isola-alta)
                    + var(--sp-6));
  }

  /* La fascia di ritorno si appiccica sotto l'isola, non a filo del
     bordo: a top: 0 scivolerebbe dietro il vetro. */
  .app-ritorno {
    top: calc(var(--app-isola-stacco) + var(--app-isola-alta) + var(--sp-2));
  }
}


/* LA PILLOLA CHE SCORRE, SENZA JAVASCRIPT */
/* ------------------------------------------------ */
/* Nell'export la posizione della pillola era una transform calcolata
   in JavaScript sull'indice della scheda attiva. Le schede sono
   quattro e non cambiano: quattro regole di CSS fanno lo stesso
   lavoro, e la navigazione funziona per intero anche a script
   spento. L'ordine e' quello di data/area-clienti/schede.json:
   spostare una voce li' vuol dire spostare anche queste. */

/* La lettura di un articolo tiene la pillola su News: non e' una
   quinta destinazione, e' dove si finisce partendo da li'. Senza,
   non troverebbe nessuna regola e resterebbe a zero, cioe' su Oro. */
.app:has(#news:target) .app-schede__pillola,
.app:has(#lettura:target) .app-schede__pillola {
  transform: translateX(100%);
}

.app:has(#documenti:target) .app-schede__pillola {
  transform: translateX(200%);
}

.app:has(#operatore:target) .app-schede__pillola {
  transform: translateX(300%);
}

/* Profilo, sicurezza e movimenti non sono fra le quattro schede: ai
   primi due ci si arriva dal menu dell'avatar, ai movimenti da un
   piano. Quando una di queste e' in vista il filo si toglie di mezzo
   invece di restare acceso su una scheda che non c'entra. Ai
   movimenti resta accesa Oro, come alla lettura resta accesa News:
   quella regola sta piu' sopra, con gli altri stati attivi. */
.app:has(#profilo:target) .app-schede__pillola,
.app:has(#sicurezza:target) .app-schede__pillola,
.app:has(#movimenti:target) .app-schede__pillola {
  opacity: 0;
}