/* =========================================================
   OCR — solo quello che live.css non ha gia'

   Le classi condivise (.zona, .elenco, .riga, .cv__pannello,
   .interruttore, .scelta, .btn--mini) 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)}

/* ── la tela ──────────────────────────────────────────────────────────
   Base comune ai tre strumenti che disegnano su canvas: sfondo, firma,
   ocr. Il fondo e l'altezza li decide ogni pagina, la forma no. */
.tela{
  display:block;width:100%;height:auto;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.tela[hidden]{display:none}

/* ── quello che vede il motore ───────────────────────────────────────
   Sopra la .tela comune: qui il fondo e' bianco perche' l'immagine
   preparata e' bianca e nera, e su fondo scuro i margini della pagina
   sparirebbero senza far capire dove finisce il foglio. */
.tela{background:#fff;max-height:520px;object-fit:contain}
.didascalia{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-4)}

/* ── il testo riconosciuto ───────────────────────────────────────────
   E' un riquadro modificabile vero (contenteditable), non un textarea:
   serve a poter evidenziare le parole incerte E lasciarle correggere
   nello stesso punto. Un textarea sa fare solo una delle due cose. */
.esito{
  width:100%;min-height:220px;max-height:60vh;overflow:auto;
  padding:15px 16px;border-radius:12px;
  font-size:13px;line-height:1.75;color:var(--ink-1);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  white-space:pre-wrap;overflow-wrap:break-word;
  transition:box-shadow .3s var(--ease);
}
.esito:focus{outline:0;box-shadow:inset 0 0 0 1px var(--arancio-2)}
.esito[hidden]{display:none}

/* Le parole di cui il motore non e' sicuro. Non sono un errore — spesso
   sono giuste — sono i punti dove conviene guardare. Percio' un segno
   discreto sotto, non un blocco colorato che rende illeggibile la
   pagina proprio dove serve leggerla meglio. */
.dubbia{
  border-radius:3px;padding:0 2px;
  background:var(--arancio-4);
  box-shadow:inset 0 -1px 0 var(--arancio-2);
}

.fiducia{margin:0 0 12px;font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
.fiducia:empty{display:none}

.legenda-dubbie{
  display:inline-flex;align-items:center;gap:8px;
  margin:12px 0 0;padding:7px 11px;border-radius:999px;
  font-size:11px;line-height:1.5;color:var(--arancio);
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.legenda-dubbie[hidden]{display:none}


/* Gli interruttori incolonnati, con un po' d'aria fra uno e l'altro. */
.scelte-lente{display:flex;flex-direction:column;gap:14px;margin-top:4px}

@media (max-width:620px){
  .tela{max-height:340px}
  .esito{max-height:50vh}
}

/* In stampa esce solo il testo riconosciuto: e' l'unica cosa che ha
   senso avere su carta. Chi vuole il documento impaginato usa il
   pulsante che ne fa un PDF. */
@media print{
  .header,.footer,.grain,.zona,.elenco,.vuoto,.lavoro,
  .avanzamento,.avanzamento__testo,.tela,.didascalia,.grid,
  .strumento__promessa,.legenda-dubbie{display:none !important}
  .esito{
    max-height:none;overflow:visible;color:#000;background:#fff;
    box-shadow:none;padding:0;
  }
  .dubbia{background:none;box-shadow:none}
}