/* =====================================================================
   css/safe-area.css — AREE SICURE E ALTEZZE DELLO SCHERMO (batch 31, MOB-1, 08/10/2026)
   Indagine: vps-tools/piani/batch31/indagine_MOB31.md (P1-P4, P7).

   CHI LO CARICA: SOLO i documenti di PRIMO LIVELLO (shell.html e le pagine aperte da sole: login, landing,
   abbonati, attiva, privacy, termini, cookie-policy, privacy-policy, informativa-trasferimenti-ai,
   diagnostica-mobile). Le 70+ pagine dentro l'iframe della shell NON lo caricano e non vanno toccate.

   PERCHE' FUNZIONA ANCHE NELL'IFRAME SENZA CARICARLO
   - Da MOB-1 il meta viewport dei documenti di primo livello ha «viewport-fit=cover»: lo schermo intero e'
     della pagina e le aree sicure (notch/isola, angoli stondati, barra della Home) valgono davvero.
   - Le regole comuni (css/mobile.css, css/mobile-app.css, shell.html) usano var(--safe-*, 0px) e mai piu'
     env(safe-area-inset-*) scritto a mano. Nell'iframe le variabili NON sono definite (questo foglio non c'e')
     → valgono 0: il rettangolo dell'iframe e' gia' dentro la zona sicura perche' la shell la consuma col suo
     chrome (padding di main.main, cassetto, barra in basso). Cosi' le insets non si RADDOPPIANO mai, anche se
     WebKit passasse all'iframe le insets della finestra (in Chrome succede: misurato, indagine §1 P3).
   - Se questo foglio finisce dentro l'iframe (pagine pubbliche aperte dalla shell: cookie-policy, privacy-policy...),
     html.in-shell (script in testa a quelle pagine; app-sidebar.js per le altre) riporta le variabili a 0 (regola qui sotto).
   - Angoli stondati: nessuna variabile dedicata (revisione MOB-1, BASSO-5: definite e mai usate, tolte). I comandi attaccati ai bordi
     li tengono lontani gli stessi padding --safe-* (in orizzontale 47-62 px) e i margini interni gia' esistenti; MOB-2 decidera'.

   DESKTOP: env() vale 0 → tutte le variabili valgono 0 e nulla cambia (dimostrato con le catture
   1366/1920 prima-dopo, piani/batch31/mob1_img/).
   VIETATO qui: regole di impaginazione delle pagine. Solo variabili e il minimo per le pagine pubbliche.
   ===================================================================== */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  /* altezza dello schermo: 100vh solo come ripiego per i browser senza unita' dinamiche */
  --h-schermo:100vh;      /* segue le barre del browser (dvh) */
  --h-schermo-min:100vh;  /* con le barre del browser aperte (svh): per cio' che deve restare SOPRA la barra */
}
@supports (height:100dvh){
  :root{--h-schermo:100dvh;--h-schermo-min:100svh}
}
/* HOTFIX 08/10 (iPhone dell'utente): nella SHELL l'altezza non deve venire da 100vh. Dall'icona sulla Home iOS da' 100vh = 874
   con la finestra a 812, in Chrome iOS 710 con la finestra a 673: html/body/.app/.main (shell.html:46-51) erano piu' alti della
   finestra e iOS li fa scorrere anche con overflow:hidden → spariva la barra in alto e restava una fascia vuota sopra la barra in
   basso. Con dvh = finestra reale. Sul desktop dvh = vh: nessun cambiamento. Solo la shell (html con body > .app.design-a). */
@supports (height:100dvh){
  html:has(> body > .app.design-a),
  html:has(> body > .app.design-a) > body,
  html:has(> body > .app.design-a) > body > .app.design-a,
  html:has(> body > .app.design-a) > body > .app.design-a > .main{height:100dvh}
}
/* dentro l'iframe della shell le aree sicure sono gia' consumate dal chrome della shell */
html.in-shell{--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}

/* niente ingrandimento automatico del testo quando si ruota il telefono */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------------------------------------------------------------------
   PAGINE PUBBLICHE (html.sa-pubblica: login, landing, abbonati, attiva, privacy, termini, policy...)
   Con viewport-fit=cover in orizzontale il contenuto andrebbe sotto il notch: le fasce laterali le
   tiene l'<html> (stesso risultato che dava iOS senza cover), il resto della pagina non cambia.
   In verticale e su desktop le insets laterali valgono 0: nessun effetto.
   --------------------------------------------------------------------- */
html.sa-pubblica{padding-left:var(--safe-left,0px);padding-right:var(--safe-right,0px)}

/* ---------------------------------------------------------------------
   BANNER COOKIE (js/cookie-consent.js, iniettato nei documenti di primo livello)
   In fondo allo schermo: il testo e i bottoni restano sopra la barra della Home e lontani dagli angoli.
   «html body #cc-banner» batte «#cc-banner» del foglio iniettato dallo script (che arriva dopo).
   Nella shell, sul telefono, shell.html lo alza anche sopra la barra in basso (#mobBnav).
   --------------------------------------------------------------------- */
html body #cc-banner{padding:0 var(--safe-right,0px) var(--safe-bottom,0px) var(--safe-left,0px);box-sizing:border-box}
html body #cc-modal{padding:max(16px,var(--safe-top,0px)) max(16px,var(--safe-right,0px)) max(16px,var(--safe-bottom,0px)) max(16px,var(--safe-left,0px))}