/* ============================================================
   GALLERIA DEL VENTO — interfaccia
   Minimal e neutra: grigi caldi, bianco, un solo nero d'accento.
   Il colore e' riservato ai dati (vento petrolio, sole ambra).
   ============================================================ */
:root{
  --bg:#f4f4f2; --panel:#ffffff; --panel-2:#fafaf8; --sunken:#f0f0ed;
  --line:#e4e4e0; --line-soft:#eeeeea;
  --ink:#1b1b1a; --ink-2:#5a5a56; --ink-3:#9b9b96;
  --acc:#1a1a1a; --acc-ink:#ffffff;
  --wind:#23798a; --wind-soft:#e2eff1;
  --sun:#c98a1e;  --sun-soft:#f7ecd6;
  --danger:#b4432f; --ok:#3f8a5a;
  --sky-hi:#e9ecee; --sky-lo:#f8f8f6;
  --shadow:0 1px 2px rgba(20,20,18,.05), 0 4px 14px -6px rgba(20,20,18,.10);
  --shadow-lg:0 2px 6px rgba(20,20,18,.06), 0 18px 40px -18px rgba(20,20,18,.28);
  --r:8px; --rc:12px;
  --sans:"Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121212; --panel:#1b1b1b; --panel-2:#202020; --sunken:#161616;
    --line:#2c2c2c; --line-soft:#252525;
    --ink:#ececea; --ink-2:#a8a8a3; --ink-3:#6f6f6b;
    --acc:#ececea; --acc-ink:#141414;
    --wind:#5cb8c7; --wind-soft:#17292c; --sun:#e5aa4a; --sun-soft:#2b2214;
    --sky-hi:#0e0f10; --sky-lo:#1a1b1c;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -8px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 20px 44px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121212; --panel:#1b1b1b; --panel-2:#202020; --sunken:#161616;
  --line:#2c2c2c; --line-soft:#252525;
  --ink:#ececea; --ink-2:#a8a8a3; --ink-3:#6f6f6b;
  --acc:#ececea; --acc-ink:#141414;
  --wind:#5cb8c7; --wind-soft:#17292c; --sun:#e5aa4a; --sun-soft:#2b2214;
  --sky-hi:#0e0f10; --sky-lo:#1a1b1c;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -8px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 20px 44px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{touch-action:manipulation; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.45; letter-spacing:-.005em;
  height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11";
}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

#app{display:grid; grid-template-rows:52px 1fr; height:100%}

/* ---------- barra superiore ---------- */
#topbar{
  display:flex; align-items:center; gap:18px; padding:0 14px 0 16px;
  background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.brand{display:flex; align-items:center; gap:9px; flex:none}
.brand .mark{width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round}
.brand .mark circle{stroke-width:1.4}
.brand b{font-weight:650; font-size:14.5px; letter-spacing:-.02em; white-space:nowrap}
#menu{display:flex; gap:2px}
#menu button{
  appearance:none; border:0; background:none; cursor:pointer; padding:7px 10px; border-radius:7px;
  font-size:12.5px; color:var(--ink-2); font-weight:500;
}
#menu button:hover{background:var(--sunken); color:var(--ink)}
.spacer{flex:1}

.readouts{display:none; align-items:stretch; gap:0; flex:none}
body[data-view="model"] .readouts{display:flex}
.ro{display:flex; flex-direction:column; justify-content:center; padding:0 11px; border-left:1px solid var(--line-soft); min-width:62px}
.ro em{font-style:normal; font-size:9.5px; letter-spacing:.04em; color:var(--ink-3); white-space:nowrap}
.ro b{font-family:var(--mono); font-weight:500; font-size:13px; font-variant-numeric:tabular-nums}
.ro.w b{color:var(--wind)} .ro.s b{color:var(--sun)}

.views{background:var(--sunken); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
.views button{border:0!important; border-radius:7px!important; padding:6px 14px!important; background:transparent!important; color:var(--ink-2)!important; font-size:12.5px!important; font-weight:550!important}
.views button[aria-pressed=true]{background:var(--panel)!important; color:var(--ink)!important; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line)}

/* ---------- impianto a tre colonne ---------- */
#main{display:grid; grid-template-columns:292px minmax(0,1fr) 316px; min-height:0; position:relative}
.side{
  background:var(--bg); overflow-y:auto; overscroll-behavior:contain; min-height:0;
  scrollbar-width:thin; padding:12px; display:flex; flex-direction:column; gap:10px;
}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line); padding:0; gap:0; background:var(--panel)}
.side::-webkit-scrollbar{width:10px}
.side::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px; border:3px solid var(--bg)}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rc);
  padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 1px rgba(0,0,0,.02);
}
.card.grow{flex:1 0 auto}
.card h3,.tab h4,.stats h4{
  margin:0; font-size:10.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.cardhead{display:flex; align-items:center; justify-content:space-between}
.mini{appearance:none; border:0; background:none; color:var(--ink-3); font-size:11px; cursor:pointer; padding:2px 4px; border-radius:5px}
.mini:hover{color:var(--ink); background:var(--sunken)}

/* ricerca */
.search{position:relative}
#mapSearch svg{position:absolute; left:11px; top:50%; width:15px; height:15px; transform:translateY(-50%); fill:none; stroke:var(--ink-3); stroke-width:1.8; stroke-linecap:round}
#mapSearch input{
  width:100%; height:38px; padding:0 12px 0 34px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); font:inherit; font-size:13px; color:var(--ink); box-shadow:0 1px 1px rgba(0,0,0,.02);
}
#mapSearch input:focus{outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px var(--sunken)}
.places{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); max-height:260px; overflow-y:auto; display:none; padding:4px;
}
.places.on{display:block}
.places button{
  display:flex; width:100%; align-items:baseline; gap:8px; text-align:left; background:none; border:0; border-radius:7px;
  padding:7px 9px; font-size:12.5px; color:var(--ink); cursor:pointer;
}
.places button:hover,.places button.hi{background:var(--sunken)}
.places button i{font-style:normal; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.places button em{font-style:normal; font-size:10.5px; color:var(--ink-3); flex:none}

/* area */
.shape{border-radius:9px!important}
.shape button{display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 6px!important}
.shape svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}
.sitehead{display:flex; align-items:baseline; gap:8px}
.sitehead b{font-size:15px; font-weight:650; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sitehead span{margin-left:auto; flex:none; font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.btn.wide{width:100%; height:38px; font-size:12.5px}
.more>summary{list-style:none; cursor:pointer; font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; gap:6px}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"▸"; font-size:9px}
.more[open]>summary::before{content:"▾"}
.more .body{padding:10px 0 0; display:flex; flex-direction:column; gap:10px}

/* stato delle fonti */
.sources{list-style:none; margin:0; padding:0; display:none; flex-direction:column; gap:1px}
.sources.on{display:flex}
.sources li{display:flex; align-items:center; gap:8px; font-size:11.5px; padding:3px 0; color:var(--ink-2)}
.sources li i{width:7px; height:7px; border-radius:50%; background:var(--line); flex:none}
.sources li span{flex:1}
.sources li b{font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--ink-3)}
.sources li.ok i{background:var(--ok)}
.sources li.err i{background:var(--danger)} .sources li.err b{color:var(--danger)}
.sources li.skip{opacity:.5}
.sources li.run i{background:var(--sun); animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- albero dei livelli ---------- */
.tree{display:flex; flex-direction:column; margin:0 -4px}
.tg .th{display:flex; align-items:center; gap:4px; padding:4px 4px; border-radius:7px}
.tg .th:hover{background:var(--panel-2)}
.tg .th label{display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; font-weight:600; font-size:12.5px}
.tg .th b{font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--ink-3)}
.car{appearance:none; border:0; background:none; width:16px; color:var(--ink-3); cursor:pointer; font-size:10px; padding:0}
.tl{display:none; padding:0 0 4px 20px}
.tg.open .tl{display:block}
.leaf{display:flex; align-items:center; gap:6px; padding:2px 4px; border-radius:6px}
.leaf:hover{background:var(--panel-2)}
.leaf>label:first-child{display:flex; align-items:center; gap:8px; flex:1; min-width:0; cursor:pointer; font-size:12px; color:var(--ink-2)}
.leaf>label:first-child span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leaf.empty{opacity:.42}
.leaf em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-3); min-width:22px; text-align:right}
.tree input[type=checkbox]{accent-color:var(--acc); width:13px; height:13px; margin:0; cursor:pointer; flex:none}
.sw{position:relative; width:22px; height:14px; border-radius:4px; cursor:pointer; flex:none;
  background:var(--c); border:1px solid rgba(0,0,0,.14)}
.sw.line{background:linear-gradient(transparent 5px, var(--c) 5px, var(--c) 8px, transparent 8px); border-color:transparent}
.sw.point{background:radial-gradient(circle at 50% 50%, var(--c) 4px, transparent 4.5px); border-color:transparent}
.sw.text{background:none; border-color:transparent}
.sw.text::after{content:"Aa"; position:absolute; inset:0; font-size:10px; font-weight:700; color:var(--c); display:grid; place-items:center}
.sw input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:0; padding:0}

/* ---------- pannello destro ---------- */
.rtabs{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--panel); z-index:2}
.rtabs button{
  appearance:none; border:1px solid var(--line); background:var(--panel); border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px 7px; font-size:10.5px; font-weight:550; color:var(--ink-2);
}
.rtabs svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.rtabs button:hover{border-color:var(--ink-3); color:var(--ink)}
.rtabs button[aria-selected=true]{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.tab{display:none}
.tab.on{display:block}
.tab[data-t="diag"]{padding:12px}
.diaglist h4{margin:6px 2px 6px}
.dl{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.dl button{
  appearance:none; border:0; background:none; display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px;
  cursor:pointer; text-align:left; font-size:12.5px; color:var(--ink-2);
}
.dl button:hover{background:var(--sunken); color:var(--ink)}
.dl button.on{background:var(--acc); color:var(--acc-ink)}
.dl button.na{opacity:.4}
.ico{width:18px; height:18px; border-radius:5px; flex:none; border:1px solid rgba(0,0,0,.1); background:#e2e2df}
.ico-base{background:linear-gradient(135deg,#e2e2df 50%,#d2dfc3 50%)}
.ico-nolli{background:linear-gradient(90deg,#1f1f1f 50%,#fff 50%)}
.ico-use{background:conic-gradient(#a6cfb4 0 30%,#f0b0a0 0 55%,#a9c3ea 0 80%,#c9b5e0 0)}
.ico-height{background:linear-gradient(0deg,#f6e3e6,#8a2150)}
.ico-levels{background:linear-gradient(0deg,#e6eef7,#26569a)}
.ico-year{background:linear-gradient(0deg,#f3e8cf,#5e4b3c)}
.ico-area{background:linear-gradient(0deg,#eef4e8,#35682f)}
.ico-green{background:radial-gradient(circle at 35% 40%,#9bb384 3px,transparent 3.5px),radial-gradient(circle at 68% 62%,#9bb384 4px,#d2dfc3 4.5px)}
.ico-traffic{background:linear-gradient(35deg,#fff 40%,#e67e22 40% 55%,#fff 55%)}
.ico-poi{background:radial-gradient(circle,#d0514a 3px,#f3f3f0 3.5px)}
.ico-cadastre{background:#fff; box-shadow:inset 0 0 0 1px #c8553d; background-image:linear-gradient(90deg,transparent 45%,#c8553d 45% 55%,transparent 55%)}
.ico-contour{background:repeating-radial-gradient(circle at 60% 60%,#fff 0 2px,#b8a07f 2px 2.6px)}
.ico-wind{background:linear-gradient(135deg,#e2eff1,#23798a)}
.ico-shadow{background:linear-gradient(135deg,#fafaf8 45%,#aab2c0 45%)}
.ico-sunhours{background:linear-gradient(135deg,#4a5a78,#f5c35e,#dc7a1c)}
.ico-radiation{background:linear-gradient(135deg,#541a5c,#d9623a,#fbe98c)}
.ico-svf{background:radial-gradient(circle,#f6fafd 20%,#6e92bd 55%,#15233f)}
.ico-view{background:conic-gradient(from 200deg,#8e4fa5 0 35%,#f3f3f0 0 55%,#8e4fa5 0 70%,#f3f3f0 0)}
.ico-walk{background:linear-gradient(90deg,#3b2a78,#8b6fcf,#ddd2f5)}
.ico-noise{background:linear-gradient(90deg,#94c97a,#f1df6a,#e5703a,#8a2f63)}
.ico-slope{background:linear-gradient(135deg,#f4f1e8,#c9a268,#643521)}
.ico-sunpath{background:radial-gradient(circle at 50% 100%,#f7ecd6 30%,#c98a1e 31% 36%,#f7ecd6 37%)}

.stats{border-top:1px solid var(--line-soft); padding-top:12px; margin-top:4px}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px}
.kpis div{background:var(--panel-2); border:1px solid var(--line-soft); border-radius:9px; padding:8px 9px}
.kpis b{display:block; font-size:15px; font-weight:650; letter-spacing:-.02em}
.kpis em{font-style:normal; font-size:10.5px; color:var(--ink-3); line-height:1.25; display:block}

/* gruppi della simulazione (vecchio impianto, restilizzato) */
.grp{border-bottom:1px solid var(--line-soft)}
.grp>summary{
  list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:9px; padding:13px 14px;
  font-size:12.5px; font-weight:600; color:var(--ink);
}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:var(--panel-2)}
.grp>summary::after{content:""; margin-left:auto; width:6px; height:6px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); transition:transform .15s}
.grp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.grp>summary .dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-3)}
.grp.wind>summary .dot{background:var(--wind)} .grp.sun>summary .dot{background:var(--sun)}
.grp .body{padding:2px 14px 16px; display:flex; flex-direction:column; gap:13px}

/* ---------- controlli ---------- */
.field{display:flex; flex-direction:column; gap:5px}
.field>label{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; color:var(--ink-2); font-weight:500}
.field>label var{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.hint{font-size:11px; color:var(--ink-3); line-height:1.45}
.hint:empty{display:none}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; margin:0; cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--line); border-radius:3px}
input[type=range]::-moz-range-track{height:3px; background:var(--line); border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; margin-top:-5.5px; border-radius:50%; background:var(--panel); border:1.5px solid var(--acc); box-shadow:0 1px 3px rgba(0,0,0,.15)}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--panel); border:1.5px solid var(--acc)}
input[type=range].w::-webkit-slider-thumb{border-color:var(--wind)}
input[type=range].s::-webkit-slider-thumb{border-color:var(--sun)}
select,input[type=text],input[type=number]{
  width:100%; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:7px 9px; font:inherit; font-size:12px;
}
input[type=number]{font-family:var(--mono)}
select:focus-visible,input:focus-visible{outline:2px solid var(--ink-3); outline-offset:-1px}

.btn{
  appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:var(--r);
  padding:7px 12px; font-size:12px; font-weight:550; cursor:pointer; text-align:center; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{border-color:var(--ink-3); background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.dark{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.btn.dark:hover{filter:brightness(1.25)}
.btn.pri{background:var(--wind); border-color:var(--wind); color:#fff}
.btn.sn{background:var(--sun); border-color:var(--sun); color:#fff}
.row{display:flex; gap:6px}
.row>*{flex:1; min-width:0}
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel-2)}
.seg button{appearance:none; border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink-2); font-size:11.5px; font-weight:550; padding:7px 4px; cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--acc); color:var(--acc-ink)}
.seg.s button[aria-pressed=true]{background:var(--sun); color:#fff}
.check,.field>label.check{display:flex; align-items:center; justify-content:flex-start; gap:8px; cursor:pointer; font-size:12px; font-weight:400; color:var(--ink-2)}
.check input{accent-color:var(--acc); width:13px; height:13px; margin:0}
.note{background:var(--panel-2); border:1px solid var(--line-soft); border-left:2px solid var(--wind); padding:8px 10px; font-size:11px; line-height:1.5; color:var(--ink-2); border-radius:0 var(--r) var(--r) 0}
.note.s{border-left-color:var(--sun)}
.note b{color:var(--ink)}

.dial-wrap{display:flex; gap:12px; align-items:center}
#dial{cursor:grab; touch-action:none; border-radius:50%; flex:none}
.dial-side{display:flex; flex-direction:column; gap:8px; min-width:0; flex:1}
.bigread{display:flex; align-items:baseline; gap:6px}
.bigread b{font-family:var(--mono); font-weight:500; font-size:26px; line-height:1; color:var(--wind)}
.bigread span{font-size:11px; font-weight:600; color:var(--ink-3)}
.winds{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.winds button{appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); border-radius:7px; padding:5px 2px; font-size:10.5px; font-weight:600; cursor:pointer; line-height:1.25}
.winds button:hover{border-color:var(--wind); color:var(--wind)}
.winds button[aria-pressed=true]{background:var(--wind); border-color:var(--wind); color:#fff}
.winds button u{display:block; text-decoration:none; font-weight:400; font-size:9.5px; opacity:.7}

.layers3d{display:flex; flex-direction:column; gap:4px}
.layer{display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel-2); font-size:12px; cursor:pointer}
.layer input{accent-color:var(--acc); margin:0}
.layer span{flex:1}
.layer b{font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--ink-3)}
.layer.off{opacity:.5}

#blist{display:flex; flex-direction:column; gap:4px; max-height:172px; overflow-y:auto}
.bitem{display:flex; align-items:center; gap:7px; padding:6px 8px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r); font-size:11.5px}
.bitem.sel{border-color:var(--wind); background:var(--wind-soft)}
.bitem span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.bitem b{font-family:var(--mono); font-weight:400; color:var(--ink-3); font-size:10px}
.bitem button{appearance:none; border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:15px; line-height:1}
.bitem button:hover{color:var(--danger)}
.empty{font-size:11px; color:var(--ink-3); font-style:italic}
.xf{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line-soft); padding-top:12px}
.xfhead{display:flex; align-items:baseline; gap:7px}
.xfhead b{font-size:12px} .xfhead span{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.pad button{appearance:none; border:1px solid var(--line); background:var(--panel); border-radius:7px; padding:7px 0; cursor:pointer; line-height:1}
.pad button:hover{border-color:var(--wind); color:var(--wind)}
.pad button.mid{border-color:transparent; background:none; font-size:9.5px; color:var(--ink-3)}

/* ---------- area centrale ---------- */
#view{position:relative; min-width:0; background:linear-gradient(var(--sky-hi),var(--sky-lo)); overflow:hidden}
#gl{display:block; width:100%; height:100%; touch-action:none}
#drop{position:absolute; inset:12px; border:1.5px dashed var(--wind); border-radius:14px; background:var(--wind-soft); opacity:.92;
  display:none; align-items:center; justify-content:center; pointer-events:none; z-index:12; font-weight:650; color:var(--wind)}
#view.dragging #drop{display:flex}
.overlay{position:absolute; z-index:10}

/* mappa */
#map{position:absolute; inset:0; overflow:hidden; background:var(--sunken); display:none; touch-action:none; z-index:4}
#map.on{display:block}
#tiles{position:absolute; left:0; top:0; width:100%; height:100%; filter:saturate(.35) contrast(.98) brightness(1.03)}
:root[data-theme="dark"] #tiles{filter:invert(.92) hue-rotate(180deg) saturate(.3)}
#tiles img{position:absolute; width:256px; height:256px; max-width:none; min-width:256px; user-select:none; -webkit-user-drag:none}
#tiles img.sat{filter:saturate(1.6)}
#cadastre{position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; opacity:.85}
#cadastre img{position:absolute; width:256px; height:256px; max-width:none; min-width:256px; user-select:none}
#catHint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:6; display:none; background:var(--panel); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); padding:6px 12px; font-size:11.5px; color:var(--ink-2)}
#catHint.on{display:block}
#mapMask{position:absolute; inset:0; pointer-events:none; z-index:5}
#sel{pointer-events:auto; position:absolute; border:2px solid var(--acc); box-shadow:0 0 0 9999px rgba(20,20,18,.30); cursor:move; touch-action:none}
body[data-shape="circle"] #sel{border-radius:50%}
#sel .hd{position:absolute; width:14px; height:14px; background:var(--panel); border:2px solid var(--acc); border-radius:50%; touch-action:none}
body[data-shape="circle"] #sel .hd.nw{left:calc(14.6% - 7px); top:calc(14.6% - 7px)}
body[data-shape="circle"] #sel .hd.ne{right:calc(14.6% - 7px); top:calc(14.6% - 7px)}
body[data-shape="circle"] #sel .hd.sw{left:calc(14.6% - 7px); bottom:calc(14.6% - 7px)}
body[data-shape="circle"] #sel .hd.se{right:calc(14.6% - 7px); bottom:calc(14.6% - 7px)}
body[data-shape="square"] #sel .hd.nw{left:-8px; top:-8px} body[data-shape="square"] #sel .hd.ne{right:-8px; top:-8px}
body[data-shape="square"] #sel .hd.sw{left:-8px; bottom:-8px} body[data-shape="square"] #sel .hd.se{right:-8px; bottom:-8px}
#sel .hd.nw,#sel .hd.se{cursor:nwse-resize} #sel .hd.ne,#sel .hd.sw{cursor:nesw-resize}
#selLabel{position:absolute; left:50%; top:-12px; transform:translate(-50%,-100%); background:var(--acc); color:var(--acc-ink); font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:20px; white-space:nowrap}
#mapAttrib{position:absolute; right:0; bottom:0; background:var(--panel); color:var(--ink-3); font-size:10px; padding:2px 7px; border-top-left-radius:7px; z-index:6}
#mapTools{position:absolute; left:14px; top:14px; z-index:6; display:flex; flex-direction:column; gap:6px}
#netNote{position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:7; max-width:min(520px,86%); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:11px 14px; font-size:12px; line-height:1.5; color:var(--ink-2); display:none}
#netNote.on{display:block}
#netNote b{color:var(--ink)}

/* pianta */
#plan{position:absolute; inset:0; display:none; z-index:3; cursor:grab; touch-action:none;
  background:var(--bg) radial-gradient(circle, var(--line) 1px, transparent 1.2px) 0 0/22px 22px}
#plan.on{display:block}
#plan.grab{cursor:grabbing}
#plan svg{width:100%; height:100%; display:block}
#plan svg [data-b]:hover{filter:brightness(.9); stroke:#1a1a1a}
#planTip{position:absolute; z-index:5; pointer-events:none; display:none; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); padding:9px 11px; font-size:11.5px; min-width:160px}
#planTip.on{display:block}
#planTip b{display:block; font-weight:650; margin-bottom:4px}
#planTip div{display:flex; justify-content:space-between; gap:14px; color:var(--ink-2)}
#planTip em{font-style:normal; color:var(--ink-3)}
#planTip span{font-family:var(--mono); font-size:11px; color:var(--ink)}

#planLegend,#planNorth,#planScale,#planTools{display:none}
body[data-view="plan"] #planLegend,body[data-view="plan"] #planNorth,body[data-view="plan"] #planScale,body[data-view="plan"] #planTools{display:block}
#planTools{left:14px; top:14px; flex-direction:column; gap:6px}
body[data-view="plan"] #planTools{display:flex}
#planLegend{right:14px; bottom:14px; background:color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:11px 12px; min-width:170px; max-width:240px}
#planLegend:empty{display:none!important}
#planLegend h4{margin:0 0 8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
.li{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-2); padding:2px 0}
.li i{width:14px; height:10px; border-radius:3px; background:var(--c); border:1px solid rgba(0,0,0,.12); flex:none}
.li i.ln{height:3px; border:0; border-radius:2px}
.li i.pt{width:9px; height:9px; border-radius:50%; margin:0 2.5px}
.li span{flex:1}
.li b{font-family:var(--mono); font-weight:400; font-size:10px; color:var(--ink-3)}
#planNorth{right:18px; top:14px; width:30px}
#planNorth svg{width:30px; fill:var(--ink)}
#planNorth text{font:600 13px var(--sans); text-anchor:middle; fill:var(--ink)}
#planScale{left:16px; bottom:16px; font-family:var(--mono); font-size:10.5px; color:var(--ink-2)}
#planScale .bar{height:6px; border:1.5px solid var(--ink); border-top:0; display:flex; margin-bottom:3px}
#planScale .bar i{flex:1} #planScale .bar i:first-child{border-right:1.5px solid var(--ink)}

/* stato vuoto */
#empty{position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; background:var(--bg)}
#empty.on{display:flex}
#empty div{text-align:center; display:flex; flex-direction:column; gap:6px; max-width:320px}
#empty b{font-size:17px; font-weight:650; letter-spacing:-.02em}
#empty span{color:var(--ink-3)}
#empty em{font-style:normal; color:var(--ink)}

/* slide */
#slides{position:absolute; inset:0; z-index:5; display:none; overflow-y:auto; background:var(--bg); padding:24px}
#slides.on{display:block}

.deck{display:flex; flex-direction:column; align-items:center; gap:22px; padding-bottom:40px}
.slide{margin:0; width:min(1100px,100%); aspect-ratio:16/9; background:#fff; border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line)}
.slide svg{width:100%; height:100%; display:block}

/* finestra di esportazione */
.xopts{display:grid; grid-template-columns:1.3fr 1fr; gap:18px}
.xgroup{display:flex; flex-direction:column; gap:8px}
.xgroup h5{margin:4px 0 0; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
.xo{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.xo:has(input:checked){border-color:var(--acc); box-shadow:0 0 0 1px var(--acc)}
.xo input{margin-top:2px; accent-color:var(--acc)}
.xo span{display:flex; flex-direction:column; gap:1px}
.xo b{font-size:12.5px; font-weight:600} .xo em{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.xfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft)}
.xfoot span{font-size:12px; color:var(--ink-2)}
.xfoot .btn{min-width:120px; height:36px}
@media (max-width:640px){.xopts{grid-template-columns:1fr}}

/* modello 3D: overlay del vecchio impianto */
#toolbar{left:14px; top:14px; display:none; flex-direction:column; gap:6px}
body[data-view="model"] #toolbar{display:flex}
#legend{right:14px; bottom:14px; width:196px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:11px 12px 10px; display:none}
#legend h4{margin:0 0 8px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
#bar{height:9px; width:100%; border-radius:3px}
.ticks{display:flex; justify-content:space-between; margin-top:4px; font-size:10px; color:var(--ink-3); font-family:var(--mono)}
.cats{margin-top:8px; display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line-soft); padding-top:7px}
.cat{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--ink-2)}
.cat i{width:8px; height:8px; border-radius:2px; flex:none}
.cat b{margin-left:auto; font-family:var(--mono); color:var(--ink-3); font-weight:400}
#status{left:14px; bottom:14px; display:none; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
body[data-view="model"] #status{display:flex}
#status .st{padding:7px 12px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:1px}
#status .st:last-child{border-right:0}
#status .st em{font-style:normal; font-size:9.5px; color:var(--ink-3); white-space:nowrap}
#status .st b{font-family:var(--mono); font-weight:500; font-size:12px}

.tool{width:34px; height:34px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:9px; cursor:pointer; color:var(--ink-2); box-shadow:var(--shadow); padding:0}
.tool:hover{color:var(--ink); border-color:var(--ink-3)}
.tool[aria-pressed=true]{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.tool:disabled{opacity:.4}
.tool svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tool.ghost{box-shadow:none; border-color:transparent; background:none}
#railToggle{display:none}

#toast{left:50%; top:16px; transform:translateX(-50%); background:var(--acc); color:var(--acc-ink); padding:8px 15px; border-radius:20px; font-size:12px; font-weight:550; opacity:0; transition:opacity .25s; box-shadow:var(--shadow-lg); pointer-events:none; max-width:70%; z-index:30}
#toast.on{opacity:1}

#busy{position:absolute; inset:0; z-index:25; display:none; align-items:center; justify-content:center; background:rgba(20,20,18,.18); backdrop-filter:blur(2px)}
#busy.on{display:flex}
body.loading-site #busy{display:none}
#busyBox{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:18px 22px; min-width:240px; text-align:center}
#busyBox b{display:block; font-size:13px; font-weight:600; margin-bottom:10px}
#busyBar{height:3px; background:var(--sunken); border-radius:3px; overflow:hidden}
#busyBar i{display:block; height:100%; width:30%; background:var(--acc); border-radius:3px; animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-30%}100%{margin-left:100%}}
#busyBox em{font-style:normal; display:block; margin-top:8px; font-size:11px; color:var(--ink-3)}

/* finestre */
.modal{position:fixed; inset:0; z-index:100; background:rgba(20,20,18,.34); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px}
.sheet{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); width:min(620px,100%); max-height:86vh; display:flex; flex-direction:column; overflow:hidden}
.sheet>header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.sheet>header b{font-size:14px; font-weight:650}
.sheet .x{appearance:none; border:0; background:none; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer}
.sheet .content{padding:16px 18px; overflow-y:auto}
.srcs{border-collapse:collapse; width:100%; font-size:12px}
.srcs th{text-align:left; vertical-align:top; padding:8px 12px 8px 0; white-space:nowrap; font-weight:600}
.srcs td{padding:8px 0; color:var(--ink-2); border-bottom:1px solid var(--line-soft)}
.srcs tr:last-child td{border-bottom:0}
.prose{font-size:12.5px; color:var(--ink-2); line-height:1.6}
.prose b{color:var(--ink)}
ol.prose{padding-left:18px; margin:0; display:flex; flex-direction:column; gap:6px}

/* ---------- schermi stretti ---------- */
@media (max-width:1100px){
  #main{grid-template-columns:268px minmax(0,1fr) 288px}
  #menu{display:none}
}
@media (max-width:900px){
  #main{grid-template-columns:1fr}
  #left,#right{position:absolute; top:0; bottom:0; z-index:30; width:min(320px,88vw); transition:transform .22s ease; box-shadow:var(--shadow-lg)}
  #left{left:0; transform:translateX(-102%)}
  #right{right:0; transform:translateX(102%)}
  body.rail-open #left{transform:none}
  #railToggle{display:grid}
  .readouts{display:none!important}
  .brand b{display:none}
  .views button{padding:6px 9px!important}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important; animation-duration:.01ms!important}}

/* ---------- progetto: lotto e disegni importati ---------- */
.tools3{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.tools3 .btn{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; font-size:11.5px}
.tools3 svg,.filebtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.filebtn{display:flex; align-items:center; justify-content:center; gap:8px; height:36px!important; cursor:pointer}
.lothead{display:flex; align-items:center; gap:8px}
.lothead i{width:10px; height:10px; border-radius:3px; flex:none}
.lothead b{font-size:13px; font-weight:650; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lothead span{font-size:10.5px; color:var(--ink-3)}
#lotBody{display:flex; flex-direction:column; gap:9px}
.kpis.small{margin-top:0}
.kpis.small b{font-size:13.5px}
.kpis .wide{grid-column:1 / -1}
.parcels{display:flex; flex-wrap:wrap; gap:4px}
.parcels em{font-style:normal; font-size:10.5px; color:var(--ink-3); width:100%}
.parcels span{font-size:10.5px; font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:#b53a26}
#underList{display:flex; flex-direction:column; gap:8px}
.under{border:1px solid var(--line); border-radius:10px; padding:9px 10px; display:flex; flex-direction:column; gap:8px; background:var(--panel-2)}
.under .uh{display:flex; flex-direction:column; gap:2px}
.under .uh b{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px}
.under .uh em{font-style:normal; font-size:10.5px; color:var(--ink-3); padding-left:21px}
.row.wrap{flex-wrap:wrap}
.row.wrap .btn{flex:1 1 auto; padding:6px 8px; font-size:11px}
#toolHint{left:50%; top:14px; transform:translateX(-50%); display:none; background:#d9432f; color:#fff; padding:7px 14px; border-radius:20px; font-size:12px; font-weight:550; box-shadow:var(--shadow-lg); z-index:12; max-width:80%; text-align:center}
#toolHint.on{display:block}
#plan.tool-on{cursor:crosshair}

/* ---------- risultati della ricerca ---------- */
.places button{flex-direction:column; align-items:stretch; gap:1px; padding:8px 10px}
.places .pm{display:flex; align-items:baseline; gap:8px; min-width:0}
.places .pm i{font-style:normal; font-weight:550; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.places .pm em{font-style:normal; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); flex:none}
.places .ps{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.places .pmsg{padding:10px 12px; font-size:12px; color:var(--ink-3)}
.places{max-height:min(360px,60vh); -webkit-overflow-scrolling:touch}
#mapSearch input{font-size:16px}          /* sotto i 16 px Safari su iPad ingrandisce la pagina al tocco */

/* ---------- cassetto destro su tablet ---------- */
#rightToggle{display:none}
@media (max-width:900px){
  #rightToggle{display:grid}
  body.right-open #right{transform:none}
  #btnExport{padding:7px 10px}
  .views button{padding:6px 8px!important; font-size:12px!important}
  #topbar{gap:8px; padding:0 8px}
}
@media (hover:none){
  .tool,.btn,.dl button,.rtabs button{min-height:40px}
  .leaf{min-height:32px}
  .tree input[type=checkbox]{width:17px; height:17px}
  input[type=range]::-webkit-slider-thumb{width:22px; height:22px; margin-top:-9.5px}
}
#mapSearch.floating{position:absolute; left:50%; top:12px; transform:translateX(-50%); width:min(440px,calc(100% - 120px)); z-index:14}
#mapSearch.floating input{box-shadow:var(--shadow-lg)}
body:not([data-view="map"]) #mapSearch.floating{display:none}