/* Visualizzatore dell'idrogeno (scheda della pagina schroedinger.php).
   Tutto e' incapsulato nel contenitore #idro-wrap (position:relative): canvas e
   overlay sono in position:absolute AL SUO INTERNO, non fixed sul viewport, e le
   variabili CSS sono locali al contenitore per non toccare il resto della pagina. */
#idro-wrap{
  --idro-bg:#070A10; --idro-panel:#0E131CE6; --idro-line:#1E2836;
  --idro-txt:#C7D3E4; --idro-dim:#6B7A90; --idro-acc:#7BD5E8;
  position:relative; width:100%; height:78vh; margin-top:.5rem; overflow:hidden;
  background:var(--idro-bg); border-radius:6px; color:var(--idro-txt); font-size:13px;
  font-family:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Menlo,Consolas,monospace;
}
#idro-scene{position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none}

#idro-header{position:absolute; top:0; left:0; right:0; padding:14px 18px; z-index:5;
  display:flex; justify-content:space-between; align-items:baseline; pointer-events:none}
#idro-header h1{font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; margin:0}
#idro-header h1 span{color:var(--idro-dim)}
#idro-clock{font-size:12px; color:var(--idro-dim); font-variant-numeric:tabular-nums}
#idro-clock b{color:var(--idro-acc); font-weight:500}

#idro-panel{position:absolute; left:14px; top:88px; width:252px; max-height:calc(100% - 100px);
  overflow-y:auto; background:var(--idro-panel); border:1px solid var(--idro-line);
  border-radius:8px; padding:14px 14px 10px; backdrop-filter:blur(8px); z-index:6}
#idro-panel.idro-hidden{display:none}   /* comprimibile via bottone Parametri (ogni schermo) */
#idro-panel::-webkit-scrollbar{width:4px}
#idro-panel::-webkit-scrollbar-thumb{background:var(--idro-line); border-radius:2px}

#idro-wrap .idro-grp{margin-bottom:14px}
#idro-wrap .idro-grp:last-child{margin-bottom:4px}
#idro-wrap .idro-lbl{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--idro-dim); margin-bottom:7px; display:flex; justify-content:space-between}
#idro-wrap .idro-lbl output{color:var(--idro-acc); letter-spacing:0; text-transform:none}
#idro-wrap .idro-qrow{display:flex; gap:6px}
#idro-wrap .idro-qrow label{flex:1; font-size:10px; color:var(--idro-dim); display:block}
#idro-wrap .idro-qrow select{width:100%; margin-top:3px; background:#0A0F17; color:var(--idro-txt);
  border:1px solid var(--idro-line); border-radius:5px; padding:5px 4px; font:inherit; font-size:12px}
#idro-wrap .idro-qrow select:focus{outline:1px solid var(--idro-acc); outline-offset:1px}

#idro-panel input[type=range]{width:100%; accent-color:var(--idro-acc); height:18px}
#idro-wrap .idro-switch{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px}
#idro-wrap .idro-switch input{accent-color:var(--idro-acc); width:14px; height:14px}

#idro-wrap .idro-readout{border-top:1px solid var(--idro-line); padding-top:10px; font-size:11px;
  color:var(--idro-dim); line-height:1.75; font-variant-numeric:tabular-nums}
#idro-wrap .idro-readout b{color:var(--idro-txt); font-weight:500}
#idro-stationaryNote{color:#D9A662; display:none}

#idro-wrap .idro-btnrow{display:flex; gap:8px; margin-top:10px}
#idro-panel button, #idro-toggleUI{background:#121A26; color:var(--idro-txt);
  border:1px solid var(--idro-line); border-radius:6px; padding:7px 0; font:inherit;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer}
#idro-wrap .idro-btnrow button{flex:1}
#idro-panel button:hover, #idro-toggleUI:hover{border-color:var(--idro-acc); color:var(--idro-acc)}

#idro-phaseLegend{position:absolute; right:18px; bottom:18px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
#idro-phaseWheel{width:74px; height:74px; border-radius:50%;
  background:conic-gradient(from 90deg, hsl(0 85% 60%),hsl(60 85% 60%),hsl(120 85% 60%),
    hsl(180 85% 60%),hsl(240 85% 60%),hsl(300 85% 60%),hsl(0 85% 60%));
  -webkit-mask:radial-gradient(circle, transparent 46%, #000 48%);
          mask:radial-gradient(circle, transparent 46%, #000 48%);}
#idro-phaseLegend .idro-cap{font-size:10px; color:var(--idro-dim); letter-spacing:.14em; text-transform:uppercase}
#idro-phaseLegend .idro-pi{position:absolute; font-size:10px; color:var(--idro-dim)}

/* bottone Parametri sempre visibile (anche su desktop, utile a pagina stretta),
   posizionato sopra il pannello per non sovrapporsi */
#idro-toggleUI{display:block; position:absolute; left:14px; top:48px; z-index:7; width:auto; padding:6px 12px}
@media (max-width:640px){
  #idro-panel{width:min(252px, calc(100% - 28px))}
  #idro-phaseWheel{width:56px; height:56px}
  #idro-header h1{font-size:11px}
}