/* =========================================================
   GENERATORE DI QR CODE — solo quello che live.css non ha gia'

   Le classi condivise (.cv, .cv__pannello, .campo, .scelta,
   .interruttore, .cursore, .btn--mini, .lavoro, .vuoto) stanno in
   live.css: qui c'e' soltanto cio' che serve a questa pagina.
   ========================================================= */

/* ═════════════════════════════════════════════════════════════════════
   BLOCCO COMUNE AI CINQUE STRUMENTI NUOVI
   Identico, parola per parola, in qr.css, conta.css, sfondo.css,
   firma.css e ocr.css. Non sta in live.css perche' live.css serve anche
   le pagine gia' pubblicate: quando si potra' toccare, questo blocco si
   sposta li' una volta sola e sparisce da tutti e cinque insieme.
   ═════════════════════════════════════════════════════════════════════ */

/* La colonna di destra non si appiccica. In queste pagine e' piu' alta
   della finestra: appiccicata, il suo fondo non si raggiungerebbe piu'. */
.cv__anteprima{position:static}

/* La pastiglia dello stato e' ancorata in fondo alla scheda: senza
   spazio riservato finisce sopra l'ultima riga di testo. */
.card--feature:has(.live__stato){padding-bottom:62px}

/* live.css non dice come si vede un .btn--mini spento: senza questo un
   pulsante disabilitato si accende al passaggio del mouse e sembra
   cliccabile. */
.btn--mini:disabled{opacity:.4;cursor:default}
.btn--mini:disabled:hover{color:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn--mini:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}

/* Nei messaggi finiscono nomi di file, che possono essere lunghi e senza
   spazi: senza questo escono dal riquadro su uno schermo stretto. */
.lavoro,.vuoto,.cv__troppo,.cv__avviso{overflow-wrap:anywhere}

/* Le colonne impilate non devono poter sforare: `1fr` da solo lascia a
   una traccia il minimo del suo contenuto, e un pulsante largo allarga
   la pagina. `minmax(0,1fr)` dice che si stringe davvero. */
@media (max-width:980px){.cv{grid-template-columns:minmax(0,1fr)}}

/* I pulsanti a tutta larghezza degli strumenti hanno etichette lunghe
   («Aggiungi la firma e scarica»): su uno schermo stretto vanno a capo
   invece di allargare il riquadro che li contiene. */
.cv__pannello .btn{white-space:normal;text-align:center}

/* ── l'avanzamento ────────────────────────────────────────────────────
   Una riga sottile che dice a che punto e'. Stessa forma e stesso nome
   nei tre strumenti che devono farlo vedere: qr, sfondo, ocr. */
.avanzamento{height:3px;margin-top:16px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.07)}
.avanzamento[hidden]{display:none}
.avanzamento i{
  display:block;height:100%;width:0;border-radius:2px;background:var(--arancio);
  transition:width .3s var(--ease-out);
}
.avanzamento__testo{margin:9px 0 0;min-height:16px;font-size:11.5px;letter-spacing:.04em;color:var(--ink-4)}

/* ── il selettore di colore ───────────────────────────────────────────
   I browser gli disegnano intorno un bordo grigio di sistema che stona
   con tutto il resto: si toglie. Due sole misure, e sono queste. */
.colore{
  padding:0;border:0;border-radius:9px;cursor:pointer;background:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-appearance:none;appearance:none;
  transition:box-shadow .3s var(--ease);
}
.colore::-webkit-color-swatch-wrapper{padding:3px}
.colore::-webkit-color-swatch{border:0;border-radius:6px}
.colore::-moz-color-swatch{border:0;border-radius:6px}
.colore:hover{box-shadow:inset 0 0 0 1px var(--arancio-3)}
.colore:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--arancio),0 0 0 3px var(--arancio-3)}
.colore--pastiglia{width:34px;height:34px;flex:none}
.colore--largo{width:100%;height:40px}


/* La colonna di sinistra ha due riquadri impilati: il contenuto e
   l'aspetto. Sono separati perche' sono due domande diverse — cosa
   deve dire il codice, e come deve essere fatto. */
.cv__colonna{display:grid;gap:16px;align-content:start}

/* Sette modelli non stanno in fila come quattro lingue: qui le
   pastiglie vanno a capo invece di stringersi fino a diventare
   illeggibili. */
.scelte-fitte{flex-wrap:wrap}
.scelte-fitte .scelta{flex:1 1 auto;min-width:96px}
.scelte-fitte .scelta span{padding:10px 13px;font-size:10px;letter-spacing:.12em}

/* ── cursori con il valore accanto ──────────────────────────────────
   Un cursore senza numero costringe a indovinare: il valore sta a
   destra e non si muove, cosi' la riga non balla mentre si trascina. */
.cursore-riga{display:flex;align-items:center;gap:14px}
.cursore-riga .cursore{flex:1;min-width:0}
.cursore-val{
  flex:none;min-width:64px;text-align:right;
  font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* ── i due colori ─────────────────────────────────────────────────────
   Il selettore vero e' .colore, qui sopra nel blocco comune: questo e'
   solo l'incasellamento con l'etichetta sopra. */
.colori{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colore-campo{display:block;margin:0}
.colore-campo span{
  display:block;margin-bottom:7px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}
/* Con lo sfondo trasparente il secondo colore non conta piu': resta
   visibile ma spento, cosi' si capisce perche' non risponde. */
.colore--spento{opacity:.35;pointer-events:none}

.tavolozze{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tavolozza{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px 6px 7px;border-radius:999px;border:0;cursor:pointer;
  background:none;color:var(--ink-3);font-family:inherit;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.tavolozza:hover{color:var(--arancio);box-shadow:inset 0 0 0 1px var(--arancio-3)}
.tavolozza:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--arancio),0 0 0 3px var(--arancio-3)}
.tavolozza i{
  flex:none;width:17px;height:17px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ── il codice ──────────────────────────────────────────────────────
   Non ha un fondo suo: lo sfondo e' quello scelto dall'utente ed e'
   dentro l'SVG. Cosi' quello che si vede qui e' esattamente il file
   che si scarica, senza cornici aggiunte per far bella figura. */
.qr__foglio{
  display:block;width:100%;max-width:400px;margin:4px auto 0;
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.10);
}
.qr__foglio[hidden]{display:none}
.qr__foglio svg{display:block;width:100%;height:auto}
/* Con lo sfondo trasparente un codice nero su fondo nero sarebbe
   invisibile, e sembrerebbe rotto: sotto ci va una scacchiera, che e'
   il modo in cui tutti hanno imparato a leggere "qui non c'e' niente". */
.qr__foglio--trasp{
  background-color:#6d6d6d;
  background-image:
    linear-gradient(45deg,#9a9a9a 25%,transparent 25%,transparent 75%,#9a9a9a 75%),
    linear-gradient(45deg,#9a9a9a 25%,transparent 25%,transparent 75%,#9a9a9a 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
}

/* ── i numeri del codice ────────────────────────────────────────────
   Versione, moduli, modalita' e maschera: non servono a usarlo, servono
   a capire cosa e' successo. Sono veri, presi dal codificatore. */
.qr__dati{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:14px;margin-top:22px;
}
.qr__dati[hidden]{display:none}
.qr__dato b{
  display:block;font-size:16px;font-weight:400;color:var(--ink-1);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.qr__dato small{
  display:block;margin-top:5px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}


.qr__scarica{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}

@media (max-width:520px){
  .colori{grid-template-columns:1fr}
  .cursore-val{min-width:56px}
}