/* nav.css — barra laterale sinistra (struttura TOPOS) e sezioni */

#nav{
  position:fixed; left:0; top:0; height:100vh; width:var(--nav-w,260px);
  background:#fff; border-right:1.5px solid #000;
  display:flex; flex-direction:column; z-index:20;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
body.nav-collapsed #nav{ width:var(--rail-w,54px); }

#nav-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1.5px solid #000; min-height:64px;
  box-sizing:border-box;
}
#nav-toggle{
  flex:0 0 auto; width:32px; height:32px; border:1.5px solid #000;
  background:#fff; border-radius:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:background .12s;
}
#nav-toggle:hover{ background:#f2f2f2; }
#nav-toggle span{ display:block; width:14px; height:1.5px; background:#000; }
#logo-ink{ flex:1; display:flex; align-items:center; overflow:hidden; min-width:0; }
#logo-ink canvas{ display:block; height:34px; width:auto; }
body.nav-collapsed #logo-ink{ display:none; }

#navmenu{ display:flex; flex-direction:column; border-bottom:1.5px solid #000; }
#navmenu .navm{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; cursor:pointer;
  font:700 12px/1.2 'Space Mono',monospace; letter-spacing:0.04em;
  text-transform:lowercase; color:rgba(0,0,0,0.48);
  border-left:3px solid transparent; user-select:none;
  transition:color .12s, background .12s, border-color .12s;
}
#navmenu .navm .ix{ font-size:10px; color:rgba(0,0,0,0.28); flex:0 0 auto; width:14px; }
#navmenu .navm:hover{ color:#000; background:rgba(0,0,0,0.03); }
#navmenu .navm.on{ color:#000; border-left-color:#000; background:rgba(0,0,0,0.04); }
body.nav-collapsed #navmenu .navm{ justify-content:center; padding:13px 0; }
body.nav-collapsed #navmenu .navm .lbl{ display:none; }
body.nav-collapsed #navmenu .navm .ix{ width:auto; font-size:12px; color:rgba(0,0,0,0.55); }

#navbody{ flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
body.nav-collapsed #navbody{ display:none; }

.sec{ display:none; padding:16px 14px 20px; }
.sec.on{ display:block; }
.sec h4{
  margin:0 0 10px;
  font:700 10px/1 'Space Mono',monospace;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(0,0,0,0.4);
}
.sec h4:not(:first-child){
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(0,0,0,0.1);
}
.sec .note{
  font:400 11px/1.55 'Space Mono',monospace;
  letter-spacing:0.01em; color:rgba(0,0,0,0.5);
  margin:0 0 16px;
}

.secrow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:42px; box-sizing:border-box;
  padding:11px 12px; margin-bottom:8px; cursor:pointer; user-select:none;
  background:#fff; border:1.5px solid rgba(0,0,0,0.18);
  font:700 11px/1.25 'Space Mono',monospace; letter-spacing:0.02em;
  text-transform:lowercase; color:rgba(0,0,0,0.62);
  transition:color .12s, border-color .12s, background .12s;
}
.secrow:hover{ border-color:#000; color:#000; }
.secrow.on{ color:#000; border-color:#000; background:rgba(0,0,0,0.04); }
.secrow .lbl{ flex:1; min-width:0; }
.secrow .st{
  flex:0 0 auto;
  font-size:10px; letter-spacing:0.08em; color:rgba(0,0,0,0.4);
}
.secrow.on .st{ color:#000; }

.sec-btn{
  display:block; width:100%; box-sizing:border-box;
  margin-top:10px; min-height:42px; padding:12px 14px;
  font:700 11px/1.2 'Space Mono',monospace; letter-spacing:0.06em;
  text-transform:lowercase; text-align:left;
  border:1.5px solid rgba(0,0,0,0.18); background:#fff;
  color:rgba(0,0,0,0.65); cursor:pointer;
  transition:border-color .12s, color .12s, background .12s;
}
.sec-btn:hover{ border-color:#000; color:#000; background:rgba(0,0,0,0.03); }
.sec-btn[hidden]{ display:none !important; }