/* =========================================================
   IL PANNELLO "QUI INTORNO"
   =========================================================
   ⬇️ NUOVO (16/08/2026): la ricerca di cosa c'è da vedere e dove si
   mangia una certa cosa. Vedi js/modules/scopri-pannello.js.

   Ricalca il pannello 🍽️ (css/mangiare.css) invece di inventarsi una
   forma nuova: sono due risposte alla stessa domanda — "cosa c'è qui
   intorno" — e chi ha imparato a usare uno non deve imparare l'altro.
   ========================================================= */

.sc-velo{
  position:fixed; inset:0; z-index:1200;
  background:rgba(17,21,28,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.sc-finestra{
  background:var(--paper); width:100%; max-width:560px;
  max-height:86vh; max-height:86dvh;
  overflow-y:auto; overscroll-behavior:contain;
  border-radius:12px 12px 0 0; padding:14px 14px 20px;
}
.sc-testa-pannello{ display:flex; align-items:center; justify-content:space-between; }
.sc-testa-pannello h3{ font-family:'Fraunces',serif; font-size:16px; margin:0; }
.sc-chiudi{ border:none; background:none; font-size:17px; cursor:pointer; padding:6px; }

/* Le categorie sono icone e non parole: in sette lingue diverse le parole
   non ci starebbero mai su una riga, e l'icona è la stessa che l'utente
   vede da settimane sulle schede dei luoghi. */
.sc-categorie{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 8px; }
.sc-categorie button{
  flex:1; min-width:42px; min-height:38px;
  font-size:18px; line-height:1; cursor:pointer;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  opacity:.5; transition:opacity .12s ease, border-color .12s ease;
}
.sc-categorie button.attiva{ opacity:1; border-color:var(--route); }

.sc-cerca{ display:flex; gap:6px; }
.sc-cerca input{
  flex:1; min-width:0; min-height:38px;
  padding:6px 10px; font-size:13px;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
}
.sc-vai{
  flex:none; min-height:38px; padding:6px 14px;
  font-size:13px; font-weight:600; cursor:pointer;
  color:var(--white); background:var(--route);
  border:1px solid var(--route); border-radius:6px;
}

.sc-sezione{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin:14px 2px 4px; display:flex; justify-content:space-between; gap:8px;
}
.sc-fonte-misura{ text-transform:none; letter-spacing:normal; }

.sc-riga{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:13px; cursor:pointer;
}
.sc-testa{ flex:1; min-width:0; }
.sc-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-sub{ font-size:11.5px; color:var(--muted); margin-top:2px;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-metri{ flex:none; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }
/* Il "+" alto quanto un dito e staccato dal resto della riga: toccarlo
   per sbaglio salverebbe un luogo che non si voleva, e toccare la riga
   per sbaglio aprirebbe soltanto una finestra. I due errori non costano
   uguale, quindi il bersaglio piccolo è quello che scrive. */
.sc-aggiungi{
  flex:none; width:34px; height:34px;
  font-size:17px; line-height:1; cursor:pointer;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:6px;
}
.sc-aggiungi:disabled{ opacity:.6; cursor:default; }

.sc-vuoto{ font-size:13px; color:var(--muted); padding:14px 0; text-align:center; line-height:1.5; }
.sc-nota{ font-size:10px; color:var(--muted); margin-top:12px; line-height:1.4; text-align:center; }

/* Il riquadro sulla mappa: le due righe che spiegano cos'è. Stessa forma
   della cartina di Auschwitz, che è quella indicata dall'utente. */
.scopri-scheda b{ font-family:'Fraunces',serif; font-size:14px; }
.scopri-scheda .sc-servizio{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.scopri-scheda .sc-testo{ font-size:12.5px; line-height:1.5; margin-top:7px; }
/* Chi ha scritto quelle due righe: un'enciclopedia o un tag di OSM. La
   fiducia che ci si mette non è la stessa, e va detto. */
.scopri-scheda .sc-fonte{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-top:6px;
}