/* ArcheoMap mobile.css v303 — revisione totale layout formato cellulare.
   ------------------------------------------------------------------
   Questo file è linkato in index.html con:
     <link rel="stylesheet" href="mobile.css?v=304" media="(max-width:768px)">
   Quindi è FISICAMENTE inapplicabile su desktop: nessuna regola qui
   può toccare la versione web già approvata (>768px).
   ------------------------------------------------------------------
   Ordine di caricamento CSS (index.html righe 79-90):
     styles.css  →  mobile.css  →  overrides.css  →  hardening.css
     →  responsive.css  →  admin.css  →  petal.css  →  ...
   overrides.css carica DOPO mobile.css. Per vincere la cascata su
   regole desktop già scritte come `body .foo{…!important}` (specificity
   0,1,1,0) usiamo qui il prefisso `html body` (specificity 0,1,2,0).
   ------------------------------------------------------------------
   BUG CRITICO RISOLTO IN v303
   ------------------------------------------------------------------
   v302 lasciava la pillola teal ".aup-menu-btn" stirata verticalmente
   per tutto lo schermo su mobile. Causa: collisione di DUE regole
   !important da SORGENTI DIVERSE, nessuna delle due con @media scope
   corretto:
     1) overrides.css:
          body .aup-menu-btn{ top:112px !important; }
        (regola NON scoped → applicata anche su mobile)
     2) user-profile.js runtime-injected <style>:
          @media (max-width:480px){
            .aup-menu-btn{ top:auto !important; bottom:90px !important; }
          }
        (rule mobile con specificity 0,1,0,0 → PERDE vs overrides sul top,
         ma il `bottom:90px` resta applicato)
     Risultato: top:112 AND bottom:90 contemporaneamente → il button
     (position:fixed senza height esplicita) si stira da y=112 fino a
     viewport-height-90. Su iPhone/Android ≈ 1000px di altezza →
     "pillola gigante" che copre mezzo schermo.
   FIX: in OGNI regola qui sotto settiamo SEMPRE top+bottom espliciti,
   per impedire che una combinazione residua di rule esterne riesca a
   stirare l'elemento. Selettore `html body` vince sempre la cascata.
   ------------------------------------------------------------------ */


/* =================================================================
   1. TOPBAR — compattazione header
   Nasconde elementi secondari (trip-pill/trophy/museum/progress) che
   il petal menu in basso già replica → evita overflow orizzontale.
   ================================================================= */
html body .topbar{
  padding:6px 10px !important;
  min-height:54px !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  overflow:hidden !important;
}
html body .topbar .brand{
  gap:6px !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}
html body .topbar .brand-icon{
  width:34px !important;
  height:34px !important;
  font-size:20px !important;
  line-height:34px !important;
  flex-shrink:0 !important;
}
html body .topbar h1,
html body .topbar .brand h1{
  font-size:16px !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
}
html body .topbar-right,
html body .topbar .topbar-right{
  gap:4px !important;
  flex-shrink:0 !important;
}
html body .topbar .lang-btn{
  padding:4px 7px !important;
  font-size:11px !important;
  min-width:26px !important;
  height:26px !important;
  line-height:1 !important;
}
html body .topbar .weather-chip,
html body .topbar .theme-toggle{
  padding:4px 6px !important;
  font-size:13px !important;
  height:28px !important;
}
/* Elementi non indispensabili su mobile (già accessibili dal petal menu) */

html body .topbar .progress-pill,
html body .topbar .museum-hub-btn,
html body .topbar .trophy-topbar-btn,
html body .topbar .topbar-extra{
  display:none !important;
}


/* =================================================================
   2. ADMIN BAR (#v109AdminLiveBar) — compatta, una riga sola
   Fissata da admin-bar-patch.js sotto topbar (z:950).
   ================================================================= */
html body #v109AdminLiveBar{
  top:55px !important;
  bottom:auto !important;
  padding:4px 8px !important;
  font-size:11px !important;
  line-height:1.3 !important;
  min-height:28px !important;
  max-height:32px !important;
  height:auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
html body #v109AdminLiveBar *{
  font-size:inherit !important;
  line-height:inherit !important;
}


/* =================================================================
   3. .aup-menu-btn ("I miei contributi") — FIX BUG v302 STRETCH
   CRITICO: top + bottom + right SEMPRE espliciti per annullare la
   combinazione killer overrides.css(top:112) + user-profile.js(bottom:90).
   ================================================================= */
html body .aup-menu-btn{
  top:92px !important;
  bottom:auto !important;         /* KILLS v302 vertical stretch */
  left:auto !important;
  right:8px !important;
  padding:4px 10px !important;
  font-size:11px !important;
  height:24px !important;
  width:auto !important;
  max-width:60vw !important;
  line-height:1 !important;
  border-radius:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:none !important;
}


/* =================================================================
   4. #__archeo_counter_banner ("N siti scoperti")
   overrides.css forza top:148 su desktop; sites-counter-patch.js
   tenta top:58 su mobile ma ha specificity inferiore. Qui blocchiamo
   con top+bottom espliciti.
   ================================================================= */
html body #__archeo_counter_banner{
  top:122px !important;
  bottom:auto !important;
  left:auto !important;
  right:8px !important;
  padding:3px 9px !important;
  font-size:11px !important;
  height:22px !important;
  width:auto !important;
  max-width:60vw !important;
  line-height:1 !important;
  border-radius:11px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:none !important;
}


/* =================================================================
   5. CONTROLLI LEAFLET (+/-) — sotto admin bar
   ================================================================= */
html body .leaflet-top.leaflet-left{
  top:92px !important;
}
html body .leaflet-control-zoom a{
  width:32px !important;
  height:32px !important;
  line-height:32px !important;
  font-size:18px !important;
}


/* =================================================================
   6. #forceReloadPinsBtn — "Ricarica pin" compatto top-right sotto
   counter banner, evitando collisione col FAB petali in basso.
   ================================================================= */
html body #forceReloadPinsBtn{
  top:150px !important;
  bottom:auto !important;
  left:auto !important;
  right:8px !important;
  padding:4px 10px !important;
  font-size:11px !important;
  height:26px !important;
  width:auto !important;
  max-width:60vw !important;
  line-height:1 !important;
  border-radius:13px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:none !important;
}


/* =================================================================
   7. PETAL FAB — blindato center-bottom su mobile
   ================================================================= */
html body #petalFab{
  left:50% !important;
  right:auto !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  bottom:18px !important;
}
html body #petalFab.open{
  transform:translateX(-50%) rotate(45deg) scale(1.05) !important;
}


/* =================================================================
   8. MAPPA — altezza piena
   ================================================================= */
html body #map{
  top:0 !important;
  height:100vh !important;
  height:100dvh !important;
}


/* =================================================================
   9. SAFE-AREA iOS
   ================================================================= */
@supports (padding: max(0px)){
  html body .topbar{
    padding-top:max(6px, env(safe-area-inset-top)) !important;
    padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;
  }
  html body #petalFab{
    bottom:max(18px, env(safe-area-inset-bottom)) !important;
  }
}


/* =================================================================
   10. SCHERMI ULTRA-PICCOLI (≤360px)
   ================================================================= */
@media (max-width:360px){
  html body .topbar h1,
  html body .topbar .brand h1{ font-size:14px !important; }
  html body .topbar .lang-btn{ padding:3px 5px !important; font-size:10px !important; }
  html body .aup-menu-btn,
  html body #__archeo_counter_banner,
  html body #forceReloadPinsBtn{
    font-size:10px !important;
    max-width:55vw !important;
  }
}


/* =================================================================
   11. v306.1 — SCHEDA DETTAGLIO APERTA: half-screen vero
   -----------------------------------------------------------------
   Obiettivo richiesto: quando si apre #detail su mobile, la scheda
   deve occupare esattamente la METÀ INFERIORE dello schermo (bottom
   sheet ~50vh), lasciando la metà SUPERIORE libera per vedere la
   mappa e interagirci.

   Zoom (+/-) e pulsante Cerca (🔍): salgono al limite superiore
   della porzione mappa (topbar è già nascosta da archeo-detail-shell
   quando body.archeo-detail-open, mobile only), così restano a
   portata di pollice e ben visibili.

   Su desktop #detail è un drawer laterale destro (440px) — non
   va toccato. Questo file è caricato solo sotto max-width:768px,
   quindi la desktop è già al sicuro per costruzione.

   IMPORTANTE — override sul CSS runtime di archeo-detail-shell.js:
   lo shell inietta @media (max-width:767px) { #detail { top:80px } }
   con !important. Vinciamo con selettore a specificità maggiore
   (`html body #detail`) + !important.
   ================================================================= */

/* SHEET regolabile con dito — altezza guidata da --archeo-detail-top
   impostata da js/sheet-resize.js (default 50vh/dvh).
   3 snap point: full (12dvh), half (50dvh, default), peek (82dvh).
   Trascinando il pill handle in alto al sheet si varia l'altezza,
   trascinando in basso oltre 92dvh si chiude (logica nel modulo JS). */
/* v306.4.3: --archeo-detail-top è settata su :root da sheet-resize.js.
   NON la ridichiariamo qui (locale vincerebbe sull'ereditata e ogni
   scrittura inline farebbe scattare il MutationObserver del shell su
   style → side-effect: polishContent rimuove testo, body toggle fa
   riapparire icone topbar). #detail la eredita da html:root.
   Fallback 50dvh se il JS non è ancora girato. */
html body #detail{
  top: var(--archeo-detail-top, 50dvh) !important;
}
/* v306.4.4: transition:none durante drag via classe SUL BODY, non su #detail.
   Mutating #detail.class scatenava syncToState del shell → polishContent
   rimuoveva nodi e riappariva la topbar. Ora sheet-resize.js mette/toglie
   archeo-detail-dragging su <body>, non osservato dallo shell. */
html body.archeo-detail-dragging #detail{
  transition: none !important;
}
/* Legacy rule kept for safety — se qualcosa ancora attacca
   archeo-shell-dragging a #detail (drag-to-close del shell line 3170),
   la transition viene comunque disabilitata. Nessun effetto negativo. */
html body #detail.archeo-shell-dragging{
  transition: none !important;
}

/* Handle drag pill resta al top del sheet (già definita dallo shell).
   Il sheet parte da 50vh e finisce a 0 in basso: esatto half-screen. */

/* Transition fluida per zoom e cerca quando cambiano posizione */
html body .leaflet-top.leaflet-left{
  transition: top .28s cubic-bezier(.2,.8,.25,1) !important;
}
html body #__archeo_search_petal_btn{
  transition: top .28s cubic-bezier(.2,.8,.25,1), left .28s cubic-bezier(.2,.8,.25,1) !important;
}

/* Scheda APERTA → zoom sale in alto (topbar è nascosta) */
html body.archeo-detail-open .leaflet-top.leaflet-left{
  top: 14px !important;
}

/* Scheda APERTA → pulsante Cerca sotto la zoom-bar (al top mappa).
   Sovrascrive l'inline-style prodotto da updatePosition() in
   js/search-control.js (inline senza !important → perde contro
   !important qui). Quando la scheda si richiude, la regola salta,
   updatePosition riposiziona entro 2s (poll) o subito al prossimo
   evento — halfscreen-controls.js forza un dispatch('resize')
   immediato all'open/close, niente attesa. */
html body.archeo-detail-open #__archeo_search_petal_btn{
  top: 92px !important;
  left: 14px !important;
}

/* =================================================================
   v306.4.2 FIX — Drag wrapper (#__ads_drag) al TOP DELLA TENDINA
   ─────────────────────────────────────────────────────────────
   Bug: lo shell CSS embedded mette il wrapper cattura-touch a
   top:0 del viewport (nell'area mappa). Ma il pill visivo
   #detail::before è al top della tendina (top:8px di #detail,
   quindi a viewport-top = var(--archeo-detail-top) + 8px).
   Risultato: utente tocca il pill, il touch non arriva al
   wrapper → drag non si attiva.

   Fix: posizioniamo il wrapper sopra il pill visivo usando la
   stessa var --archeo-detail-top (settata anche su :root da
   sheet-resize.js per permettere al wrapper figlio di <body>
   di leggerla). Con `html body` vinciamo di specificità contro
   la regola dello shell. Margine extra per area-touch generosa.
   ================================================================= */
/* v306.4.5 COMFORT DRAG — hit area allargata da 44 → 80px e
   sollevata da 18 → 36px sopra il sheet, così il dito può atterrare
   ovunque nella striscia generosa sopra/intorno/sotto il pill senza
   mancare. Il pill visivo resta a sheet+8px, centrato nell'area. */
html body #__ads_drag{
  top: calc(var(--archeo-detail-top, 50dvh) - 36px) !important;
  height: 80px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 3001 !important;
  background: transparent !important;
  transition: top .28s cubic-bezier(.2,.8,.25,1);
  -webkit-tap-highlight-color: transparent !important;
  touch-action: none !important;
}
/* Niente transizione durante il drag attivo (body ha la classe). */
html body.archeo-detail-dragging #__ads_drag{ transition: none !important; }
/* Ridondante safety: pill ::after shell resta invisibile, non sostituisce il visual. */
html body #__ads_drag::after{ opacity: 0 !important; }