/* ONE|BROADCAST — stylesheet · S43 refactoring */
:root{
  --bg:#0a0a0a; --panel:#111214; --panel2:#16181b; --border:#26282c; --border2:#33363b;
  --txt:#c9cdd3; --txt-dim:#6e747d; --txt-faint:#4a4f56;
  --brand:#ffc400; --ok:#3fb950; --warn:#ff9f1a; --err:#f85149; --cyan:#58c4dc; --violet:#b57bff;
  /* S49.2b — DENSITÀ: quattro numeri governano tutta la compattezza dell'interfaccia.
     Per stringere o allargare si cambiano QUI, non in quaranta punti sparsi. */
  --ctl-fs:11px;        /* corpo del testo dei controlli */
  --ctl-pad:4px 9px;    /* padding interno dei controlli */
  --row-pad:5px 10px;   /* padding delle righe di barra */
  --ui-gap:5px;         /* distanza fra controlli */
  --topbar-h:40px;      /* testata (era 52px, quando ospitava sei comandi) */
  --mono:'JetBrains Mono','Fira Code',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column}   /* S49.2b: niente altezze cablate */
body{background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:12.5px;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:42px 42px}
button{font-family:var(--mono);cursor:pointer;border:1px solid var(--border2);background:var(--panel2);color:var(--txt);padding:var(--ctl-pad);border-radius:4px;font-size:var(--ctl-fs)}
button:hover{border-color:var(--brand);color:#fff}
button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
button.primary{background:var(--brand);color:#111;border-color:var(--brand);font-weight:700}
button.primary:hover{background:#ffd23f}
button.ghost{background:transparent}
select,input[type=text],textarea{font-family:var(--mono);background:#0d0e10;border:1px solid var(--border2);color:var(--txt);padding:5px 8px;border-radius:4px;font-size:11.5px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--brand)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#2c2f34;border-radius:5px}
#topbar{display:flex;align-items:center;gap:10px;height:var(--topbar-h);flex-shrink:0;padding:0 12px;border-bottom:1px solid var(--border);background:#0c0d0e}
.logo{font-weight:800;font-size:15px;letter-spacing:.5px;white-space:nowrap}
.logo .one{color:#fff}.logo .sep{color:var(--brand);margin:0 1px}.logo .rest{color:var(--brand)}
#topbar .spacer{flex:1}
.tag{font-size:10px;padding:2px 7px;border:1px solid var(--brand);border-radius:3px;color:var(--brand);letter-spacing:.4px}
#statusbar{display:flex;align-items:center;gap:12px;height:30px;flex-shrink:0;padding:0 12px;
  border-top:1px solid var(--border);border-bottom:none;background:#0b0c0d;font-size:10.5px;color:var(--txt-dim);order:99}
#statusbar .rev{color:var(--brand);font-weight:700;font-size:12px}
.pill{border:1px solid #2b4a33;color:var(--ok);border-radius:10px;padding:1px 9px;font-size:10.5px;cursor:default}
.pill.warn{border-color:#5c3d10;color:var(--warn)}.pill.err{border-color:#5c2320;color:var(--err)}
#valSummary{cursor:pointer}
#main{display:grid;grid-template-columns:262px 6px 1fr 6px 330px;flex:1;min-height:0}
.gutter{cursor:col-resize;background:transparent;position:relative;z-index:6}
.gutter::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:2px;background:var(--border)}
.gutter:hover::after{background:var(--brand)}
body.focus #main{grid-template-columns:0 0 1fr 0 0;height:100vh}
body.focus .panel:first-child,body.focus .panel:last-child,body.focus .gutter{display:none}
body.focus #topbar,body.focus #statusbar{display:none}
.panel{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:rgba(13,14,16,.6)}
.panel:last-child{border-right:none;border-left:1px solid var(--border)}
.panel-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);color:var(--txt-dim);font-size:11px;letter-spacing:.8px;text-transform:uppercase}
.panel-head .grow{flex:1}
.panel-body{flex:1;overflow-y:auto;min-height:0}
.lib-group>h3{padding:8px 12px 4px;font-size:10px;letter-spacing:1px;color:var(--txt-faint);text-transform:uppercase}
.lib-item{display:flex;align-items:center;gap:9px;padding:7px 12px;cursor:pointer;border-left:2px solid transparent}
.lib-item:hover{background:#191b1e;border-left-color:var(--brand)}
.lib-item .cat-ico{width:30px;height:20px;flex:none;border:1px solid var(--border2);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8.5px}
.lib-item b{display:block;font-size:11.5px;font-weight:600}
.lib-item small{display:block;font-size:9.5px;color:var(--txt-dim);margin-top:1px}
.lib-item .add{margin-left:auto;color:var(--txt-faint);font-size:14px}
.lib-item:hover .add{color:var(--brand)}
#canvasWrap{position:relative;overflow:hidden;display:flex;flex-direction:column}
#toolstrip{position:relative;z-index:7;background:rgba(13,14,16,.9)}
#toolstrip{display:block;padding:0;border-bottom:1px solid var(--border)}
.layerbtn{font-size:10.5px;padding:3px 9px;border-radius:10px;border:1px solid var(--border2);background:transparent;color:var(--txt-dim)}
.layerbtn.on{color:#111;font-weight:700}
#svgHost{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
#svgHost.panning{cursor:grabbing}
svg text{font-family:var(--mono);user-select:none}
.dev-box{cursor:grab}
.note-box{cursor:grab}
.note-box.sel rect{stroke:#ffc400;stroke-width:1.6}
.note-box.dim{opacity:.25}.dev-box.dragging{cursor:grabbing}
.dev-box rect.body{fill:#141619;stroke:#3a3e44;stroke-width:1}
.dev-box:hover rect.body{stroke:var(--brand)}
.dev-box.sel rect.body{stroke:var(--brand);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(255,196,0,.35))}
.dev-box.dim{opacity:.22}
.conn-path{fill:none;cursor:pointer}
.conn-path.dim{opacity:.12}
.conn-path.sel{filter:drop-shadow(0 0 5px currentColor);stroke-width:3px !important}
.conn-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer}
.conn-hit.sel-hit{stroke-width:22;cursor:crosshair}
.port-dot{fill:#0a0a0a;stroke:#565c64;stroke-width:1}
#legend{position:absolute;right:14px;bottom:14px;background:rgba(12,13,14,.92);border:1px solid var(--border2);border-radius:6px;padding:10px 13px;font-size:10px;line-height:1.9;z-index:5}
#legend h4{font-size:9.5px;letter-spacing:1px;color:var(--txt-dim);margin-bottom:4px;text-transform:uppercase}
#legend .li{display:flex;align-items:center;gap:8px;color:var(--txt-dim)}
.insp-section{border-bottom:1px solid var(--border);padding:11px 14px}
.insp-section h3{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--txt-faint);margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;font-size:11.5px}
.kv .k{color:var(--txt-dim)}.kv .v{text-align:right}.kv .v.hl{color:var(--brand);font-weight:700}
.portrow{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:11px}
.portrow .dir{width:30px;flex:none;font-size:9px;text-align:center;border-radius:3px;padding:1px 0}
.dir.in{background:#12290f;color:var(--ok)}.dir.out{background:#2b1a10;color:#ff7a45}.dir.bi{background:#102030;color:var(--cyan)}
.portrow .pfmt{margin-left:auto;color:var(--txt-faint);font-size:9.5px}
.vitem{padding:8px 14px;border-bottom:1px solid var(--border)}
.vitem .rev{color:var(--brand);font-weight:700;font-size:12px}
.vitem .cur{font-size:9px;border:1px solid var(--ok);color:var(--ok);padding:1px 6px;border-radius:3px;margin-left:6px}
.vitem .meta{color:var(--txt-dim);font-size:10px;margin-top:2px}
.vitem .desc{font-size:11px;margin-top:3px}
.vitem .acts{margin-top:5px;display:flex;gap:6px}
.vitem .acts button{padding:2px 8px;font-size:10px}
.valrow{display:flex;gap:9px;padding:7px 14px;border-bottom:1px solid var(--border);font-size:11px;cursor:pointer}
.valrow:hover{background:#17181b}
.valrow.w .ico{color:var(--warn)}.valrow.e .ico{color:var(--err)}.valrow.i .ico{color:var(--cyan)}
.valrow .msg{color:var(--txt-dim);line-height:1.45}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:8px 0;color:var(--txt-dim);font-size:10px;letter-spacing:.5px;text-transform:uppercase;border-bottom:2px solid transparent}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.empty{padding:22px 16px;color:var(--txt-faint);font-size:11px;line-height:1.6;text-align:center}
#modalBack{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:50}
#modalBack.open{display:flex}
#modal{width:520px;max-width:94vw;background:var(--panel);border:1px solid var(--border2);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#modal .mh{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;color:var(--brand)}
#modal .mh button{margin-left:auto}
#modal .mb{padding:16px;display:flex;flex-direction:column;gap:11px;max-height:70vh;overflow:auto}
.frow{display:flex;flex-direction:column;gap:4px}
.frow label{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-dim)}
#modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.hint{font-size:10px;color:var(--txt-faint);line-height:1.5}
.sigchip{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.airow{padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;line-height:1.5}
.airow b{display:block;color:var(--txt)}
.airow .sev{font-size:9px;padding:1px 6px;border-radius:3px;margin-right:6px}
.sev.alta{background:#3a1210;color:var(--err)}.sev.media{background:#3a2a10;color:var(--warn)}.sev.bassa{background:#12290f;color:var(--ok)}
#login{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:100}
#login.open{display:flex}

/* ── TEMA LIGHT ─────────────────────────── */
body.light{
  --bg:#f2f3f5; --panel:#ffffff; --panel2:#eef0f2; --border:#d7dbe0; --border2:#c3c9d0;
  --txt:#23272c; --txt-dim:#5a616b; --txt-faint:#8b929c;
  --brand:#b8860b;
}
body.light{background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px)}
body.light #topbar,body.light #statusbar{background:#fafbfc}
body.light .logo .one{color:#1a1d21}
body.light select,body.light input[type=text],body.light textarea{background:#fff;color:#23272c}
body.light button{background:#f2f3f5;color:#23272c}
body.light button.primary{background:#e0a80d;color:#1a1d21}
body.light .dev-box rect.body{fill:#ffffff;stroke:#8b929c}
body.light .dev-box:hover rect.body{stroke:#b8860b}
body.light .dev-box.sel rect.body{stroke:#b8860b;filter:drop-shadow(0 0 5px rgba(184,134,11,.4))}
body.light .port-dot{fill:#ffffff;stroke:#5a616b}
body.light #legend{background:rgba(255,255,255,.94);color:#23272c}
body.light .lib-item:hover{background:#e9ecef}
body.light .valrow:hover{background:#eef0f2}
body.light #modal{background:#fff}
body.focus #main{grid-template-columns:1fr !important}
body.light .panel{background:rgba(255,255,255,.75)}
body.light #toolstrip{background:rgba(250,251,252,.95);border-bottom:1px solid var(--border)}
body.light #canvasWrap{background:#fdfdfe}
body.light #statusbar .pill{border-color:#9dc2a6;color:#1d7a34}
body.light #statusbar .pill.warn{border-color:#d9b06a;color:#a3660a}
body.light #statusbar .pill.err{border-color:#d99a94;color:#b32d20}
body.light .dir.in{background:#dff0dc;color:#1d7a34}
body.light .dir.out{background:#f6e3d7;color:#b35a1f}
body.light .dir.bi{background:#dcebf6;color:#1f6d9e}
body.light .conn-path.sel{filter:drop-shadow(0 0 4px currentColor)}
body.light .note-box.dim,body.light .dev-box.dim{opacity:.3}
body.light .valrow.w .ico{color:#a3660a}
body.light .valrow.e .ico{color:#b32d20}
@media print{ body *{visibility:hidden} }

/* ── ricerca globale ── */
#qbox{font-size:11px;padding:3px 8px}
#qres{display:none;position:absolute;top:26px;left:0;width:340px;max-height:300px;overflow:auto;
  background:var(--panel);border:1px solid var(--border2);border-radius:6px;z-index:60;
  box-shadow:0 8px 30px rgba(0,0,0,.45)}
.qitem{padding:7px 11px;font-size:11px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--txt)}
.qitem:hover{background:var(--panel2);color:var(--brand)}
body.light #qres{box-shadow:0 8px 30px rgba(0,0,0,.15)}

/* ── tabella cavi ── */
#tableHost{display:none;position:relative;flex:1;min-height:0;flex-direction:column}
#tableHost.on{display:flex}
#svgHost.off{display:none}
#tableBar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}
#tFilter{width:300px;font-size:11.5px}
#tCount{font-size:10.5px;color:var(--txt-dim)}
#tableScroll{flex:1;overflow:auto;min-height:0}
#ctable{width:100%;border-collapse:collapse;font-size:11.5px}
#ctable th{position:sticky;top:0;background:var(--panel);border-bottom:2px solid var(--border2);
  padding:8px 10px;text-align:left;font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--txt-dim);cursor:pointer;user-select:none;white-space:nowrap}
#ctable th:hover{color:var(--brand)}
#ctable th .arr{color:var(--brand);margin-left:4px}
#ctable td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
#ctable tbody tr{cursor:pointer}
#ctable tbody tr:hover{background:var(--panel2)}
#ctable .cable{color:var(--brand);font-weight:700}
#ctable .warn-cell{color:var(--warn)}
#ctable .err-cell{color:var(--err)}
.sig-chip{display:inline-block;padding:1px 8px;border-radius:9px;font-size:9.5px;font-weight:700;color:#111}

/* ── layout tablet / touch ─────────────── */
#btnDrawerLib,#btnDrawerInsp{display:none}
@media (max-width: 980px){
  #main{grid-template-columns:1fr !important}
  .gutter{display:none}
  .panel:first-child,.panel:last-child{
    position:fixed;top:88px;bottom:0;width:min(340px,86vw);z-index:40;
    transition:transform .22s ease;background:var(--panel);box-shadow:0 0 40px rgba(0,0,0,.5)}
  .panel:first-child{left:0;transform:translateX(-102%)}
  .panel:last-child{right:0;border-left:1px solid var(--border);transform:translateX(102%)}
  body.drawer-lib .panel:first-child{transform:translateX(0)}
  body.drawer-insp .panel:last-child{transform:translateX(0)}
  #btnDrawerLib,#btnDrawerInsp{display:inline-block}
  #topbar{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  #statusbar{flex-wrap:wrap;height:auto;padding:6px 10px;gap:8px}
  #main{height:auto;flex:1}
  body{display:flex;flex-direction:column;height:100vh}
  #qbox{width:150px}
  button{padding:8px 13px;font-size:12px}      /* tap target */
  .layerbtn{padding:6px 11px;font-size:11px}
  .lib-item{padding:11px 12px}
  .tabs button{padding:11px 0}
  #legend{display:none}
  /* S48.11 — barra strumenti compatta su schermi stretti */
  #toolstrip{padding:6px 8px;gap:5px}
  #toolstrip button{padding:7px 10px;font-size:11.5px}
  .layerbtn{padding:5px 9px;font-size:10.5px}
  #layerBtns{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;
    max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #layerBtns::-webkit-scrollbar{display:none}
  /* la regola globale sta in fondo al file (S49.2b) */
  .tmenu{min-width:210px;max-width:92vw}
  .tmenu button{padding:10px 12px;font-size:12px}   /* bersagli tap più grandi */
}
@media (max-width:560px){
  #toolstrip{padding:5px 6px;gap:4px}
  #toolstrip button{padding:6px 8px;font-size:11px}
}
#drawerScrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
body.drawer-lib #drawerScrim,body.drawer-insp #drawerScrim{display:block}

/* ── multi-selezione ── */
.dev-box.msel > rect:first-of-type{stroke:#58c4dc !important;stroke-dasharray:6 3}

/* ── banner aggiornamento di squadra ── */
#updBanner{display:none;position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:70;
  align-items:center;gap:12px;padding:9px 16px;background:var(--panel);border:1px solid var(--brand);
  border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:12px}
#updBanner.on{display:flex;animation:updIn .25s ease}
@keyframes updIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
body.light #updBanner{box-shadow:0 8px 30px rgba(0,0,0,.18)}

#propBanner{display:none;position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:71;
  align-items:center;gap:12px;padding:9px 16px;background:var(--panel);border:1px solid var(--ok);
  border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:12px}
#propBanner.on{display:flex;animation:updIn .25s ease}
body.light #propBanner{box-shadow:0 8px 30px rgba(0,0,0,.18)}

/* ── chat di squadra ── */
#chatDrawer{position:fixed;top:88px;bottom:0;right:0;width:min(360px,92vw);z-index:45;
  background:var(--panel);border-left:1px solid var(--border2);box-shadow:-8px 0 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;transform:translateX(103%);transition:transform .22s ease}
body.chat-open #chatDrawer{transform:translateX(0)}
#chatHead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}
#chatHead span{font-weight:700;font-size:13px;color:var(--brand);letter-spacing:1px}
#chatList{flex:1;overflow:auto}
.chat-th{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:12px}
.chat-th:hover{background:var(--panel2)}
.chat-th .nm{flex:1;font-weight:600}
.chat-th .kind{font-size:9px;color:var(--txt-dim);letter-spacing:.8px}
.chat-th .unr{background:var(--brand);color:#111;border-radius:9px;padding:0 7px;font-size:10px;font-weight:700}
#chatThread{flex:1;display:flex;flex-direction:column;min-height:0}
#chatThreadHead{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px}
#chatMsgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:82%;padding:7px 11px;border-radius:10px;font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg .mauth{font-size:9px;color:var(--txt-dim);margin-bottom:2px;letter-spacing:.5px}
.msg .mtime{font-size:8.5px;color:var(--txt-faint);margin-top:3px;text-align:right}
.msg.them{align-self:flex-start;background:var(--panel2);border:1px solid var(--border)}
.msg.mine{align-self:flex-end;background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.35)}
#chatInputRow{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}
#chatInput{flex:1;resize:none;font-size:12px}
#chatSend{padding:6px 14px}
body.light #chatDrawer{box-shadow:-8px 0 40px rgba(0,0,0,.15)}
body.light .msg.mine{background:rgba(184,134,11,.09);border-color:rgba(184,134,11,.3)}
@media (max-width:980px){ #chatDrawer{top:0} }

/* ═══════════ S45: libreria di ingegneria — badge fonte + cartella documenti ═══════════ */
.lib-item .vdoc{font-size:8.5px;color:var(--ok);border:1px solid var(--ok);border-radius:3px;padding:0 4px;letter-spacing:.4px;vertical-align:1px}
.lib-item .vgen{font-size:8.5px;color:var(--txt-dim);border:1px solid var(--border2);border-radius:3px;padding:0 4px;letter-spacing:.4px;vertical-align:1px}
.lib-item .docbtn{margin-left:auto;flex:none;font-size:13px;opacity:.55;padding:2px 4px;border-radius:4px;position:relative}
.lib-item .docbtn:hover{opacity:1;background:var(--panel2)}
.lib-item .docbtn em{font-style:normal;font-size:8.5px;color:var(--brand);font-weight:700;vertical-align:4px}
.lib-item .docbtn + .add{margin-left:2px}
.docrow{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;cursor:pointer;font-size:11.5px}
.docrow:hover{background:var(--panel2)}
.docrow.on{border-color:var(--brand);background:rgba(255,196,0,.05)}
.docrow .doctype{flex:none;font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--cyan);border:1px solid var(--border2);border-radius:3px;padding:1px 5px}
.docrow small{color:var(--txt-dim);font-size:9.5px}
.docrow .ghost{flex:none;cursor:pointer;padding:2px 5px;border-radius:4px}
.docrow .ghost:hover{background:var(--panel)}
.dochit{padding:6px 8px;border-left:2px solid var(--brand);background:var(--panel2);border-radius:0 5px 5px 0;margin-bottom:5px}
.dochit b{color:var(--brand);margin-right:5px}
body.light .docrow.on{background:rgba(184,134,11,.06)}

/* ═══════════ S45.8: organizzazione libreria ═══════════ */
.lib-item .inproj{font-size:8.5px;color:var(--brand);border:1px solid var(--brand);border-radius:3px;padding:0 4px;letter-spacing:.4px;vertical-align:1px;margin-left:3px}
#libFilters select{background:var(--panel2);color:var(--txt);border:1px solid var(--border2);border-radius:4px;padding:2px 4px}
@media (min-width:981px){
  body.libhide #main > .panel:first-child{display:none}
  body.libhide #gutL{display:none}
}

/* ═══════════ S46.1: osservazioni di campo ═══════════ */
.tabbadge{display:inline-block;min-width:15px;padding:0 4px;border-radius:8px;background:var(--brand);color:#1a1a1a;font-size:9px;font-weight:800;line-height:15px;text-align:center;vertical-align:1px}
.obs-row{border:1px solid var(--border);border-radius:7px;padding:9px 10px;margin-bottom:8px}
.obs-row.resolved{opacity:.6}
.obs-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.obs-t{font-size:9px;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border2);border-radius:3px;padding:1px 6px;color:var(--txt-dim)}
.obs-t-device{color:var(--cyan);border-color:var(--cyan)}
.obs-t-connection{color:var(--brand);border-color:var(--brand)}
.obs-by{font-size:10px;color:var(--txt-dim);margin-left:auto}
.obs-text{font-size:12px;line-height:1.5;white-space:pre-wrap}
.obs-res{font-size:10px;color:var(--ok);margin-top:5px}
.obs-acts{display:flex;gap:6px;margin-top:7px}
.obs-acts button{font-size:10px;padding:2px 8px}
#obsNew{width:100%;box-sizing:border-box;font-size:12px}

/* ═══════════ S46.2b: marcatore osservazioni — deve saltare all'occhio ═══════════ */
.obs-pin{animation:obspulse 1.8s ease-in-out infinite}
.obs-pin circle:first-child{filter:drop-shadow(0 0 3px rgba(229,52,43,.6))}
@keyframes obspulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ═══════════ S46.2c: drawer Segnalazioni ═══════════ */
#obsDrawer{position:fixed;top:88px;bottom:0;right:0;width:min(380px,94vw);z-index:46;
  background:var(--panel);border-left:1px solid var(--border2);box-shadow:-8px 0 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;transform:translateX(103%);transition:transform .22s ease}
body.obs-open #obsDrawer{transform:translateX(0)}
#obsHead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}
#obsHead span{font-weight:700;font-size:13px;color:#e5342b;letter-spacing:.5px}
#obsBody{flex:1;overflow:auto;padding:4px 12px 16px}
#btnObs .tabbadge{background:#e5342b;color:#fff}
body.light #obsDrawer{box-shadow:-8px 0 40px rgba(0,0,0,.15)}
@media (max-width:980px){ #obsDrawer{top:0} }

/* ═══════════ S46.3: selettore temi + tema blueprint ═══════════ */
#themeMenu{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--border2);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);overflow:hidden;min-width:170px;padding:4px}
#themeMenu .tm-item{padding:8px 12px;font-size:12px;border-radius:5px;cursor:pointer;color:var(--txt)}
#themeMenu .tm-item:hover{background:var(--panel2)}
#themeMenu .tm-item.on{background:var(--brand);color:#111;font-weight:700}
body.light #themeMenu{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.2)}
/* Blueprint: pannelli in tinta col tema */
body.theme-blueprint #topbar,body.theme-blueprint #statusbar{background:#0b2143}
body.theme-blueprint .panel{background:rgba(12,36,71,.7)}
body.theme-blueprint .dev-box rect.body{fill:#123362;stroke:#5c82b8}

/* ═══════════ S46.4: waypoint handles ═══════════ */
.wp-handle{transition:transform .1s}
.wp-handle:hover{transform:scale(1.3)}

/* ═══════════ S46.6: pannello stile segnali ═══════════ */
.ss-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ss-row input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--border2);border-radius:4px;background:none;cursor:pointer;flex:none}
.ss-row select{flex:none;width:70px;font-size:11px}
.ss-row input[type=text]{flex:1;font-size:11px}

/* ═══════════ S46.8: modalità cablaggio a click ═══════════ */
.port-dot[data-pin]{cursor:default}
body.wire-mode .port-dot[data-pin]{cursor:crosshair}
body.wire-mode .port-dot[data-pin]:hover{r:5;stroke-width:2.2;filter:drop-shadow(0 0 4px currentColor)}
body.wire-mode #svgHost{cursor:crosshair}
.port-dot.wire-src{filter:drop-shadow(0 0 5px #ffc400)}

/* ═══ S48.7 — barra strumenti a menu raggruppati ═══ */
.tmenu-wrap{position:relative;display:inline-block}
.tmenu{display:none;position:absolute;left:0;top:calc(100% + 5px);background:var(--panel);
  border:1px solid var(--border);border-radius:7px;padding:5px;min-width:236px;max-width:min(300px,92vw);
  z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.35);flex-direction:column;gap:2px}
.tmenu.flip{left:auto;right:0}          /* S48.11: se sborda a destra, si ancora al bordo destro */
.tmenu-wrap.open .tmenu{display:flex}
.tmenu-wrap.open > .tmenu-btn{color:var(--brand);border-color:var(--brand)}
.tmenu button{width:100%;text-align:left;justify-content:flex-start;white-space:nowrap}
.tmenu-sep{height:1px;background:var(--border);margin:3px 2px}
body.light .tmenu{box-shadow:0 8px 24px rgba(0,0,0,.16)}

/* ═══ S48.10 — celle modificabili nella tabella cavi ═══ */
#ctable td.tedit{padding:2px 4px}
#ctable .tin{width:100%;box-sizing:border-box;background:transparent;border:1px solid transparent;
  border-radius:3px;color:inherit;font:inherit;font-size:11px;padding:2px 4px;transition:border-color .15s}
#ctable .tin:hover{border-color:var(--border)}
#ctable .tin:focus{outline:none;border-color:var(--brand);background:var(--panel)}
#ctable .tin::placeholder{color:var(--txt-faint)}
@media (max-width:980px){ #btnLayers{display:inline-block !important} }

/* ═══ S48.14 — messaggio breve (toast) ═══ */
#obToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:9px 16px;
  font-size:12px;color:var(--txt);box-shadow:0 6px 22px rgba(0,0,0,.35);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:80vw}
#obToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ S48.18 — trascinamento dalla libreria al disegno ═══ */
.lib-item[draggable]{cursor:grab}
.lib-item.dragging{opacity:.45;cursor:grabbing}
body.lib-dragging #svgHost{outline:2px dashed var(--border-strong,#8b929c);outline-offset:-6px}
#svgHost.drop-ok{outline:2px dashed var(--brand);outline-offset:-6px;background:rgba(255,196,0,.04)}

/* ═══ S49.1: leggibilità della History — classi, gruppi, filtro ═══ */
.histbar{display:flex;gap:5px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.histf{font-size:10px;padding:3px 9px;border-radius:4px;border:1px solid var(--border);
  background:transparent;color:var(--txt-dim);cursor:pointer}
.histf:hover{border-color:var(--brand)}
.histf.on{border-color:var(--brand);color:var(--brand);font-weight:700}
/* riga di gruppo: sequenza consecutiva di navigazione/spostamenti */
.vgrp{padding:7px 14px;border-bottom:1px solid var(--border);font-size:10.5px;
  color:var(--txt-dim);cursor:pointer;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vgrp:hover{color:var(--txt)}
.vgrp .vtri{color:var(--brand);font-size:9px}
.vgrp .vrange{opacity:.75}
.vgrp .vtime{margin-left:auto;opacity:.6;white-space:nowrap}
/* accento per classe: bordo pieno a sinistra, niente raggio sul lato singolo */
.vitem.k-mile{border-left:3px solid var(--warn,#e0a83b);padding-left:11px}
.vitem.k-str {border-left:3px solid var(--brand);padding-left:11px}
.vitem.k-mod {border-left:3px solid transparent;padding-left:11px}
.vitem.vinner{background:rgba(127,127,127,.06);padding-left:26px}
.vitem .vkind{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.vitem.k-mile .vkind{color:var(--warn,#e0a83b)}
.vitem .cur.vab{border-color:var(--brand);color:var(--brand)}


/* ═══ S49.2a: barra su due assi — fasi di lavoro + comandi sempre presenti ═══ */
#chromerow{display:flex;align-items:center;gap:var(--ui-gap);padding:0 10px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
#phasebar{display:flex;align-items:stretch;gap:1px;flex-wrap:wrap}
.phtab{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;
  padding:7px 11px;font-size:11.5px;color:var(--txt-dim);cursor:pointer;white-space:nowrap}
.phtab:hover{color:var(--txt);border-color:transparent}
.phtab.on{color:var(--brand);border-bottom-color:var(--brand)}
#phaseHint{font-size:10px;color:var(--txt-faint);white-space:nowrap;order:9;margin-left:auto;padding-left:10px}
#phasecmds{padding:var(--row-pad);display:flex;align-items:center}
.phrow{display:none;align-items:center;gap:var(--ui-gap);flex-wrap:wrap;flex:1}
.phrow.on{display:flex}
.phsep{width:1px;height:18px;background:var(--border);margin:0 3px}
.phnote{font-size:10.5px;color:var(--txt-faint);padding-left:4px}
.phlink{font-size:11.5px;color:var(--brand);text-decoration:none;border:1px solid var(--border);
  border-radius:4px;padding:5px 10px;white-space:nowrap}
.phlink:hover{border-color:var(--brand)}
#alwaysbar{display:flex;align-items:center;gap:var(--ui-gap);flex-wrap:wrap;padding:4px 0}
@media (max-width:980px){
  #phasebar{padding:4px 8px 0;gap:0}
  .phtab{padding:7px 9px;font-size:12px}
  #phasecmds{padding:6px 8px}
  #alwaysbar{padding:5px 8px}
  .phnote{display:none}          /* su schermo stretto il testo di aiuto cede il posto */
  #phaseHint{display:none}
}


/* S49.2b: i filtri per segnale sono chiusi di default a ogni larghezza — la legenda
   sul disegno elenca già gli stessi segnali. Il pulsante ▤ Layer li riapre. */
body.layers-off #layerBtns, body.layers-off #layerLbl{display:none}
#statusbar .pill{padding:1px 8px;font-size:10px}
@media (max-width:980px){
  #chromerow{padding:0 8px}
  .phtab{padding:6px 9px;font-size:11px}
  #statusbar{gap:8px;height:28px}
}


/* ═══ S49.2c: rifiniture di densità ═══ */
/* descrizione dell'apparato: due righe stabili, testo intero nel tooltip.
   Niente espansione al passaggio del mouse: farebbe saltare le voci mentre si scorre. */
.lib-item small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;max-height:2.7em}
.lib-item{align-items:flex-start}
.lib-item .cat-ico{margin-top:2px}
/* legenda chiusa: si riduce al pulsante, il disegno riprende l'angolo */
#legend.collapsed{padding:3px 4px;line-height:1;background:transparent;border-color:transparent}

/* S50.a: intestazioni di sezione nella distinta (cavi / radio / logici) */
#ctable tr.tsec td{background:rgba(127,127,127,.10);font-size:10px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--txt-dim);padding:6px 8px;font-weight:700}

/* ═══ S50.b: filtro segnali a due livelli — famiglia + singoli ═══ */
.famwrap{display:inline-flex;align-items:stretch}
.layerbtn.fam{border-radius:10px 0 0 10px;font-weight:700;letter-spacing:.2px}
.layerbtn.fam.on{background:var(--brand);border-color:var(--brand);color:#111}
/* in tema chiaro --brand e' oro scuro: il testo nero sopra non si legge */
body.light .layerbtn.fam.on{color:#fff}
body.light .layerbtn.sub.on{color:#111}
.layerbtn.fam.part{border-color:var(--brand);color:var(--brand);
  background:linear-gradient(180deg,transparent 55%,rgba(255,196,0,.22) 55%)}
.layerbtn.fam em{font-style:normal;opacity:.72;font-size:9px}
.layercar{font-size:9px;padding:3px 6px;border-radius:0 10px 10px 0;border:1px solid var(--border2);
  border-left:none;background:transparent;color:var(--txt-dim);cursor:pointer;line-height:1.6}
.layercar:hover,.layercar.open{color:var(--brand);border-color:var(--brand)}
.layerbtn.sub{font-size:9.5px;padding:2px 8px;margin-left:2px}

/* S50.b2: la legenda non puo' eccedere il disegno */
#legend{max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin}
#legend.wide .li{break-inside:avoid}
#legend.wide{column-count:2;column-gap:16px}
#legend.wide h4,#legend.wide>div:first-child{column-span:all}
#legend.collapsed{max-height:none;overflow:visible}

/* ═══ S50.h: pannello "cosa transita su questa tratta" ═══ */
.linkbar{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;margin:2px 0 6px}
.linkbar-fill{display:block;height:100%;border-radius:3px}
.linkbar-fill.ok{background:var(--ok)}
.linkbar-fill.warn{background:var(--warn)}
.linkbar-fill.err{background:var(--err)}
.lnkrow{padding:6px 8px;border-left:3px solid transparent;border-bottom:1px solid var(--border);cursor:pointer;border-radius:0}
.lnkrow:hover{background:rgba(127,127,127,.08)}
.lnkrow.on{border-left-color:var(--brand);background:rgba(127,127,127,.10)}
.lnkhead{display:flex;align-items:center;gap:6px;font-size:11.5px}
.lnkhead b{flex:1;font-weight:600}
.lnkbw{font-size:10.5px;color:var(--txt-dim);white-space:nowrap}
.lnkmeta{font-size:10px;color:var(--txt-dim);margin-top:2px;padding-left:14px}

/* ═══ S51: righe del piano di rete — .frow e' a COLONNA, qui serve a RIGA ═══ */
.netrow{display:flex;flex-direction:row;gap:6px;align-items:center;margin-bottom:4px}
.netrow input,.netrow select{font-size:11px}
.netrow select{flex:none;width:150px}
.nethead{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--txt-dim);margin-bottom:2px}
.nethead span{padding-left:2px}

/* ═══ S53.a — zone funzionali ═══ */
.zone-box.sel rect:first-of-type{stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(255,196,0,.3))}

/* ═══ S53.i — modalità disegno percorso bus ═══ */
body.busdraw-mode #svgHost{cursor:crosshair}
body.busdraw-mode #svgHost svg{outline:2px dashed var(--brand);outline-offset:-4px}

/* ═══ S54.a — calate del bus modificabili a mano ═══
   La presa è la calata stessa: nessuna maniglia permanente, che su un fascio da
   trenta cavi vorrebbe dire sessanta quadratini sul disegno. Il contrassegno del
   punto d'aggancio compare al passaggio del puntatore, e resta acceso sulle calate
   sistemate a mano — così si vede a colpo d'occhio quali sono state decise. */
.drop-hit{fill:none;stroke:transparent;stroke-width:11;cursor:move}
.drop-mark{opacity:0}
.drop:hover .drop-mark{opacity:1}
/* S55.e: sulle calate spostate a mano il contrassegno resta acceso ma DISCRETO — dice
   « questa l'hai decisa tu » senza diventare un pallino che compete col disegno.
   Per farlo sparire del tutto quando non ci si passa sopra basta togliere questa riga. */
.drop.man .drop-mark{opacity:.5}
/* Il gomito d'ingresso in canalina: non può allungarsi (finirebbe sul cavo della porta
   sopra), quindi si fa vedere con lo spessore. Al passaggio del puntatore si accende. */
.drop-jog{opacity:.9}
.drop:hover .drop-jog{opacity:1}
.drop:hover .drop-line{stroke-width:2.4}

/* S55.h — anteprima del colore come viene disegnato, accanto al colore memorizzato */
.ss-prev{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid var(--border);flex:none}