/* Refinery Atlas · motore · stile comune delle pagine di unità.
   Token e componenti: engine/atlas.css (caricato prima). Qui solo struttura e cromo del motore, con i token Atlas.
   Regole: una sola sans (Plex) per testo e titoli, mono tabulare per tag e dati, scala compatta.
   Colori semantici (ok, warn, alarm, flow) solo sui dati e sempre con una forma. */
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--scene-3)}
body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:13px;line-height:18px;
  -webkit-font-smoothing:antialiased}
#app{position:relative;height:100%;overflow:hidden;
  background-color:var(--scene-3);
  background-image:linear-gradient(var(--scene-grid) 1px,transparent 1px),linear-gradient(90deg,var(--scene-grid) 1px,transparent 1px),radial-gradient(120% 95% at 58% 32%,var(--scene-1) 0%,var(--scene-2) 55%,var(--scene-3) 100%);
  background-size:32px 32px,32px 32px,100% 100%;background-position:-1px -1px,-1px -1px,0 0}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
button{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
input[type=range]:focus-visible{box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--shadow-focus)}
.cond{font-family:var(--font-display)}

/* ---------- pannello di controllo ---------- */
.panel{position:absolute;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop)}
#panel{top:14px;left:14px;width:318px;max-height:calc(100% - 28px);overflow:auto;padding:0 0 var(--space-3);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.tagplate{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--line-strong);background:var(--surface-2)}
.tag{font-family:var(--font-sans);font-weight:500;font-size:28px;line-height:32px;letter-spacing:-.01em;color:var(--ink)}
.tag.long{font-size:18px;line-height:24px}
.tagsub{margin-top:var(--space-2);font-size:13px;font-weight:600;line-height:16px;color:var(--ink)}
.tagsvc{margin-top:var(--space-1);font-size:11px;line-height:14px;color:var(--ink-2)}
#panel section{padding:var(--space-3) var(--space-4) var(--space-1);border-top:1px solid var(--line)}
#panel section:first-of-type{border-top:0}
#app h2{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
#app h2::before{content:"";flex:none;width:6px;height:6px;background:var(--accent)}
.seg{display:flex;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-1)}
.seg button{flex:1;min-width:0;border:0;border-radius:1px;background:transparent;color:var(--ink-2);padding:6px var(--space-1);cursor:pointer;
  font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;letter-spacing:.02em;text-wrap:balance;transition:background var(--dur-fast) var(--ease-standard)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:hover:not([aria-pressed="true"]){background:var(--surface-3);color:var(--ink)}
.hint{margin:var(--space-2) 0;color:var(--ink-3);font-size:11px;line-height:14px}
.toggles{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 var(--space-2)}
.sw{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:12px;line-height:16px;user-select:none}
.sw input{appearance:none;-webkit-appearance:none;flex:none;width:32px;height:16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-1);position:relative;margin:0;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.sw input::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;background:var(--ink-2);transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.sw input:checked{background:var(--accent);border-color:var(--accent)}
.sw input:checked::after{transform:translateX(16px);background:var(--on-accent)}
.row{margin:var(--space-1) 0 var(--space-3)}
.row .lab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:12px;line-height:16px;color:var(--ink-2)}
.row .val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;color:var(--ink)}
input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;margin:var(--space-1) 0 0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
input[type=range]::-moz-range-track{height:2px;background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:18px;margin-top:-8px;border:1px solid var(--bg);border-radius:1px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:8px;height:16px;border:1px solid var(--bg);border-radius:1px;background:var(--accent)}
.marks{position:relative;height:16px;margin:0 5px;font-size:11px;line-height:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.marks span{position:absolute;transform:translateX(-50%);top:0;line-height:14px}
.marks span.h{color:var(--warn)} .marks span.hh{color:var(--alarm)}
dl.proc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);font-size:12px;line-height:16px}
dl.proc dt{color:var(--ink-2)}
dl.proc dd{margin:0;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;max-width:12.5em;text-wrap:balance;color:var(--ink)}
dl.proc dd.warn{color:var(--warn)} dl.proc dd.bad{color:var(--alarm)}
dl.proc dd.warn::before,dl.proc dd.bad::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--space-2);background:currentColor;vertical-align:0}
dl.proc dd.warn::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
dl.proc dd.bad::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
dl.proc .sep{grid-column:1/-1;border-top:1px dashed var(--line-strong);margin:var(--space-1) 0}
#alarms{margin:var(--space-2) 0 var(--space-1);padding:0;list-style:none;font-size:12px;line-height:16px}
#alarms li{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) 0;border-top:1px solid var(--line)}
#alarms li:first-child{border-top:0}
#alarms .pri{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-sm);padding:2px var(--space-2);margin-top:1px}
#alarms .pri::before{content:"";width:10px;height:10px;flex:none;background:currentColor}
#alarms .pri.hi{color:var(--alarm);background:var(--alarm-dim)}
#alarms .pri.hi::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
#alarms .pri.md{color:var(--warn);background:var(--warn-dim)}
#alarms .pri.md::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
#alarms .ok{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ok)}
#alarms .ok::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.fine{font-size:11px;line-height:14px;color:var(--ink-3);margin:var(--space-2) 0}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3);font-size:11px;line-height:14px;color:var(--ink-2);margin-bottom:var(--space-2)}
.legend span{display:flex;align-items:center;gap:var(--space-2)}
.legend i{width:22px;height:6px;border-radius:1px;display:inline-block}

/* ---------- elenco componenti ---------- */
#comps{top:14px;right:14px;width:262px;max-height:calc(100% - 28px);overflow:auto;padding:var(--space-3) var(--space-2) var(--space-2);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
#comps h2{padding:0 6px}
#comps p{margin:0 6px var(--space-2);font-size:11px;line-height:14px;color:var(--ink-3)}
#clist{list-style:none;margin:0;padding:0}
#clist button{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;border:0;background:transparent;padding:6px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;line-height:16px;color:var(--ink-2);transition:background var(--dur-fast) var(--ease-standard)}
#clist button:hover{background:var(--surface-2);color:var(--ink)}
#clist button[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
#clist button[aria-current="true"] .num{border-color:var(--on-accent);color:var(--on-accent)}
#app .num{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--ink-2);display:grid;place-items:center;color:var(--ink);
  font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- scheda del componente ---------- */
#info{right:14px;bottom:70px;width:384px;max-height:calc(100% - 100px);overflow:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
#info[hidden]{display:none}
#info header{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4) var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid var(--line-strong);background:var(--surface-2)}
#info header .num{margin-top:3px;width:28px;height:28px;font-size:12px}
#info h3{margin:0;font-family:var(--font-sans);font-weight:500;font-size:18px;line-height:24px;color:var(--ink)}
#info .cat{font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--space-1)}
#info .close{margin-left:auto;border:1px solid var(--line-strong);background:transparent;border-radius:var(--radius-sm);width:28px;height:28px;cursor:pointer;font-size:18px;line-height:1;flex:none;color:var(--ink-2);transition:background var(--dur-fast) var(--ease-standard)}
#info .close:hover{background:var(--surface-3);color:var(--ink)}
#info .body{padding:0 var(--space-4) var(--space-3)}
#info .body p{margin:0 0 var(--space-3);max-width:68ch;color:var(--ink-2)}
#info h4{margin:var(--space-3) 0 var(--space-2);font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
#info ul{margin:0 0 var(--space-2);padding-left:18px;color:var(--ink-2)}
#info li{margin:0 0 6px}
#info dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:1px solid var(--line);font-size:12px;line-height:16px}
#info dt{color:var(--ink-3)} #info dd{margin:0;text-align:right;font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
#info .body button.go{margin-top:var(--space-3);border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font-weight:500;padding:var(--space-2) var(--space-4);cursor:pointer;transition:filter var(--dur-fast) var(--ease-standard)}
#info .body button.go:hover{filter:brightness(1.08)}

/* ---------- barra comandi ---------- */
#toolbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:0;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);overflow:hidden}
#toolbar button{border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink-2);padding:var(--space-2) var(--space-3);cursor:pointer;font-weight:500;font-size:12px;line-height:16px;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard)}
#toolbar button:first-child{border-left:0}
#toolbar button:hover{background:var(--surface-3);color:var(--ink)}
#toolbar button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
#toolbar button:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
#toolbar svg{width:16px;height:16px;flex:none}
#toolbar .mobile-only{display:none}

/* ---------- sovrapposizioni 3D ---------- */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;contain:layout style}
#labels .balloon,#labels .stream,#labels .pv,#labels .scale-tag{will-change:transform;backface-visibility:hidden}
#labels .balloon{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--ink-2);background:var(--surface-1);color:var(--ink);display:grid;place-items:center;padding:0;
  font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px #00000066;transition:background var(--dur-fast) var(--ease-standard)}
#labels .balloon:hover,#labels .balloon.on{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
#labels .balloon .tip{position:absolute;left:32px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);font-family:var(--font-sans);
  font-weight:500;font-size:11px;line-height:14px;padding:3px var(--space-2);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--dur-fast)}
#labels .balloon:hover .tip,#labels .balloon:focus-visible .tip{opacity:1}
#labels .stream{position:absolute;left:0;top:0;pointer-events:none;display:flex;align-items:stretch;background:var(--surface-1);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-size:11px;font-weight:500;line-height:14px;box-shadow:0 1px 5px #00000059;max-width:190px}
#labels .stream i{width:5px;flex:none}
#labels .stream span{padding:3px var(--space-2)}
#labels .stream b{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.02em;color:var(--ink)}
#labels .pv{position:absolute;left:0;top:0;pointer-events:none;background:var(--surface-1);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:2px var(--space-2) 3px;font-size:11px;line-height:14px;box-shadow:0 1px 5px #00000059;white-space:nowrap}
#labels .pv b{font-family:var(--font-mono);font-weight:500;font-size:11px;margin-right:var(--space-2);color:var(--ink-2)}
#labels .pv em{display:block;font-family:var(--font-mono);font-style:normal;font-weight:500;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
#labels .pv.md{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)} #labels .pv.hi{border-color:var(--alarm);box-shadow:0 0 0 1px var(--alarm)}
#labels .pv.md b::before,#labels .pv.hi b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:currentColor}
#labels .pv.md b{color:var(--warn)} #labels .pv.hi b{color:var(--alarm)}
#labels .pv.md b::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
#labels .pv.hi b::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
dl.proc .sub{grid-column:1/-1;font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;margin:var(--space-3) 0 var(--space-1);color:var(--ink-3)}
dl.proc .sub:first-child{margin-top:0}
.hbar{grid-column:1/-1;margin:var(--space-1) 0}
.hbar .bar{display:flex;height:12px;border-radius:1px;overflow:hidden;border:1px solid var(--line-strong)}
.hbar .bar i{display:block;height:100%}
.hbar .lg{display:flex;flex-wrap:wrap;gap:2px var(--space-3);margin-top:6px;font-size:11px;line-height:14px;color:var(--ink-2)}
.hbar .lg i{display:inline-block;width:8px;height:8px;margin-right:var(--space-1);vertical-align:0}
.hbar .lgh{font-size:11px;line-height:14px;color:var(--ink-3);margin-bottom:var(--space-1)}
.hbar .lgh b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
#clist li.grp{font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:var(--space-3) 6px var(--space-1);border-top:1px solid var(--line);margin-top:var(--space-1)}
#clist li.grp:first-child{border-top:0;margin-top:0;padding-top:2px}
#labels .scale-tag{position:absolute;left:0;top:0;pointer-events:none;display:flex;align-items:center;gap:6px;background:var(--surface-1);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:2px var(--space-2);font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;box-shadow:0 1px 5px #00000059}
#labels .scale-tag i{width:3px;height:16px;background:repeating-linear-gradient(var(--ink) 0 2px,transparent 2px 4px);border-left:2px solid var(--ink)}
#tooltip{position:absolute;pointer-events:none;background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong);font-size:11px;line-height:14px;padding:3px var(--space-2);border-radius:var(--radius-sm);opacity:0;transition:opacity var(--dur-fast);white-space:nowrap;z-index:5}
/* scheda al passaggio del mouse (U.hover): sigla, nome, riga di dato, invito al clic */
#tooltip.card{display:grid;gap:2px;padding:var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 2px);min-width:180px;max-width:300px;white-space:normal;background:color-mix(in srgb,var(--surface-2) 92%,transparent);border-color:var(--line-strong);border-left:2px solid var(--accent);box-shadow:var(--shadow-pop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#tooltip.card b{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;letter-spacing:.08em;color:var(--accent)}
#tooltip.card span{font-size:13px;line-height:17px;font-weight:500;color:var(--ink)}
#tooltip.card em{font-style:normal;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;line-height:14px;color:var(--ink-2)}
#tooltip.card i{font-style:normal;font-size:10px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.seglab{margin:var(--space-3) 0 var(--space-1);font-family:var(--font-mono);font-size:10px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.seglab:first-child{margin-top:0}

/* ---------- caricamento ed errore ---------- */
#loader{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:12px;line-height:16px;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;transition:opacity .6s;z-index:10}
#loader.done{opacity:0;pointer-events:none}
.ldbox{max-width:34em;padding:var(--space-5);text-align:left;background:var(--surface-1);border:1px dashed var(--line-strong)}
.nojs{margin:0 0 var(--space-3);line-height:16px;color:var(--ink-2)}
#loadmsg{font-size:10px;line-height:14px;font-weight:500;letter-spacing:.1em;font-family:var(--font-mono);text-transform:uppercase;color:var(--ink-3)}
#loadmsg.err{color:var(--alarm);text-transform:none;letter-spacing:0;font-size:12px;line-height:16px}
.ldbox:has(#loadmsg.err){border:1px solid var(--alarm);background:var(--alarm-dim)}
#loader .bar{width:240px;max-width:100%;height:2px;margin:var(--space-3) 0 0;
  background-image:linear-gradient(90deg,var(--flow) 0 6px,transparent 6px 14px);background-size:14px 2px;background-repeat:repeat-x;animation:ra-run-x calc(var(--dur-flow) / 4) var(--ease-flow) infinite}
.ldbox:has(#loadmsg.err) .bar{display:none}
.hidden{display:none!important}

@media (max-width: 900px){
  #toolbar .mobile-only{display:flex}
  #panel{width:min(318px,calc(100% - 28px));max-height:calc(100% - 90px);display:none;z-index:4}
  #panel.open{display:block}
  #comps{display:none;z-index:4;max-height:calc(100% - 90px)}
  #comps.open{display:block}
  #info{left:10px;right:10px;width:auto;bottom:64px;max-height:46%;z-index:5}
  #toolbar{bottom:10px;max-width:calc(100% - 20px);overflow-x:auto}
  #toolbar button{padding:var(--space-2) 10px}
  #toolbar .txt{display:none}
  #toolbar .txt.keep{display:inline}
  .stream{display:none}
  .scale-tag{display:none!important}
}
@media (max-width: 900px){
  #bRotate,#bHome{display:none!important}
}
@media (max-width: 480px){
  #bComps .txt{display:none!important}
  }
@media (pointer: coarse){
  .seg button{min-height:40px}
  #toolbar button{min-height:44px}
  #clist button{min-height:40px}
}
@media (prefers-reduced-motion: reduce){
  #loader .bar{animation:none}
  *{transition:none!important}
}
.nw{white-space:nowrap}

/* ---------- richiamo in testa al pannello ---------- */
.tagplate .crumb{display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;border-bottom:0}
.tagplate .crumb::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='16' cy='16' r='14'/%3E%3Cpath d='M2 16h28'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='16' cy='16' r='14'/%3E%3Cpath d='M2 16h28'/%3E%3C/svg%3E") center/contain no-repeat}
.tagplate .crumb:hover{color:var(--accent)}

/* vista pulita: pannelli nascosti con una transizione breve, solo su desktop */
#app #panel,#app #comps{transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
#app.cine #panel{opacity:0;transform:translateX(-12px);pointer-events:none}
#app.cine #comps{opacity:0;transform:translateX(12px);pointer-events:none}
@media (max-width:900px){.desk-only{display:none!important}}

/* ---------- 0.5.0: schede di linea e di item, elenco linee, notte ---------- */
#info .num svg{width:15px;height:15px;display:block}
#info.x .cat{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:none;color:var(--accent)}
#info .ft{display:grid;grid-template-columns:1fr 18px 1fr;align-items:start;gap:var(--space-2);margin:0 0 var(--space-3);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
#info .ft>div{display:grid;gap:4px;min-width:0}
#info .ft .k{font-family:var(--font-mono);font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
#info .ft>i{align-self:center;height:2px;margin-top:14px;background:linear-gradient(90deg,var(--flow) 0 5px,transparent 5px 9px);background-size:9px 2px;position:relative}
#info .ft>i::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--flow);border-top:4px solid transparent;border-bottom:4px solid transparent}
#info .ft .end{display:block;font-size:12px;line-height:16px;color:var(--ink);text-align:left;border:0;background:transparent;padding:0;overflow-wrap:anywhere}
#info .ft button.end{cursor:pointer;color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
#info .ft button.end:hover{text-decoration-color:var(--accent)}
#info .body p.fine{margin:var(--space-3) 0 0;color:var(--ink-3)}
#clist li.grp.lines{padding:var(--space-2) 0 var(--space-1);text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-size:12px;color:var(--ink-2)}
#clist li.grp.lines summary{cursor:pointer;padding:4px 6px;font-family:var(--font-mono);font-weight:500;font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);list-style-position:inside}
#clist li.grp.lines summary:hover{color:var(--ink)}
#clist li.grp.lines .cnt{color:var(--accent);margin-left:4px}
#clist .llist{list-style:none;margin:var(--space-1) 0 0;padding:0}
#clist .llist button{display:grid;grid-template-columns:1fr;gap:1px;padding:5px 6px}
#clist .llist .ln{font-family:var(--font-mono);font-size:10px;line-height:13px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
#clist .llist .lt{font-size:12px;line-height:15px}
#clist .llist button[aria-current="true"] .ln{color:var(--on-accent)}
#app.night{background-color:var(--scene-n3);background-image:linear-gradient(var(--scene-ngrid) 1px,transparent 1px),linear-gradient(90deg,var(--scene-ngrid) 1px,transparent 1px),radial-gradient(120% 95% at 58% 32%,var(--scene-n1) 0%,var(--scene-n2) 55%,var(--scene-n3) 100%)}

/* ---------- 0.6.0: P&ID collegato alla scena (engine/pid.js) ---------- */
#app.pidon #stage,#app.pidon #labels{bottom:var(--pidH)}
#app.pidon #panel,#app.pidon #comps{max-height:calc(100% - var(--pidH) - 28px)}
#app.pidon #toolbar{bottom:calc(var(--pidH) + 14px)}
#app.pidon #info{bottom:calc(var(--pidH) + 66px);max-height:calc(100% - var(--pidH) - 96px)}
#pid{position:absolute;left:0;right:0;bottom:0;height:var(--pidH);display:flex;flex-direction:column;background:var(--surface-1);border-top:1px solid var(--line-strong);z-index:3;box-shadow:0 -10px 28px #00000080}
#pid[hidden]{display:none}
.pid-grip{position:absolute;left:0;right:0;top:-6px;height:12px;cursor:ns-resize;z-index:2;touch-action:none}
.pid-grip::after{content:"";position:absolute;left:50%;top:4px;width:48px;height:4px;margin-left:-24px;border-radius:2px;background:var(--line-strong);transition:background var(--dur-fast) var(--ease-standard)}
.pid-grip:hover::after,.pid-grip:focus-visible::after{background:var(--accent)}
.pid-bar{display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-2) 0 var(--space-4);border-bottom:1px solid var(--line);background:var(--surface-2);flex:none;min-width:0}
.pid-id{display:flex;align-items:baseline;gap:var(--space-2);flex:none;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.pid-id .pid-k{font-size:10px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:var(--space-2)}
.pid-id .pid-k::before{content:"";width:6px;height:6px;background:var(--accent)}
.pid-id b{font-weight:500;font-size:12px;color:var(--ink)}
.pid-id .rv{font-size:11px;color:var(--ink-3)}
.pid-areas{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;flex:1}
.pid-areas::-webkit-scrollbar{display:none}
.pid-areas button{flex:none;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--ink-2);font-size:12px;line-height:16px;padding:4px var(--space-2);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.pid-areas button:hover{background:var(--surface-3);color:var(--ink)}
.pid-tools{display:flex;align-items:center;gap:var(--space-2);flex:none}
.pid-tools .seg.sm button{padding:3px var(--space-2);font-size:11px;line-height:14px;min-height:0}
.pid-tools .sw.sm{font-size:12px;color:var(--ink-2)}
.pid-sep{width:1px;height:20px;background:var(--line-strong)}
.pid-tools .ib{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--ink-2);cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.pid-tools .ib:hover{background:var(--surface-3);color:var(--ink)}
.pid-tools .ib[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pid-tools .ib[aria-pressed="true"] svg{transform:rotate(180deg)}
.pid-tools .ib svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.pid-view{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pid-view.drag{cursor:grabbing}
.pid-view svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pid-tip{position:absolute;left:0;top:0;pointer-events:none;display:grid;gap:2px;padding:var(--space-2) var(--space-3);min-width:180px;max-width:300px;background:color-mix(in srgb,var(--surface-2) 94%,transparent);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);will-change:transform;z-index:2}
.pid-tip b{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;letter-spacing:.04em;color:var(--accent)}
.pid-tip span{font-size:13px;line-height:17px;font-weight:500;color:var(--ink)}
.pid-tip em{font-style:normal;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;line-height:14px;color:var(--ink-2)}
.pid-tip i{font-style:normal;font-size:10px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.pid-stat{position:absolute;left:var(--space-3);bottom:var(--space-2);pointer-events:none;white-space:nowrap;font-family:var(--font-mono);font-size:10px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:color-mix(in srgb,var(--bg) 80%,transparent);padding:2px 6px}
.pid-state{position:absolute;right:var(--space-3);top:var(--space-3);max-width:320px;padding:var(--space-2) var(--space-3);border:1px dashed var(--line-strong);background:var(--surface-2);color:var(--ink-2);font-size:12px;line-height:16px}
/* foglio: unità SVG del disegno; spessori costanti sullo schermo (non-scaling-stroke) */
#pid svg{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#pid svg *{vector-effect:non-scaling-stroke}
#pid .paper{fill:#0C1015}
#pid .grid{fill:none;stroke:#141A21;stroke-width:1}
#pid .frame{fill:none;stroke:var(--line-strong);stroke-width:1}
#pid .frame.in{stroke:var(--ink-3);stroke-width:1.2}
#pid .zone{fill:var(--ink-3);font-size:12px;text-anchor:middle}
#pid .area rect{fill:none;stroke:#26303B;stroke-width:1;stroke-dasharray:2 6}
#pid .area text{fill:var(--ink-3);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
#pid .tbk{fill:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#pid .tbv{fill:var(--ink);font-size:15px}
#pid .tbv.big{font-size:30px;font-family:var(--font-sans);font-weight:500}
#pid .note{fill:var(--ink-2);font-size:12px;font-family:var(--font-sans)}
#pid .lgl{fill:none;stroke:var(--ink-2)}
#pid .lgl.w1{stroke-width:2}#pid .lgl.w2{stroke-width:1.4}#pid .lgl.w3{stroke-width:1;stroke:var(--ink-3)}
#pid .lgb{fill:none;stroke:var(--ink-2);stroke-width:1}
#pid .flagl{fill:var(--surface-2);stroke:var(--ink-2);stroke-width:1}
/* linee */
#pid .ln{--pl:var(--fc,var(--ink-2));--lw:1.8px}
#pid svg.ink .ln{--pl:var(--ink-2)}
#pid .ln.w2{--lw:1.4px}
#pid .ln.w3{--lw:1.05px}
#pid svg.ink .ln.w3{--pl:var(--ink-3)}
#pid .ln .v{fill:none;stroke:var(--pl);stroke-width:var(--lw);stroke-linejoin:round;stroke-linecap:square}
#pid .ln .ar{fill:var(--pl);stroke:none}
#pid .ln .dot{fill:var(--pl);stroke:none}
#pid .ln .hit{fill:none;stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:pointer}
#pid .ln .halo,#pid .ln .fx{fill:none;stroke:none;pointer-events:none}
#pid .ln .lt{fill:var(--ink-3);font-size:9px;text-anchor:middle;display:none;pointer-events:none}
#pid svg.z3 .ln .lt{display:inline}
#pid .ln.hv .v,#pid .ln.hov .v{stroke:var(--ink);stroke-width:calc(var(--lw) + 1px)}
#pid .ln.sel .v{stroke:var(--accent);stroke-width:3.6px}
#pid .ln.sel .ar,#pid .ln.sel .dot{fill:var(--accent)}
#pid .ln.sel .halo{stroke:var(--accent);stroke-opacity:.42;stroke-width:16px;stroke-linejoin:round;animation:pid-halo 1.4s ease-in-out infinite alternate}
#pid .ln.sel .fx{stroke:#E6F0FF;stroke-width:3px;stroke-dasharray:4 14;animation:pid-flow 1.1s linear infinite}
#pid .ln.sel .lt{fill:var(--accent)}
#pid .ln.rel .v{stroke:color-mix(in srgb,var(--accent) 55%,var(--pl))}
@keyframes pid-flow{to{stroke-dashoffset:-18}}
@keyframes pid-halo{from{stroke-opacity:.24}to{stroke-opacity:.55}}
#pid .flag path{fill:var(--surface-2);stroke:var(--pl);stroke-width:1.1;cursor:pointer}
#pid .flag.bl path{fill:#151B22;stroke-width:1.6}
#pid .flag text{fill:var(--ink);font-size:12px;text-anchor:middle;pointer-events:none}
#pid .flag:hover path{fill:var(--surface-3)}
#pid .ln.sel .flag path{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 18%,var(--surface-2))}
/* apparecchiature */
#pid .eq{cursor:pointer}
#pid .eq .o{fill:#121821;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
#pid .eq .d{fill:none;stroke:var(--ink-2);stroke-width:1}
#pid .eq .d.dash{stroke-dasharray:6 4}
#pid .eq .d.fire{stroke:var(--ink-3)}
#pid .eq .et{fill:var(--ink);font-size:24px;font-weight:500;pointer-events:none}
#pid .eq .es{fill:var(--ink-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-sans);display:none;pointer-events:none}
#pid .eq .ed{fill:var(--ink-3);font-size:10.5px;display:none;pointer-events:none}
#pid svg.z1 .eq .es{display:inline}
#pid svg.z2 .eq .ed{display:inline}
#pid .eq:hover .o,#pid .eq.hv .o{stroke:var(--accent)}
#pid .eq.sel .o{stroke:var(--accent);stroke-width:3;fill:color-mix(in srgb,var(--accent) 26%,#121821)}
#pid .eq.sel,#pid .vl.sel{filter:drop-shadow(0 0 5px #4c90f0) drop-shadow(0 0 12px #4c90f099)}
#pid .eq.sel .et{fill:var(--accent)}
#pid .eq.rel .o{stroke:color-mix(in srgb,var(--accent) 70%,var(--ink));stroke-width:2}
/* valvole e strumenti */
#pid .vl{cursor:pointer}
#pid .vl .o{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
#pid .vl .o.f{fill:#0C1015}
#pid .vl .d{fill:none;stroke:var(--ink-2);stroke-width:1}
#pid .vl .hitbox,#pid .eq .hitbox{fill:transparent;stroke:none;pointer-events:all}
#pid .vl .vt{fill:var(--ink-2);font-size:10px;display:none;pointer-events:none}
#pid .vl .vf{fill:var(--ink-3);font-size:8.5px;display:none;pointer-events:none}
#pid .vl .vs{fill:var(--ink);font-size:9px;text-anchor:middle;pointer-events:none}
#pid svg.z1 .vl .vt{display:inline}
#pid svg.z3 .vl .vf{display:inline}
#pid .vl.psv .vt{display:inline}
#pid .vl:hover .o,#pid .vl.hv .o,#pid .vl.hov .o{stroke:var(--accent)}
#pid .vl.sel .o{stroke:var(--accent);stroke-width:2.2}
#pid .vl.sel .o.f{fill:color-mix(in srgb,var(--accent) 30%,#0C1015)}
#pid .vl.sel .vt{fill:var(--accent);display:inline}
#pid .vl.rel .o{stroke:color-mix(in srgb,var(--accent) 60%,var(--ink))}
#pid .bb .o,#pid .pvb .o{fill:#0C1015;stroke:var(--ink-2);stroke-width:1}
#pid .bb .bt,#pid .pvb .bt{fill:var(--ink);font-size:10px;text-anchor:middle;pointer-events:none}
#pid .bb .bn,#pid .pvb .bn{fill:var(--ink-2);font-size:9px;text-anchor:middle;pointer-events:none}
#pid .sig{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:5 4}
#pid .tap{fill:var(--ink-3)}
#pid .bb{cursor:pointer}
#pid .bb.sel .o{stroke:var(--accent)}
#pid .pvb .pl{fill:#10161D;stroke:var(--line-strong);stroke-width:1}
#pid .pvb .pvt{fill:var(--ink);font-size:13px;font-weight:500}
#pid .pvb[data-st="md"] .pl{stroke:var(--warn)}#pid .pvb[data-st="md"] .mk{fill:var(--warn)}#pid .pvb[data-st="md"] .pvt{fill:var(--warn)}
#pid .pvb[data-st="hi"] .pl{stroke:var(--alarm)}#pid .pvb[data-st="hi"] .mk{fill:var(--alarm)}#pid .pvb[data-st="hi"] .pvt{fill:var(--alarm)}
#pid .pvb{cursor:pointer}
/* traccia: con una selezione attiva il resto del foglio si attenua */
#pid svg.focus .ln:not(.sel):not(.rel),#pid svg.focus .eq:not(.sel):not(.rel),#pid svg.focus .vl:not(.sel):not(.rel),#pid svg.focus .bb:not(.sel),#pid svg.focus .pvb,#pid svg.focus .area{opacity:.22;transition:opacity var(--dur-fast) var(--ease-standard)}
/* segnalino della selezione: anelli che pulsano tre volte, punto fisso e cartellino con sigla e nome */
.pid-pin{position:absolute;left:0;top:0;pointer-events:none;z-index:1;will-change:transform}
.pid-pin i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.pid-pin.go i{animation:pid-ping 1.5s ease-out 3}
.pid-pin.go i+i{animation-delay:.5s}
.pid-pin u{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #0c1015,0 0 12px #4c90f0}
.pid-pin span{position:absolute;left:16px;bottom:12px;display:grid;gap:1px;width:max-content;max-width:300px;padding:4px 8px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);white-space:nowrap}
.pid-pin.flip span{left:auto;right:16px}
.pid-pin.low span{bottom:auto;top:12px}
.pid-pin b{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;font-variant-numeric:tabular-nums}
.pid-pin em{font-style:normal;font-size:12px;line-height:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
@keyframes pid-ping{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion: reduce){#pid .ln.sel .fx{animation:none;stroke:none}#pid .ln.sel .halo{animation:none}.pid-pin.go i{animation:none}.pid-pin i:first-child{opacity:1;transform:scale(1)}}
@media (max-width: 900px){
  #app.pidon #info{top:10px;bottom:auto;max-height:calc(100% - var(--pidH) - 84px)}
  #app.pidon #panel,#app.pidon #comps{max-height:calc(100% - var(--pidH) - 84px)}
  .pid-bar{gap:var(--space-2);padding-left:var(--space-3)}
  .pid-id .rv,.pid-id b,.pid-tools .seg,.pid-tools .sw,.pid-sep,.pid-tools [data-z="1"],.pid-tools [data-z="-1"]{display:none}
  .pid-stat{display:none}
}
@media (pointer: coarse){.pid-tools .ib{width:36px;height:36px}.pid-areas button{padding:8px var(--space-2)}}
/* 0.6.1: cartellino della selezione su telefono con P&ID aperto (la scheda si apre a richiesta) */
#cardBtn{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:6px 6px 6px 12px;background:color-mix(in srgb,var(--surface-2) 94%,transparent);border:1px solid var(--accent);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);color:var(--ink);cursor:pointer;text-align:left}
#cardBtn[hidden]{display:none}
#cardBtn .cb-t{display:grid;gap:1px;min-width:0;flex:1}
#cardBtn b{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:14px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cardBtn b:empty{display:none}
#cardBtn em{font-style:normal;font-size:13px;line-height:17px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cardBtn .cb-a{flex:none;padding:6px 10px;background:var(--accent);color:var(--on-accent);font-size:12px;line-height:16px;font-weight:500;border-radius:var(--radius-sm)}
#cardBtn:focus-visible{box-shadow:var(--shadow-focus)}