/* I colori vengono dal quadro elettrico: grigio carpenteria (RAL 7035) come fondo,
   antracite (RAL 7016) per la barra in alto, il blu dei cavi di comando per le
   azioni, il giallo dei marcafili per il marchio e per i nomi nuovi. */
:root{
  --ground:#E6E8E3; --surface:#FBFBF8; --raise:#F1F2EE;
  --ink:#1C2124; --ink2:#4B5358; --ink3:#767E83;
  --rule:#D6D9D3; --rule2:#B5BAB3;
  --panel:#2B3136; --panel-ink:#ECEEE9; --panel-ink2:#A7AEB2; --panel-rule:#474E54;
  --wire:#1F58B5; --go-ink:#FFFFFF;
  --marker:#F2CF3B; --marker-ink:#1C2124;
  --tag:#FFF6CF; --tag-bd:#E4D18A;
  --teal:#0C6459; --amber:#8F5312; --red:#9B2C2C; --blue:#1B4F8F; --gold:#8A6D1F;
  --viola:#5B3D8F;
  --tealbg:#DCEFEA; --amberbg:#FBE7D2; --redbg:#F6D9D9; --bluebg:#E7EEF6; --goldbg:#FDF3D9;
  --violabg:#EDE3F6;
  --disp:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#121517; --surface:#1A1E21; --raise:#22272B;
  --ink:#E6E8E3; --ink2:#A3AAAE; --ink3:#7D858A;
  --rule:#2A3034; --rule2:#3C4349;
  --panel:#0B0D0F; --panel-ink:#E6E8E3; --panel-ink2:#8F979C; --panel-rule:#2F363B;
  --wire:#6E9BEA; --go-ink:#0B1730;
  --marker:#E8C534; --marker-ink:#15181A;
  --tag:#2F2A14; --tag-bd:#544A1F;
  --teal:#55C9B7; --amber:#E0A45C; --red:#E38080; --blue:#7FAEE6; --gold:#D9BC63;
  --viola:#B69AE0;
  --tealbg:#12312C; --amberbg:#3A2A18; --redbg:#3A1F1F; --bluebg:#182838; --goldbg:#332B14;
  --violabg:#241C33;
}}
:root[data-theme="dark"]{
  --ground:#121517; --surface:#1A1E21; --raise:#22272B;
  --ink:#E6E8E3; --ink2:#A3AAAE; --ink3:#7D858A;
  --rule:#2A3034; --rule2:#3C4349;
  --panel:#0B0D0F; --panel-ink:#E6E8E3; --panel-ink2:#8F979C; --panel-rule:#2F363B;
  --wire:#6E9BEA; --go-ink:#0B1730;
  --marker:#E8C534; --marker-ink:#15181A;
  --tag:#2F2A14; --tag-bd:#544A1F;
  --teal:#55C9B7; --amber:#E0A45C; --red:#E38080; --blue:#7FAEE6; --gold:#D9BC63;
  --viola:#B69AE0;
  --tealbg:#12312C; --amberbg:#3A2A18; --redbg:#3A1F1F; --bluebg:#182838; --goldbg:#332B14;
  --violabg:#241C33;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.4}
:focus-visible{outline:2px solid var(--wire);outline-offset:2px}
/* La pagina segue la finestra fino a un limite largo: la tabella dell'analisi ha
   nove colonne e due di queste sono testo lungo, quindi lo spazio serve tutto.
   I blocchi di prosa restano leggibili per conto loro, con un max-width in ch. */
.wrap{max-width:1760px;margin:0 auto;padding:0 26px 80px}

/* il marchio: un marcafilo giallo infilato su un cavo blu */
h1{display:inline-flex;align-items:center;margin:0;font:700 1rem/1 var(--disp);
  letter-spacing:.1em;text-transform:uppercase}
h1::before,h1::after{content:"";width:22px;height:6px;border-radius:3px;background:var(--wire)}
h1 span{position:relative;z-index:1;margin:0 -3px;padding:8px 13px 7px;border-radius:4px;
  background:var(--marker);color:var(--marker-ink);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.35)}

/* header: la porta del quadro, in antracite, larga tutta la finestra */
header{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:14px 0;
  margin-bottom:22px;background:var(--panel);color:var(--panel-ink);
  box-shadow:0 0 0 100vmax var(--panel);clip-path:inset(0 -100vmax)}
.schema{font-family:var(--mono);font-size:12px;color:var(--panel-ink2)}
.schema b{font-weight:500;color:var(--panel-ink)}
.schema b.admin{color:var(--marker)}
.spacer{margin-left:auto}
.tbtn{font:600 12.5px var(--disp);letter-spacing:.06em;text-transform:uppercase;
  background:transparent;border:1px solid var(--panel-rule);color:var(--panel-ink2);
  border-radius:4px;padding:7px 11px;cursor:pointer;text-decoration:none;display:inline-block}
.tbtn:hover{color:var(--panel-ink);border-color:var(--panel-ink2)}

/* i cinque passi: sono davvero una sequenza, quindi numerati come morsetti */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  margin-bottom:18px;background:var(--rule);border:1px solid var(--rule2);border-radius:6px;
  overflow:hidden}
.step{background:var(--surface);padding:11px 15px;display:flex;gap:11px;align-items:flex-start;
  color:var(--ink3)}
.step.on{background:var(--raise);color:var(--ink);box-shadow:inset 0 -3px 0 var(--wire)}
.step .n{font:500 12px var(--mono);border:1px solid var(--rule2);border-radius:3px;
  width:24px;height:24px;display:grid;place-items:center;flex:none;background:var(--ground)}
.step.on .n{background:var(--wire);color:var(--go-ink);border-color:var(--wire)}
.step.fatto{color:var(--ink2)}
.step.fatto .n{font-size:0;background:var(--tealbg);border-color:var(--teal)}
.step.fatto .n::after{content:"\2713";font-size:14px;color:var(--teal)}
.step b{display:block;font:600 15px/1.2 var(--disp);letter-spacing:.02em}
/* inizio e fine del flusso: il primo passo si fa in SPAC, l'ultimo consegna i file */
.step i.capo{display:block;font:700 10.5px var(--disp);font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wire);margin-bottom:1px}
.step.fatto i.capo{color:var(--teal)}
/* il passo fuori dall'app: tratteggiato, senza spunta */
.step.fuori{background:var(--raise)}
.step.fuori .n{border-style:dashed;background:transparent}
.step.fuori i.capo{color:var(--ink3)}
.step div span{display:block;font-size:12.5px;line-height:1.35;margin-top:2px;color:var(--ink3)}

/* drop zone */
.drop{border:2px dashed var(--rule2);border-radius:8px;background:var(--surface);
  padding:46px 26px;text-align:center;transition:border-color .15s,background .15s}
.drop.hot{border-color:var(--wire);background:var(--bluebg)}
.drop h2{font:600 1.45rem var(--disp);letter-spacing:.01em;margin:0 0 4px}
.drop p{margin:0;color:var(--ink3);font-size:14px}
.drop .pick{margin-top:18px;display:inline-flex;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:10px 16px}
.drop .pick label{font-size:13.5px;color:var(--ink2);display:inline-flex;gap:6px;
  align-items:center;cursor:pointer}
.drop.mini{padding:10px 14px;text-align:left;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;border-style:solid;border-width:1px;border-radius:6px}
.drop.mini h2{font-size:1.05rem;margin:0}
.drop.mini p{display:none}
.drop.mini .pick{margin:0 0 0 auto}
.btn{font:600 15px var(--disp);letter-spacing:.03em;border-radius:4px;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  padding:9px 18px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--ink2);filter:none}
.btn.go{background:var(--wire);border-color:var(--wire);color:var(--go-ink)}

/* il riquadro che dice cosa fare adesso */
.gate{margin:18px 0;border:1px solid var(--rule2);border-left-width:6px;border-radius:6px;
  background:var(--surface);padding:15px 18px;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap}
.gate.ok{background:var(--tealbg);border-color:var(--teal)}
.gate.no{background:var(--amberbg);border-color:var(--amber)}
.gate.stop{background:var(--redbg);border-color:var(--red)}
.gate code{font-family:var(--mono);font-size:12.5px;background:var(--surface);
  border:1px solid var(--rule);border-radius:3px;padding:1px 4px}
.gate .txt{flex:1;min-width:260px;margin-right:8px}
.gate b{display:block;font:700 1.3rem/1.2 var(--disp);letter-spacing:.01em;margin-bottom:3px}
.gate.ok b{color:var(--teal)} .gate.no b{color:var(--amber)} .gate.stop b{color:var(--red)}
.gate p{margin:0;font-size:14px;color:var(--ink2);line-height:1.5;max-width:90ch}
.gate em{font-style:normal;font-weight:600;color:var(--ink)}

.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;
  vertical-align:baseline}

/* toolbar + table */
.tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:22px 0 12px}
.tools input{font-family:var(--sans);font-size:14px;padding:8px 11px;min-width:240px;
  margin-right:6px;background:var(--surface);color:var(--ink);border:1px solid var(--rule2);
  border-radius:4px}
.chipf{font:600 12.5px var(--disp);letter-spacing:.05em;text-transform:uppercase;
  padding:6px 10px;cursor:pointer;background:var(--surface);color:var(--ink2);
  border:1px solid var(--rule2);border-radius:4px}
.chipf:hover{border-color:var(--ink2)}
.chipf em{font:500 11.5px var(--mono);font-style:normal;color:var(--ink3);margin-left:3px}
.chipf[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.chipf[aria-pressed="true"] em{color:inherit;opacity:.75}
.count{margin-left:auto;font:500 13px var(--disp);letter-spacing:.04em;color:var(--ink3);
  white-space:nowrap}
.tblwrap{border:1px solid var(--rule2);border-radius:6px;background:var(--surface);
  overflow:auto;max-height:clamp(320px,68vh,1100px)}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{position:sticky;top:0;z-index:3;background:var(--surface);text-align:left;
  font:700 12px var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);
  padding:10px 13px;border-bottom:2px solid var(--ink);white-space:nowrap}
tbody tr{border-top:1px solid var(--rule)}
.tnom tbody tr:not(.cpl):hover>td{background:var(--raise)}
td{padding:7px 13px;vertical-align:top}
td.m{font-family:var(--mono)}
td.a{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
td.sp{font-family:var(--mono);color:var(--ink2);font-size:12.5px}
td.pl{font-family:var(--mono)}
.ed{font-family:var(--mono);cursor:text;border-bottom:1px dashed transparent;
  padding:1px 2px}
.ed:hover{border-bottom-color:var(--rule2);background:var(--raise)}
/* il nome nuovo come un marcafilo: e' l'etichetta che finira' nel PLC */
td.pl .ed{display:inline-block;white-space:nowrap;padding:1px 6px;border:1px solid var(--tag-bd);
  border-radius:3px;background:var(--tag);color:var(--ink)}
td.pl .ed:hover{border-color:var(--wire);background:var(--tag)}
.edin{font-family:var(--mono);font-size:13px;padding:2px 5px;width:24ch;border-radius:3px;
  background:var(--surface);color:var(--ink);border:1px solid var(--wire)}
.man{font-size:11.5px;font-weight:600;color:var(--teal);margin-left:6px;white-space:nowrap}
.undo{font-size:11.5px;color:var(--ink3);margin-left:6px;
  cursor:pointer;text-decoration:underline;white-space:nowrap}
.undo:hover{color:var(--amber)}
td.why{font-size:12.5px;color:var(--ink2);line-height:1.45}
.tnom td.de{min-width:200px}
.tnom td.why{min-width:210px}
.chip{font:500 10px var(--mono);letter-spacing:.05em;border-radius:3px;
  text-transform:uppercase;padding:3px 7px;white-space:nowrap;border:1px solid currentColor}
/* menu di completamento del nome condiviso */
.chipbtn{font:500 10px var(--mono);letter-spacing:.05em;border-radius:3px;
  text-transform:uppercase;padding:3px 7px;white-space:nowrap;cursor:pointer;
  background:transparent;border:1px solid currentColor}
.chipbtn::after{content:" \25be";font-size:11px}
.chipbtn:hover{background:var(--goldbg)}
.chipbtn[aria-expanded="true"]{background:var(--goldbg)}
/* accetta la variabile cosi com'e': niente freccia, non apre nulla, salva */
.accbtn{font:500 10px var(--mono);letter-spacing:.05em;border-radius:3px;
  text-transform:uppercase;padding:3px 7px;white-space:nowrap;cursor:pointer;
  margin-left:5px;background:transparent;color:var(--teal);border:1px solid currentColor}
.accbtn:hover{background:var(--tealbg)}
/* file a due colonne: la vista per gruppi */
.gbox>p{margin:0 0 14px;font-size:13.5px;color:var(--ink2);line-height:1.5;max-width:90ch}
.gtit{font:700 1.05rem var(--disp);margin:22px 0 8px;letter-spacing:.02em}
.gtit em{font:500 12px var(--mono);font-style:normal;color:var(--ink3);margin-left:6px}
.gcat{border:1px solid var(--rule);border-radius:6px;background:var(--surface);margin-bottom:8px}
.gcat>summary{display:flex;align-items:center;gap:14px;padding:11px 14px;cursor:pointer;list-style:none}
.gcat>summary::-webkit-details-marker{display:none}
.gcat>summary::before{content:"\25b8";color:var(--ink3);font-size:12px}
.gcat[open]>summary::before{content:"\25be"}
.gcat[open]>summary{border-bottom:1px solid var(--rule)}
.gnum{font:600 18px var(--mono);min-width:44px;text-align:right;color:var(--amber)}
.gtxt{flex:1;min-width:0}
.gtxt b{display:block;font-size:14.5px}
.gtxt span{font-size:12.5px;color:var(--ink2);line-height:1.45}
.gtab{width:100%;border-collapse:collapse;font-size:12.5px}
.gtab th{text-align:left;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);padding:7px 14px;border-bottom:1px solid var(--rule)}
.gtab td{padding:7px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.gtab tr:last-child td{border-bottom:0}
.gtab td.m{font-family:var(--mono);white-space:nowrap}
.gtab td.gex{white-space:normal;color:var(--ink2);line-height:1.5}
.gtab td.gex b{color:var(--ink)}
.gtab .vai{font-size:12.5px;color:var(--teal);cursor:pointer;text-decoration:underline}
@media (max-width:700px){.gcat>summary{flex-wrap:wrap}.gtab td.m{white-space:normal}}
/* file a due colonne: i due nomi proposti su una divergenza, ognuno col suo "usa" */
.scelta{font-size:11.5px;color:var(--ink2);margin-top:4px;white-space:nowrap}
/* la descrizione generata: e' testo, non un identificatore */
td.de{font-size:12.5px;color:var(--ink2);line-height:1.45}
tr.cpl>td{background:var(--raise);padding:4px 13px 14px}
.cplbox b{font:600 15px var(--disp)}
.cplbox p{margin:2px 0 11px;font-size:13px;color:var(--ink3);max-width:88ch;
  line-height:1.5}
.cplgrid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cplf{display:flex;flex-direction:column;gap:5px}
.cplf label{font:600 12px var(--disp);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
.cplf select,.cplf input{font-family:var(--mono);font-size:13px;padding:7px 9px;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule2);border-radius:4px}
.cplf select{max-width:38ch}
.cplf input{width:30ch;border-color:var(--wire)}
.cplact{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn.sm{padding:6px 13px;font-size:14px}
.sim{font-size:11.5px;color:var(--amber);margin-left:6px;white-space:nowrap}
/* ============ larghezze della tabella di analisi ============================
   Le colonne di identificatori hanno una larghezza in pixel, calcolata sul
   contenuto che ci passa davvero: sull'export di riferimento il 95% dei nomi
   SPAC sta in 29 caratteri, dei nomi PLC in 22, dei nomi condivisi in 26. Le
   allocazioni coprono quasi tutto; il resto va a capo, ed e' giusto che sia una
   riga lunga a spezzarsi e non la colonna ad allargarsi per tutte le altre.

   Alle due colonne di testo -- Descrizione e Note -- non si da nessuna larghezza:
   si prendono cio' che resta, e fra loro se lo dividono in proporzione a quanto
   testo hanno. Cosi' sono loro ad assorbire lo spazio quando la finestra e' larga
   e a restringersi per prime quando e' stretta, senza mai rubarlo ai nomi -- che
   se compressi si spezzerebbero a meta' parola. */
.tnom .c-addr{width:76px}
.tnom .c-io{width:40px}
.tnom .c-spac{width:186px}
.tnom .c-plc{width:218px}       /* il marcafilo non va a capo: 26 caratteri + bordo */
.tnom .c-cond{width:192px}
.tnom .c-stato{width:212px}     /* chip di stato + "salva cosi com'e" su una riga */
.tnom .c-foglio{width:52px}
.tnom td,.tnom th{padding:7px 8px}
.tnom td.a,.tnom td.sp,.tnom td.pl,.tnom td.m{font-size:12px}
/* i nomi vanno a capo invece di allargare la tabella: quelli SPAC negli
   underscore, i camelCase -- che non hanno un punto dove spezzarsi -- dove capita */
.tnom td.sp,.tnom td.pl,.tnom td.cond{overflow-wrap:anywhere}
.tnom td.st{white-space:nowrap}
/* sotto questa larghezza i nomi diventerebbero illeggibili: meglio scorrere la
   tabella dentro il suo riquadro. La pagina invece non scorre mai. */
.tnom{min-width:1340px}

/* il vocabolario: dieci colonne, l'unica che cresce sono le forme riconosciute.
   La colonna Stato non ha larghezza propria: la detta il menu che contiene, che
   deve restare leggibile ("possibile conflitto"). Dargliela in percentuale lo
   faceva collassare, perche' un menu al 100% non ha una larghezza minima sua. */
.tvoc .c-vsez{width:96px}
.tvoc .c-vit{width:76px}
.tvoc .c-ven{width:76px}
.tvoc .c-vruolo{width:82px}
.tvoc .c-vact{width:64px}
.tvoc td,.tvoc th{padding:6px 9px}
.tvoc td.al{min-width:180px}
.tvoc{min-width:1100px}         /* sotto, scorre nel riquadro come quella di analisi */

.empty{padding:40px;text-align:center;color:var(--ink3);font-size:14px}
.err{background:var(--redbg);border:1px solid var(--red);border-left-width:6px;
  border-radius:6px;color:var(--red);padding:13px 16px;margin:18px 0;font-size:14px}
.hidden{display:none}

/* le due schede, sulla barra antracite */
.tabs{display:flex;margin-left:14px}
.tab{font:600 14px var(--disp);letter-spacing:.05em;text-transform:uppercase;
  padding:7px 15px;cursor:pointer;background:transparent;color:var(--panel-ink2);
  border:1px solid var(--panel-rule);border-right-width:0}
.tab:first-child{border-radius:4px 0 0 4px}
.tab:last-child{border-right-width:1px;border-radius:0 4px 4px 0}
.tab:hover{color:var(--panel-ink)}
.tab[aria-selected="true"]{background:var(--panel-ink);color:var(--panel);
  border-color:var(--panel-ink)}

/* pannello vocabolario */
.form{border:1px solid var(--rule2);border-radius:6px;background:var(--surface);
  padding:16px 18px;margin-bottom:22px}
.form h3{margin:0 0 4px;font:600 1.2rem var(--disp)}
.form p.hint{margin:0 0 14px;font-size:14px;color:var(--ink3);max-width:76ch;line-height:1.5}
.form p.hint em{font-style:normal;font-weight:600;color:var(--ink2)}
/* il modulo del vocabolario: una riga per argomento, colonne allineate fra le righe */
.vrow{display:grid;gap:12px 14px;align-items:end;
  grid-template-columns:84px minmax(200px,1fr) minmax(220px,1.6fr) minmax(220px,1.6fr)}
.vrow+.vrow{margin-top:12px;padding-top:12px;border-top:1px dashed var(--rule)}
.vlab{font:700 13px var(--disp);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);padding-bottom:10px}
.vrow .span2{grid-column:span 2}
.vact{display:flex;gap:8px;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font:600 12px var(--disp);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
.fld label i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;
  margin-left:4px;opacity:.8}
.fld input::placeholder{color:var(--ink3);opacity:.6;font-style:italic}
.fld input,.fld select{font-family:var(--mono);font-size:13px;padding:8px 10px;border-radius:4px;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule2);width:100%}
.fld select{font-family:var(--sans);font-size:14px}
.msg{margin-top:12px;font-size:13.5px;padding:9px 12px;line-height:1.45;border-radius:4px}
.msg.ok{background:var(--tealbg);color:var(--teal);border:1px solid var(--teal)}
.msg.ko{background:var(--redbg);color:var(--red);border:1px solid var(--red)}
td.al{font-family:var(--mono);font-size:12px;color:var(--ink2);line-height:1.5}
.sez{font:500 10px var(--mono);letter-spacing:.05em;border-radius:3px;
  text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;white-space:nowrap}
.rowact{font-size:12px;color:var(--ink3);cursor:pointer;
  text-decoration:underline;white-space:nowrap}
.rowact:hover{color:var(--red)}
tr.pick{cursor:pointer}
tr.pick:hover>td{background:var(--raise)}
/* stato di revisione della voce: si legge dal colore della riga */
tr.st-validato>td{background:var(--tealbg)}
tr.st-rivedere>td{background:var(--amberbg)}
tr.st-conflitto>td{background:var(--goldbg)}
tr.pick.st-validato:hover>td,tr.pick.st-rivedere:hover>td,
tr.pick.st-conflitto:hover>td{filter:brightness(.97)}
.stsel{font:500 11px var(--mono);padding:4px 6px;border-radius:3px;
  background:var(--surface);color:var(--ink2);border:1px solid var(--rule2);cursor:pointer}
/* chip di filtro per stato: portano il colore dello stato che filtrano */
.sepf{width:1px;align-self:stretch;background:var(--rule2);margin:0 4px}
.chipf.st-validato{border-color:var(--teal);color:var(--teal)}
.chipf.st-rivedere{border-color:var(--amber);color:var(--amber)}
.chipf.st-conflitto{border-color:var(--gold);color:var(--gold)}
.chipf.st-validato[aria-pressed="true"]{background:var(--teal);color:var(--surface);
  border-color:var(--teal)}
.chipf.st-rivedere[aria-pressed="true"]{background:var(--amber);color:var(--surface);
  border-color:var(--amber)}
.chipf.st-conflitto[aria-pressed="true"]{background:var(--gold);color:var(--surface);
  border-color:var(--gold)}
tr.st-validato .stsel{border-color:var(--teal);color:var(--teal)}
tr.st-rivedere .stsel{border-color:var(--amber);color:var(--amber)}
tr.st-conflitto .stsel{border-color:var(--gold);color:var(--gold)}
.dupbox{border:1px solid var(--red);border-radius:6px;background:var(--surface);
  padding:13px 18px;margin-bottom:18px}
.dupbox b{display:block;font:700 1.05rem var(--disp);letter-spacing:.02em;color:var(--red);
  margin-bottom:6px;text-transform:uppercase}
.dupbox p{margin:0 0 11px;font-size:13.5px;color:var(--ink2);line-height:1.5;max-width:82ch}
.dupbox ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.dupbox li{font-size:14px;line-height:1.45}
.dupbox code{font-family:var(--mono);font-size:12.5px;background:var(--redbg);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px}
.dupbox .vai{font-size:12.5px;color:var(--red);cursor:pointer;
  text-decoration:underline;margin-left:8px}
.okbox{border:1px solid var(--teal);border-radius:6px;background:var(--tealbg);
  padding:12px 16px;margin-bottom:22px;font-size:14px;color:var(--teal)}
.foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule2);
  font-size:13px;line-height:1.7;color:var(--ink3)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============ schermi piu' piccoli =========================================
   Prima si recupera spazio dai margini e dalle spaziature. Sotto i 900px non
   c'e' piu' niente da stringere senza rendere illeggibili nove colonne, quindi
   la tabella scorre in orizzontale dentro il suo riquadro: meglio scorrere che
   leggere una colonna larga tre caratteri. La pagina invece non scorre mai. */
@media (max-width:1400px){
  .wrap{padding:0 16px 60px}
  table{font-size:12.5px}
  .tnom td,.tnom th{padding:6px 7px}
}
@media (max-width:900px){
  header{gap:10px;padding:12px 0}
  .tabs{margin-left:0}
  .schema{font-size:11px}
  .tools input{min-width:0;flex:1 1 160px}
  .count{margin-left:0;flex-basis:100%}
  .vrow{grid-template-columns:1fr}
  .vrow .span2{grid-column:auto}
  .vlab{padding-bottom:0}
}