/* ============================================================
   Soglia — foglio di stile
   Autonomo: nessun file condiviso, nessun carattere da scaricare,
   nessuna richiesta a domini esterni.

   Il quinto tema di fila, e i cinque non si somigliano:

     17labs.it   inchiostro scuro e ottone, lineare, largo
     Norma       carta calda e amaranto, graziato, colonna stretta
     Estratto    ardesia fredda e verde contabile, tabulare
     Distinta    cemento e arancio segnaletico, da officina
     Soglia      carta bianca, inchiostro nero, un indaco solo

   Qui il registro e' quello della prova di stampa: bianco pieno,
   nero pieno, filetti sottili, numeri grandi e monospaziati. Un
   verificatore di contrasti non puo' permettersi un tema di
   fantasia — i campioni di colore devono stare su un fondo che
   non li disturba, e il fondo che non disturba e' il bianco.

   IL TEMA PUNTA AD AAA, NON AD AA. Sarebbe una barzelletta il
   contrario. Ogni testo sta sopra 7:1 su tutti e tre i fondi, e
   `verifica.mjs` lo rilegge da questo file a ogni esecuzione: se
   cambio un colore e non guardo il contrasto, la prova cade.
   I minimi effettivi sono 7,26:1 sul chiaro e 7,64:1 sullo scuro.

   Il verdetto non e' mai affidato al colore da solo: c'e' sempre
   la parola e il segno. Lo dice il criterio 1.4.1, e violarlo
   proprio qui sarebbe il colmo.

   Ordine:  1 token · 2 base · 3 testata · 4 coppia · 5 scala
            6 verdetti · 7 correzione · 8 tavolozza · 9 pieghe
   ============================================================ */

/* ====================== 1 — TOKEN ========================== */
:root {
  --largo: 1180px;
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --quote: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --p1: 8px; --p2: 14px; --p3: 22px; --p4: 34px; --p5: 56px;
  --curva: cubic-bezier(.22, .61, .36, 1);
}

/* I valori qui sotto non sono decorativi: sono l'oggetto della
   prova di `verifica.mjs`, sezione 6. Cambiandone uno, o si
   regge AAA su tutti e tre i fondi o la verifica fallisce. */
html[data-tema="chiaro"] {
  --fondo: #ffffff;   --fondo-2: #f1f2f5;  --piano: #ffffff;
  --filo: #d9dce2;    --filo-2: #828993;                  /* 3,15:1 sul fondo-2: bordo, non testo */
  --testo-1: #000000; --testo-2: #33383f;  --testo-3: #494f57;  /* 7,39:1 sul fondo-2, il piu basso */
  --accento: #2e3ea8; --su-accento: #ffffff;
  --accento-velo: rgba(46, 62, 168, .07);
  --si: #0b5c2e;      --no: #96001a;       --forse: #6f4400;
  --ombra: 0 1px 2px rgba(0, 0, 0, .06);
  color-scheme: light;
}

html[data-tema="scuro"] {
  --fondo: #0a0b0d;   --fondo-2: #14161a;  --piano: #101216;
  --filo: #262a30;    --filo-2: #6b727c;                  /* 3,73:1 sul fondo-2 */
  --testo-1: #ffffff; --testo-2: #c2c7ce;  --testo-3: #a2a9b3;  /* 7,64:1 sul fondo-2 */
  --accento: #a8bcff; --su-accento: #0a0b0d;
  --accento-velo: rgba(168, 188, 255, .12);
  --si: #6ee095;      --no: #ffa0ae;       --forse: #f0c674;
  --ombra: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ====================== 2 — BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--fondo); color: var(--testo-1);
  font-family: var(--testo); font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0 0 var(--p2); } p:last-child { margin-bottom: 0; }
a { color: var(--accento); }
::selection { background: var(--accento); color: var(--su-accento); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.largo { width: 100%; max-width: var(--largo); margin: 0 auto; padding-inline: clamp(18px, 4vw, 36px); }
.nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.q { font-family: var(--quote); font-variant-numeric: tabular-nums; }
.targhetta { font-family: var(--quote); font-size: 10.5px; letter-spacing: .14em;
             text-transform: uppercase; color: var(--testo-3); }

/* ====================== 3 — TESTATA ======================== */
.testata { padding-block: var(--p4) var(--p3); }
.testata__riga { display: flex; align-items: center; gap: var(--p2); }
.firma { margin-right: auto; text-decoration: none; font-family: var(--quote);
         font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3); }
.firma:hover { color: var(--accento); }
.interruttore { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 2px;
  border: 1px solid var(--filo-2); background: transparent; color: var(--testo-2);
  cursor: pointer; padding: 0; transition: border-color .2s var(--curva), color .2s var(--curva); }
.interruttore:hover { border-color: var(--accento); color: var(--accento); }
.interruttore svg { width: 16px; height: 16px; }
html[data-tema="scuro"] .icona-sole { display: block; }
html[data-tema="scuro"] .icona-luna { display: none; }
html[data-tema="chiaro"] .icona-sole { display: none; }
html[data-tema="chiaro"] .icona-luna { display: block; }

.titolo { margin-top: var(--p4); font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.03em; }
.titolo b { color: var(--accento); font-weight: 600; }
.sommario { margin-top: var(--p2); max-width: 66ch; color: var(--testo-2); }

/* ====================== 4 — LA COPPIA ====================== */
.banco { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
         gap: clamp(24px, 3.4vw, 44px); align-items: start; padding-bottom: var(--p5); }

.blocco { margin-bottom: var(--p4); }
.blocco > .targhetta { display: block; margin-bottom: var(--p2);
  padding-bottom: 6px; border-bottom: 1px solid var(--filo); }

.campo { margin-bottom: var(--p3); }
.campo > label { display: block; font-size: 13.5px; color: var(--testo-2); margin-bottom: 6px; }
.campo__riga { display: flex; align-items: stretch; gap: 8px; }
.campo input[type="text"] {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 2px;
  font-family: var(--quote); font-size: 15px; letter-spacing: .01em;
  color: var(--testo-1); background: var(--piano); border: 1px solid var(--filo-2);
}
.campo input[type="text"]:focus { outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-velo); }
.campo input[aria-invalid="true"] { border-color: var(--no); }

/* Il campione e' un quadrato pieno, non una pastiglia: e' il
   colore, e va guardato senza cornice che lo alteri. Il filetto
   c'e' perche' un bianco su fondo bianco senza bordo sparisce. */
.campione { position: relative; width: 46px; flex: none; border-radius: 2px;
  border: 1px solid var(--filo-2); overflow: hidden; padding: 0; cursor: pointer; }
.campione input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: 0; padding: 0; background: transparent; cursor: pointer; opacity: 0;
}
.campione__tinta { position: absolute; inset: 0; }
/* La scacchiera sotto il campione: senza, un colore trasparente
   e' indistinguibile da uno opaco, ed e' proprio il caso che
   questo strumento vuole mostrare. */
.campione::before { content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, #b9bcc2 25%, transparent 25%, transparent 75%, #b9bcc2 75%),
    linear-gradient(45deg, #b9bcc2 25%, #ffffff 25%, #ffffff 75%, #b9bcc2 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; }

.errore { margin-top: 6px; font-size: 12.5px; color: var(--no); }
.errore:empty { display: none; }

.scambia { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 2px; border: 1px solid var(--filo-2); background: transparent;
  color: var(--testo-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.scambia:hover { border-color: var(--accento); color: var(--accento); }
.scambia svg { width: 15px; height: 15px; }

.regolatori { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p2); }
.regolatori select, .regolatori input[type="number"] {
  width: 100%; padding: 9px 10px; border-radius: 2px; font-family: var(--quote); font-size: 14px;
  color: var(--testo-1); background: var(--piano); border: 1px solid var(--filo-2);
}

/* ====================== 5 — IL PROVINO E LA SCALA ========== */
.provino { border: 1px solid var(--filo); border-radius: 2px; overflow: hidden;
           box-shadow: var(--ombra); }
.provino__carta { padding: clamp(20px, 3vw, 34px); }
.provino__riga { margin: 0 0 14px; }
.provino__riga:last-child { margin-bottom: 0; }
.provino__nota { font-family: var(--quote); font-size: 10.5px; letter-spacing: .12em;
                 text-transform: uppercase; opacity: .75; }

.esito { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2) var(--p3);
         padding: var(--p3) clamp(20px, 3vw, 34px); border-top: 1px solid var(--filo);
         background: var(--fondo-2); }
.esito__numero { font-family: var(--quote); font-size: clamp(38px, 6vw, 60px); line-height: 1;
                 letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.esito__numero span { font-size: .42em; letter-spacing: 0; color: var(--testo-3); margin-left: 4px; }
.esito__dove { color: var(--testo-2); font-size: 13.5px; max-width: 42ch; }

/* La scala: da 1 a 21 in logaritmico, perche' e' li' che stanno
   le soglie — fra 3 e 7 succede tutto, sopra 10 non cambia
   niente. Le tacche sono le tre soglie di WCAG, ed e' il modo
   piu' onesto di far vedere «di quanto» si passa o si sbaglia. */
.scala { padding: var(--p3) clamp(20px, 3vw, 34px) var(--p4); border-top: 1px solid var(--filo); }
.scala__barra { position: relative; height: 10px; border: 1px solid var(--filo-2);
                border-radius: 2px; background: var(--fondo-2); }
.scala__pieno { position: absolute; inset: 0 auto 0 0; background: var(--accento);
                transition: width .28s var(--curva); }
.scala__tacca { position: absolute; top: -7px; bottom: -7px; width: 1px; background: var(--testo-1); }
.scala__etichette { position: relative; height: 34px; margin-top: 10px; }
.scala__etichetta { position: absolute; transform: translateX(-50%); text-align: center;
  font-family: var(--quote); font-size: 10.5px; letter-spacing: .06em; color: var(--testo-3);
  line-height: 1.35; white-space: nowrap; }
.scala__etichetta b { display: block; color: var(--testo-2); font-size: 12px; font-weight: 500; }

/* ====================== 6 — VERDETTI ======================= */
.verdetti { display: grid; gap: 1px; background: var(--filo);
            border: 1px solid var(--filo); border-radius: 2px; overflow: hidden; }
.verdetto { display: grid; grid-template-columns: 1fr auto auto; align-items: center;
            gap: var(--p2); padding: 13px var(--p3); background: var(--piano); }
.verdetto__cosa { font-size: 14px; }
.verdetto__cosa b { display: block; font-weight: 600; }
.verdetto__cosa span { color: var(--testo-3); font-size: 12.5px; }
.verdetto__soglia { font-family: var(--quote); font-size: 12.5px; color: var(--testo-3);
                    font-variant-numeric: tabular-nums; }
/* Segno + parola + colore. Mai il colore da solo: il criterio
   1.4.1 dice esattamente questo. */
.segno { display: inline-flex; align-items: center; gap: 7px; font-family: var(--quote);
         font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.segno svg { width: 15px; height: 15px; flex: none; }
.segno--si { color: var(--si); }
.segno--no { color: var(--no); }

/* ====================== 7 — CORREZIONE ===================== */
.correzione { margin-top: var(--p3); border: 1px solid var(--filo); border-radius: 2px;
              background: var(--piano); padding: var(--p3); }
.correzione__testa { display: flex; align-items: baseline; justify-content: space-between;
                     gap: var(--p2); margin-bottom: var(--p2); }
.proposte { display: grid; gap: var(--p2); }
.proposta { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
            gap: var(--p2); padding: 10px; border: 1px solid var(--filo); border-radius: 2px; }
.proposta__campione { width: 40px; height: 40px; border-radius: 2px; border: 1px solid var(--filo-2); }
.proposta__hex { font-family: var(--quote); font-size: 15px; }
.proposta__come { color: var(--testo-3); font-size: 12.5px; }
.proposta button { padding: 8px 12px; border-radius: 2px; border: 1px solid var(--filo-2);
  background: transparent; color: var(--testo-2); font: inherit; font-size: 13px; cursor: pointer; }
.proposta button:hover { border-color: var(--accento); color: var(--accento); }

/* ====================== 8 — TAVOLOZZA ====================== */
.tavolozza { padding-bottom: var(--p5); }
.tavolozza textarea {
  width: 100%; min-height: 150px; padding: var(--p2); border-radius: 2px; resize: vertical;
  font-family: var(--quote); font-size: 13px; line-height: 1.6;
  color: var(--testo-1); background: var(--piano); border: 1px solid var(--filo-2);
}
.tavolozza textarea:focus { outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-velo); }
.tavolozza__azioni { display: flex; flex-wrap: wrap; gap: var(--p1); margin-top: var(--p2);
                     align-items: center; }
.tavolozza__conto { margin-left: auto; }

.griglia { margin-top: var(--p3); overflow-x: auto; }
.griglia table { border-collapse: collapse; font-family: var(--quote); font-size: 12px; }
.griglia th, .griglia td { border: 1px solid var(--filo); padding: 0; text-align: center; }
.griglia th { position: sticky; left: 0; z-index: 1; background: var(--fondo);
              padding: 6px 10px; text-align: left; font-weight: 400; color: var(--testo-2);
              white-space: nowrap; }
.griglia thead th { position: static; }
.griglia__intestazione { display: flex; align-items: center; gap: 8px; }
.griglia__punto { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--filo-2);
                  flex: none; }
.cella { display: block; width: 100%; min-width: 62px; padding: 9px 6px; border: 0;
         background: transparent; color: var(--testo-2); font: inherit;
         font-variant-numeric: tabular-nums; cursor: pointer; }
.cella:hover { background: var(--accento-velo); color: var(--accento); }
.cella--si { color: var(--si); }
.cella--no { color: var(--no); font-weight: 600; }
.cella--no::after { content: " ✕"; }
.cella--si::after { content: " ✓"; }
/* La diagonale: nessun testo, solo un tratteggio. Un trattino
   grigio a 12 px non arrivava a 4,5:1, e su questa pagina non e'
   ammesso. Il significato sta in uno span per chi non vede. */
.cella-diagonale { min-width: 62px; height: 36px;
  background-image: repeating-linear-gradient(45deg,
    var(--filo) 0 1px, transparent 1px 7px); }

.legenda { margin-top: var(--p2); display: flex; flex-wrap: wrap; gap: var(--p3);
           font-size: 12.5px; color: var(--testo-3); }

/* ====================== 9 — PIEGHE E PIEDE ================= */
.pieghe { padding-block: var(--p5); border-top: 1px solid var(--filo); }
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: var(--p3); margin-block: var(--p3) var(--p4); }
.cifre b { display: block; font-family: var(--quote); font-size: clamp(24px, 3.2vw, 32px);
           letter-spacing: -0.02em; }
.cifre span { display: block; margin-top: 6px; color: var(--testo-2); font-size: 13.5px; }
.chiosa { max-width: 74ch; color: var(--testo-2); margin-bottom: var(--p3); }
.chiosa strong { color: var(--testo-1); }

.avviso { border: 1px solid var(--filo-2); border-left: 3px solid var(--forse);
          border-radius: 2px; padding: var(--p2) var(--p3); color: var(--testo-2);
          background: var(--fondo-2); }

.piede { border-top: 1px solid var(--filo); padding-block: var(--p3);
         font-size: 13px; color: var(--testo-3); }

/* ====================== SCHERMI STRETTI ==================== */
@media (max-width: 900px) {
  .banco { grid-template-columns: minmax(0, 1fr); }
  /* Le tre etichette della scala stanno al 36, 49 e 64 per cento:
     su schermo stretto si toccherebbero, e resta il numero. */
  .scala__etichetta span { display: none; }
  .scala__etichette { height: 20px; }
  .verdetto { grid-template-columns: 1fr auto; }
  .verdetto__soglia { grid-column: 2; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ====================== STAMPA ============================= */
@media print {
  .interruttore, .scambia, .tavolozza__azioni, .proposta button { display: none; }
  body { background: #fff; color: #000; }
  .provino, .verdetti, .correzione { break-inside: avoid; }
}