Allinea la barra di navigazione fra iOS e Android

L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.

Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.

`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.

Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.

Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/styles.css

@@ -62,6 +62,19 @@
 :root {
   color-scheme: light;
   --radius: 1rem;
+  /*
+   * Geometria della barra di navigazione, unica sorgente di verità: prima
+   * l'altezza era ricopiata a occhio come `pb-24` nel contenuto e `pb-28`
+   * nella celebrazione badge, e su iPhone i conti tornavano per 2 px.
+   *
+   * `--pad-sicura-fondo` è il motivo per cui la barra su iPhone e su Android
+   * non può essere alta uguale: `env(safe-area-inset-bottom)` vale ~34 px
+   * sopra la home indicator e 0 su Android, dove la barra di sistema sta
+   * fuori dal viewport. Il `max()` dà comunque ad Android un respiro minimo,
+   * così la differenza è un margine in più, non un allineamento diverso.
+   */
+  --altezza-nav: 3.75rem;
+  --pad-sicura-fondo: max(env(safe-area-inset-bottom), 0.5rem);
   --background: oklch(0.985 0.002 240);
   --foreground: oklch(0.16 0.01 260);
   --card: oklch(1 0 0);
@@ -351,6 +364,27 @@
   -webkit-backdrop-filter: blur(20px) saturate(180%);
 }
 
+/*
+ * Chrome su Android disattiva `backdrop-filter` quando l'accelerazione
+ * hardware non è disponibile: senza questo, su quei device la barra resta
+ * solo semitrasparente e il contenuto si legge attraverso.
+ */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .materiale {
+    background-color: var(--color-card);
+  }
+}
+
+/** Padding inferiore della chrome flottante. */
+@utility pad-sicura-fondo {
+  padding-bottom: var(--pad-sicura-fondo);
+}
+
+/** Spazio che il contenuto deve lasciare sotto di sé per non finire dietro la barra. */
+@utility spazio-nav {
+  padding-bottom: calc(var(--altezza-nav) + var(--pad-sicura-fondo) + 1rem);
+}
+
 @utility bordo-sfumato {
   &::before {
     content: "";