/* Pagine degli utenti · direzione «Il radar» (scelta da Emanuele l'8/11/2026).
   Tema chiaro del marchio: fondo #F5F6FA, blu notte per la fascia e i titoli, giallo matita per
   l'azione principale e il punto del radar (mai per il testo sul bianco). Il cerchio del logo diventa
   lo strumento: anelli dei chilometri, un fascio che passa una volta, un punto trovato. */
@font-face { font-family: "Inter"; src: url("/statico/font/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/statico/font/inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; src: url("/statico/font/space-grotesk-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/statico/font/space-grotesk-latin-ext.woff2") format("woff2"); font-weight: 500 700; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fondo: #f5f6fa;
  --carta: #ffffff;
  --blu: #12355b;
  --blu-scuro: #0c2540;
  --blu-chiaro: #dfe7f1;
  --blu-tenue: #c5d2e2;
  --matita: #f2b705;
  --matita-viva: #ffc928;
  --testo: #12151c;
  --testo-2: #4f5566;
  --linea: #d9dce5;
  --linea-forte: #8e94a3;
  --errore: #a3261b;
  --errore-fondo: #fdeceb;
  --fatto: #1d6b45;
  --fatto-fondo: #e7f4ec;
  --titolo: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raggio: 6px;
  --raggio-scheda: 10px;
  --spazio-2: 0.5rem; --spazio-3: 0.75rem; --spazio-4: 1rem; --spazio-5: 1.5rem; --spazio-6: 2rem; --spazio-7: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 1rem/1.55 var(--ui); }
h1, h2, p { margin: 0; }
a { color: var(--blu); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
[hidden] { display: none !important; }

.salta { position: absolute; left: var(--spazio-4); top: -3rem; padding: var(--spazio-2) var(--spazio-4); background: var(--carta);
  color: var(--blu); border: 2px solid var(--blu); border-radius: var(--raggio); z-index: 2; }
.salta:focus { top: var(--spazio-2); }

.marchio { display: inline-flex; border-radius: var(--raggio); }
/* Il disegno del logo ha un margine vuoto a destra: si ritaglia, il logo resta com'è. */
.marchio img { display: block; height: 1.75rem; width: calc(1.75rem * 470 / 120); object-fit: cover; object-position: left center; }

/* --- Pagine interne: fascia blu e schede bianche ------------------------------------------- */
.testata { background: var(--blu); color: var(--blu-chiaro); }
.testata :focus-visible { outline-color: var(--matita); }
.testata__riga { max-width: 64rem; margin: 0 auto; padding: var(--spazio-3) var(--spazio-4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--spazio-3); flex-wrap: wrap; }
.testata__accedi { color: #fff; font-weight: 600; }
.esci { display: flex; align-items: center; gap: var(--spazio-3); min-width: 0; }
.esci__chi { font-size: 0.9375rem; overflow-wrap: anywhere; }

.pagina { max-width: 64rem; margin: 0 auto; padding: var(--spazio-6) var(--spazio-4) var(--spazio-6); display: grid; gap: var(--spazio-5); }
.pagina--stretta > * { max-width: 30rem; }
.foglio { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-scheda);
  padding: var(--spazio-5) var(--spazio-4); display: grid; gap: var(--spazio-4); }
h1 { font: 600 1.875rem/1.1 var(--titolo); letter-spacing: -0.02em; color: var(--blu); }
h2 { font: 600 1.1875rem/1.3 var(--titolo); }
.nota, .piede, .aiuto { color: var(--testo-2); font-size: 0.9375rem; }
.aiuto { margin-top: 0.375rem; font-size: 0.875rem; }
.testo { max-width: 46rem; }
.testo h2 { margin-top: var(--spazio-2); }
.piede-pagina { max-width: 64rem; margin: 0 auto; padding: 0 var(--spazio-4) var(--spazio-6); font-size: 0.875rem; }

/* --- Moduli ------------------------------------------------------------------------------- */
.modulo { display: grid; gap: var(--spazio-4); }
.campo label { display: block; font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.375rem; }
input[type=email], input[type=password], input[type=text] { width: 100%; min-height: 2.875rem; padding: 0 0.875rem;
  font: 400 1rem var(--ui); color: var(--testo); background: var(--carta); border: 1px solid var(--linea-forte);
  border-radius: var(--raggio); }
input:focus-visible { border-color: var(--blu); }
input[aria-invalid=true] { border-color: var(--errore); box-shadow: 0 0 0 1px var(--errore); }
.errore-campo { margin-top: 0.375rem; color: var(--errore); font-size: 0.875rem; font-weight: 500; }

.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0 1.25rem;
  font: 600 1rem var(--ui); border-radius: var(--raggio); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease-out, transform 120ms ease-out; }
.bottone:active { transform: translateY(1px); }
.bottone--primario { background: var(--matita); color: var(--blu-scuro); }
.bottone--primario:hover { background: var(--matita-viva); }
.bottone--primario:focus-visible { outline-color: var(--blu); }
.bottone--chiaro { background: transparent; color: #fff; border-color: var(--blu-tenue); min-height: 2.5rem; padding: 0 0.875rem; }
.bottone--chiaro:hover { background: rgba(255, 255, 255, 0.08); }
.bottone--quieto { background: transparent; color: var(--blu); border-color: var(--linea-forte); min-height: 2.5rem; padding: 0 0.875rem; }
.bottone--pieno { width: 100%; }
.annulla { justify-self: start; }

.avviso { padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio); border-left: 4px solid currentColor; }
.avviso--errore { color: var(--errore); background: var(--errore-fondo); }
.avviso--fatto { color: var(--fatto); background: var(--fatto-fondo); }

/* --- Pagine d'ingresso: il radar --------------------------------------------------------- */
.ingresso { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.alone { position: relative; overflow: hidden; background: var(--blu); color: var(--blu-chiaro); min-height: 13.5rem;
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--spazio-4); }
.alone :focus-visible { outline-color: var(--matita); }
.alone__marchio { position: relative; z-index: 1; align-self: flex-start; }
.alone__motto { position: relative; z-index: 1; max-width: 18rem; font: 500 0.9375rem/1.4 var(--ui); }
.radar { position: absolute; width: 30rem; height: 30rem; right: -9rem; top: -8rem; pointer-events: none; }
.radar__anelli circle { fill: none; stroke: #fff; stroke-opacity: 0.16; }
.radar__fascio { fill: #fff; fill-opacity: 0.07; transform-box: view-box; transform-origin: 200px 200px;
  animation: spazzata 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.radar__punto { fill: var(--matita); transform-box: fill-box; transform-origin: center;
  animation: trovato 0.5s ease-out 1.25s both; }
@keyframes spazzata { from { transform: rotate(-110deg); } to { transform: rotate(0deg); } }
@keyframes trovato { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

.ingresso__corpo { width: 100%; max-width: 28rem; margin: 0 auto; padding: var(--spazio-5) var(--spazio-4) var(--spazio-6);
  display: grid; gap: var(--spazio-4); align-content: start; }
.ingresso .foglio { background: none; border: 0; border-radius: 0; padding: 0; }
.ingresso__piede { margin-top: var(--spazio-4); font-size: 0.875rem; }

@media (min-width: 56rem) {
  .ingresso { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(24rem, 34rem); }
  .alone { min-height: 100vh; padding: var(--spazio-6); position: sticky; top: 0; }
  .radar { width: 44rem; height: 44rem; right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .alone__motto { font-size: 1.25rem; max-width: 22rem; }
  .ingresso__corpo { align-content: center; padding: var(--spazio-7) var(--spazio-6); }
}
@media (min-width: 40rem) {
  .foglio { padding: var(--spazio-6); }
}
@media (max-width: 22rem) {
  h1 { font-size: 1.625rem; }
  .marchio img { height: 1.5rem; width: calc(1.5rem * 470 / 120); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* Azioni dai messaggi (5A): riga sopra il titolo della pagina di conferma e di esito. */
.sopratitolo { color: var(--testo-2); font: 600 0.8125rem/1.3 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
/* --- Navigazione delle pagine interne (4B) ----------------------------------------------- */
.nav ul { display: flex; gap: var(--spazio-5); margin: 0; padding: 0; list-style: none; font: 500 0.9375rem var(--ui); }
.nav a { display: inline-block; color: var(--blu-tenue); text-decoration: none; padding: 0.625rem 0 0.5rem; min-height: 2.75rem; }
.nav a:hover { color: #fff; }
/* La voce attuale: testo pieno e il tratto giallo matita sotto, come nella proposta scelta. */
.nav a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--matita); }
.testata__riga { row-gap: 0; }
.nav { order: 3; flex-basis: 100%; }
@media (min-width: 56rem) {
  .nav { order: 0; flex-basis: auto; margin-left: var(--spazio-5); margin-right: auto; }
  .nav a { padding: 0.25rem 0; min-height: 0; }
}
.visivo-nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.invisibile { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.intestazione { display: grid; gap: var(--spazio-2); }
.vuoto h2 { color: var(--blu); }
.etichetta { display: inline-block; padding: 0 0.5rem; border-radius: 4px; background: var(--blu-chiaro); color: var(--blu-scuro); font: 600 0.75rem/1.5rem var(--ui); letter-spacing: 0.02em; }
.avviso--nota { color: var(--blu-scuro); background: var(--blu-chiaro); }
.bottone--pericolo { background: transparent; color: var(--errore); border-color: var(--errore); min-height: 2.5rem; padding: 0 0.875rem; }
.bottone--pericolo:hover { background: var(--errore-fondo); }

/* --- Annunci: elenco a destra, la zona a sinistra da 56rem (sul telefono dopo l'elenco) -------- */
.pagina--annunci { gap: var(--spazio-5); }
.pagina--annunci__avviso { grid-column: 1 / -1; }
.annunci { display: grid; gap: var(--spazio-4); min-width: 0; }
.annunci__sintesi { color: var(--testo-2); font-size: 0.9375rem; }
.elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-3); }
.annuncio { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--spazio-3); padding: var(--spazio-4);
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-scheda); }
.annuncio--urgente { border-color: var(--blu); box-shadow: inset 4px 0 0 var(--matita); }
.annuncio--fuori { background: var(--fondo); }
.annuncio--fuori .punto { background: var(--testo-2); }  /* grigio scuro: contrasto 7:1 con il bianco */
.punto { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: #fff;
  font: 600 0.875rem var(--titolo); }
.annuncio__corpo { min-width: 0; display: grid; gap: 0.25rem; }
.annuncio__ente { font: 600 1.0625rem/1.35 var(--ui); overflow-wrap: anywhere; }
.annuncio__luogo { font-weight: 400; color: var(--testo-2); }
.annuncio__titolo { font-size: 0.9375rem; overflow-wrap: anywhere; }
.annuncio__dati { color: var(--testo-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.annuncio__piede { margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: 0.9375rem; }
.annuncio__piede .apri { font-weight: 600; }
.annuncio__piede .fonte { color: var(--testo-2); }
.scade { font-weight: 600; }
/* La scelta dell'utente sulla voce: stato in parole e comandi quieti, sotto il piede. */
.annuncio__scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-top: 0.125rem; font-size: 0.9375rem; }
.annuncio__stato { font-weight: 600; color: var(--fatto); }
.bottone-testo { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--blu); font: 600 0.9375rem/1.2 var(--ui);
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.bottone-testo:hover { color: var(--blu-scuro); }
.bottone-testo:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 2px; }
.annuncio--urgente .scade { color: #7a4300; }
.distanza { grid-column: 2; display: flex; align-items: baseline; gap: 0.375rem; color: var(--testo-2); font-size: 0.8125rem; }
.distanza strong { font: 600 1.125rem/1.1 var(--titolo); color: var(--testo); }
.zona { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-scheda); padding: var(--spazio-4); display: grid; gap: var(--spazio-3); align-self: start; min-width: 0; }
.zona h2 { font-size: 1.0625rem; }
.zona__profili { font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.zona__profili a { padding: 0.25rem 0; }
.zona__profili a[aria-current] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--matita); text-decoration: none; }
.zona__testo { display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.zona__elenco { margin: 0; padding: 0 0 0 1.125rem; display: grid; gap: 0.125rem; }
.zona__elenco .numeri { font: 600 0.875rem var(--titolo); color: var(--blu); }
.zona__nomi { font-size: 0.9375rem; overflow-wrap: anywhere; }
.zona__altri summary { cursor: pointer; color: var(--blu); font-weight: 500; }
@media (min-width: 56rem) {
  .pagina--annunci { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); align-items: start; }
  .zona { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--spazio-4); }
  .annunci { grid-column: 2; }
  .pagina--annunci__avviso + .annunci { grid-row: 2; }
  .pagina--annunci__avviso ~ .zona { grid-row: 2; }
  .annuncio { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .distanza { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .distanza strong { font-size: 1.375rem; }
}

/* --- La mappa della zona (SVG dal server) ------------------------------------------------------ */
.mappa { width: 100%; height: auto; display: block; }
.mappa__anelli circle { fill: none; stroke: var(--blu); stroke-opacity: 0.18; }
.mappa__raggio { fill: none; stroke: var(--blu); stroke-opacity: 0.55; stroke-dasharray: 4 5; }
.mappa__scala text { fill: var(--testo-2); font: 11px var(--ui); }
.mappa__centro { fill: var(--matita); stroke: var(--blu-scuro); stroke-width: 1.5; }
.mappa__marcatore circle { fill: var(--blu); }
.mappa__marcatore text { fill: #fff; font-family: var(--titolo); font-weight: 600; }
.mappa__punto--comune, .mappa__punto--annuncio { fill: var(--blu); }
.mappa__punto--escluso { fill: var(--carta); stroke: var(--errore); stroke-width: 1.5; }

/* --- Profili: elenco e modulo ---------------------------------------------------------------- */
.profili { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-3); }
.profilo-riga { gap: var(--spazio-3); }
.profilo-riga--sospeso { background: var(--fondo); }
.profilo-riga__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--spazio-3); }
.profilo-riga__testa h2 { font-size: 1.1875rem; overflow-wrap: anywhere; }
.profilo-riga__riassunto { color: var(--testo-2); font-size: 0.9375rem; }
.profilo-riga__azioni { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spazio-2) var(--spazio-3); }
.stato { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.spia { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--linea-forte); }
.stato--attivo .spia { background: var(--fatto); }
.elimina summary { list-style: none; display: inline-flex; }
.elimina summary::-webkit-details-marker { display: none; }
.elimina__modulo { margin-top: var(--spazio-3); display: grid; gap: var(--spazio-3); padding: var(--spazio-3); border: 1px solid var(--errore); border-radius: var(--raggio); background: var(--errore-fondo); max-width: 30rem; }
fieldset.campo { margin: 0; padding: 0; border: 0; min-width: 0; min-inline-size: 0; }  /* niente larghezza minima del browser: a 320 px non sborda */
.scelte { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.375rem; }
.scelte legend, .campo__titolo { display: block; padding: 0; font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.375rem; }
.scelta { display: flex; align-items: flex-start; gap: 0.625rem; min-height: 2.25rem; padding: 0.25rem 0; font-size: 1rem; cursor: pointer; }
.scelta input { margin: 0.25rem 0 0; width: 1.125rem; height: 1.125rem; flex: none; accent-color: var(--blu); }
.scelte--candidati { padding: var(--spazio-3); border: 1px solid var(--linea-forte); border-radius: var(--raggio); background: var(--fondo); }
.modulo-profilo { display: grid; gap: var(--spazio-5); align-items: start; }
.modulo-profilo__campi { display: grid; gap: var(--spazio-4); min-width: 0; }
.modulo-profilo .foglio { gap: var(--spazio-4); }
.zona-campi { display: grid; gap: var(--spazio-4); }
input[type=number] { width: 100%; max-width: 9rem; min-height: 2.875rem; padding: 0 0.875rem; font: 400 1rem var(--ui); color: var(--testo); background: var(--carta);
  border: 1px solid var(--linea-forte); border-radius: var(--raggio); }
.coordinate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: var(--spazio-3); max-width: 24rem; }
.coordinate label { display: grid; gap: 0.375rem; font-weight: 500; font-size: 0.9375rem; }
.coordinate input { max-width: none; }
.campo[aria-invalid=true] input { border-color: var(--errore); }
.chip-elenco { list-style: none; margin: 0 0 var(--spazio-3); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.25rem 0 0.75rem; min-height: 2.25rem; border: 1px solid var(--linea-forte); border-radius: 999px; background: var(--carta); font-size: 0.9375rem; }
.chip--storico { border-style: dashed; color: var(--testo-2); }
.chip__togli { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--testo-2); font: 600 1.125rem/1 var(--ui); cursor: pointer; }
.chip__togli:hover { background: var(--errore-fondo); color: var(--errore); }
.aggiungi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spazio-2); align-items: start; position: relative; max-width: 30rem; }
.aggiungi .bottone { min-height: 2.875rem; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-4); }
.anteprima { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-scheda); padding: var(--spazio-4); display: grid; gap: var(--spazio-3); min-width: 0; }
.anteprima h2 { font-size: 1.0625rem; }
/* Suggerimenti del completamento (solo con JavaScript): una lista sotto il campo, voci con tastiera. */
.campo--comune { position: relative; }
.suggerimenti { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 0.25rem); margin: 0; padding: 0.25rem 0; list-style: none; background: var(--carta);
  border: 1px solid var(--linea-forte); border-radius: var(--raggio); box-shadow: 0 8px 24px rgba(18, 21, 28, 0.12); max-height: 16rem; overflow: auto; }
.suggerimenti li { padding: 0.5rem 0.875rem; cursor: pointer; font-size: 0.9375rem; }
.suggerimenti li[aria-selected=true], .suggerimenti li:hover { background: var(--blu-chiaro); }
.campo--comune .suggerimenti { top: auto; }
.aggiungi .suggerimenti { grid-column: 1; top: calc(2.875rem + 0.25rem); }

/* --- Canali (4C) e Account: un foglio di impostazioni, una riga per argomento ------------------ */
::selection { background: var(--blu-chiaro); color: var(--blu-scuro); }
main:focus { outline: none; }  /* il fuoco arriva qui quando si chiude il riquadro dei canali */
code { font: 0.9375em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
select { min-height: 2.875rem; max-width: 100%; padding: 0 0.5rem 0 0.75rem; font: 400 1rem var(--ui); color: var(--testo);
  background-color: var(--carta); border: 1px solid var(--linea-forte); border-radius: var(--raggio); }
select:focus-visible { border-color: var(--blu); }

.impostazioni { padding: 0; gap: 0; }
.impostazione { display: grid; gap: var(--spazio-4); padding: var(--spazio-5) var(--spazio-4); border-top: 1px solid var(--linea); min-width: 0; }
.impostazione:first-child { border-top: 0; }
.impostazione__testa { display: grid; gap: 0.375rem; align-content: start; }
.impostazione__corpo { display: grid; gap: var(--spazio-4); min-width: 0; max-width: 34rem; justify-items: start; }
.impostazione__corpo > * { max-width: 100%; min-width: 0; }
.impostazione__corpo > .modulo, .impostazione__corpo > .avviso, .impostazione__corpo > .collegamento,
.impostazione__corpo > .apri { justify-self: stretch; }
.impostazione .modulo { justify-items: start; }
.impostazione .modulo > .scelte, .impostazione .modulo > .campo { justify-self: stretch; }
@media (min-width: 48rem) {
  .impostazione { grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); gap: var(--spazio-6); padding: var(--spazio-6); }
}

/* Una scelta con il dettaglio sotto (canale e dove arriva); ferma = non si può ancora accendere. */
.scelta--ampia { align-items: flex-start; padding: 0.5rem 0; }
.scelta--ampia > span { display: grid; gap: 0.125rem; min-width: 0; }
.scelta__dettaglio { color: var(--testo-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.scelta--ferma { cursor: default; }
.scelta--ferma strong { color: var(--testo-2); }
.scelte--griglia { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); column-gap: var(--spazio-4); }
.fascia { display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-4); }
.fascia__ora { display: inline-flex; align-items: center; gap: var(--spazio-2); white-space: nowrap; }
.fascia label { font-weight: 500; font-size: 0.9375rem; }

/* Lo stato in attesa: il punto giallo del radar, con il bordo che lo stacca dal bianco. */
.stato--attesa .spia { background: var(--matita); border: 1.5px solid var(--blu-scuro); }
/* Uno stato con un indirizzo dentro va a capo sui telefoni: il punto resta accanto alla prima riga. */
.stato--lungo { align-items: flex-start; }
.stato--lungo .spia { flex: none; margin-top: 0.35rem; }
.collegamento { display: grid; gap: var(--spazio-3); justify-items: start; padding: var(--spazio-4); background: var(--fondo);
  border: 1px solid var(--linea-forte); border-radius: var(--raggio); min-width: 0; }
.collegamento > * { max-width: 100%; min-width: 0; }
.passi { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--spazio-3); }
.passi p { margin-top: var(--spazio-2); }
.codice-riga code { display: block; padding: 0.5rem 0.75rem; background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--raggio); font-size: 0.875rem; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.indirizzo { overflow-wrap: anywhere; }
.apri summary { list-style: none; display: inline-flex; }
.apri summary::-webkit-details-marker { display: none; }
.apri__modulo { margin-top: var(--spazio-4); max-width: 26rem; }

/* --- Il riquadro «scegli dove ricevere gli avvisi»: sotto la fascia, finché non lo si chiude ---- */
.richiamo { background: var(--blu-chiaro); color: var(--blu-scuro); border-bottom: 1px solid var(--blu-tenue); }
.richiamo__riga { max-width: 64rem; margin: 0 auto; padding: var(--spazio-3) var(--spazio-4); display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--spazio-3); }
.richiamo__punto { width: 0.625rem; height: 0.625rem; margin-top: 0.4375rem; border-radius: 50%; background: var(--matita);
  border: 1.5px solid var(--blu-scuro); }
.richiamo p { font-size: 0.9375rem; overflow-wrap: anywhere; }
.richiamo a { color: var(--blu-scuro); font-weight: 600; }
.richiamo__chiudi { width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.625rem -0.5rem 0; display: grid; place-items: center;
  border: 0; border-radius: var(--raggio); background: transparent; color: var(--blu-scuro); cursor: pointer;
  transition: background-color 120ms ease-out; }
.richiamo__chiudi:hover { background: rgba(18, 53, 91, 0.1); }
.richiamo__chiudi svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }

/* === Correzioni dopo il collaudo dell'11/11/2026 ================================================ */
/* E13 · Una colonna sola per tutte le pagine interne, quella della testata e del piede (64rem): il modulo
   del profilo non è più largo delle altre pagine, e le pagine «strette» (account, password, errore)
   tengono il testo corto (30rem, regola in alto) ma partono dallo stesso margine del logo. */

/* E4 · L'anteprima della zona sta nel modulo subito dopo la zona: sul telefono viene prima di «Che cosa
   cerchi» e di «Salva»; da 64rem occupa la colonna a destra e resta in vista mentre si scorre. Le righe
   sono esplicite perché l'anteprima le attraversi tutte; quella finale assorbe un'anteprima più alta del
   modulo. Dopo «Aggiorna l'anteprima», «Aggiungi» o «Togli» la pagina si riapre sul punto del pulsante
   (ancora nell'indirizzo): l'anteprima appena rifatta ha il bordo blu. */
.campo--ancora { scroll-margin-top: var(--spazio-4); }
.modulo-profilo__campi:has(#anteprima:target) > .anteprima { border-color: var(--blu); }
@media (min-width: 64rem) {
  .modulo-profilo__campi { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); grid-template-rows: repeat(8, auto) 1fr;
    column-gap: var(--spazio-5); row-gap: 0; }
  .modulo-profilo__campi > * { grid-column: 1; margin-bottom: var(--spazio-4); }
  .modulo-profilo__campi > :last-child { margin-bottom: 0; }
  .modulo-profilo__campi > .anteprima { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: var(--spazio-4);
    margin-bottom: 0; }
}

/* E3 · Sotto le prime voci: «Mostra tutti i N interpelli» e una riga che dice che cosa si sta guardando. */
.elenco__altre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2) var(--spazio-4); }

/* E16 · Il selettore del profilo della mappa in testa all'elenco (prima stava dentro la zona). */
.annunci__testa { display: grid; gap: 0.375rem; }
.zona__profili { align-items: baseline; color: var(--testo-2); }

/* === Campo password (modello comune `_password.html`, script `/statico/comune/campo-password.js`) ===
   L'occhio sta dentro il campo, a destra, largo quanto un dito (2,75rem). Il riquadro della robustezza è
   una velatura del colore del giudizio sopra la scheda bianca, con la barra a tre tratti e i punti che
   mancano. Lo stato non è mai affidato al solo colore: ogni punto ha il suo segno (spunta, croce,
   puntino) e il giudizio è scritto. Nessuna animazione: compare mentre si scrive. */
:root { --attenzione: #7a4f00; --attenzione-segno: #b97700; }
.segreto { position: relative; }
.segreto--con-occhio input { padding-right: 3.25rem; }
.segreto__occhio { position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; display: grid; place-items: center;
  padding: 0; border: 1px solid transparent; border-radius: 0 var(--raggio) var(--raggio) 0; background: transparent padding-box;
  color: var(--testo-2); cursor: pointer;  /* il bordo trasparente tiene il fondo dentro il bordo del campo: bersaglio alto quanto il campo */
  transition: color 120ms ease-out, background-color 120ms ease-out; }
.segreto__occhio svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.segreto__occhio .segreto__chiuso, .segreto--mostrato .segreto__aperto { display: none; }
.segreto--mostrato .segreto__occhio .segreto__chiuso { display: block; }
.segreto--mostrato .segreto__occhio { color: var(--blu); }
/* Edge mette da sé un occhio nei campi password: qui ce n'è già uno, uguale in tutti i browser. */
.segreto input::-ms-reveal { display: none; }
.segreto input::-ms-clear { display: none; }  /* due regole: se una non è riconosciuta l'altra vale lo stesso */
.segreto__occhio:active { background-color: var(--blu-chiaro); }
.segreto__occhio:focus-visible { outline: 3px solid var(--blu); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .segreto__occhio:hover { color: var(--blu); background-color: var(--blu-chiaro); } }

.robustezza { display: grid; gap: 0.625rem; margin-top: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--linea);
  border-radius: var(--raggio); background: rgb(223 231 241 / 0.45); color: var(--testo-2); font-size: 0.875rem; line-height: 1.45; }
.robustezza--debole { background: rgb(253 236 235 / 0.8); border-color: #ecc3bf; }
.robustezza--discreta { background: rgb(253 243 211 / 0.7); border-color: #e6d59c; }
.robustezza--forte { background: rgb(231 244 236 / 0.85); border-color: #b9dcc7; }
.robustezza__testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.125rem 1rem; color: var(--testo); font-weight: 500; }
.robustezza__testa strong { font-weight: 600; }
.robustezza--debole .robustezza__testa strong { color: var(--errore); }
.robustezza--discreta .robustezza__testa strong { color: var(--attenzione); }
.robustezza--forte .robustezza__testa strong { color: var(--fatto); }
.robustezza__barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.robustezza__barra i { height: 0.375rem; border-radius: 999px; background: rgb(18 21 28 / 0.14); }
.robustezza--debole .robustezza__barra i:first-child { background: var(--errore); }
.robustezza--discreta .robustezza__barra i:nth-child(-n+2) { background: var(--attenzione-segno); }
.robustezza--forte .robustezza__barra i { background: var(--fatto); }
.robustezza__punti { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; }
.robustezza__punti li, .coincide { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; align-items: start; overflow-wrap: anywhere; }
.robustezza__punti .fatto, .robustezza__punti .manca { color: var(--testo); }
.robustezza__nota { font-size: 0.8125rem; }
.segno { display: block; margin-top: 0.1875rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; color: var(--testo-2); }
.segno__vuoto { fill: currentColor; stroke: none; }
.segno__fatto, .segno__manca, .fatto > .segno .segno__vuoto, .manca > .segno .segno__vuoto { display: none; }
.fatto > .segno .segno__fatto, .manca > .segno .segno__manca { display: inline; }
.fatto > .segno { color: var(--fatto); }
.manca > .segno { color: var(--errore); }
.coincide { margin-top: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.coincide.fatto { color: var(--fatto); }
.coincide.manca { color: var(--errore); }