/* the native control stays for the form, but out of sight */
  .fzsel-native{position:absolute!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important;
    appearance:none!important;min-width:0!important;max-width:1px!important}
  .fzsel{position:relative;width:100%;font-family:inherit}
  .fzsel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:rgba(255,255,255,.04);border:1px solid rgba(237,232,221,.28);border-radius:11px;
    padding:12px 14px;color:var(--bone,#EDE8DD);font-family:inherit;font-size:14.5px;line-height:1.3;
    text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
  .fzsel-btn:hover{border-color:rgba(22,201,176,.5);background:rgba(255,255,255,.06)}
  .fzsel-btn:focus-visible{outline:none;border-color:var(--teal,#16C9B0);box-shadow:0 0 0 3px rgba(22,201,176,.18)}
  .fzsel.open .fzsel-btn{border-color:var(--teal,#16C9B0);box-shadow:0 0 0 3px rgba(22,201,176,.14)}
  .fzsel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fzsel-val.placeholder{color:var(--dim,#9DA7A6)}
  .fzsel-arrow{flex:none;width:11px;height:11px;border-right:1.8px solid var(--teal,#16C9B0);
    border-bottom:1.8px solid var(--teal,#16C9B0);transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s}
  .fzsel.open .fzsel-arrow{transform:rotate(-135deg) translate(-3px,-3px)}

  .fzsel-menu{position:absolute;z-index:90;left:0;right:0;top:calc(100% + 7px);
    background:rgba(11,15,16,.97);border:1px solid rgba(22,201,176,.32);border-radius:13px;
    box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
    padding:6px;max-height:290px;overflow-y:auto;overscroll-behavior:contain;
    opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease}
  .fzsel.open .fzsel-menu{opacity:1;transform:none;pointer-events:auto}
  .fzsel.up .fzsel-menu{top:auto;bottom:calc(100% + 7px);transform-origin:bottom}
  @supports (backdrop-filter:blur(10px)){.fzsel-menu{backdrop-filter:blur(14px);background:rgba(11,15,16,.86)}}
  .fzsel-menu::-webkit-scrollbar{width:9px}
  .fzsel-menu::-webkit-scrollbar-track{background:transparent}
  .fzsel-menu::-webkit-scrollbar-thumb{background:rgba(237,232,221,.16);border-radius:20px;border:2px solid transparent;background-clip:content-box}

  .fzsel-opt{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;
    color:var(--dim,#9DA7A6);font-size:14px;cursor:pointer;transition:background .14s,color .14s}
  .fzsel-opt:hover,.fzsel-opt.active{background:rgba(22,201,176,.12);color:var(--bone,#EDE8DD)}
  .fzsel-opt[aria-selected="true"]{color:var(--teal,#16C9B0);font-weight:600}
  .fzsel-opt .tick{flex:none;width:14px;height:14px;position:relative;opacity:0;transition:opacity .14s}
  .fzsel-opt[aria-selected="true"] .tick{opacity:1}
  .fzsel-opt .tick:after{content:"";position:absolute;left:3px;top:0;width:5px;height:10px;
    border-right:2px solid var(--teal,#16C9B0);border-bottom:2px solid var(--teal,#16C9B0);transform:rotate(45deg)}
  .fzsel-opt[disabled]{opacity:.4;cursor:default}
  .fzsel-group{padding:9px 12px 4px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim,#9DA7A6);opacity:.75}
  @media (prefers-reduced-motion: reduce){
    .fzsel-menu{transition:none}.fzsel-arrow{transition:none}
  }

/* telefono: anche il select nativo nascosto dietro il selettore deve stare a 16px,
   altrimenti iOS ingrandisce la pagina quando riceve il fuoco */
@media(max-width:880px){.fzsel-native{font-size:16px!important}.fzsel-btn{font-size:16px}}


/* ===== TELEFONO — comandi e testi dello strumento delle curve =====
   Aggiunto il 28 luglio 2026 dopo la misura su schermo da 375px.
   Solo misure di testo e altezze da toccare: il disegno su computer non cambia. */
@media(max-width:900px){
  /* da toccare col dito: 44px e' la misura minima usata su tutto il sito */
  .seg button{min-height:44px}
  /* tutti i pulsanti arancioni, non solo il grande: quello dentro ogni riga dei
     risultati («Curva») misurava 29px */
  .csbtn{min-height:44px}
  /* i cursori dello strumento (portata, prevalenza, frequenza) erano alti 16px.
     La pista e il pomello restano quelli del sistema: cresce solo il riquadro
     da toccare, che e' il riquadro trascinabile del cursore. */
  #controls input[type=range]{height:44px}
  /* i campi del punto di lavoro: 39px sulle FZ-CP, 33px sulla FZ-SP */
  #controls input[type=number],
  .dutydials .ddrow input[type=number]{min-height:44px}
  /* testi che si devono leggere: istruzioni d'uso, riga di lettura, revisione */
  #tabs button{font-size:12.5px}
  .panel p.hint{font-size:12.5px}
  .readout .k{font-size:12px}
  #metaCount{font-size:12px}
}

/* ===== TELEFONO — le unita' degli assi diventano due pulsanti veri =====
   Le due pillole «Portata Q · m³/h ▾» e «Prevalenza H · m ▾» sono disegnate DENTRO
   l'SVG e fanno anche da etichetta degli assi. Il loro riquadro e' calcolato in unita'
   del viewBox (920x674): a 375px il disegno e' scalato a ~0,37 e la pillola resta alta
   19px reali (36px a 700, 29px a 900, dove la colonna del grafico si stringe).
   Portarla a 44px dentro il disegno non si puo': sopra il margine ha 70 unita' libere
   e sotto 92, contro le ~120 che servirebbero, e la pillola finirebbe sui numeri degli
   assi o fuori dal riquadro. Fino a 900px — la stessa soglia degli altri comandi da
   toccare, qui sopra — la pillola si nasconde e le due scelte diventano due pulsanti
   HTML alti 44px sopra il grafico, che li costruisce `unitTapBtn`. Portano la stessa
   scritta, quindi l'etichetta dell'asse non si perde.
   Aggiunto il 31 luglio 2026 (difetto 81). */
.ubar{display:none}
@media(max-width:900px){
  /* la pillola dentro il disegno si nasconde SOLO se i due pulsanti veri ci sono
     davvero (`.ubar` viene inserita subito prima di `.stage`). Cosi' una pagina
     ancora senza `unitTapBtn` — per esempio l'italiano prima della ricostruzione —
     tiene la pillola e resta comunque usabile. */
  .ubar + .stage .unitbtn{display:none}
  .ubar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
  .ubar button{flex:1 1 auto;max-width:340px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px 12px;cursor:pointer;
    border:1px solid rgba(22,201,176,.5);border-radius:12px;
    background:rgba(22,201,176,.10);color:var(--bone,#EDE8DD);
    font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:13px;font-weight:700;letter-spacing:.02em;appearance:none}
  .ubar button:active{background:rgba(22,201,176,.22);border-color:rgba(22,201,176,.85)}
  .ubar button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(22,201,176,.28)}
}

/* Campo obbligatorio lasciato vuoto: il fumetto del browser non si vedrebbe, perche'
   il select vero e' nascosto. Il segno va sul bottone che la persona vede davvero. */
.fzsel-btn.fzsel-errore{border-color:#E2624A;box-shadow:0 0 0 3px rgba(226,98,74,.20)}