/* ============================================================
   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 .wordmark{font-weight:400; font-size:16px; letter-spacing:-.03em; white-space:nowrap}
.brand .wordmark b{font-weight:750; letter-spacing:-.01em}
#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}
.srcs.rel th{width:150px; white-space:normal; border-bottom:1px solid var(--line-soft)}
.srcs.rel th em,.srcs.rel th span{display:block; font-style:normal; font-weight:400; font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:3px}
.srcs.rel th .srcok{color:var(--ok)} .srcs.rel th .srcerr{color:var(--danger)}
.srcs.rel td p{margin:0 0 4px} .srcs.rel td p:last-child{margin:0}
.srcs.rel td i{color:var(--ink-3)}
.srcs.rel .srcuse{color:var(--ink)}
.srcintro,.srcfoot{font-size:12px; color:var(--ink-2); margin:0 0 12px}
.srcfoot{margin:12px 0 0}
.sources li.srcmore{padding-top:6px}
.sources li.srcmore button{background:none; border:0; padding:0; font:inherit; font-size:11.5px; color:var(--ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
@media (max-width:600px){ .srcs.rel th{width:auto; display:block; border:0; padding-bottom:2px} .srcs.rel td{display:block} .srcs.rel tr{display:block; border-bottom:1px solid var(--line-soft); padding:6px 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 .wordmark{font-size:15px}
  .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}

/* ============================================================
   TRE STEP: MAPPA · PROGETTAZIONE · ESPORTAZIONE
   ============================================================ */
#steps{display:flex; align-items:center; gap:4px; flex:none}
#steps button{appearance:none; border:0; background:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 7px; border-radius:20px; font-size:12.5px; font-weight:550; color:var(--ink-3); position:relative}
#steps button i{font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3); background:var(--panel)}
#steps button:hover{color:var(--ink); background:var(--sunken)}
#steps button[aria-current]{color:var(--ink); background:var(--sunken)}
#steps button[aria-current] i{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
#steps button.done i{border-color:var(--ink-2); color:var(--ink-2); font-size:0}
#steps button.done i::after{content:"✓"; font-family:var(--sans); font-size:11px}

/* cosa si vede in ogni step */
#diagCard,.exp{display:none}
body[data-step="design"] #diagCard{display:flex}
body[data-step="design"] #mapSearch,body[data-step="design"] #areaCard{display:none}
body[data-step="export"] .card:not(.exp),body[data-step="export"] #mapSearch{display:none!important}
body[data-step="export"] .exp{display:flex}
body[data-step="map"] #right,body[data-step="export"] #right{display:none}
body[data-step="map"] #main,body[data-step="export"] #main{grid-template-columns:292px minmax(0,1fr)}
body[data-step="map"] #rightToggle,body[data-step="export"] #rightToggle{display:none!important}
body[data-step="export"] .views{display:none}
.views button[hidden]{display:none}
#diagCard .dl{margin-bottom:6px}
#diagCard h4{margin:4px 2px 4px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}

.stepnav{display:flex; flex-direction:column; gap:6px; position:sticky; bottom:-12px; margin:0 -12px -12px; padding:14px 12px 12px;
  background:linear-gradient(transparent, var(--bg) 14px); z-index:3}
.stepnav span{font-size:11px; color:var(--ink-3); text-align:center}
.stepnav .btn{height:38px}

/* ---------- lettura del diagramma (destra) ---------- */
#reading{display:flex; flex-direction:column; gap:12px}
.rhead{display:flex; align-items:center; gap:10px}
.rhead .ico{width:30px; height:30px; border-radius:8px}
.rhead em{display:block; font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
.rhead b{display:block; font-size:16px; font-weight:650; letter-spacing:-.02em}
.why{margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.prelim{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:8px; background:color-mix(in srgb, var(--sun) 12%, transparent); border:1px solid color-mix(in srgb, var(--sun) 35%, transparent); font-size:11.5px; line-height:1.45; color:var(--ink-2)}
.prelim b{font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink)}
.shares{display:flex; flex-direction:column; gap:3px}
.sbar{display:flex; height:12px; border-radius:4px; overflow:hidden; border:1px solid var(--line); margin-bottom:5px}
.sbar i{display:block; height:100%}
.shares .li{font-size:11.5px}
.rlines{margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:6px; font-size:12px; line-height:1.5; color:var(--ink)}
.rlines li::marker{color:var(--ink-3)}
.poig{display:flex; flex-direction:column; gap:1px}
.poig h5{margin:6px 0 3px; display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:650}
.poig h5 i{width:9px; height:9px; border-radius:50%; flex:none}
.poig h5 b{margin-left:auto; font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--ink-3)}
.poi{display:flex; gap:8px; justify-content:space-between; font-size:11.5px; color:var(--ink-2); padding:2px 0 2px 16px; border-bottom:1px dashed var(--line-soft)}
.poi span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.poi em{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); flex:none}
.poi.more{color:var(--ink-3); border:0}
.vol3d{border-top:1px solid var(--line-soft); padding-top:12px}

/* la legenda in pianta: piu' grande e leggibile */
#planLegend{max-width:280px; padding:13px 14px}
#planLegend .li{font-size:12px; padding:2.5px 0}
#planLegend .li i{width:18px; height:12px}
#planTip .tipsw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.15)}

/* strumento di scelta: pulsante di conferma */
#toolHint{display:none; align-items:center; gap:10px}
#toolHint.on{display:flex}
#toolHint button{appearance:none; border:0; border-radius:14px; background:#fff; color:#b53a26; font-weight:650; font-size:12px; padding:4px 11px; cursor:pointer}
#toolHint button:disabled{opacity:.5; cursor:default}

/* ---------- esportazione ---------- */
#exportView{position:absolute; inset:0; z-index:6; display:none; overflow:auto; padding:22px 26px 30px; background:var(--bg)}
#exportView.on{display:block}
.xhead{display:flex; align-items:baseline; gap:10px; margin:0 auto 12px; max-width:1300px}
.xhead b{font-size:15px; font-weight:650; letter-spacing:-.02em}
.xhead span{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.page{margin:0 auto; max-width:1300px; width:100%; background:#fff; box-shadow:var(--shadow-lg); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.page svg{display:block; width:100%; height:100%}
.logo{display:flex; gap:10px; align-items:center}
.logobox{width:128px; height:64px; border:1px dashed var(--line); border-radius:9px; display:grid; place-items:center; background:var(--panel-2); overflow:hidden; flex:none; text-align:center}
.logobox span{font-size:11px; color:var(--ink-3); line-height:1.35}
.logobox em{font-style:normal; font-size:9.5px}
.logobox img{max-width:112px; max-height:52px; object-fit:contain}
.logobtns{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.logobtns .btn{height:32px!important; font-size:11.5px}
.xlist{display:flex; flex-direction:column; gap:1px; margin-top:2px}
.xlist h5{margin:8px 0 2px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
.xrow{display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--ink-2)}
.xrow:hover{background:var(--sunken); color:var(--ink)}
.xrow.cur{background:var(--sunken); color:var(--ink); box-shadow:inset 2px 0 0 var(--acc)}
.xrow input{accent-color:var(--acc); margin:0; width:14px; height:14px; flex:none}
.xrow span{flex:1}
.xrow em{font-style:normal; font-size:10px; color:var(--ink-3)}
.xrow.na{opacity:.5; cursor:default}

@media (max-width:1100px){
  #steps span{display:none}
  #steps button{padding:6px}
}
@media (max-width:900px){
  body[data-step] #main{grid-template-columns:1fr}
  #exportView{padding:14px}
}

/* nello step 2 i diagrammi vengono per primi */
body[data-step="design"] #diagCard{order:-2}

/* ---------- selettore del sole ---------- */
#sunWidget{left:16px; bottom:44px; width:300px; display:none; flex-direction:column; gap:9px; padding:13px 14px 12px;
  background:color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); user-select:none}
#sunWidget.on{display:flex}
body[data-view="model"] #sunWidget{bottom:78px}
.swhead{display:flex; align-items:center; justify-content:space-between}
.swhead div{display:flex; align-items:baseline; gap:10px}
.swhead b{font-size:17px; font-weight:650; letter-spacing:-.02em}
.swhead span{font-family:var(--mono); font-size:17px; color:var(--sun); font-weight:500}
.swplay{appearance:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; cursor:pointer; color:var(--ink); padding:0}
.swplay svg{width:13px; height:13px; fill:currentColor}
.swplay[aria-pressed=true]{background:var(--sun); border-color:var(--sun); color:#fff}
.swmonths{display:grid; grid-template-columns:repeat(12,1fr); gap:2px; background:var(--sunken); border-radius:9px; padding:3px}
.swmonths button{appearance:none; border:0; background:none; border-radius:6px; padding:5px 0; font-size:11px; font-weight:600; color:var(--ink-3); cursor:pointer}
.swmonths button:hover{color:var(--ink)}
.swmonths button.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.1)}
.swday{display:flex; align-items:center; gap:6px}
.swday button{appearance:none; border:0; background:none; width:22px; height:22px; border-radius:6px; font-size:16px; line-height:1; color:var(--ink-2); cursor:pointer}
.swday button:hover{background:var(--sunken)}
.swday input{flex:1}
.swday input::-webkit-slider-thumb{border-color:var(--sun)}
#swArc{width:100%; height:auto; display:block; cursor:ew-resize; touch-action:none; overflow:visible}
#swArc .ref{fill:none; stroke:var(--ink-3); stroke-width:.8; stroke-dasharray:2 2.5; opacity:.55}
#swArc .day{fill:none; stroke:var(--sun); stroke-width:2.2; stroke-linecap:round}
#swArc .hz{stroke:var(--line); stroke-width:1}
#swArc text{font:500 9px var(--mono); fill:var(--ink-3); text-anchor:middle}
#swArc .rs{fill:var(--panel); stroke:var(--sun); stroke-width:1.4}
#swArc .stem{stroke:var(--sun); stroke-width:1; stroke-dasharray:2 2}
#swArc .knob circle{fill:#f4c542; stroke:#e08a1e; stroke-width:2}
#swArc .knob .halo{fill:#f4c542; opacity:.28; stroke:none}
#swArc .knob.night circle{fill:#9aa3b4; stroke:#6d7990}
.swfacts{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--ink-3)}
.swfacts b{font-family:var(--mono); font-weight:500; color:var(--ink)}
.swchips{display:flex; gap:4px}
.swchips button{appearance:none; flex:1; border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:4px 0; font-size:11px; font-weight:550; color:var(--ink-2); cursor:pointer}
.swchips button:hover{border-color:var(--sun); color:var(--sun)}
.ico-pptr{background:repeating-linear-gradient(45deg,#eeb3a1 0 3px,#fff 3px 5px); box-shadow:inset 0 0 0 1px #b4432f}
@media (max-width:900px){ #sunWidget{left:50%; transform:translateX(-50%); width:min(320px,calc(100% - 24px))} }

/* ---------- anteprima di tutte le pagine ---------- */
.xthumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; max-width:1300px; margin:0 auto 22px}
.xthumb{appearance:none; border:0; padding:0; background:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; text-align:left}
.xthumb .tp{background:#fff; border:1px solid var(--line); border-radius:3px; box-shadow:var(--shadow); overflow:hidden; display:grid; place-items:center; position:relative}
.xthumb .tp svg{width:100%; height:100%; display:block}
.xthumb .tp.wait::after{content:"…"; color:var(--ink-3); font-size:18px}
.xthumb.cur .tp{outline:2px solid var(--acc); outline-offset:2px}
.xthumb span{font-size:11px; color:var(--ink-2); display:flex; gap:6px}
.xthumb span i{font-style:normal; font-family:var(--mono); color:var(--ink-3)}
.xhead .xtabs{margin-left:auto; display:flex; gap:4px}
.xhead .xtabs button{appearance:none; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; color:var(--ink-2)}
.xhead .xtabs button[aria-pressed=true]{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}

.ico-idro{background:linear-gradient(180deg,#a9c9ea 0 40%,#4f86c6 40% 70%,#e0803f 70%)}

.mutedn{font-style:normal; color:var(--ink-3); font-size:11px; margin-left:4px}

/* ---------- scheda Lotto: capacita' edificatoria ---------- */
.rtabs{grid-template-columns:repeat(3,1fr); gap:6px; padding:10px}
.rtabs button{padding:8px 1px 6px; font-size:10px}
.tab[data-t="capa"]{padding:12px}
#capa{display:flex; flex-direction:column; gap:12px}
.capsec{display:flex; flex-direction:column; gap:9px; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--panel)}
.capsec h5{margin:0; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:650}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:7px 8px}
.cf{display:flex; flex-direction:column; gap:3px; min-width:0}
.cf label{font-size:11px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ci{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); overflow:hidden}
.ci:focus-within{border-color:var(--ink-3)}
.ci input{border:0!important; background:transparent!important; padding:6px 7px!important; font-family:var(--mono); font-size:12.5px; min-width:0; flex:1; outline:none!important}
.ci span{font-size:10.5px; color:var(--ink-3); padding-right:8px; font-family:var(--mono)}
.ci select{border:0!important; border-right:1px solid var(--line)!important; border-radius:0!important; background:var(--panel)!important; padding:6px 4px!important; font-size:11px; width:auto}
.capsec.res{border-color:#2f6e46; box-shadow:0 0 0 1px #2f6e4622}
.capsec .big{display:flex; flex-direction:column}
.capsec .big b{font-size:24px; font-weight:650; letter-spacing:-.03em; color:#2f6e46}
.capsec .big span{font-size:11.5px; color:var(--ink-2)}
.bind{font-size:12px; color:var(--ink-2)} .bind b{color:var(--ink)}
.kpis .warn b{color:var(--danger)}
.capsec.warnbox{border-color:#e0b9a8; background:color-mix(in srgb, #d9432f 5%, var(--panel))}
.vi{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink)}
.vi i{width:10px; height:10px; border-radius:3px; flex:none}
.vi em{font-style:normal; font-size:10px; color:var(--ink-3); margin-left:auto}
.capempty{display:flex; flex-direction:column; gap:6px; padding:18px 6px; text-align:center}
.capempty b{font-size:14px} .capempty span{font-size:12px; color:var(--ink-3)}
.ico-capacity{background:linear-gradient(135deg,#fff 30%,#3f8a5a55 30% 70%,#fff 70%); box-shadow:inset 0 0 0 1.5px #2f6e46}
.swhead{gap:8px} .swhead>div{flex:1}
.swmin{appearance:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--panel); cursor:pointer; color:var(--ink-2); font-size:15px; line-height:1; padding:0}
#sunWidget.min{width:auto; padding:9px 10px 9px 14px}
#sunWidget.min>:not(.swhead){display:none}

/* ---------- vento sul modello ---------- */
#windRun{right:14px; top:14px; width:290px; display:none; flex-direction:column; gap:7px; padding:12px 13px;
  background:color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg)}
#windRun.on{display:flex}
body[data-view="plan"] #windRun{right:60px; width:250px}
#windRun>b,.wrh b{font-size:13px; font-weight:650}
#windRun>span{font-size:11.5px; color:var(--ink-2)}
.wrh{display:flex; align-items:baseline; justify-content:space-between}
.wrh em{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--wind)}
.wrbar{height:5px; border-radius:4px; background:var(--sunken); overflow:hidden}
.wrbar i{display:block; height:100%; background:var(--wind); border-radius:4px; transition:width .5s}
#windRun .wrgrid{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
#windRun .seg button:disabled{opacity:.4; cursor:default}
#windCtl{margin:4px -12px 0; border-top:1px solid var(--line-soft)}
#windCtl .grp:last-child{border-bottom:0}

/* scheda Sole: data e ora si scelgono con il selettore sul modello */
#sunCtl .field:has(#doy),#sunCtl .field:has(#hour),#sunCtl #segSolstice,#sunCtl .row:has(#btnPlay){display:none}
#sunCtl{margin:4px -12px 0; border-top:1px solid var(--line-soft)}
#sunCtl .grp{border-bottom:0}
#modelNorth{left:17px; top:186px; width:34px; display:none; pointer-events:none}
body[data-view="model"] #modelNorth{display:block}
#modelNorth svg{width:34px; fill:var(--ink)}
#modelNorth text{font:600 13px var(--sans); text-anchor:middle; fill:#111111}
/* pannello Sole: pulsanti nello stile dell'app; quello del diagramma attivo resta evidenziato */
#sunCtl .btn.on{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}

#sunCtl .field:has(#sunBmode){display:none}   /* doppione: "Applica il diagramma" e' gia' nella lettura */


/* ============================================================
   VETRO: VISTA A TUTTO SCHERMO, BARRA E BOX GALLEGGIANTI
   La mappa, la pianta e il 3D occupano tutta la finestra; sopra
   galleggiano la barra e due colonne di box in vetro opaco.
   Un box chiuso e' un'icona; aprirlo lo fa diventare un box
   (accordion.js, animato con le View Transitions).
   Le colonne occupano --iL / --iR / --iT: gli strumenti nella vista
   si spostano di conseguenza e mappa, pianta e 3D si centrano
   nello spazio libero (viewInset in site-map.js).
   ============================================================ */
:root{
  --glass:color-mix(in srgb, var(--panel) 76%, transparent);
  --glass-hi:color-mix(in srgb, var(--panel) 90%, transparent);
  --glass-line:rgba(255,255,255,.62);
  --glass-blur:blur(18px) saturate(1.6);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,20,18,.06), 0 14px 34px -16px rgba(20,20,18,.32);
  --glass-shadow-hi:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(20,20,18,.07), 0 22px 48px -18px rgba(20,20,18,.42);
  --glass-fill:color-mix(in srgb, var(--ink) 6%, transparent);
  --rbox:18px; --ease-out:cubic-bezier(.22,.9,.24,1);
  --iL:0px; --iR:0px; --iT:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass:color-mix(in srgb, var(--panel) 72%, transparent);
    --glass-hi:color-mix(in srgb, var(--panel) 88%, transparent);
    --glass-line:rgba(255,255,255,.09);
    --glass-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 16px 38px -14px rgba(0,0,0,.75);
    --glass-shadow-hi:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.45), 0 24px 52px -16px rgba(0,0,0,.85);
    --glass-fill:rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"]{
  --glass:color-mix(in srgb, var(--panel) 72%, transparent);
  --glass-hi:color-mix(in srgb, var(--panel) 88%, transparent);
  --glass-line:rgba(255,255,255,.09);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 16px 38px -14px rgba(0,0,0,.75);
  --glass-shadow-hi:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.45), 0 24px 52px -16px rgba(0,0,0,.85);
  --glass-fill:rgba(255,255,255,.07);
}
.glass,#topbar,.side .card,.stepnav,#right .rtabs,#mapSearch input,.tool:not(.ghost),#legend,#planLegend,#status,#sunWidget,#windRun,#catHint,#netNote,#busyBox,#planTip,.places{
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
}

/* ---- niente linee divisorie ---- */
#topbar,#left,#right,.rtabs,.grp,.stats,.xf,.cats,.vol3d,#windCtl,#sunCtl,.xfoot,.sheet>header{border-top:0; border-bottom:0}
#left,#right{border-left:0!important; border-right:0!important}
.ro{border-left:0} #status .st{border-right:0}
.stats,.xf,.vol3d,.cats{padding-top:4px}
#windCtl,#sunCtl{margin:0; border:0}

/* ---- impianto a tutto schermo (schermi larghi) ---- */
@media (min-width:901px){
  body{--iT:62px; --iL:316px; --iR:340px}
  body[data-step="map"],body[data-step="export"]{--iR:0px}
  #app{display:block; position:relative}
  #topbar{position:absolute; top:10px; left:12px; right:12px; height:52px; border-radius:var(--rbox); z-index:40; padding:0 10px 0 14px}
  #main{position:absolute; inset:0; display:block}
  #view{position:absolute; inset:0; border-radius:0}
  .side{position:absolute; top:calc(var(--iT) + 12px); bottom:12px; z-index:30; background:transparent!important;
    padding:0 4px 12px; margin:0 -4px; pointer-events:none; display:flex!important; flex-direction:row; flex-wrap:wrap;
    align-content:flex-start; gap:8px; overflow-y:auto; scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side>*,.side .tab>*,.side #windCtl>*,.side #sunCtl>*{pointer-events:auto}
  #left{left:16px; width:292px}
  #right{right:16px; width:316px}
  body[data-step="map"] #right,body[data-step="export"] #right{display:none!important}
  #mapSearch{flex:1 1 100%}
}

/* ---- colonne: le schede e i gruppi non fanno scatola, i box si dispongono in fila ---- */
.side{flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:8px}
.side>.card:not(.acc),#right .rtabs,.stepnav,#mapSearch{flex:1 1 100%}
#right .tab.on,#right #windCtl:not([hidden]),#right #sunCtl:not([hidden]){display:contents}
#right .tab[data-t="capa"]{padding:0}
.side .card{border-radius:var(--rbox); min-width:0}
.side .card:not(.acc){flex:1 1 100%; padding:14px}

/* ---- box a fisarmonica: chiuso = icona, aperto = box ---- */
.acc{gap:0; padding:0; overflow:hidden; flex:0 0 46px; width:46px; height:46px; border-radius:15px!important}
.acc>.cardhead{height:46px; padding:0; justify-content:center; cursor:pointer; user-select:none; outline:none; gap:8px; flex:none;
  border-radius:inherit; transition:background .2s ease}
.acc>.cardhead h3{display:flex; align-items:center; gap:10px; margin:0; font-size:0; letter-spacing:.08em; color:var(--ink-2)}
.acc>.cardhead h3 .dot{display:none}
.aicon{width:20px; height:20px; flex:none; display:grid; place-items:center; color:var(--ink-2); transition:color .2s, transform .35s var(--ease-out)}
.aicon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round}
.acc.wind .aicon{color:var(--wind)} .acc.sun .aicon{color:var(--sun)}
.acc:not(.open)>.cardhead .mini,.acc:not(.open) .chev{display:none}
.acc:not(.open)>.accb{display:none}
.acc:not(.open):hover{box-shadow:var(--glass-shadow-hi); transform:translateY(-1px)}
.acc:not(.open):hover .aicon{color:var(--ink); transform:scale(1.08)}
.acc:not(.open)>.cardhead:focus-visible{box-shadow:inset 0 0 0 2px var(--ink-3)}
.acc{transition:box-shadow .25s ease, transform .25s var(--ease-out)}

.acc.open{flex:1 1 100%; width:auto; height:auto; box-shadow:var(--glass-shadow-hi)}
.acc.open>.cardhead{height:auto; padding:13px 12px 11px 14px; justify-content:flex-start}
.acc.open>.cardhead h3{font-size:11px; color:var(--ink); margin-right:auto}
.acc.open .aicon{width:18px; height:18px} .acc.open .aicon svg{width:17px; height:17px}
.acc.open .aicon{color:var(--ink)} .acc.open.wind .aicon{color:var(--wind)} .acc.open.sun .aicon{color:var(--sun)}
.acc .chev{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--glass-fill); transition:background .2s}
.acc .chev::before{content:""; width:8px; height:1.6px; border-radius:2px; background:var(--ink-2)}
.acc>.cardhead:hover .chev{background:var(--acc)} .acc>.cardhead:hover .chev::before{background:var(--acc-ink)}
.acc>.accb{display:block}
.acc .acci{display:flex; flex-direction:column; gap:10px; padding:2px 14px 14px}
.acc.open .acci{animation:accIn .38s var(--ease-out) both}
@keyframes accIn{from{opacity:0; transform:translateY(-4px)}}
.acc .acci>.body{padding:0; display:flex; flex-direction:column; gap:13px}

/* etichetta dell'icona */
#accTip{position:fixed; z-index:200; pointer-events:none; padding:5px 10px; border-radius:9px; font-size:11.5px; font-weight:550;
  color:var(--acc-ink); background:var(--acc); box-shadow:var(--shadow-lg); white-space:nowrap; opacity:0; transform:translateY(-3px);
  transition:opacity .15s, transform .2s var(--ease-out)}
#accTip.on{opacity:1; transform:none}

/* animazione icona <-> box */
::view-transition-group(*){animation-duration:.46s; animation-timing-function:var(--ease-out)}
::view-transition-old(*),::view-transition-new(*){height:100%; object-fit:none; object-position:left top; overflow:hidden}
::view-transition-old(root),::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*){animation-duration:.01ms} .acc.open .acci{animation:none} }

/* ---- barra superiore ---- */
#topbar .views{background:var(--glass-fill); border:0; border-radius:12px}
#topbar .views button{border-radius:9px!important}
.views button[aria-pressed=true]{background:var(--glass-hi)!important; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.25)!important}
#steps button{border-radius:12px}
#steps button:hover,#steps button[aria-current]{background:var(--glass-fill)}
#steps button i{background:transparent}
#menu button{border-radius:10px}
#menu button:hover,.tool.ghost:hover{background:var(--glass-fill)}

/* ---- barra delle schede a destra ---- */
#right .rtabs{position:sticky; top:0; z-index:4; margin:0; padding:5px; gap:4px; border-radius:var(--rbox)}
#right .rtabs button{border:0; border-radius:13px; padding:8px 2px 6px; background:transparent; transition:background .2s, color .2s}
#right .rtabs button:hover{background:var(--glass-fill)}
#right .rtabs button[aria-selected=true]{background:var(--acc); color:var(--acc-ink)}

/* ---- passi in fondo alla colonna ---- */
.stepnav{position:sticky; bottom:0; margin:auto 0 0; padding:10px; border-radius:var(--rbox); z-index:3}

/* elenchi lunghi: scorrono dentro il box */
#layerTree,#diagList,#xList{max-height:calc(100vh - 330px); overflow-y:auto; overscroll-behavior:contain; margin-right:-8px; padding-right:6px; scrollbar-width:thin}
#layerTree::-webkit-scrollbar,#diagList::-webkit-scrollbar,#xList::-webkit-scrollbar{width:6px}
#layerTree::-webkit-scrollbar-thumb,#diagList::-webkit-scrollbar-thumb,#xList::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}

/* ---- dentro i box: campi e sottoriquadri piu' morbidi ---- */
.side .card .kpis div,.side .card .capsec,.side .card .under,.side .card .note,.side .card .layer,.side .card .bitem{background:var(--glass-fill); border-color:transparent}
.side .card .note{border-left:2px solid var(--wind)} .side .card .note.s{border-left-color:var(--sun)}
.side .card select,.side .card input[type=text],.side .card input[type=number],.side .card .ci{background:var(--glass-fill); border-color:transparent; border-radius:10px}
.side .card .seg{background:var(--glass-fill); border-color:transparent; border-radius:11px; padding:2px; gap:2px}
.side .card .seg button{border-right:0; border-radius:9px}
.side .card .btn:not(.dark):not(.pri):not(.sn){background:var(--glass-fill); border-color:transparent; border-radius:11px}
.side .card .btn:not(.dark):not(.pri):not(.sn):hover{background:color-mix(in srgb, var(--ink) 11%, transparent)}
.dl button{border-radius:10px}
.dl button:hover,.xrow:hover,.tg .th:hover,.leaf:hover{background:var(--glass-fill)}

/* ---- pulsante principale: il punto si allarga e compare la freccia ---- */
.btn.dark:not(:disabled){position:relative; overflow:hidden; isolation:isolate; border-radius:12px; padding-left:26px; padding-right:26px;
  transition:color .35s ease}
.btn.dark:not(:disabled)::before{content:""; position:absolute; left:14px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--acc-ink); z-index:-1; transition:transform .55s var(--ease-out)}
.btn.dark:not(:disabled)::after{content:"\2192"; position:absolute; right:12px; top:50%; transform:translate(-8px,-50%); opacity:0;
  transition:opacity .3s, transform .4s var(--ease-out)}
.btn.dark:not(:disabled):hover{color:var(--acc); filter:none}
.btn.dark:not(:disabled):hover::before{transform:scale(60)}
.btn.dark:not(:disabled):hover::after{opacity:1; transform:translate(0,-50%)}
.stepnav .row .btn:first-child{padding-left:8px; padding-right:8px}

/* ---- strumenti sopra la vista: fuori dalle colonne ---- */
.tool{border-radius:12px}
.tool[aria-pressed=true]{background:var(--acc)!important; border-color:var(--acc)!important; color:var(--acc-ink)}
#mapTools,#planTools,#toolbar{left:calc(var(--iL) + 14px); top:calc(var(--iT) + 14px)}
#modelNorth{left:calc(var(--iL) + 17px); top:calc(var(--iT) + 186px)}
#planScale,#status{left:calc(var(--iL) + 16px); bottom:16px}
#sunWidget{left:calc(var(--iL) + 16px)}
#legend,#planLegend{right:calc(var(--iR) + 14px); bottom:14px}
#planNorth{right:calc(var(--iR) + 18px); top:calc(var(--iT) + 14px)}
#windRun{right:calc(var(--iR) + 14px); top:calc(var(--iT) + 14px)}
body[data-view="plan"] #windRun{right:calc(var(--iR) + 60px)}
#toast,#toolHint{top:calc(var(--iT) + 14px); left:calc(50% + (var(--iL) - var(--iR)) / 2)}
#catHint,#netNote{left:calc(50% + (var(--iL) - var(--iR)) / 2)}
#mapAttrib{right:var(--iR); background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}
#slides{padding:calc(var(--iT) + 24px) calc(var(--iR) + 24px) 24px calc(var(--iL) + 24px)}
#exportView{padding:calc(var(--iT) + 22px) calc(var(--iR) + 26px) 30px calc(var(--iL) + 26px)}
#empty{padding:var(--iT) var(--iR) 0 var(--iL)}
#busy{padding-left:var(--iL); padding-right:var(--iR)}
#legend,#planLegend,#status,#sunWidget,#windRun,#busyBox{border-radius:var(--rbox)}

/* ---- finestre ---- */
.sheet{background:var(--glass-hi); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); border-radius:22px}
.side .acc:not(.open){flex:0 0 46px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #tiles{filter:invert(.92) hue-rotate(180deg) saturate(.3)} }
#topbar #tTheme{flex:none}
#topbar .tool.ghost[aria-pressed=true]{background:transparent!important; border-color:transparent!important; color:var(--ink-2)}
#topbar .tool.ghost[aria-pressed=true]:hover{background:var(--glass-fill)!important}

/* ---------- progetto nell'account: barra accanto al marchio ---------- */
.prjbar{display:flex; align-items:center; gap:8px; margin-left:14px; min-width:0}
.prjlink{flex:none; border:0; background:none; padding:0; font:inherit; font-size:12.5px; color:var(--ink-2); text-decoration:none; cursor:pointer; white-space:nowrap}
.prjlink:hover{color:var(--ink)}
.prjlink.strong{height:30px; padding:0 12px; border-radius:999px; background:var(--acc); color:var(--acc-ink)}
.prjname{min-width:60px; width:clamp(90px, 16vw, 220px); height:30px; padding:0 10px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--ink); font:600 13px var(--sans); letter-spacing:-.01em; text-overflow:ellipsis}
.prjname:hover{border-color:var(--line)}
.prjname:focus{outline:none; border-color:var(--ink-3); background:var(--panel)}
.prjsave{flex:none; font:400 10.5px var(--mono); color:var(--ink-3); white-space:nowrap}
.prjsave.ok::before{content:"● "; color:var(--ok)}
.prjsave.err{color:var(--danger)}
@media (max-width:900px){ .prjsave, .prjbar .prjlink:not(.strong){display:none} .prjname{width:110px} }