/* Futura Mappa: layout e componenti. I font-size in px sono moltiplicati per --kt (Grandezza del testo, futura.css). Token in futura.css. Misure e motion: SPEC_DESIGN_MAPPA_FUTURA.md (sez. 2-4, M1-M12). */

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);font-size:var(--t2);line-height:1.45;font-weight:500;color:var(--tx);background:var(--g-bg);-webkit-text-size-adjust:100%}
h1,h2,h3,h4,p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.pieno{fill:currentColor;stroke:none}
kbd{font:inherit;font-size:calc(12px * var(--kt));font-weight:500;color:var(--mu);background:var(--g-fill2);border:1px solid var(--g-line);border-radius:6px;padding:0 6px;line-height:20px}

.salta{position:fixed;left:12px;top:-60px;z-index:100;background:var(--g-solid);color:var(--tx);padding:10px 14px;border-radius:var(--r-ctl);box-shadow:var(--ombra)}
.salta:focus{top:12px}

/* superfici di vetro: solo barra, ricerca, chip, pannello e popover (mai vetro dentro vetro) */
.barra,.ricerca,.pannello,.pop,.tabbar,.livelli-btn,.chip-set,.toast,.esito:not(:empty){background:var(--sup);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3)}
@media (prefers-reduced-transparency:reduce){.barra,.ricerca,.pannello,.pop,.tabbar,.livelli-btn,.chip-set,.toast,.esito:not(:empty){background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

.blocco-mappa{position:relative;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.mappa{position:absolute;inset:0}

/* ---------- barra sinistra (computer) ---------- */
.barra{position:absolute;left:12px;top:12px;bottom:12px;width:84px;z-index:30;border:1px solid var(--g-line);border-radius:var(--r-box);box-shadow:var(--ombra);display:flex;flex-direction:column;padding:10px 4px 6px}
.barra-marchio{display:grid;place-items:center;height:48px;margin-bottom:6px}
.barra-marchio img{width:40px;height:40px;display:block;overflow:visible}
.barra-voci{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.barra-spazio{flex:1;min-height:8px}
.voce{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:6px 2px;border:0;border-radius:var(--r-ctl);background:none;color:var(--mu);font-size:calc(12px * var(--kt));font-weight:600;line-height:1.15;text-align:center;transition:color .15s,background-color .15s}
.voce svg.i{width:22px;height:22px}
.voce span{max-width:76px}
.voce[aria-current="true"]{color:var(--on-pill)}
.voce[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.voce:not([aria-current="true"]):hover{background:var(--g-fill2);color:var(--tx)}}
.pillola{position:absolute;left:0;right:0;top:0;height:56px;border-radius:var(--r-ctl);background:var(--pill);z-index:0;opacity:0;transition:transform 320ms var(--ease),height 320ms var(--ease),opacity .15s}
@media (max-height:780px){.voce{min-height:48px;gap:2px}}

/* ---------- ricerca ---------- */
.ricerca{position:absolute;left:108px;top:12px;width:280px;height:44px;z-index:33;border:1px solid var(--g-ctl);border-radius:var(--r-ctl);box-shadow:var(--ombra);display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;transition:width 180ms var(--ease)}
.ricerca:focus-within{width:420px}
.ricerca-lente{display:grid;color:var(--mu)}
.ricerca input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:calc(16px * var(--kt));font-weight:500}
.ricerca input::placeholder{color:var(--mu);opacity:1}
.ricerca input::-webkit-search-cancel-button{display:none}
.ricerca:focus-within{outline:2px solid var(--acc2);outline-offset:2px}
.ricerca-pop{position:absolute;left:0;right:0;top:52px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--g-solid);box-shadow:var(--ombra-pop);padding:8px;max-height:min(420px,60dvh);overflow-y:auto;transform-origin:top center;animation:pop 180ms var(--ease-pop)}
.ricerca-pop h3{font-size:calc(12px * var(--kt));font-weight:600;color:var(--mu);padding:8px 10px 4px}
.sugg{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:var(--r-ctl);background:none;text-align:left;font-size:var(--t1)}
.sugg small{display:block;color:var(--mu);font-size:calc(13px * var(--kt))}
.sugg[aria-selected="true"],.sugg:hover{background:var(--g-fill2)}
.sugg svg.i{color:var(--mu)}
.esito{position:absolute;left:0;top:52px;margin:0;font-size:calc(13px * var(--kt));color:var(--tx);border-radius:var(--r-ctl);max-width:100%}
.esito:not(:empty){padding:8px 12px;border:1px solid var(--g-line);box-shadow:var(--ombra)}
.ricerca:focus-within .esito{display:none}

/* ---------- settori (chip in alto) ---------- */
.settori{position:absolute;top:12px;left:400px;right:calc(var(--pw-aperto) + 12px);height:44px;z-index:31;display:flex;align-items:center;transition:right 220ms ease-out}
.settori-riga{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 24px),transparent)}
.settori-riga::-webkit-scrollbar{display:none}
.chip-set{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;border:1px solid var(--g-ctl);border-radius:var(--r-pill);font-size:calc(14px * var(--kt));font-weight:600;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:background-color .15s,border-color .15s,transform .15s}
.chip-set .maki{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.chip-set svg.i{width:16px;height:16px}
.chip-set .chev{width:14px;height:14px;color:var(--mu);transition:transform .2s}
.chip-set b{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--acc);color:var(--on-acc);font-size:calc(12px * var(--kt));font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.chip-set[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--g-solid))}
.chip-set[aria-expanded="true"] .chev{transform:rotate(180deg)}
.settori-freccia{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--g-ctl);background:var(--g-solid);display:grid;place-items:center;box-shadow:var(--ombra)}
.settori-freccia[hidden]{display:none}
.settori-freccia svg.i{width:16px;height:16px}

/* ---------- popover (menu settore, livelli) M8 ---------- */
.pop{position:absolute;z-index:50;border:1px solid var(--g-line);border-radius:var(--r-box);box-shadow:var(--ombra-pop);transform-origin:var(--o,top left);animation:pop 180ms var(--ease-pop)}
.pop[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.menu-settore{width:300px;max-height:min(70dvh,560px);overflow-y:auto;padding:8px}
.menu-settore h3{font-size:calc(14px * var(--kt));font-weight:600;padding:8px 10px 2px}
.menu-settore .p-sotto{padding:0 10px 6px}
.menu-piede{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 4px;border-top:1px solid var(--g-line);margin-top:6px}
.menu-nota{font-size:calc(13px * var(--kt));color:var(--mu);padding:6px 10px;line-height:1.4}

/* ---------- righe con interruttore ---------- */
.riga-tog{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:var(--r-ctl);background:none;text-align:left;font-size:var(--t1)}
.riga-tog:hover{background:var(--g-fill2)}
.riga-tog .nome{flex:1;min-width:0}
.riga-tog small{display:block;color:var(--mu);font-size:calc(13px * var(--kt));font-weight:500}
.riga-tog .n{color:var(--mu);font-size:calc(13px * var(--kt));font-variant-numeric:tabular-nums}
.riga-tog[aria-disabled="true"]{cursor:default}
.riga-tog[aria-disabled="true"] .nome{color:var(--mu)}
.campione{width:16px;height:16px;border-radius:4px;flex:none;border:2px solid var(--c,var(--mu));background:color-mix(in srgb,var(--c,var(--mu)) 18%,transparent)}
.campione.linea{height:4px;border-width:0;background:var(--c);border-radius:2px}
.campione.punto{border-radius:50%;width:12px;height:12px;margin:0 2px;background:var(--c)}
/* interruttore M9 */
.tog{position:relative;flex:none;width:36px;height:22px;border-radius:var(--r-pill);border:1px solid var(--g-ctl);background:var(--sink);transition:background-color 180ms,border-color 180ms}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--mu);transition:transform 240ms var(--ease-molla),background-color 180ms}
[aria-checked="true"]>.tog{background:var(--acc);border-color:var(--acc)}
[aria-checked="true"]>.tog::after{transform:translateX(14px);background:var(--on-acc)}
[aria-disabled="true"]>.tog{opacity:.45}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h-btn);padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--g-ctl);background:var(--g-solid);color:var(--tx);font-size:var(--t1);font-weight:600;white-space:nowrap;text-decoration:none;transition:transform 150ms var(--ease),border-color .15s,background-color .15s}
.btn svg.i{width:16px;height:16px}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.piccolo{min-height:32px;padding:0 12px;font-size:calc(13px * var(--kt))}
.link{border:0;background:none;padding:0;color:var(--acc);font-weight:600;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px) scale(1.02);border-color:var(--acc)}.chip-set:hover{border-color:var(--acc)}}
.btn:active,.chip-set:active,.voce:active{transform:scale(.97);transition-duration:90ms}

/* ---------- Livelli ---------- */
.livelli-btn{position:absolute;left:108px;bottom:12px;z-index:31;width:64px;height:64px;padding:0;border:2px solid var(--g-solid);border-radius:var(--r-ctl);box-shadow:var(--ombra);overflow:hidden;display:block}
.livelli-mini{position:absolute;inset:0;background:var(--g-fill2) center/cover no-repeat}
.livelli-nome{position:absolute;left:0;right:0;bottom:0;padding:14px 0 3px;font-size:calc(12px * var(--kt));font-weight:600;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.stato-pill{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:var(--r-badge);font-size:calc(12px * var(--kt));font-weight:600;background:var(--g-fill2);color:var(--mu)}
.stato-pill.ok{color:var(--ok)}

/* ---------- pannello destro (computer) M7 ---------- */
.pannello{position:absolute;top:0;right:0;bottom:0;width:var(--pw);z-index:40;display:flex;flex-direction:column;border-left:1px solid var(--g-line);box-shadow:var(--ombra-pannello);transform:translateX(24px);opacity:0;visibility:hidden;transition:transform 160ms ease-in,opacity 160ms ease-in,visibility 0s linear 160ms}
.pannello.aperto{transform:none;opacity:1;visibility:visible;transition:transform 220ms ease-out,opacity 220ms ease-out,visibility 0s}
.pannello[hidden]{display:flex}
.maniglia{position:absolute;left:-6px;top:0;bottom:0;width:12px;cursor:ew-resize;z-index:2;touch-action:none}
.maniglia::after{content:"";position:absolute;left:4px;top:50%;width:4px;height:48px;margin-top:-24px;border-radius:2px;background:var(--g-ctl);transition:background-color .15s}
.maniglia:hover::after,.maniglia:focus-visible::after,.maniglia.trascina::after{background:var(--acc)}
.maniglia-etichetta{position:absolute;left:14px;top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:var(--r-pill);background:var(--acc);color:var(--on-acc);font-size:calc(12px * var(--kt));font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.maniglia.trascina .maniglia-etichetta{opacity:1}
.foglio-presa{display:none}
.p-testa{display:flex;align-items:flex-start;gap:8px;padding:18px 16px 10px 20px}
.p-titoli{flex:1;min-width:0}
.p-testa h2{font-size:calc(22px * var(--kt));font-weight:600;letter-spacing:-.01em;line-height:1.15;outline:none}
.p-sotto{margin-top:4px;font-size:var(--t1);color:var(--mu)}
.btn-pers{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--g-ctl);background:none;font-size:calc(13px * var(--kt));font-weight:600}
.btn-chiudi{flex:none;width:34px;height:34px;border-radius:var(--r-ctl);border:0;background:var(--g-fill2);display:grid;place-items:center}
.btn-pers svg.i,.btn-chiudi svg.i{width:18px;height:18px}
.p-seg{padding:0 20px 8px}
.p-seg[hidden]{display:none}
.seg{position:relative;display:flex;gap:2px;padding:3px;border-radius:var(--r-ctl);background:var(--sink);border:1px solid var(--g-line)}
.seg button{position:relative;z-index:1;flex:1;min-height:32px;border:0;border-radius:9px;background:none;font-size:calc(13px * var(--kt));font-weight:600;color:var(--mu);transition:color 280ms cubic-bezier(.77,0,.175,1)}
.seg button[aria-pressed="true"]{color:var(--on-pill)}
.seg .seg-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:9px;background:var(--pill);transition:transform 280ms cubic-bezier(.77,0,.175,1),width 280ms cubic-bezier(.77,0,.175,1)}
.p-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 16px;container-type:inline-size}
.p-piede{padding:10px 20px 14px;border-top:1px solid var(--g-line);font-size:calc(12px * var(--kt));color:var(--mu)}
.p-piede .avviso{line-height:1.4}
.p-piede-riga{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.badge{font-size:calc(12px * var(--kt));font-weight:500;color:var(--mu)}

/* entrata e uscita della vista (M2, M3), cascata dei blocchi (M4) */
.vista{outline:none}
.vista.esce{animation:esce 150ms ease-in forwards}
.vista.entra{animation:entra 300ms var(--ease-out) both}
@keyframes esce{to{opacity:0;transform:translateY(-6px)}}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
@media (min-width:768px){.vista.esce{animation-name:esce-blur}.vista.entra{animation-name:entra-blur}}
@keyframes esce-blur{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
@keyframes entra-blur{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
.cascata>.blocco{animation:blocco 260ms var(--ease) both;animation-delay:calc(var(--i,0) * 40ms + 120ms)}
@keyframes blocco{from{opacity:0;transform:translateY(10px)}}

/* ---------- contenuto del pannello ---------- */
.blocco{padding:14px 0;border-top:1px solid var(--g-line)}
.blocco:first-child{border-top:0;padding-top:6px}
.blocco>h3{font-size:calc(16px * var(--kt));font-weight:600;margin-bottom:8px;letter-spacing:-.005em}
.blocco>h3 small{font-size:calc(13px * var(--kt));font-weight:500;color:var(--mu);margin-left:6px}
.testo{font-size:var(--t1);line-height:1.5}
.tenue{color:var(--mu)}
.piccolo{font-size:calc(13px * var(--kt))}
.meta{font-size:calc(12px * var(--kt));color:var(--mu);line-height:1.4;margin-top:6px}
.lista-righe{list-style:none;margin:0;padding:0}
.azione{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 4px;border:0;background:none;text-align:left;border-radius:var(--r-ctl)}
.azione:hover{background:var(--g-fill2)}
.azione .ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--g-fill2);color:var(--acc)}
.azione b{display:block;font-size:var(--t1);font-weight:600}
.azione small{display:block;font-size:calc(13px * var(--kt));color:var(--mu)}
.azione .chev{margin-left:auto;color:var(--mu);width:16px;height:16px}
.lockup{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.lockup img{width:40px;height:40px}
.lockup b{display:block;font-size:calc(16px * var(--kt));font-weight:600}
.lockup small{display:block;font-size:calc(13px * var(--kt));color:var(--mu)}
.domanda{font-size:var(--t3);font-weight:600;letter-spacing:-.01em;margin-top:8px}
.vuoto{padding:14px;border-radius:var(--r-ctl);background:var(--sink);font-size:var(--t1);color:var(--mu);line-height:1.45}
.vuoto b{color:var(--tx)}
.scheletro{height:44px;border-radius:var(--r-ctl);background:var(--g-fill2);margin:6px 0}
.azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* numero grande e conteggi */
.grande{display:flex;align-items:baseline;gap:10px}
.grande strong{font-size:calc(28px * var(--kt));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.grande span{font-size:var(--t1);color:var(--mu)}
.effetti{list-style:none;margin:10px 0 0;padding:0}
.effetti li{display:flex;align-items:center;gap:10px;min-height:32px;font-size:var(--t1)}
.effetti b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.sagoma{flex:none;width:20px;height:20px;color:var(--c)}
.e-blocca{--c:var(--e-blocca)}.e-parere{--c:var(--e-parere)}.e-informa{--c:var(--e-informa)}.e-verifica{--c:var(--e-verifica)}
.stato-lettura{display:flex;align-items:center;gap:8px;font-size:calc(13px * var(--kt));color:var(--mu);margin-top:8px}
.stato-lettura b{color:var(--tx);font-variant-numeric:tabular-nums}

/* riga di vincolo (niente card a bordo colorato: sagoma, etichetta, barra) */
.vincolo{padding:10px 0 14px}
.vincolo .testa{display:flex;gap:10px;align-items:flex-start}
.vincolo .testa .sagoma{margin-top:1px}
.vincolo h4{font-size:var(--t1);font-weight:600;line-height:1.35}
.vincolo .eff{display:block;font-size:calc(12px * var(--kt));font-weight:600;color:var(--c);margin-top:1px}
.vincolo .quota{font-size:calc(13px * var(--kt));color:var(--mu);margin:6px 0 0 30px}
.barra-quota{height:4px;margin:6px 0 0 30px}
.barra-quota i{display:block;height:100%;border-radius:2px;background:var(--c);transform-origin:left;min-width:4px}
.cascata .barra-quota i{animation:barra 600ms var(--ease) both;animation-delay:calc(min(var(--k,0),8) * 40ms + 200ms)}
@keyframes barra{from{transform:scaleX(0)}}
.vincolo .cosa{font-size:var(--t1);line-height:1.45;margin:6px 0 0 30px}
.vincolo .fonte{font-size:calc(12px * var(--kt));color:var(--mu);margin:6px 0 0 30px;line-height:1.4}
.vincolo details{margin:4px 0 0 30px;font-size:calc(13px * var(--kt))}
.vincolo summary{cursor:pointer;color:var(--acc);font-weight:600;min-height:32px;display:flex;align-items:center}
.vincolo details p{color:var(--mu);line-height:1.4}
details.gruppo{border-top:1px solid var(--g-line)}
details.gruppo>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:600;font-size:var(--t1)}
details.gruppo>summary::-webkit-details-marker{display:none}
details.gruppo>summary .n{color:var(--mu);font-weight:500;font-size:calc(13px * var(--kt))}
details.gruppo>summary svg.i{margin-left:auto;width:16px;height:16px;color:var(--mu);transition:transform .2s}
details.gruppo[open]>summary svg.i{transform:rotate(180deg)}
.legenda-effetti{display:grid;gap:6px;margin-top:8px}
.legenda-effetti p{display:flex;gap:8px;font-size:calc(13px * var(--kt));line-height:1.4;color:var(--mu)}
.legenda-effetti p b{color:var(--tx)}

/* documenti */
.docs{list-style:none;margin:0;padding:0}
.docs label{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:var(--t1);line-height:1.45;cursor:pointer;min-height:44px}
.docs input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--g-ctl);border-radius:6px;display:grid;place-items:center;transition:background-color 180ms,border-color 180ms}
.docs input:checked{background:var(--acc);border-color:var(--acc)}
.docs input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--on-acc);border-top:0;border-right:0;transform:translate(0,-1px) rotate(-45deg)}
.docs label span{background:linear-gradient(currentColor,currentColor) left 55%/0 1px no-repeat;transition:background-size 240ms var(--ease),color 240ms}
.docs input:checked+span{background-size:100% 1px;color:var(--mu)}

/* profili (Chi sei) */
.profilo{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 6px;border:0;background:none;text-align:left;border-radius:var(--r-ctl)}
.profilo:hover{background:var(--g-fill2)}
.profilo .radio{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;border:1.5px solid var(--g-ctl);display:grid;place-items:center;transition:border-color 280ms cubic-bezier(.77,0,.175,1)}
.profilo .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform 280ms cubic-bezier(.77,0,.175,1)}
.profilo[aria-checked="true"] .radio{border-color:var(--acc)}
.profilo[aria-checked="true"] .radio::after{transform:scale(1)}
.profilo b{display:block;font-size:var(--t1);font-weight:600}
.profilo small{display:block;font-size:calc(13px * var(--kt));color:var(--mu)}
.profilo .n{margin-left:auto;font-size:calc(13px * var(--kt));color:var(--mu);white-space:nowrap}

/* luoghi */
.luogo-riga{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 4px;border:0;border-radius:var(--r-ctl);background:none;text-align:left}
.luogo-riga:hover{background:var(--g-fill2)}
.luogo-riga b{display:block;font-size:var(--t1);font-weight:600}
.luogo-riga small{display:block;font-size:calc(13px * var(--kt));color:var(--mu)}
.luogo-riga .d{margin-left:auto;font-size:calc(13px * var(--kt));color:var(--mu);white-space:nowrap;font-variant-numeric:tabular-nums}
.marcatore-ico{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--acc);background:var(--g-solid);display:grid;place-items:center;color:var(--tx)}
.marcatore-ico .maki{width:14px;height:14px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.nuova{animation:blocco 240ms var(--ease) both;animation-delay:calc(min(var(--n,0),8) * 40ms)}
.avvisi-luogo p{font-size:calc(13px * var(--kt));line-height:1.45;padding:4px 0}
.avvisi-luogo b{display:block;font-size:calc(12px * var(--kt));color:var(--warn)}
.orari{width:100%;border-collapse:collapse;font-size:calc(13px * var(--kt));margin-top:6px}
.orari td{padding:3px 0;border-top:1px solid var(--g-line)}
.orari td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* fonti */
.fonti{list-style:none;margin:0;padding:0}
.fonti li{padding:8px 0;font-size:calc(13px * var(--kt));line-height:1.45}
.fonti b{display:block;font-size:var(--t1);font-weight:600}
.fonti .stato-pill{margin-left:6px}

/* personalizza */
.opzione{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.opzione>span{font-size:var(--t1);font-weight:600}
.opzione .seg{flex:none;min-width:220px}

/* prezzi (scheda della zona e legenda) */
.prezzi-riga{margin-top:10px;font-size:var(--t1);line-height:1.45}
.prezzi-riga .fonte{font-size:calc(12px * var(--kt));color:var(--mu)}
.chip{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip button{min-height:32px;border:1px solid var(--g-ctl);background:none;border-radius:var(--r-pill);padding:0 12px;font-size:calc(13px * var(--kt));font-weight:600}
.chip button[aria-pressed="true"]{background:var(--pill);border-color:var(--acc);color:var(--on-pill)}
.legenda-prezzi ul{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:calc(13px * var(--kt))}
.legenda-prezzi li{display:flex;align-items:center;gap:8px}
.legenda-prezzi li i{width:16px;height:12px;border-radius:3px;flex:none;border:1px solid var(--g-line)}
.legenda-prezzi i.non-quotata{background:repeating-linear-gradient(135deg,#D0D5DD 0 3px,#98a2b3 3px 4px)}
.quotazioni{margin:0;padding-left:18px;font-size:var(--t1);line-height:1.5}
.quotazioni li{margin-bottom:4px}
.quotazioni .quota{color:var(--mu);font-size:calc(13px * var(--kt))}
.nota-prezzi{font-size:calc(13px * var(--kt));line-height:1.45;margin:10px 0 4px}
.riquadro,.note-zona{border-top:1px solid var(--g-line);padding:6px 0;margin:8px 0;font-size:calc(13px * var(--kt));line-height:1.45}
.riquadro summary,.note-zona summary{cursor:pointer;font-weight:600;font-size:var(--t1);min-height:40px;display:flex;align-items:center}
.riquadro p{margin:6px 0}
.tabella{width:100%;border-collapse:collapse;font-size:calc(13px * var(--kt));margin:6px 0}
.tabella th,.tabella td{text-align:left;padding:4px 0;border-bottom:1px solid var(--g-line)}
.tabella th:last-child,.tabella td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.grafico h3{font-size:var(--t1);font-weight:600;margin-top:14px}
.andamento{width:100%;height:auto;display:block}
.andamento text{font-size:calc(12px * var(--kt));fill:var(--mu);font-family:var(--f)}
.andamento .asse{stroke:var(--g-line)}
.andamento .fascia{fill:var(--acc);fill-opacity:.22}
.andamento .bordo-fascia{fill:none;stroke:var(--acc);stroke-width:1.6}
.zona-riga{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 4px;border:0;border-radius:var(--r-ctl);background:none;text-align:left;font-size:var(--t1)}
.zona-riga:hover{background:var(--g-fill2)}
.zona-riga small{display:block;color:var(--mu);font-size:calc(13px * var(--kt))}
.zona-riga .d{margin-left:auto;max-width:58%;color:var(--mu);font-size:calc(13px * var(--kt));text-align:right;font-variant-numeric:tabular-nums}
.zona-riga .d small{display:block;font-size:calc(12px * var(--kt));color:var(--warn)}
.zona-riga i{flex:none;width:14px;height:14px;border-radius:4px;border:1px solid var(--g-line)}
.indietro{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--acc);font-weight:600;font-size:calc(13px * var(--kt));padding:6px 0;min-height:36px}
.indietro svg.i{width:16px;height:16px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:10px 16px;border-radius:var(--r-ctl);border:1px solid var(--g-line);box-shadow:var(--ombra);font-size:calc(14px * var(--kt));font-weight:600;transition:opacity .2s,transform .2s var(--ease)}
.toast.vis{opacity:1;transform:translate(-50%,0)}

/* anello sul punto scelto */
.anello{width:28px;height:28px;border-radius:50%;border:2px solid var(--acc);pointer-events:none;animation:anello 600ms ease-out forwards}
@keyframes anello{from{transform:scale(1);opacity:.6}to{transform:scale(2.2);opacity:0}}

/* controlli MapLibre in stile */
.maplibregl-ctrl-group{background:var(--g-solid);border:1px solid var(--g-line);border-radius:var(--r-ctl)!important;box-shadow:var(--ombra)!important;overflow:hidden}
.maplibregl-ctrl-group button{width:36px;height:36px}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--g-line)}
[data-tema=scuro] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-ctrl-bottom-right{right:var(--pw-aperto);transition:right 220ms ease-out}
.maplibregl-ctrl-bottom-left{left:184px}
.maplibregl-ctrl-scale{font-family:var(--f);font-size:calc(12px * var(--kt));font-weight:600;color:var(--tx);background:var(--sup);border-color:var(--tx);padding:1px 6px}
.maplibregl-ctrl-attrib{font-family:var(--f);font-size:calc(12px * var(--kt));line-height:1.45;background:var(--sup)!important;color:var(--mu)}
.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:6px 32px 6px 12px}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib:not(.maplibregl-compact){max-width:min(60ch,calc(100vw - var(--pw-aperto) - 220px))}
.maplibregl-ctrl-attrib a{color:var(--tx)}
.maplibregl-ctrl-attrib.maplibregl-compact{background:var(--g-solid)!important}
[data-tema=scuro] .maplibregl-ctrl-attrib-button{filter:invert(1)}

/* ---------- tab bar e foglio (telefono, fino a 820 px) ---------- */
.tabbar{display:none}
@media (max-width:820px){
  .barra{display:none}
  .tabbar{position:absolute;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:45;height:64px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px;border:1px solid var(--g-line);border-radius:var(--r-box);box-shadow:var(--ombra)}
  .tabbar .voce{min-height:56px;min-width:0;gap:3px}
  .tabbar .voce span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar .voce[aria-current="true"]{background:var(--pill)}
  .ricerca,.ricerca:focus-within{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));width:auto;height:48px}
  .ricerca input{font-size:calc(16px * var(--kt))}
  .ricerca kbd{display:none}
  .settori{top:calc(68px + env(safe-area-inset-top));left:0;right:0;padding:0 4px}
  .settori-riga{padding:4px 8px}
  .settori-freccia{display:none!important}
  .chip-set{height:40px}
  .menu-settore{left:8px!important;right:8px;width:auto;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom));--o:bottom center;max-height:60dvh}
  .livelli-btn{left:auto;right:12px;bottom:calc(var(--ph) + 128px + env(safe-area-inset-bottom));width:56px;height:56px;transition:bottom .28s var(--ease)}
  .maplibregl-ctrl-bottom-right{right:0;bottom:calc(var(--ph) + 80px + env(safe-area-inset-bottom));transition:bottom .28s var(--ease)}
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group{display:none}
  .maplibregl-ctrl-bottom-left{left:0;bottom:calc(var(--ph) + 80px + env(safe-area-inset-bottom));transition:bottom .28s var(--ease)}
  .pannello{top:auto;left:0;right:0;bottom:calc(80px + env(safe-area-inset-bottom));width:auto;height:132px;border-left:0;border-top:1px solid var(--g-line);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);transform:translateY(24px);transition:height .28s var(--ease),transform 160ms ease-in,opacity 160ms ease-in,visibility 0s linear 160ms}
  .pannello.aperto{transform:none;transition:height .28s var(--ease),transform 220ms ease-out,opacity 220ms ease-out,visibility 0s}
  .pannello[data-altezza="media"]{height:52dvh}
  .pannello[data-altezza="alta"]{height:82dvh}
  .pannello.trascina{transition:none}
  .maniglia{display:none}
  .foglio-presa{position:relative;display:grid;place-items:center;height:22px;flex:none;cursor:grab;touch-action:none}
  .foglio-presa::before{content:"";position:absolute;left:0;right:0;top:-6px;height:34px}
  .foglio-presa span{width:44px;height:5px;border-radius:3px;background:var(--g-ctl)}
  .p-testa{padding:2px 12px 6px 16px}
  .p-testa h2{font-size:calc(20px * var(--kt))}
  .btn-pers{width:44px;height:44px;padding:0;justify-content:center}
  .btn-pers .testo-pers{display:none}
  .btn-chiudi{width:44px;height:44px}
  .p-seg{padding:0 16px 8px}
  .p-corpo{padding:2px 16px 12px}
  .p-piede{padding:8px 16px 10px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
  .opzione{flex-wrap:wrap}
  .opzione .seg{min-width:0;width:100%}
  .vista.entra{animation-duration:240ms}
}

/* riduci movimento: niente animazioni, al cambio sezione basta il cambio di contenuto */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- fascia in basso e pulsante per scendere alla pagina sotto la mappa ---------- */
.fascia-scorri{position:absolute;left:0;right:0;bottom:0;height:14px;z-index:2}
.giu{position:absolute;z-index:32;left:calc((100% - var(--pw-aperto)) / 2);bottom:56px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 14px;border-radius:var(--r-ctl);border:1px solid var(--g-ctl);background:var(--sup);color:var(--tx);font-size:calc(14px * var(--kt));font-weight:600;box-shadow:var(--ombra);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);transition:left 220ms ease-out,opacity .2s}
.giu[hidden]{display:none}
.giu svg.i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.giu:hover{border-color:var(--acc)}}
@media (max-width:820px){
  .giu{bottom:calc(84px + env(safe-area-inset-bottom));min-height:44px}
  [data-pannello="aperto"] .giu{opacity:0;pointer-events:none}
  .fascia-scorri{display:none}
}

/* ---------- pagina sotto la mappa: stessi token, le sezioni arriveranno dopo ---------- */
.sotto{background:var(--g-bg);color:var(--tx);font-family:var(--f);font-size:var(--t2);line-height:1.5;--sotto-larghezza:1120px;--sotto-spazio:clamp(48px,6vw,96px);--sotto-margine:clamp(16px,4vw,40px)}
.sotto:empty{display:none}
.sotto>section{max-width:var(--sotto-larghezza);margin:0 auto;padding:var(--sotto-spazio) var(--sotto-margine)}
.sotto-sezione:not(.montata){min-height:40vh}

/* Esplora: "Cosa puoi fare qui" come testo, senza riquadri a icona */
.cosa-fare{display:grid;gap:12px}
.cosa-fare p{font-size:var(--t1);line-height:1.5}
.cosa-fare b{font-weight:600}

/* avviso legale sempre visibile da telefono (su computer sta nella riga di attribuzione) */
.avviso-mappa{position:absolute;z-index:3;right:calc(var(--pw-aperto) + 60px);bottom:12px;margin:0;max-width:min(60ch,calc(100% - var(--pw-aperto) - 480px));padding:5px 10px;border-radius:var(--r-badge);background:var(--sup);box-shadow:var(--ombra);font-size:calc(12px * var(--kt));line-height:1.4;color:var(--mu);transition:bottom .2s var(--ease),right .2s var(--ease)}
/* la striscia Livelli aperta non copre l'avviso: l'avviso sale */
#livelliPop:not([hidden])~.avviso-mappa{bottom:112px}
@media (max-width:820px){
  .avviso-mappa{display:block;position:absolute;z-index:3;left:8px;right:auto;bottom:calc(var(--ph) + 112px + env(safe-area-inset-bottom));margin:0;max-width:calc(100% - 88px);padding:5px 10px;border-radius:var(--r-badge);background:var(--sup);font-size:calc(12px * var(--kt));color:var(--mu);transition:bottom .28s var(--ease)}
  [data-pannello="aperto"] .avviso-mappa{display:none}
}
.non-letti{margin:8px 0 4px;padding:8px 10px;border-radius:var(--r-ctl);background:var(--sink)}
.non-letti .testo{font-size:calc(13px * var(--kt))}

/* catasto: forma, selezione, come richiedere la visura */
.blocco .testo+.testo{margin-top:6px}
.testo.attenzione{margin-top:10px;padding:8px 10px;border-radius:var(--r-ctl);background:var(--sink)}
.passi{margin:10px 0 4px;padding-left:20px;font-size:var(--t1);line-height:1.5}
.passi li{margin:0 0 8px}
.passi .btn{margin-top:8px}
.dati-visura{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dati-visura>span{padding:4px 10px;border-radius:var(--r-badge);background:var(--sink);border:1px solid var(--g-line);font-size:calc(13px * var(--kt))}
details.gruppo>.testo,details.gruppo>.meta{margin:0 0 8px}

/* ---------- Livelli: striscia verso destra, come Google Maps (livelli.js) ---------- */
.livelli-striscia{left:180px;bottom:12px;max-width:calc(100% - 180px - var(--pw-aperto) - 64px);padding:6px;--o:bottom left;transition:max-width 220ms ease-out}
.striscia-riga{display:flex;align-items:stretch;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.striscia-riga::-webkit-scrollbar{display:none}
.striscia-gruppo{display:flex;gap:4px}
.striscia-sep{flex:none;width:1px;margin:6px 2px;background:var(--g-line)}
.tessera{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:80px;padding:5px 4px 6px;border:1px solid transparent;border-radius:var(--r-ctl);background:none;color:var(--tx)}
a.tessera{text-decoration:none}
.tessera .mini{width:56px;height:38px;border-radius:8px;border:1px solid var(--g-line);background:var(--sink) center/cover no-repeat;display:grid;place-items:center;color:var(--mu)}
.tessera .mini svg.i{width:22px;height:22px}
.tessera .nome{max-width:100%;font-size:calc(12px * var(--kt));font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tessera[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.tessera[aria-pressed="true"] .mini{border-color:var(--acc)}
.tessera[aria-checked="true"]{background:var(--pill);color:var(--on-pill)}
.tessera[aria-checked="true"] .mini{background:var(--g-solid);border-color:var(--acc);color:var(--acc)}
.segno-interno{position:absolute;top:2px;right:2px;padding:0 5px;border-radius:6px;background:var(--g-solid);border:1px solid var(--g-ctl);font-size:calc(12px * var(--kt));font-weight:600;line-height:16px;color:var(--mu)}
@media (hover:hover) and (pointer:fine){.tessera:hover:not([aria-pressed="true"]):not([aria-checked="true"]){background:var(--g-fill2)}}
.vivo-pop{width:320px;padding:12px;bottom:96px;--o:bottom left}
.vivo-pop h3{font-size:calc(14px * var(--kt));font-weight:600;padding:4px 10px 6px}
.vivo-pop .meta{padding:6px 10px 2px}

/* ---------- Legenda (suggerimento.js) ---------- */
.legenda-btn{position:absolute;left:108px;bottom:84px;z-index:31;min-height:32px;padding:0 12px;border:1px solid var(--g-ctl);border-radius:var(--r-pill);background:var(--sup);box-shadow:var(--ombra);font-size:calc(13px * var(--kt));font-weight:600;color:var(--tx);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3)}
@media (hover:hover) and (pointer:fine){.legenda-btn:hover{border-color:var(--acc)}}
.legenda-mappa{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.legenda-mappa li{display:flex;align-items:center;gap:12px;font-size:var(--t1)}
.legenda-mappa small{color:var(--mu);font-size:calc(13px * var(--kt));margin-left:4px}
.lg-c{flex:none;width:28px;height:18px;position:relative}
.lg-c.area{border:2px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);border-radius:4px}
.lg-c.area.tratteggio{border-style:dashed}
.lg-c.linea::after{content:"";position:absolute;left:0;right:0;top:8px;border-top:2.5px solid var(--c)}
.lg-c.linea.tratteggio::after{border-top-style:dashed}
.lg-c.punto::after{content:"";position:absolute;left:8px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--g-solid)}
.lg-c.anello::after{content:"";position:absolute;left:5px;top:0;width:14px;height:14px;border-radius:50%;border:3px solid var(--c);background:var(--g-solid)}

/* ---------- Suggerimento al passaggio del mouse ---------- */
.suggerimento{position:absolute;left:0;top:0;z-index:40;max-width:300px;padding:8px 12px;border:1px solid var(--g-line);border-radius:var(--r-ctl);background:var(--g-solid);box-shadow:var(--ombra-pop);pointer-events:none;font-size:calc(13px * var(--kt));line-height:1.35;color:var(--tx)}
.suggerimento[hidden]{display:none}
.sg-riga+.sg-riga{margin-top:6px;padding-top:6px;border-top:1px solid var(--g-line)}
.sg-riga b{display:block;font-weight:600}
.sg-riga span{display:block;color:var(--mu)}
.sg-riga .sg-effetto{font-weight:600}
.sg-effetto.e-blocca{color:var(--e-blocca)}.sg-effetto.e-parere{color:var(--e-parere)}.sg-effetto.e-informa{color:var(--e-informa)}.sg-effetto.e-verifica{color:var(--e-verifica)}
.sg-altri,.sg-clic{margin-top:6px;color:var(--mu);font-size:calc(12px * var(--kt))}
/* Anteprima nel riquadro (anteprime.js, dati/anteprime/INTEGRAZIONE.md): 240 x 135, credito sotto, niente scritte sull'immagine */
.suggerimento.con-ant{width:256px;max-width:256px;padding:8px}
.suggerimento.con-ant .sg-riga,.suggerimento.con-ant .sg-altri,.suggerimento.con-ant .sg-clic{margin-left:4px;margin-right:4px}
.sg-img{width:240px;height:135px;margin:0 -4px 8px;border-radius:8px;overflow:hidden;background:var(--sink)}
.sg-img img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .16s ease-out}
.sg-img img.pronta{opacity:1}
.sg-cred{margin-top:6px;color:var(--mu);font-size:calc(12px * var(--kt));line-height:1.35}
@media (prefers-reduced-motion:reduce){.sg-img img{transition:none}}
/* La stessa anteprima in cima alla scheda del punto, con il credito cliccabile */
.ant-scheda{margin:0 0 12px}
.ant-scheda img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--sink)}
.ant-scheda figcaption{margin-top:6px}
.lg-pin{flex:none;width:28px;display:flex;justify-content:center}
.lg-pin svg{display:block}

/* ---------- Pulsante "?" della guida tra i controlli ---------- */
.ctrl-guida button{display:grid;place-items:center;color:var(--tx)}
.ctrl-guida svg.i{width:20px;height:20px}

/* ---------- Guida a riflettore, come il CRM (crm-pannelli.css 109-131, 186-187) ---------- */
.guida-velo{position:fixed;inset:0;z-index:92;background:transparent;touch-action:none;overscroll-behavior:contain}
.guida-fumetto.scuoti{animation:guida-scuoti 420ms cubic-bezier(.36,.07,.19,.97)}
/* Avanti in lettura: si sblocca dopo il tempo minimo; la barra sotto il testo mostra quanto manca. */
.guida-fumetto .btn.pri.in-lettura{position:relative;overflow:hidden;opacity:.6;cursor:progress}
.guida-fumetto .btn.pri.in-lettura::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;transform-origin:left;animation:guida-lettura var(--lettura,4s) linear forwards}
@keyframes guida-lettura{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.guida-fumetto .btn.pri.in-lettura::after{animation:none;transform:scaleX(1);opacity:.4}}
@keyframes guida-scuoti{10%,90%{translate:-1px 0}20%,80%{translate:3px 0}30%,50%,70%{translate:-6px 0}40%,60%{translate:6px 0}}
.guida-luce{position:fixed;z-index:93;pointer-events:none;box-shadow:0 0 0 9999px rgba(14,20,17,.5);transition:left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease),border-radius .4s,opacity .2s}
[data-tema=scuro] .guida-luce{box-shadow:0 0 0 9999px rgba(0,0,0,.6)}
.guida-anello{position:fixed;z-index:94;pointer-events:none;border:3px solid var(--acc);box-sizing:border-box;transition:left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease),opacity .2s;animation:guida-anello 1.1s ease-out 2 both}
@keyframes guida-anello{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.guida-bersaglio{position:absolute;width:120px;height:120px;border-radius:50%;pointer-events:none}
.guida-fumetto{position:fixed;z-index:95;left:0;top:0;width:min(380px,calc(100vw - 32px));padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--acc) 55%,var(--g-line));background:var(--g-solid);box-shadow:0 18px 44px rgba(14,20,17,.18);display:grid;gap:8px;color:var(--tx);transition:left .4s var(--ease),top .4s var(--ease)}
html.guida-ferma,html.guida-ferma body{overflow:hidden;overscroll-behavior:none}
.guida-fumetto.largo{width:min(460px,calc(100vw - 32px))}
.guida-fumetto h3{font-size:calc(18px * var(--kt));font-weight:600;margin:0;letter-spacing:-.01em}
.guida-p{color:var(--mu);font-size:calc(14px * var(--kt));line-height:1.5}
.guida-n{font-size:calc(13px * var(--kt));font-weight:600;color:var(--mu)}
.scelta-righe{display:grid;gap:2px;margin:2px -10px 0}
.guida-punti{display:flex;gap:6px}
.guida-punti i{width:8px;height:8px;border-radius:50%;background:var(--g-line)}
.guida-punti i.on{background:var(--acc)}
.guida-piede{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.guida-piede span{display:inline-flex;gap:6px}
.guida-freccia{position:absolute;width:14px;height:14px;background:var(--g-solid);border:1px solid color-mix(in srgb,var(--acc) 55%,var(--g-line));transform:rotate(45deg)}
.guida-freccia.b{top:-8px;border-right:0;border-bottom:0}.guida-freccia.t{bottom:-8px;border-left:0;border-top:0}.guida-freccia.r{left:-8px;border-right:0;border-top:0}.guida-freccia.l{right:-8px;border-left:0;border-bottom:0}
.guida-comandi{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.guida-comandi li{display:flex;align-items:center;gap:10px;font-size:calc(14px * var(--kt))}
.guida-comandi svg.i{width:24px;height:24px;color:var(--tx)}
.guida-comandi svg .pieno{fill:var(--acc);stroke:none}
.guida-fumetto.fermo,.guida-luce.fermo,.guida-anello.fermo{transition:none!important;animation:none!important}
@media (max-width:600px){
  .guida-fumetto.mobile{width:92vw;padding:14px 16px;gap:6px;transition:none}
}

/* ---------- "Cosa vuoi vedere": interruttori grandi (apertura.js) ---------- */
.scelta-apertura{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.scelta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border:1px solid var(--g-line);border-radius:var(--r-ctl);background:var(--sink);text-align:left;color:var(--tx)}
.scelta-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--g-solid);color:var(--acc)}
.scelta-t b{display:block;font-size:calc(14px * var(--kt));font-weight:600;line-height:1.25}
.scelta-t small{display:block;font-size:calc(12px * var(--kt));color:var(--mu);line-height:1.3}
.scelta[aria-checked="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--g-solid))}
@media (hover:hover) and (pointer:fine){.scelta:hover{border-color:var(--acc)}}
@container (max-width:420px){.scelta-apertura{grid-template-columns:1fr}}
@media (max-width:600px){.guida-fumetto .scelta-apertura{grid-template-columns:1fr}.guida-fumetto .scelta{min-height:48px;padding:6px 10px}}

/* ---------- Personalizza: righe a scheda come il cassetto del CRM (.pn-ls) ---------- */
.pers-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pers-riga{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--g-line);border-radius:12px;background:var(--sink)}
.pers-riga:not(.on){opacity:.78}
.pers-th{display:grid;place-items:center;width:44px;height:32px;border-radius:8px;color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.pers-th .maki{width:18px;height:18px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pers-t b{display:block;font-size:var(--t1);font-weight:600}
.pers-t small{display:block;font-size:calc(12px * var(--kt));color:var(--mu)}
.pers-mv{display:flex;flex-direction:column;gap:2px}
.pers-mv button{display:grid;place-items:center;width:28px;height:22px;padding:0;border:1px solid var(--g-line);border-radius:6px;background:transparent;color:var(--tx)}
.pers-mv button svg.i{width:14px;height:14px}
.pers-mv button:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.pers-mv button:hover:not(:disabled){border-color:var(--acc)}}
.pers-sw{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;background:none}
.pers-sw[aria-disabled="true"]{cursor:default}
.pers-sw[aria-checked="true"]>.tog{background:var(--acc);border-color:var(--acc)}
.pers-sw[aria-checked="true"]>.tog::after{transform:translateX(14px);background:var(--on-acc)}
.pers-sw[aria-disabled="true"]>.tog{opacity:.45}

/* ---------- Scelte di Personalizza: colore, densità ---------- */
[data-accento=grafite][data-tema=chiaro]{--acc:#3D4742;--acc2:#3D4742;--pill:#E3E8E5;--on-pill:#1F2723}
[data-accento=grafite][data-tema=scuro]{--acc:#D5DDD8;--acc2:#D5DDD8;--pill:#D5DDD8;--on-pill:#0B1613;--on-acc:#0B1613}
@media (hover:hover) and (pointer:fine){
  [data-densita=compatta] .blocco{padding:9px 0}
  [data-densita=compatta] .riga-tog,[data-densita=compatta] .sugg,[data-densita=compatta] .zona-riga{min-height:36px;padding-top:3px;padding-bottom:3px}
  [data-densita=compatta] .azione{min-height:42px;padding-top:6px;padding-bottom:6px}
  [data-densita=compatta] .voce{min-height:48px}
}

@media (max-width:820px){
  .livelli-striscia{left:8px;right:8px;max-width:none;bottom:calc(var(--ph) + 80px + env(safe-area-inset-bottom));--o:bottom center}
  /* Da telefono due righe (tipi di mappa, poi funzioni con 3D per primo) che scorrono col dito; la sfumatura a destra dice che c'è altro. */
  .livelli-striscia .striscia-riga{flex-direction:column;gap:4px;overflow:visible}
  .livelli-striscia .striscia-gruppo{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}
  .livelli-striscia .striscia-gruppo::-webkit-scrollbar{display:none}
  .livelli-striscia .striscia-gruppo.in-fondo{-webkit-mask-image:none;mask-image:none}
  .livelli-striscia .striscia-sep{display:none}
  #livelliPop:not([hidden])~.avviso-mappa{bottom:calc(var(--ph) + 80px + 178px + env(safe-area-inset-bottom))}
  .vivo-pop{left:8px;right:8px;width:auto}
  .legenda-btn{display:none}
  .maplibregl-ctrl-bottom-right .ctrl-guida{display:block;position:absolute;right:18px;bottom:112px;margin:0}
  .ctrl-guida button{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.guida-luce,.guida-anello,.guida-fumetto{transition:none!important;animation:none!important}}

/* ---------- Barra delle sezioni sotto la mappa (sotto.js): vetro a pillola come trupianovisual.com, token Futura ---------- */
.nav-sotto{position:fixed;z-index:58;left:50%;top:calc(12px + env(safe-area-inset-top));width:min(1180px,calc(100% - 24px));transform:translate(-50%,-12px);opacity:0;pointer-events:none;transition:opacity .22s ease-out,transform .22s var(--ease)}
.nav-sotto.vis{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ns-vetro{position:relative;display:flex;align-items:center;gap:6px;min-height:56px;padding:6px;border-radius:var(--r-pill);border:1px solid var(--g-line);background:var(--sup);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--ombra)}
.ns-mappa{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:0;border-radius:var(--r-pill);background:none;color:var(--tx);font-size:calc(14px * var(--kt));font-weight:600}
.ns-mappa img{width:28px;height:28px}
.ns-riga{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow:hidden}
.ns-riga a{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--mu);font-size:calc(14px * var(--kt));font-weight:600;text-decoration:none;white-space:nowrap;transition:color .2s}
.ns-riga a[hidden]{display:none}
.ns-riga a[aria-current]{color:var(--on-pill)}
.ns-pillola{position:absolute;z-index:0;left:0;top:50%;height:40px;margin-top:-20px;border-radius:var(--r-pill);background:var(--pill);opacity:0;transition:transform .32s var(--ease),width .32s var(--ease),opacity .2s}
@media (hover:hover) and (pointer:fine){.ns-riga a:not([aria-current]):hover,.ns-mappa:hover,.ns-altro-btn:hover{color:var(--tx);background:var(--g-fill2)}}
.ns-altro{position:relative;flex:none}
.ns-altro-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px 0 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--mu);font-size:calc(14px * var(--kt));font-weight:600}
.ns-altro-btn[hidden]{display:none}
.ns-altro-btn.attivo{background:var(--pill);color:var(--on-pill)}
.ns-altro-btn svg.i{width:14px;height:14px}
.ns-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:6px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--g-solid);box-shadow:var(--ombra-pop);display:grid;transform-origin:top right;animation:pop 180ms var(--ease-pop)}
.ns-menu[hidden]{display:none}
.ns-menu a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-ctl);color:var(--tx);font-size:calc(14px * var(--kt));font-weight:500;text-decoration:none}
.ns-menu a:hover,.ns-menu a[aria-current]{background:var(--pill);color:var(--on-pill)}
/* Telefono: una riga che scorre di lato sotto il bordo alto; il marchio resta fisso a sinistra. */
@media (max-width:820px){
  .nav-sotto{top:calc(8px + env(safe-area-inset-top));width:calc(100% - 16px)}
  .ns-vetro{min-height:52px;padding:4px;gap:2px}
  .ns-mappa{padding:0 8px 0 6px;gap:6px}
  .ns-mappa span{display:none}
  .ns-riga{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 18px),transparent)}
  .ns-riga::-webkit-scrollbar{display:none}
  .ns-riga a{padding:0 12px}
}
@media (prefers-reduced-transparency:reduce){.ns-vetro{background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Le sezioni non finiscono sotto la barra quando ci si arriva da un link (#sezione-...). */
.sotto>section{scroll-margin-top:84px}

/* scheda dell'edificio */
.dati-edificio{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.dati-edificio li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;font-size:var(--t1)}
.dati-edificio b{font-weight:600}
.dati-edificio span{color:var(--tx)}

/* ---------- Guide pratiche: "Scopri di più" (pratiche.js) ---------- */
.vincolo .scopri{margin:8px 0 2px 30px}
.docs li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.docs li label{flex:1;min-width:0}
.scopri-doc{font-size:calc(13px * var(--kt));white-space:nowrap}
.contesto-pratica{margin:8px 0 6px;padding:8px 12px;border-radius:var(--r-ctl);background:var(--sink);font-size:var(--t1);color:var(--tx)}
.eff-pill{display:inline-block;margin:2px 0 6px;padding:2px 10px;border-radius:var(--r-badge);font-size:calc(12px * var(--kt));font-weight:600;background:var(--sink)}
.eff-pill.e-blocca{color:var(--e-blocca)}.eff-pill.e-parere{color:var(--e-parere)}.eff-pill.e-informa{color:var(--e-informa)}.eff-pill.e-verifica{color:var(--e-verifica)}
.pratica-elenco{margin:0;padding-left:18px;display:grid;gap:8px;font-size:var(--t1);line-height:1.5}
.pratica-elenco small,.ente small{display:block;color:var(--mu);font-size:calc(12px * var(--kt))}
.pratica-elenco .norma a,.ente small a{color:var(--mu)}
.pratica-elenco.attenzione{list-style:none;padding:0}
.pratica-elenco.attenzione li{display:flex;gap:8px;align-items:flex-start}
.pratica-elenco.attenzione svg{color:var(--warn);margin-top:2px}
.passi .azioni{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.enti{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ente{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--g-line);border-radius:var(--r-ctl);background:var(--sink);font-size:var(--t1)}
.ente>span{color:var(--tx)}
.ente .btn{margin-top:4px}
.ente small.tenue{color:var(--mu)}
.copiabile{white-space:nowrap}
.tabella.costi td small{display:block;color:var(--mu);font-size:calc(12px * var(--kt));font-weight:500}
.tabella.costi td:last-child{white-space:nowrap}
.riquadro-prof{margin-top:10px;padding:10px 12px;border-radius:var(--r-ctl);border:1px solid var(--g-line)}
.chip-vedi{display:flex;flex-wrap:wrap;gap:6px}
.btn-pers[hidden]{display:none}

/* ---------- Personalizza come le Impostazioni del CRM (sezioni.js, 26/10) ---------- */
.pers-card{border:1px solid var(--g-line);border-radius:var(--r-box);padding:14px 16px;margin-top:12px;background:var(--g-solid)}
.pers-card:first-child{margin-top:4px;padding-top:14px}
.pers-card>h3{margin-bottom:10px}
.pers-scelte{display:flex;flex-wrap:wrap;gap:8px}
.pers-sc{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--g-line);border-radius:var(--r-ctl);background:var(--sink);color:var(--tx);font-size:var(--t1);font-weight:600;transition:border-color .15s,background-color .15s}
.pers-sc[aria-pressed="true"]{border-color:var(--acc);background:var(--pill);color:var(--on-pill)}
@media (hover:hover) and (pointer:fine){.pers-sc:not([aria-pressed="true"]):hover{border-color:var(--g-ctl)}}
.pers-punto{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.pers-car{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:58px;padding:8px 14px}
.pers-car b{font-size:calc(15px * var(--kt));font-weight:600}
.pers-car small{font-size:calc(13px * var(--kt));font-weight:500;color:var(--mu)}
.pers-car[aria-pressed="true"] small{color:inherit}
.pers-sotto{font-size:calc(13px * var(--kt));font-weight:600;color:var(--mu);margin:12px 0 6px}
.pers-sotto:first-of-type{margin-top:0}
@media (max-width:820px){.pers-sc{min-height:44px}.pers-caratteri{display:grid;grid-template-columns:1fr}}

/* ---------- Colori degli strati (colori.js) ---------- */
.riga-strato{display:flex;align-items:flex-start;gap:2px}
.riga-strato>.riga-tog{flex:1;min-width:0}
.riga-strato>.meta{flex-basis:100%}
.lista-righe .riga-strato{flex-wrap:wrap}
.campione-btn{flex:none;display:grid;place-items:center;width:40px;height:44px;border:0;border-radius:var(--r-ctl);background:none;padding:0}
button.campione-btn{cursor:pointer}
@media (hover:hover) and (pointer:fine){button.campione-btn:hover{background:var(--g-fill2)}}
.campione-btn .campione{margin:0}
.campione-tondo{display:block;width:22px;height:22px;border-radius:50%;background:var(--c);border:1px solid var(--g-ctl)}
.sel-colore{width:280px;padding:12px 14px;display:grid;gap:10px;background:var(--g-solid)}
.sel-colore h3{font-size:calc(14px * var(--kt));font-weight:600}
.sel-griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sel-c{aspect-ratio:1;min-height:32px;border-radius:50%;border:2px solid var(--g-solid);background:var(--c);box-shadow:0 0 0 1px var(--g-line)}
.sel-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--tx)}
.sel-riga{display:flex;align-items:center;gap:10px;font-size:var(--t1);font-weight:600}
.sel-riga input[type=color]{width:44px;height:32px;padding:0;border:1px solid var(--g-line);border-radius:8px;background:none;margin-left:auto}
.sel-riga input[type=range]{flex:1;accent-color:var(--acc);font-size:16px}
.sel-n{min-width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mu)}
.sel-avviso{margin:0;color:var(--warn)}
.sel-piede{display:flex;justify-content:space-between;gap:8px}
@media (max-width:820px){.sel-colore{left:8px!important;right:8px;width:auto;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom));z-index:70}}
.chip-img{width:18px;height:18px;border-radius:5px;flex:none}
.menu-punto{min-width:240px;padding:6px}
.menu-punto .azione{width:100%}

/* ---------- Strumenti (strumenti.js, 26/10): pillole come nel computo di trupianovisual.com ---------- */
.strumenti{position:absolute;left:192px;bottom:44px;z-index:32;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 192px - var(--pw-aperto) - 76px);pointer-events:none}
.strumenti>*{pointer-events:auto}
.st-apri,.st-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--g-ctl);border-radius:var(--r-pill);background:var(--sup);color:var(--tx);font-size:calc(13px * var(--kt));font-weight:600;white-space:nowrap;box-shadow:var(--ombra);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);transition:background-color .15s,border-color .15s,transform .15s}
.st-apri svg.i,.st-pill svg.i{width:18px;height:18px}
.st-apri[aria-expanded="true"],.st-pill[aria-pressed="true"]{background:var(--pill);border-color:var(--acc);color:var(--on-pill)}
.st-pill.st-pieno{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.st-pill.st-tondo{width:40px;padding:0}
.st-pill:disabled{opacity:.4;cursor:default}
.st-pill.st-piccola{min-height:32px;padding:0 10px;box-shadow:none}
@media (hover:hover) and (pointer:fine){.st-apri:hover,.st-pill:not(:disabled):not([aria-pressed="true"]):hover{border-color:var(--acc)}}
.st-apri:active,.st-pill:not(:disabled):active{transform:scale(.97)}
.st-barra{display:grid;gap:8px;padding:8px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--sup);box-shadow:var(--ombra-pop);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);max-width:100%}
.st-barra[hidden]{display:none}
.st-barra .st-pill{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--g-solid)}
.st-barra .st-pill[aria-pressed="true"]{background:var(--pill)}
.st-barra .st-pill.st-pieno{background:var(--acc)}
.st-riga{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.st-gruppo{display:inline-flex;gap:4px}
.st-aiuto{flex:1 1 220px;min-width:0;margin:0 4px;font-size:calc(13px * var(--kt));color:var(--mu);line-height:1.35}
.st-aiuto b{color:var(--tx)}
.st-esito{width:min(360px,100%);max-height:42vh;overflow-y:auto;padding:10px 12px;border:1px solid var(--g-line);border-radius:var(--r-box);background:var(--g-solid);box-shadow:var(--ombra-pop)}
.st-esito[hidden]{display:none}
.st-esito-testa{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:calc(14px * var(--kt))}
.st-elenco{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-voce{padding:7px 9px;border:1px solid var(--g-line);border-radius:var(--r-ctl);background:var(--sink)}
.st-voce.in-corso{border-color:var(--acc)}
.st-titolo{margin:0;font-size:calc(15px * var(--kt));font-weight:600;font-variant-numeric:tabular-nums}
.st-riga-testo{margin:2px 0 0;font-size:calc(13px * var(--kt));color:var(--mu);line-height:1.4}
.st-riga-testo b{color:var(--tx)}
.st-nota{margin:8px 0 0;font-size:calc(12px * var(--kt));color:var(--mu);line-height:1.4}
.st-profilo{display:block;width:100%;height:auto;margin-top:6px}
.st-profilo text{font-size:11px;fill:var(--mu);font-family:var(--f)}
.st-prof-area{fill:var(--acc);fill-opacity:.14}
.st-prof-linea{fill:none;stroke:var(--acc);stroke-width:1.8}
.st-fasce{display:flex;gap:10px;margin-top:6px;font-size:calc(13px * var(--kt))}
.st-fascia{display:inline-flex;align-items:center;gap:5px}
.st-fascia i{width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--acc) calc(var(--o) * 100%),transparent);border:1px solid var(--acc)}
@media (max-width:820px){
  .strumenti{display:contents}
  .st-apri{position:absolute;z-index:31;left:auto;right:12px;bottom:calc(var(--ph) + 252px + env(safe-area-inset-bottom));width:48px;height:48px;min-height:48px;padding:0;transition:bottom .28s var(--ease)}
  .st-apri span{display:none}
  .strumenti.aperta .st-apri{display:none}
  .st-barra{position:absolute;z-index:46;left:8px;right:8px;bottom:calc(80px + env(safe-area-inset-bottom));border-radius:22px 22px var(--r-box) var(--r-box);padding:10px}
  .st-attrezzi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .st-attrezzi .st-pill{flex-direction:column;gap:2px;min-height:58px;padding:4px 2px;border-radius:var(--r-ctl);font-size:calc(12px * var(--kt))}
  .st-attrezzi .st-pill svg.i{width:22px;height:22px}
  .st-comandi{gap:6px}
  .st-comandi .st-pill{min-height:44px}
  .st-pill.st-tondo{width:44px}
  .st-pill.st-grande{width:56px;min-height:56px}
  .st-pill.st-grande svg.i{width:26px;height:26px}
  .st-aiuto{flex-basis:100%}
  .st-esito{position:absolute;z-index:46;left:8px;right:8px;top:calc(116px + env(safe-area-inset-top));width:auto;max-height:30vh}
}

/* ---------- Cubatura teorica (cubatura.js) ---------- */
.cubatura .numero-grande{margin-top:10px}
.cub-formula{font-variant-numeric:tabular-nums}
.cub-scelta{display:grid;gap:4px;margin:10px 0;font-size:var(--t1);font-weight:600}
.cub-scelta select{min-height:44px;padding:0 10px;border:1px solid var(--g-ctl);border-radius:var(--r-ctl);background:var(--g-solid);color:var(--tx);font-size:16px;font-family:var(--f)}
.cub-indici{margin:8px 0}
.cub-bloccanti{margin:10px 0;padding:8px 10px;border:1px solid var(--e-blocca);border-radius:var(--r-ctl)}
.cub-sotto{color:var(--e-blocca);font-weight:600}
.eff-pill.neutra{background:none;border:1px solid var(--g-ctl);color:var(--mu)}

/* Anno della foto (livelli.js): a vista quando la base è una foto, sotto le righe dei chip, a destra */
.foto-anno{position:absolute;z-index:3;top:116px;right:calc(var(--pw-aperto) + 12px);margin:0;padding:4px 10px;border-radius:var(--r-badge);background:var(--sup);box-shadow:var(--ombra);font-size:calc(12px * var(--kt));font-weight:600;line-height:1.4;color:var(--tx);pointer-events:none;transition:right 220ms ease-out}
.foto-anno[hidden]{display:none}
@media (max-width:820px){.foto-anno{top:calc(160px + env(safe-area-inset-top));right:8px}}