/* Linguetta per nascondere e rimostrare il pannello Esplora, insieme a esplora-pulsante.js.
   Sta attaccata al bordo destro del pannello (--es-bordo, misurato da esplora-pulsante.js); a pannello chiuso
   resta sul bordo sinistro dello schermo. Colori State of Leonida: vetro scuro con bordo e icona rosa.
   Per toglierla basta togliere il <link> e il <script> da index.html. */

.es-linguetta {
  position: fixed; z-index: 640;
  top: 18px; left: var(--es-bordo, 0px);
  width: 40px; height: 44px; padding: 0 0 0 2px; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  color: #ff50c5; background: rgba(14, 10, 26, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 80, 197, .45); border-left: 0; border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 80, 197, .14);
  transition: background .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.es-linguetta:hover { background: rgba(255, 80, 197, .2); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 80, 197, .35); }
.es-linguetta:active { transform: scale(.94); }
.es-linguetta:focus-visible { outline: 2px solid #ff50c5; outline-offset: 2px; }
.es-linguetta svg { pointer-events: none; }

/* Pannello accanto alla mappa (da 1000px in su): a pannello chiuso la linguetta prende il posto del tasto "Esplora" in alto */
@media (width >= 1000px) {
  html.es-esplora-chiuso .map-topbar .sidebar-toggle { display: none !important; }
  /* La barra in alto lascia spazio alla linguetta */
  html.es-esplora-chiuso .map-topbar { left: 54px; }
}

/* PC con mouse: alla stessa altezza della barra in alto */
@media (width >= 1000px) and (hover: hover) and (pointer: fine) {
  .es-linguetta { height: 40px; }
}
@media (width >= 1440px) and (hover: hover) and (pointer: fine) {
  html.es-esplora-chiuso .map-topbar { left: 56px; }
}

/* Ultra wide: più grande, come i pulsanti della barra */
@media (width >= 2400px) and (hover: hover) and (pointer: fine) {
  .es-linguetta { top: 22px; width: 46px; height: 46px; }
  .es-linguetta svg { width: 22px; height: 22px; }
  html.es-esplora-chiuso .map-topbar { left: 64px; }
}

/* iPad e schermi touch: 44px come gli altri tasti, rispetta la tacca in alto */
@media (pointer: coarse) {
  .es-linguetta { top: max(12px, env(safe-area-inset-top)); width: 44px; height: 44px; }
  .es-linguetta.es-chiuso { left: env(safe-area-inset-left, 0px); }
}

/* ---------- Linguetta di destra (colonna "Dettagli del luogo") ----------
   Attaccata al bordo sinistro della colonna (--es-bordo-d), sotto la barra in alto per non coprirne i pulsanti */
.es-linguetta.es-destra {
  left: auto; right: var(--es-bordo-d, 0px); top: 70px; padding: 0 2px 0 0;
  border-left: 1px solid rgba(255, 80, 197, .45); border-right: 0; border-radius: 12px 0 0 12px;
}
@media (width >= 2400px) and (hover: hover) and (pointer: fine) {
  .es-linguetta.es-destra { top: 80px; }
  /* Colonna nascosta: via il riquadro d'attesa, la mappa si allarga */
  html.es-destra-chiusa .uw-attesa { display: none !important; }
  /* L'avviso delle foto offline resta al centro della mappa */
  html.es-destra-chiusa .fo-chip { left: calc(460px + (100vw - 460px) / 2) !important; }
  html.es-destra-chiusa.es-esplora-chiuso .fo-chip { left: 50% !important; }
}
@media (pointer: coarse) {
  .es-linguetta.es-destra { top: calc(max(12px, env(safe-area-inset-top)) + 56px); }
  .es-linguetta.es-destra.es-chiuso { right: env(safe-area-inset-right, 0px); }
}

/* Sotto i 1000px (iPhone, iPad in verticale) il pannello si apre sopra la mappa: ci sono già il tasto "Esplora"
   in alto per aprirlo e la X dentro il pannello per chiuderlo, quindi la linguetta non serve */
@media (width <= 999px) {
  .es-linguetta { display: none; }
}