/* Lingua: selettore dentro la ricerca (js/lingua-scelta.js), invito alla lingua del browser, riga "tradotto dall'italiano". */
.lingua{position:relative;flex:none;display:flex}
.lingua-btn{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 7px;border:1px solid var(--g-line);border-radius:8px;background:var(--g-fill2);color:var(--tx);font-size:calc(12px * var(--kt));font-weight:700;letter-spacing:.02em}
.lingua-btn svg.i{width:15px;height:15px;color:var(--mu)}
.lingua-btn:hover{border-color:var(--g-ctl)}
.lingua-btn[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
.lingua-menu{position:absolute;right:-11px;top:calc(100% + 14px);z-index:2;width:200px;padding:6px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--g-solid);box-shadow:var(--ombra-pop);display:grid;gap:2px;transform-origin:top right;animation:pop 180ms var(--ease-pop)}
.lingua-menu[hidden]{display:none}
.lingua-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 12px;border:0;border-radius:var(--r-ctl);background:none;color:var(--tx);font-size:var(--t1);text-align:left}
.lingua-menu button:hover{background:var(--g-fill2)}
.lingua-menu button span{font-size:calc(12px * var(--kt));font-weight:600;color:var(--mu)}
.lingua-menu button[aria-checked="true"]{background:var(--pill);color:var(--acc)}
.lingua-menu button[aria-checked="true"] span{color:var(--acc)}
/* Aprire la lingua non deve allargare la ricerca come quando si scrive. */
.ricerca:has(.lingua:focus-within):not(:has(#q:focus)){outline:none}
/* Il pulsante della lingua toglie spazio al segnaposto ("Cerca luogo o particella" deve stare intero): la ricerca
   cresce di 12 px (i chip si spostano con lei) e il tasto "/" si vede solo quando si scrive. */
@media (min-width:821px){
  .ricerca{width:292px}
  .settori{left:412px}
  .ricerca:not(:focus-within) kbd{display:none}
  .ricerca:has(.lingua:focus-within):not(:has(#q:focus)){width:292px}
  .ricerca:has(.lingua:focus-within):not(:has(#q:focus)) kbd{display:none}
}

.lingua-invito{position:fixed;z-index:97;left:0;top:0;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid color-mix(in srgb,var(--acc) 55%,var(--g-line));border-radius:999px;background:var(--g-solid);box-shadow:0 12px 32px rgba(14,20,17,.18);animation:pop 220ms var(--ease-pop)}
.lingua-invito::before{content:"";position:absolute;top:-6px;left:calc(var(--x,50%) - 6px);width:10px;height:10px;background:var(--g-solid);border-left:1px solid color-mix(in srgb,var(--acc) 55%,var(--g-line));border-top:1px solid color-mix(in srgb,var(--acc) 55%,var(--g-line));transform:rotate(45deg)}
.lingua-invito button{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;border-radius:999px;background:none;color:var(--tx);font-size:var(--t1);font-weight:700}
.lingua-invito-si{padding:0 14px 0 10px;background:var(--acc)!important;color:var(--on-acc)!important}
.lingua-invito-si svg.i{width:16px;height:16px}
.lingua-invito-no{width:36px;justify-content:center;color:var(--mu)!important}
.lingua-invito-no svg.i{width:16px;height:16px}

.nota-lingua{font-style:italic}
@media (max-width:820px){
  .lingua-btn{height:36px;padding:0 10px}
  .lingua-menu{right:-11px;top:calc(100% + 12px)}
  .lingua-invito button{min-height:40px}
  .lingua-invito-no{width:40px}
}

/* Tessere di Livelli: un nome lungo (tedesco, francese, ma anche "Verde pubblico") va su due righe invece di essere tagliato. */
.tessera .nome{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15;text-align:center;overflow-wrap:break-word;hyphens:auto}

/* Invito dentro il primo passo della guida (lingua-scelta.js, htmlProposta). */
.lingua-proposta{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 0 10px;border-bottom:1px solid var(--g-line);font-size:calc(13px * var(--kt));color:var(--mu)}
.lingua-proposta span{flex:1;min-width:0}
.lingua-proposta button{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;border-radius:999px;font-size:var(--t1);font-weight:700}
.lingua-proposta .lingua-invito-si{flex:none}
.lingua-proposta .lingua-invito-no{flex:none;width:36px;justify-content:center;background:none;color:var(--mu)}

/* Fuori dall'italiano l'avviso in basso ha una riga in più ("Translated from Italian..."): il pulsante per scendere
   alle sezioni sale quanto basta per non coprirlo (da computer; da telefono la posizione è un'altra). */
@media (min-width:821px){html:not([lang="it"]) .giu{bottom:84px}}