/* ===== PAGINE CALCOLATORE =====
     Foglio condiviso da tutte le pagine di calcolo, italiane e inglesi. Nasce con
     il calcolo del peso dell'acciaio inox; le prossime si limitano a collegarlo.

     Poggia su `base-legal.css`, che porta gia' sfondo, header, drawer, footer e
     cambio lingua: qui dentro c'e' SOLO quello che serve allo strumento.

     Tutte le classi hanno il prefisso `.cp-` di proposito, cosi' nessuna regola
     puo' finire addosso al resto del sito. Le uniche eccezioni sono `.cp h1/h2/h3/p`,
     che vivono comunque dentro il contenitore `.cp` e non escono di li'.

     ⚠️ `.cp-f[hidden]{display:none}` non e' una ripetizione inutile: senza quella
        riga il `display:flex` della riga sopra vince sull'attributo `hidden` del
        browser, e i campi che non servono alla forma scelta restano visibili.
        Successo davvero l'11 settembre 2026, con nove campi tutti in fila.
  */

.cp{max-width:1060px;padding-block:50px 40px}
.cp h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,68px);line-height:1.03}
.cp h1:after{content:"";display:block;width:64px;height:1px;background:var(--teal);margin-top:18px}
.cp .lede{color:var(--dim);font-weight:300;font-size:17px;margin:20px 0 0;max-width:62ch;line-height:1.7}
.cp h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);margin:52px 0 12px;color:var(--bone)}
.cp h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:26px 0 6px;color:var(--bone)}
.cp p{color:var(--dim);font-weight:300;margin-bottom:13px;line-height:1.78}
.cp p strong{color:var(--bone);font-weight:500}
.cp a.inl{color:var(--teal);text-decoration:underline}

/* strumento */
.cp-tool{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px;
  margin-top:34px; align-items:start;
}
@media(max-width:900px){.cp-tool{grid-template-columns:minmax(0,1fr)}}

.cp-in{
  background:rgba(10,14,15,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:16px; padding:24px;
}
.cp-lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.cp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}
.cp-f{display:flex;flex-direction:column;gap:6px;min-width:0;justify-content:flex-end}
.cp-f[hidden]{display:none}
  /* `justify-content:flex-end` non e' un vezzo: quando un'etichetta va a capo e le
     vicine no, senza di lui la casella di quel campo scende e la fila si sfalsa.
     Cosi' le caselle restano allineate in basso e a muoversi e' solo l'etichetta.
     Successo il 12 settembre 2026 con "Lunghezza della lamiera" accanto a "Spessore". */
.cp-f label{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.cp-f label .u{text-transform:none;letter-spacing:0;color:rgba(157,167,166,.7)}
.cp input,.cp select{
  font-family:var(--sans);font-size:15px;font-weight:400;color:var(--bone);
  background:rgba(237,232,221,.05);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;width:100%;min-width:0;font-variant-numeric:tabular-nums;
}
.cp select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.cp select option{background:#12171a;color:var(--bone)}
.cp input:focus-visible,.cp select:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.cp-note{font-size:12.5px;color:rgba(157,167,166,.8);font-weight:300;margin-top:16px;line-height:1.6}

/* risultato */
.cp-out{
  background:rgba(10,14,15,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; position:sticky; top:96px;
}
@media(max-width:900px){.cp-out{position:static}}
.cp-out-top{padding:24px 22px 20px;text-align:center;border-bottom:1px solid var(--line)}
.cp-out-top .c{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.cp-big{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8vw,58px);line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.cp-big .un{font-family:var(--sans);font-size:18px;color:var(--dim);margin-left:7px}
.cp-sub{font-size:13.5px;color:var(--dim);margin-top:9px;font-variant-numeric:tabular-nums}
.cp-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 22px;border-bottom:1px solid rgba(237,232,221,.07);font-size:13.5px}
.cp-r .l{color:var(--dim);font-weight:300}
.cp-r .v{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-r.off{display:none}
  /* Stessa trappola di .cp-f: senza questa riga il display:flex vince
     sull'attributo hidden e la riga resta li' a mostrare un trattino. */
  .cp-r[hidden]{display:none}
.cp-cta{padding:18px 22px 20px}
.cp-cta p{font-size:13px;margin-bottom:12px;line-height:1.6}
.cp-cta a{
  display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--teal);background:rgba(22,201,176,.05);border:1px solid var(--teal);
  padding:11px 20px;border-radius:40px;text-decoration:none;transition:background .2s;
}
.cp-cta a:hover{background:rgba(22,201,176,.16)}

/* tabelle di riferimento */
.cp-tw{overflow-x:auto;margin:18px 0 26px;border:1px solid var(--line);border-radius:12px}
table.cp-t{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
table.cp-t caption{text-align:left;padding:15px 18px 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
table.cp-t th{
  text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);padding:14px 18px 9px;border-bottom:1px solid var(--line);
}
table.cp-t th.n,table.cp-t td.n{text-align:right}
table.cp-t td{padding:9px 18px;border-bottom:1px solid rgba(237,232,221,.07);color:var(--dim);font-weight:300;font-variant-numeric:tabular-nums}
table.cp-t td.b{color:var(--bone);font-weight:400}
table.cp-t tr:last-child td{border-bottom:none}

/* faq */
.cp-faq{border-top:1px solid var(--line);margin-top:14px}
.cp-faq > div{padding:20px 0;border-bottom:1px solid rgba(237,232,221,.07)}
.cp-faq .q{font-family:var(--serif);font-size:21px;color:var(--bone);margin-bottom:6px;line-height:1.28}
.cp-faq .a{color:var(--dim);font-weight:300;line-height:1.75}

  /* ---- pastiglie di stato dentro le tabelle calcolate ----
     Servono al calcolatore portata/diametro/velocita': ogni DN si porta dietro il
     giudizio sulla velocita' che ne esce. Il colore da solo non basta mai, la
     parola c'e' sempre scritta accanto. */
  .cp-tag{
    display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:600;border:1px solid currentColor;border-radius:30px;padding:2px 8px;
    white-space:nowrap;
  }
  .cp-tag.ok{color:var(--teal)}
  .cp-tag.warn{color:var(--amber)}
  .cp-tag.no{color:#D4685A}
  table.cp-t tr.hi td{background:rgba(22,201,176,.07)}
  table.cp-t tr.hi td.b{color:var(--teal)}

  /* ---- riga di giudizio sotto il risultato ---- */
  .cp-verdict{padding:14px 22px;border-bottom:1px solid rgba(237,232,221,.07)}
  .cp-verdict p{font-size:12.5px;color:var(--dim);font-weight:300;line-height:1.6;margin:9px 0 0}

  /* ---- altri calcolatori, in fondo alla pagina ---- */
  .cp-altri{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
  .cp-altri a{
    display:block;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
    text-decoration:none;transition:border-color .2s,background .2s;
  }
  .cp-altri a:hover{border-color:var(--teal);background:rgba(22,201,176,.05)}
  .cp-altri .t{font-family:var(--serif);font-size:20px;color:var(--bone);line-height:1.2}
  .cp-altri .d{font-size:13px;color:var(--dim);font-weight:300;margin-top:4px}

  /* ---- disegno in sezione, dentro il riquadro del risultato ----
     Il serbatoio vive nel pannello del risultato, non in una colonna sua: il
     livello del liquido e' un risultato quanto i litri, e sta bene accanto a loro. */
  .cp-svg{padding:12px 14px 2px;border-bottom:1px solid rgba(237,232,221,.07)}
  .cp-svg svg{width:100%;height:auto;display:block}
  .cp-solo{font-size:12.5px;color:var(--amber);font-weight:300;margin-top:14px;line-height:1.6}

  /* ---- scaletta del calcolo: ogni riga e' un addendo, l'ultima e' il risultato ----
     Nata per l'NPSH, dove il valore da solo non dice niente: serve vedere da dove
     viene e quale voce se lo sta mangiando. */
  .cp-brk{border-top:1px solid rgba(237,232,221,.07)}
  .cp-brk .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 22px;font-size:13px}
  .cp-brk .r span{color:var(--dim);font-weight:300}
  .cp-brk .r b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cp-brk .r.somma{border-top:1px solid var(--line);margin-top:3px;padding-top:11px}
  .cp-brk .r.somma span{color:var(--bone)}
  .cp-brk .r.somma b{color:var(--teal);font-size:15px}

  /* ---- schema, a tutta larghezza sotto lo strumento ---- */
  .cp-schema{border:1px solid var(--line);border-radius:16px;background:rgba(10,14,15,.45);padding:14px 16px 10px;margin-top:24px}
  .cp-schema svg{width:100%;height:auto;display:block}
  .cp-schema .cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
  .cp-schema .nota{font-size:12.5px;color:var(--dim);font-weight:300;margin-top:6px}

  /* ---- scorciatoie sopra il campo di ricerca ----
     Quattro fluidi tipici in chiaro: servono a far capire, senza spiegarlo, che
     sotto c'e' un campo in cui si puo' scrivere qualunque altra cosa. */
  .cp-rapidi{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px}
  .cp-rapidi button{
    font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;
    color:var(--dim);background:none;border:1px solid var(--line);border-radius:40px;
    padding:7px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;
  }
  .cp-rapidi button:hover{color:var(--bone);border-color:rgba(237,232,221,.3)}
  .cp-rapidi button[aria-pressed="true"]{color:var(--teal);border-color:var(--teal);background:rgba(22,201,176,.08)}

  /* ---- tendina di ricerca dei fluidi ----
     Il <datalist> nativo non bastava: si apre quando gli pare, non si scorre e non
     si puo' vestire. Questa si apre al clic, mostra tutto l'archivio, scorre, si
     filtra scrivendo e si guida con le frecce. */
  .cp-in{position:relative;z-index:20}
  .cp-campo{position:relative}
  .cp-drop{
    position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;
    max-height:268px;overflow-y:auto;overscroll-behavior:contain;
    background:#12171a;border:1px solid var(--line);border-radius:10px;
    box-shadow:0 18px 44px rgba(0,0,0,.55);
  }
  .cp-drop[hidden]{display:none}
  .cp-drop button{
    display:block;width:100%;text-align:left;background:none;border:0;
    color:var(--bone);font-family:var(--sans);font-size:14px;font-weight:300;
    padding:9px 14px;cursor:pointer;border-bottom:1px solid rgba(237,232,221,.06);
  }
  .cp-drop button:last-child{border-bottom:0}
  .cp-drop button:hover,.cp-drop button.sel{background:rgba(22,201,176,.12);color:var(--teal)}
  .cp-drop .vuoto{padding:13px 14px;font-size:13px;color:var(--dim);font-weight:300}
  .cp-drop::-webkit-scrollbar{width:10px}
  .cp-drop::-webkit-scrollbar-track{background:transparent}
  .cp-drop::-webkit-scrollbar-thumb{background:rgba(237,232,221,.2);border-radius:10px;border:3px solid #12171a}

/* ===== le tre misure, tre colori =====
   A, B e C hanno ognuna il suo colore, e il colore le segue ovunque compaiano:
   etichetta del campo, quota nel disegno, pillola nel pannello dei risultati.
   Cosi' si capisce al volo quale numero e' quale senza rileggere l'etichetta.
   Chiesto dal titolare il 20 settembre 2026.
   Scelti per staccare dal verde del liquido (#16C9B0) e dall'ambra del margine
   (#E0934E), che nel disegno ci sono gia'. */
:root{--qa:#5FB2F0; --qb:#E878B4; --qc:#EBC75E}
.cp-f label .q{font-weight:700;letter-spacing:.05em}
/* il colore prende tutto il campo: etichetta, unita' e il numero digitato.
   Cosi' «Lato A» e il suo 1200 si leggono come una cosa sola, e l'occhio li
   ritrova nella pillola e sulla quota senza passare dall'etichetta. */
.cp-f.qa label,.cp-f.qa input{color:var(--qa)}
.cp-f.qb label,.cp-f.qb input{color:var(--qb)}
.cp-f.qc label,.cp-f.qc input{color:var(--qc)}
.cp-f.qa label .u,.cp-f.qb label .u,.cp-f.qc label .u{color:inherit;opacity:.65}
.cp-f.qa input{border-color:rgba(95,178,240,.45)}
.cp-f.qb input{border-color:rgba(232,120,180,.45)}
.cp-f.qc input{border-color:rgba(235,199,94,.45)}
.q.qa{color:var(--qa)} .q.qb{color:var(--qb)} .q.qc{color:var(--qc)}
.cp-mis{display:flex;flex-wrap:wrap;gap:7px;padding:13px 22px;
        border-bottom:1px solid rgba(237,232,221,.07)}
.cp-mis:empty{display:none}
.cp-mis b{font-family:var(--mono);font-size:11.5px;font-weight:500;padding:3px 10px;
          border-radius:999px;border:1px solid currentColor;background:rgba(237,232,221,.045);
          font-variant-numeric:tabular-nums;white-space:nowrap}