/* ════════════════════════════════════════════════════════════════════
   fase.css — CSS di SISTEMA del framework (direttive fase.js + componenti app-*)
   • Theme-agnostic: caricato DOPO il tema (apple/android/windows) e PRIMA di commons.css
   • NESSUNO stile specifico di Vela qui dentro
     (brand, colori, layout di prodotto → commons.css)
   ════════════════════════════════════════════════════════════════════ */

/* ── Scroll: niente effetto bounce/overscroll ai bordi (WebView nativa) ──
   #app ha overflow-x:hidden → l'asse Y diventa 'auto' (regola CSS): è un
   contenitore di scroll, ed è quello che scrolla nelle rotte inline (home/login). */
html, body, #app { overscroll-behavior: none; }
.app-content, .app-sheet, .app-drawer-body { overscroll-behavior: none; }
/* Bottom-sheet senza barra di scorrimento visibile, come nelle app: sul computer la barra
   classica copriva l'angolo arrotondato in alto a destra (la barra non segue il
   border-radius), che restava squadrato. Si scorre comunque con dito, rotellina, touchpad. */
.app-sheet { scrollbar-width: none; }
/* Altezza massima: 85% dello schermo VISIBILE (dvh, non vh che conta anche la barra degli
   indirizzi nascosta) e mai piu' dello spazio dello sfondo (100% dell'overlay, che con la
   tastiera aperta si accorcia): la testa arrotondata resta sempre dentro lo schermo. */
.app-sheet { max-height: 85vh; max-height: min(85dvh, calc(100% - 12px)); }
.app-sheet::-webkit-scrollbar { display: none; }
/* Angoli in alto: su Android (Chrome e WebView) dietro i due angoli arrotondati lo sfondo scuro
   dell'overlay non veniva disegnato, e una fascia chiara li riempiva: la scheda sembrava squadrata.
   Una maschera piena (invisibile) fa comporre la scheda su un livello a se', ritagliato sugli angoli. */
.app-sheet { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }

/* ── f-swipe ──────────────────────────────────────────────────────────
   Area di presa della maniglia delle bottom-sheet (swipe-giù per chiudere).
   Il touch-action lo imposta la direttiva via JS (_bindFSwipe in fase.js);
   qui solo l'area di presa (alta, a tutta larghezza) con la barretta in alto. */
/* La maniglia e' sticky: resta ferma in cima mentre il contenuto della scheda scorre. Era
   trasparente, e scorrendo campi e riquadri colorati entravano negli angoli arrotondati:
   la "testa" della scheda spariva. Ora ha lo sfondo della scheda (sfumato in basso, il
   contenuto ci scivola sotto senza taglio netto), gli stessi angoli e tutta la larghezza
   (margini negativi = padding laterale della scheda, 20px nel tema apple). */
.app-sheet-handle { width:auto; height:72px; margin:0 -20px 2px; padding-top:8px; background:linear-gradient(to bottom, var(--app-bg-elevated) 72%, transparent); border-radius:inherit; display:flex; align-items:flex-start; justify-content:center; cursor:grab; }
.app-sheet-handle::before { content:''; width:36px; height:5px; border-radius:100px; background:rgba(60,60,67,.18); }