/* ---------------------------------------------------------------------------
   Fisica Tecnica Ambientale — foglio di stile unico.

   Parentela con gftas.it: stessa impaginazione, stessa famiglia di caratteri,
   stessa grammatica di riquadri e filetti. Differenza voluta: qui il colore
   guida è il verde, di là il ciano. Il ciano, su questo sito, è riservato a
   una cosa sola — i rimandi all'associazione — così il lettore impara che
   quel colore vuol dire «stai per uscire di qui».

   Nessun CDN: i caratteri sono in wwwroot/vendor, il CSS è questo file.
   La Content-Security-Policy del sito non ammette risorse esterne.
--------------------------------------------------------------------------- */

:root{
  --inchiostro:#15181a;
  --carta:#f7f7f4;
  --superficie:#ffffff;
  --verde:#00713a;
  --verde-scuro:#005a2e;
  --verde-tenue:#e8f2ec;
  --ciano:#00719e;
  --ciano-tenue:#e6f3fa;
  --ambra:#8a5a00;
  --ambra-tenue:#fbf1dc;
  --rosso:#a5232b;
  --rosso-tenue:#fbeaea;
  --grigio:#5f665f;
  --grigio-chiaro:#868d86;
  --filo:#dcdfda;
  --filo-forte:#b7beb6;
  --misura:42rem;          /* larghezza del testo corrente: ~68 caratteri */
  --largo:74rem;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]){
    --inchiostro:#e7eae6;
    --carta:#12150f;
    --superficie:#1a1e19;
    --verde:#63c98d;
    --verde-scuro:#8bd9aa;
    --verde-tenue:#1b2c21;
    --ciano:#5cc2ec;
    --ciano-tenue:#14262f;
    --ambra:#dfa94e;
    --ambra-tenue:#2a2312;
    --rosso:#e98189;
    --rosso-tenue:#2c1618;
    --grigio:#9ba39a;
    --grigio-chiaro:#828a81;
    --filo:#2a2f28;
    --filo-forte:#3d443b;
  }
}
:root[data-tema="scuro"]{
  --inchiostro:#e7eae6; --carta:#12150f; --superficie:#1a1e19;
  --verde:#63c98d; --verde-scuro:#8bd9aa; --verde-tenue:#1b2c21;
  --ciano:#5cc2ec; --ciano-tenue:#14262f;
  --ambra:#dfa94e; --ambra-tenue:#2a2312;
  --rosso:#e98189; --rosso-tenue:#2c1618;
  --grigio:#9ba39a; --grigio-chiaro:#828a81;
  --filo:#2a2f28; --filo-forte:#3d443b;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.avvolgi{max-width:var(--largo);margin:0 auto;padding:0 1.5rem}
.stretto{max-width:var(--misura)}

a{color:var(--verde);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--verde-scuro)}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:2px}

img{max-width:100%;height:auto}

/* --------------------------------------------------------------- testata */

.salta{position:absolute;left:-9999px;top:0;background:var(--verde);color:#fff;padding:.6rem 1rem;z-index:100}
.salta:focus{left:0}

.testata{background:var(--superficie);border-bottom:1px solid var(--filo)}
.testata .avvolgi{display:flex;align-items:center;gap:1rem;padding-block:.85rem;flex-wrap:wrap}

.marchio{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.marchio:hover{color:inherit}
.marchio .sigla{
  font-family:"IBM Plex Serif",Georgia,serif;font-weight:600;font-size:1.3rem;
  line-height:1;letter-spacing:-.02em;color:var(--verde);white-space:nowrap;
}
.marchio .ente{font-size:.72rem;line-height:1.32;color:var(--grigio);border-left:1px solid var(--filo);padding-left:.75rem}

.strumenti-testata{margin-left:auto;display:flex;align-items:center;gap:.6rem}

.cerca-testata{display:flex;align-items:center}
.cerca-testata input{
  font:inherit;font-size:.85rem;padding:.34rem .6rem;width:11rem;
  border:1px solid var(--filo-forte);border-radius:2px;
  background:var(--carta);color:inherit;
}
.cerca-testata input:focus{border-color:var(--verde);outline:none}

.bottone-tema{
  font:inherit;font-size:.78rem;background:none;border:1px solid var(--filo-forte);
  border-radius:2px;color:var(--grigio);padding:.3rem .55rem;cursor:pointer;line-height:1.2;
}
.bottone-tema:hover{border-color:var(--verde);color:var(--verde)}

/* --------------------------------------------------------------- navigazione */

.principale{background:var(--superficie);border-bottom:2px solid var(--verde)}
.principale .avvolgi{display:flex;gap:.1rem;flex-wrap:wrap;padding:0 1.5rem}
.principale a{
  display:block;padding:.55rem .8rem;font-size:.9rem;font-weight:500;
  color:var(--grigio);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;
}
.principale a:hover{color:var(--verde);background:var(--verde-tenue)}
.principale a[aria-current]{color:var(--verde);background:var(--verde-tenue);border-bottom-color:var(--verde)}

/* Su schermo stretto il menu resta su una riga sola e scorre di lato:
   tre righe di voci mangiavano metà della prima schermata. */
@media(max-width:700px){
  .principale .avvolgi{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .principale .avvolgi::-webkit-scrollbar{display:none}
  .principale a{white-space:nowrap;flex:none}
  .testata .avvolgi{padding-block:.7rem}
  .cerca-testata input{width:9rem}
  body{font-size:16px}
}

/* --------------------------------------------------------------- struttura */

main{display:block;padding-block:2.5rem 3.5rem;min-height:60vh}

h1,h2,h3,h4{font-family:"IBM Plex Serif",Georgia,serif;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(1.85rem,3.6vw,2.6rem);line-height:1.13;font-weight:600;margin:0 0 .6rem}
h2{font-size:1.5rem;line-height:1.25;font-weight:600;margin:2.6rem 0 .6rem}
h3{font-size:1.16rem;line-height:1.3;font-weight:600;margin:2rem 0 .4rem}
h4{font-size:1rem;font-weight:600;margin:1.5rem 0 .3rem}

.occhiello{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin:0 0 .7rem;
}
.sommario{font-size:1.08rem;color:var(--grigio);margin:0 0 1.5rem;max-width:var(--misura)}

p,ul,ol,dl{margin:0 0 1.05rem}
.prosa p,.prosa ul,.prosa ol,.prosa blockquote,.prosa h2,.prosa h3,.prosa h4,.prosa .tex-blocco{max-width:var(--misura)}
li{margin-bottom:.3rem}
li::marker{color:var(--filo-forte)}

hr{border:0;border-top:1px solid var(--filo);margin:2.2rem 0;max-width:var(--misura)}

blockquote{
  margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--verde);color:var(--grigio);
}
blockquote p:last-child{margin-bottom:0}

code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.87em;
  background:var(--verde-tenue);padding:.08em .32em;border-radius:2px;
}
pre{
  background:var(--superficie);border:1px solid var(--filo);border-left:3px solid var(--verde);
  padding:.9rem 1.05rem;overflow-x:auto;margin:0 0 1.3rem;max-width:100%;
}
pre code{background:none;padding:0;font-size:.85rem;line-height:1.55}

.tabella{overflow-x:auto;border:1px solid var(--filo);background:var(--superficie);margin:0 0 1.4rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--filo);vertical-align:top}
th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grigio);font-weight:500;background:var(--carta);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--verde-tenue)}
td.numero,th.numero{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",ui-monospace,monospace}

/* --------------------------------------------------------------- formule */

.tex,.tex-blocco{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.95em}
.tex-blocco{
  display:block;margin:1.3rem 0;padding:.9rem 1rem;text-align:center;
  background:var(--superficie);border:1px solid var(--filo);overflow-x:auto;
}
/* dopo che KaTeX ha disegnato, il carattere a spaziatura fissa non serve più */
.katex{font-size:1.05em}
.katex-display{margin:0}

/* --------------------------------------------------------------- riquadri */

.griglia{display:grid;gap:1px;background:var(--filo);border:1px solid var(--filo)}
.griglia-2{grid-template-columns:1fr}
.griglia-3{grid-template-columns:1fr}
.griglia-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){
  .griglia-2{grid-template-columns:repeat(2,1fr)}
  .griglia-3{grid-template-columns:repeat(2,1fr)}
  .griglia-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:960px){ .griglia-3{grid-template-columns:repeat(3,1fr)} }

.scheda{background:var(--superficie);padding:1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem}
a.scheda{text-decoration:none;color:inherit}
a.scheda:hover{background:var(--verde-tenue);color:inherit}
.scheda .titolo{font-weight:600;font-size:1rem;line-height:1.3;color:var(--inchiostro)}
a.scheda:hover .titolo{color:var(--verde)}
.scheda .testo{font-size:.88rem;color:var(--grigio);line-height:1.5;margin:0}
.scheda .coda{
  margin-top:auto;padding-top:.5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.06em;color:var(--grigio-chiaro);text-transform:uppercase;
}

/* elenco di documenti: righe, non riquadri, quando sono tanti */
.elenco{border-top:1px solid var(--filo);margin:0 0 1.5rem;list-style:none;padding:0}
.elenco li{margin:0;border-bottom:1px solid var(--filo)}
.elenco a{
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  padding:.75rem .3rem;text-decoration:none;color:inherit;
}
.elenco a:hover{background:var(--verde-tenue)}
.elenco .voce-titolo{font-weight:600;flex:1 1 18rem;min-width:0}
.elenco a:hover .voce-titolo{color:var(--verde)}
.elenco .voce-nota{font-size:.85rem;color:var(--grigio);flex:1 1 100%;margin:0}
.elenco .voce-data{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;
  color:var(--grigio-chiaro);font-variant-numeric:tabular-nums;white-space:nowrap;
}

.etichetta{
  display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.16rem .45rem;border-radius:2px;background:var(--verde-tenue);color:var(--verde);
  white-space:nowrap;
}
.etichetta.neutra{background:var(--carta);color:var(--grigio);border:1px solid var(--filo)}

/* --------------------------------------------------------------- avvisi */

.avviso{border:1px solid var(--filo);border-left:3px solid var(--verde);background:var(--superficie);padding:.9rem 1.05rem;margin:0 0 1.4rem;max-width:var(--misura)}
.avviso p{margin:0}
.avviso p+p{margin-top:.55rem}
.avviso.attenzione{border-left-color:var(--ambra);background:var(--ambra-tenue)}
.avviso.attenzione strong{color:var(--ambra)}
.avviso.errore{border-left-color:var(--rosso);background:var(--rosso-tenue)}
.avviso.errore strong{color:var(--rosso)}

/* --------------------------------------------------------------- rimando al GFTA */

.ponte{
  border:1px solid var(--filo);border-left:3px solid var(--ciano);background:var(--ciano-tenue);
  padding:1rem 1.15rem;margin:0 0 1.6rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
}
.ponte p{margin:0;flex:1 1 16rem;font-size:.95rem}
.ponte strong{color:var(--ciano)}
.ponte .vai{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;
  border:1px solid var(--ciano);color:var(--ciano);padding:.4rem .75rem;border-radius:2px;
  text-decoration:none;white-space:nowrap;
}
.ponte .vai:hover{background:var(--ciano);color:var(--superficie)}

/* --------------------------------------------------------------- moduli e strumenti */

.strumento{display:grid;gap:1.5rem;align-items:start}
@media(min-width:940px){.strumento{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.strumento>*{min-width:0}

fieldset{border:1px solid var(--filo);background:var(--superficie);padding:1rem 1.1rem 1.15rem;margin:0 0 1rem}
legend{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio);padding:0 .4rem;
}
.campo{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}
.campo:last-child{margin-bottom:0}
.campo label{font-size:.85rem;font-weight:500}
.campo .unita{font-weight:400;color:var(--grigio-chiaro);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.92rem;padding:.4rem .55rem;width:100%;max-width:100%;
  border:1px solid var(--filo-forte);border-radius:2px;background:var(--carta);color:inherit;
  font-variant-numeric:tabular-nums;
}
.campo textarea{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;line-height:1.5;
  resize:vertical;white-space:pre;overflow-x:auto;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);outline:none}
.campo .aiuto{font-size:.76rem;color:var(--grigio-chiaro);line-height:1.4}

.riga-campi{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.riga-campi>*{min-width:0}
fieldset{min-width:0}

button,.bottone{
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  background:var(--verde);color:#fff;border:1px solid var(--verde);
  padding:.45rem .95rem;border-radius:2px;text-decoration:none;display:inline-block;
}
button:hover,.bottone:hover{background:var(--verde-scuro);border-color:var(--verde-scuro);color:#fff}
button.tenue{background:none;color:var(--verde);border-color:var(--filo-forte)}
button.tenue:hover{background:var(--verde-tenue);color:var(--verde);border-color:var(--verde)}

.esito{background:var(--superficie);border:1px solid var(--filo);padding:1.1rem 1.15rem}
.esito .grande{
  font-family:"IBM Plex Serif",Georgia,serif;font-size:2.1rem;line-height:1.05;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.esito .grande .unita{font-size:.95rem;color:var(--grigio);font-family:"IBM Plex Mono",ui-monospace,monospace}
.esito dl{display:grid;grid-template-columns:auto 1fr;gap:.28rem .9rem;margin:.9rem 0 0;font-size:.9rem}
.esito dt{color:var(--grigio)}
.esito dd{margin:0;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",ui-monospace,monospace}

.barra-strati{display:flex;height:2.2rem;border:1px solid var(--filo-forte);margin:.8rem 0 .3rem;overflow:hidden}
.barra-strati span{display:block;border-right:1px solid var(--filo-forte)}
.barra-strati span:last-child{border-right:0}

.buono{color:var(--verde)}
.male{color:var(--rosso)}

/* --------------------------------------------------------------- indice laterale */

.con-indice{display:grid;gap:2.5rem}
@media(min-width:1040px){.con-indice{grid-template-columns:minmax(0,1fr) 15rem}}
.indice{font-size:.85rem;position:sticky;top:1.5rem;align-self:start}
.indice .tt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio-chiaro);margin-bottom:.5rem;
}
.indice ul{list-style:none;padding:0;margin:0;border-left:1px solid var(--filo)}
.indice li{margin:0}
.indice a{display:block;padding:.25rem .8rem;color:var(--grigio);text-decoration:none;border-left:2px solid transparent;margin-left:-1px}
.indice a:hover{color:var(--verde);border-left-color:var(--verde)}
.indice .livello-3 a{padding-left:1.5rem;font-size:.95em}

/* --------------------------------------------------------------- piè di pagina */

.pieno{background:var(--inchiostro);color:#dfe3dd;padding-block:2.2rem 2.5rem;margin-top:3rem}
.pieno .avvolgi{display:grid;gap:1.8rem}
@media(min-width:720px){.pieno .avvolgi{grid-template-columns:repeat(3,1fr)}}
.pieno .tt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8f978d;margin-bottom:.6rem;
}
.pieno ul{list-style:none;padding:0;margin:0}
.pieno li{margin-bottom:.28rem}
.pieno a{color:#dfe3dd;text-decoration:none;font-size:.9rem}
.pieno a:hover{color:#fff;text-decoration:underline}
.pieno .gfta a{color:#7cc9ea}
.pieno p{font-size:.85rem;line-height:1.55;color:#b3bab0;margin:0 0 .5rem}
.pieno .coda{
  grid-column:1/-1;border-top:1px solid #2f352d;padding-top:1rem;margin-top:.4rem;
  font-size:.78rem;color:#8f978d;display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;
}

/* --------------------------------------------------------------- stampa */

@media print{
  .testata,.principale,.pieno,.ponte,.indice,.strumenti-testata{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  main{padding:0}
  a{color:#000;text-decoration:underline}
  .avvolgi{max-width:none;padding:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}