/* I token stanno in tokens.css, caricato prima di questo file da index.html.
   Qui dentro nessun valore di palette o di scala scritto a mano. */
:root {
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
/* l'attributo hidden deve vincere anche su display:flex delle classi */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { color: var(--c-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Il focus da tastiera deve restare visibile sopra la mappa e dentro i
   dialoghi: senza questo il focus trap sposta un anello che non si vede. */
:focus-visible {
  outline: 3px solid var(--c-green-bright);
  outline-offset: 2px;
}

#map { position: fixed; inset: 0; z-index: 0; background: var(--c-map-bg); }

/* Modalità segnalazione: senza un segno sulla mappa l'unico indizio è l'hint
   testuale, e si tocca a vuoto credendo di navigare. */
body.add-mode .leaflet-container { cursor: crosshair; }
body.add-mode::after {
  content: ''; position: fixed; inset: 0; z-index: 450; pointer-events: none;
  border: 3px solid var(--c-green-bright);
}

/* I controlli zoom di Leaflet nascono 30px: sono gli unici comandi della mappa
   che restavano sotto i 44 dei tap target. */
.leaflet-touch .leaflet-bar a {
  width: var(--tap); height: var(--tap); line-height: var(--tap);
  font-size: var(--fs-xl);
}
.leaflet-bottom .leaflet-control-zoom { margin-bottom: var(--map-bottom); }

/* I cluster di default sono 40px: sotto la soglia di 44 dei tap target ed è
   l'unico controllo della mappa che Lighthouse segnalava. */
.marker-cluster div {
  width: 34px; height: 34px; line-height: 34px;
  margin-left: 5px; margin-top: 5px;
}
/* E colorano la numerosità in verde/giallo/arancio: esattamente le tinte con
   cui la legenda codifica lo stato, così un cluster grande si legge come "non
   più gratuita". Qui il cluster è neutro e conta solo il numero. */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: var(--c-cluster-halo); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background-color: var(--c-green); color: var(--c-on-green); font-weight: 700;
}

/* Il marchio è il ritorno alla home: è l'unico varco dallo strumento al resto
   del sito, quindi è un link e non un'etichetta. */
.brand {
  position: fixed; top: var(--map-row-1); left: var(--sp-6); z-index: 500;
  background: var(--c-green); color: var(--c-on-green); font-weight: 700; font-size: var(--fs-input);
  padding: var(--sp-4) var(--sp-7); border-radius: var(--radius-pill); box-shadow: var(--shadow);
  user-select: none; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap);
}

.actions {
  position: fixed; top: var(--map-row-1); right: var(--sp-6); z-index: 500;
  display: flex; gap: var(--sp-4);
}
.round-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--radius-round); border: none; cursor: pointer;
  background: var(--c-surface); font-size: var(--fs-2xl); box-shadow: var(--shadow); color: var(--c-ink);
}
.round-btn.add { background: var(--c-green); color: var(--c-on-green); font-size: var(--fs-3xl); line-height: 1; }
.round-btn.add[aria-pressed="true"] { background: var(--c-ink); font-size: var(--fs-2xl); }

.search {
  position: fixed; top: var(--map-row-2); left: var(--sp-6); right: var(--sp-6); z-index: 550;
  max-width: 520px; margin: 0 auto;
}
.search-field {
  display: flex; align-items: center; gap: var(--sp-4); height: var(--h-search);
  background: var(--c-surface); border-radius: var(--radius-pill);
  box-shadow: var(--shadow); padding: 0 var(--sp-3) 0 var(--sp-7);
}
.search-icon { font-size: var(--fs-md); line-height: 1; }
/* --fs-input è 16px: sotto quella soglia Safari iOS zooma al focus del campo */
/* height: 100% e non l'altezza del solo testo: il campo si vede alto 48px ma il
   bersaglio dell'input erano i 18px della riga, e un dito che tocca appena
   sopra o sotto le lettere non metteva a fuoco nulla. */
.search-field input {
  flex: 1; min-width: 0; height: 100%; border: none; background: none; font: inherit;
  font-size: var(--fs-input); color: var(--c-ink); padding: 0;
}
.search-field input:focus { outline: none; }
.search-field:focus-within { outline: 3px solid var(--c-green-bright); outline-offset: 2px; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear {
  flex: none; width: var(--tap); height: var(--tap); border: none; background: none;
  border-radius: var(--radius-round); cursor: pointer; color: var(--c-muted); font-size: var(--fs-md);
}

.search-results {
  list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-2);
  background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  max-height: 46vh; overflow-y: auto;
}
.search-results li {
  display: flex; align-items: center; gap: var(--sp-5); min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius); cursor: pointer;
  font-size: var(--fs-base); line-height: var(--lh-tight);
}
.search-results li[aria-selected="true"] { background: var(--c-subtle-3); }
.opt-mark { flex: none; font-size: var(--fs-md); }
.opt-text { flex: 1; min-width: 0; }
.opt-sub { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.search-empty { color: var(--c-muted); font-size: var(--fs-md); padding: var(--sp-6); }

/* Caricamento, bbox vuota e rete assente: senza questa riga la mappa vuota è
   indistinguibile da una mappa che sta ancora scaricando. */
.mapstate {
  position: fixed; top: var(--map-row-3); left: 50%; transform: translateX(-50%); z-index: 480;
  margin: 0; max-width: min(90vw, 480px); text-align: center;
  background: var(--c-glass); color: var(--c-ink-soft); padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-pill); font-size: var(--fs-md); box-shadow: var(--shadow);
}
.mapstate:empty { display: none; }

.legend {
  position: fixed; left: var(--sp-6); bottom: calc(var(--sp-4) + var(--map-bottom)); z-index: 500;
  background: var(--c-glass); border-radius: var(--radius-md); padding: var(--sp-3);
  font-size: var(--fs-xs); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--sp-1);
}
.legend button {
  border: none; background: none; font: inherit; color: inherit; cursor: pointer;
  display: flex; align-items: center; text-align: left; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5); border-radius: 7px;
}
.legend button.active { background: var(--c-subtle-3); }
.legend button:not(.active) { opacity: 0.42; }
.dot { display: inline-block; width: var(--sp-5); height: var(--sp-5); border-radius: var(--radius-round); margin-right: var(--sp-3); }
.dot.green { background: var(--c-green-bright); }
.dot.yellow { background: var(--c-yellow); }
.dot.red { background: var(--c-red); }

.hint {
  position: fixed; top: var(--map-row-3); left: 50%; transform: translateX(-50%);
  z-index: 500; background: var(--c-ink); color: var(--c-on-green); padding: var(--sp-5) var(--sp-8); border-radius: var(--radius-md);
  font-size: var(--fs-md); box-shadow: var(--shadow); max-width: 90vw; text-align: center;
}

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  background: var(--c-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--sp-9) var(--sp-9) calc(var(--sp-9) + env(safe-area-inset-bottom));
  max-height: 72vh; overflow-y: auto;
}
@media (min-width: 700px) {
  .sheet { left: auto; right: var(--sp-8); bottom: var(--sp-8); width: 400px; border-radius: var(--radius-xl); }
}
/* Titolo e chiudi restano agganciati in cima: sulle schede lunghe il bottone
   scorreva fuori vista e l'unico modo di chiudere era ricaricare. */
.sheet-head {
  position: sticky; top: calc(var(--sp-9) * -1); z-index: 1;
  display: flex; align-items: flex-start; gap: var(--sp-5);
  margin: calc(var(--sp-9) * -1) 0 0; padding: var(--sp-9) 0 var(--sp-2);
  background: var(--c-surface);
}
.sheet h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-2xl); line-height: var(--lh-heading); }
.sheet-close {
  flex: none; border: none; background: var(--c-subtle-2); color: var(--c-ink);
  width: var(--tap); height: var(--tap); border-radius: var(--radius-round); cursor: pointer; font-size: var(--fs-md);
}

/* Gestore e numero di prese arrivavano dall'API e non venivano mai mostrati. */
.facts { margin: var(--sp-5) 0 0; font-size: var(--fs-md); }
.facts > div { display: flex; gap: var(--sp-5); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border-softer); }
.facts dt { flex: none; width: 88px; color: var(--c-muted); }
.facts dd { flex: 1; min-width: 0; margin: 0; }

.btn.nav {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  min-height: var(--tap); margin-top: var(--sp-7); text-decoration: none;
  background: var(--c-subtle-3); border-color: var(--c-border-soft); color: var(--c-green);
}
.muted { color: var(--c-muted); font-size: var(--fs-md); margin: var(--sp-2) 0; }
.status { font-weight: 600; font-size: var(--fs-base); margin: var(--sp-5) 0 var(--sp-2); }
.status.green { color: var(--c-green-bright); }
.status.yellow { color: var(--c-yellow); }
.status.red { color: var(--c-red); }
/* Link in linea dentro la frase di stato. Le regole sul tap target esentano gli
   inline, ma col solo padding resta alto 28px: l'area toccabile la porta a 44
   uno pseudo-elemento sovrapposto, che non occupa spazio e quindi non allarga
   l'interlinea della frase come farebbe un inline-block alto 44. */
.status-how {
  position: relative; font-weight: 500; font-size: var(--fs-sm);
  color: var(--c-muted); padding: var(--sp-3) 0;
}
.status-how::after { content: ''; position: absolute; inset: -8px -6px; }

.ask { margin-top: var(--sp-7); }
.ask-q { margin: 0 0 var(--sp-4); font-weight: 600; }
.ask-btns { display: flex; gap: var(--sp-5); }
.btn {
  flex: 1; min-height: var(--tap); border: 1px solid var(--c-border-soft); background: var(--c-surface); border-radius: var(--radius-md);
  padding: var(--sp-7) var(--sp-5); font-size: var(--fs-base); font-weight: 600; cursor: pointer; color: var(--c-ink);
}
.btn.yes { background: var(--c-green-bright); border-color: var(--c-green-bright); color: var(--c-on-green); }
.btn.no { background: var(--c-surface); border-color: var(--c-red); color: var(--c-red); }
.btn.small { flex: none; padding: var(--sp-7) var(--sp-8); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.btn.ghost { font-size: var(--fs-sm); padding: 13px var(--sp-4); color: var(--c-muted); font-weight: 500; }
.ghost-row { margin-top: var(--sp-4); }
.btn:disabled { opacity: 0.5; cursor: default; }
.broken { color: var(--c-yellow); font-weight: 600; font-size: var(--fs-md); margin: var(--sp-2) 0; }

.issue { margin-top: var(--sp-7); font-size: var(--fs-md); }
.issue summary { color: var(--c-muted); cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.issue textarea {
  width: 100%; margin-top: var(--sp-4); border: 1px solid var(--c-border-soft); border-radius: var(--radius);
  padding: var(--sp-5); font: inherit; font-size: var(--fs-input); resize: vertical;
}
.attribution { color: var(--c-faint-2); font-size: var(--fs-xs); margin: var(--sp-7) 0 0; }

.modal {
  position: fixed; inset: 0; z-index: 700; background: var(--c-overlay);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 700px) { .modal { align-items: center; } }
.modal-card {
  background: var(--c-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; width: 100%; max-width: 440px;
  padding: var(--sp-10) var(--sp-9) calc(var(--sp-10) + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto;
}
@media (min-width: 700px) { .modal-card { border-radius: var(--radius-xl); } }
.modal-card h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); }
.modal-card label { display: block; margin-top: var(--sp-6); font-size: var(--fs-md); font-weight: 600; }
/* --fs-input è 16px: sotto quella soglia Safari iOS zooma la pagina al focus del campo */
.modal-card input, .modal-card textarea {
  width: 100%; margin-top: 5px; border: 1px solid var(--c-border-soft); border-radius: var(--radius);
  padding: var(--sp-6); font: inherit; font-size: var(--fs-input);
}
.modal-card .ask-btns { margin-top: var(--sp-8); }
.small-note { font-size: var(--fs-xs); margin-top: var(--sp-5); }

.toast {
  position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 800; background: var(--c-ink); color: var(--c-on-green);
  padding: var(--sp-6) var(--sp-9); border-radius: var(--radius-md); font-size: var(--fs-md); box-shadow: var(--shadow);
  max-width: 90vw; text-align: center;
}

.credits {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  height: calc(var(--h-credits) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding-bottom: env(safe-area-inset-bottom);
  font-size: var(--fs-xs); color: var(--c-ink-soft-2); background: var(--c-glass-soft);
}
/* 24px e non 44: sono link inline dentro la riga di attribuzione, il caso che
   WCAG 2.5.8 esclude esplicitamente dal target minimo. Portarli a 44 vorrebbe
   dire una fascia alta quanto un bottone sopra la mappa, cioè togliere allo
   strumento lo spazio che serve, per un criterio che qui non si applica. */
.credits a { color: inherit; display: inline-block; padding: var(--sp-3) var(--sp-1); }

.leaflet-control-attribution { font-size: var(--fs-3xs); }