/* =========================================================
   CONTATORE E CALCOLATORI — solo quello che live.css non ha gia'
   Le classi condivise (.cv, .cv__pannello, .campo, .zona, .lavoro,
   .interruttore, .btn--mini) stanno in live.css: qui c'e' solo 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}


/* ── le schede ────────────────────────────────────────────────────────
   Sette calcolatori non ci stanno in fila sul telefono: la barra scorre
   in orizzontale invece di andare a capo, cosi' l'altezza resta la
   stessa e si capisce subito che ce ne sono altri di lato. */
.schede{
  display:flex;gap:8px;flex-wrap:nowrap;
  margin:clamp(30px,4vw,44px) 0 0;
  padding-bottom:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.schede::-webkit-scrollbar{display:none}
.schede--sub{margin-top:24px}

.scheda{
  flex:none;padding:11px 18px;border-radius:999px;border:0;cursor:pointer;
  background:none;color:var(--ink-3);
  font-family:var(--f-body);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.scheda:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.scheda[aria-selected="true"]{color:var(--arancio);box-shadow:inset 0 0 0 1px var(--arancio)}
.scheda:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}

[role="tabpanel"][hidden]{display:none}

/* Il pannello del testo resta in vista mentre si scorrono i conteggi,
   ma solo se ci sta davvero: appiccicare in alto un riquadro piu' alto
   della finestra significa nasconderne il fondo per sempre. */
@media (min-width:981px) and (min-height:900px){
  .appicci{position:sticky;top:96px}
}

/* ── il campo del testo ───────────────────────────────────────────────
   Due classi nel selettore perche' live.css fissa gia' `.campo textarea`
   a 86px di altezza minima: qui serve vincere quella regola, non
   affiancarla. */
.campo .editor{
  min-height:clamp(200px,32vh,360px);
  line-height:1.7;
  font-size:13.5px;
}

/* ── i conteggi ───────────────────────────────────────────────────────
   Sono pulsanti, non riquadri: si clicca e il numero e' negli appunti.
   Le cifre sono tabellari perche' cambiando mentre si scrive, con cifre
   di larghezza diversa, la fila ballerebbe a ogni tasto. */
.dati{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.dato{
  /* Griglia e non pila: l'invito «copia» ha una riga sua in fondo. Messo
     di fianco all'etichetta le ruberebbe spazio e «senza spazi» finirebbe
     troncato; sovrapposto, la coprirebbe. */
  display:grid;grid-template-columns:minmax(0,1fr);gap:5px;
  padding:13px 14px;border-radius:13px;border:0;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.dato:hover{box-shadow:inset 0 0 0 1px var(--arancio-3);background:var(--arancio-4)}
.dato:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.dato__n{
  font-family:var(--f-body);font-size:23px;line-height:1.05;color:var(--ink-1);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.dato__eti{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}

/* ── una riga di risultato ───────────────────────────────────────────
   Etichetta a sinistra, valore a destra, e sotto la nota che spiega da
   dove viene il numero. Tutta la riga e' il pulsante per copiarlo. */
.risultati{display:flex;flex-direction:column;gap:8px}
.ris{
  position:relative;width:100%;
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:11px 13px;border-radius:12px;border:0;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.ris:hover{box-shadow:inset 0 0 0 1px var(--arancio-3);background:var(--arancio-4)}
.ris:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.ris__eti{
  grid-column:1;grid-row:1;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.ris__val{
  grid-column:2;grid-row:1;text-align:right;
  font-size:15px;color:var(--ink-1);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.ris__nota{grid-column:1;grid-row:2;font-size:11px;line-height:1.5;color:var(--ink-4)}
/* L'invito a copiare e la conferma sono la stessa etichetta che cambia
   parola: due elementi diversi lascerebbero un buco quando uno sparisce.
   La parola sta nel CSS perche' e' un ornamento — per chi usa un lettore
   di schermo il pulsante si presenta gia' come «Copia ...». */
.ris__cp,.dato::after{
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--arancio);
  opacity:0;transition:opacity .3s var(--ease);
}
.ris__cp{grid-column:2;grid-row:2;text-align:right}
.ris__cp::after,.dato::after{content:'copia'}
.dato::after{text-align:right;white-space:nowrap;line-height:1}
.ris:hover .ris__cp,.ris:focus-visible .ris__cp,
.dato:hover::after,.dato:focus-visible::after{opacity:1}
/* Senza il passaggio del mouse (telefoni e tablet) l'invito resta
   visibile, altrimenti nessuno saprebbe che si puo' fare. */
@media (hover:none){.ris__cp,.dato::after{opacity:.55}}

/* la conferma: il contorno si accende e la parola cambia */
.copiato{box-shadow:inset 0 0 0 1px var(--arancio)}
.ris.copiato .ris__cp,.dato.copiato::after{opacity:1}
.ris.copiato .ris__cp::after,.dato.copiato::after{content:'copiato'}

/* ── i limiti dei campi ─────────────────────────────────────────────── */
.limite{margin-bottom:15px}
.limite:last-of-type{margin-bottom:0}
.limite__testa{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11.5px;color:var(--ink-2);margin-bottom:6px;
}
.limite__testa b{font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.limite__barra{height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.09)}
.limite__barra i{
  display:block;height:100%;border-radius:2px;background:rgba(255,255,255,.42);
  transition:width .3s var(--ease-out),background .3s var(--ease);
}
.limite small{display:block;margin-top:5px;font-size:10.5px;line-height:1.5;color:var(--ink-4)}
/* Superato il limite l'arancione dice tutto senza aggiungere una parola. */
.limite--oltre .limite__barra i{background:var(--arancio)}
.limite--oltre .limite__testa b,.limite--oltre small{color:var(--arancio)}

/* ── le parole piu' frequenti ───────────────────────────────────────── */
.fr{
  display:grid;grid-template-columns:minmax(0,1fr) 1.1fr auto;gap:12px;align-items:center;
  width:100%;padding:7px 11px;border-radius:10px;border:0;cursor:pointer;text-align:left;
  background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom:6px;
  transition:box-shadow .3s var(--ease)}
.fr:hover{box-shadow:inset 0 0 0 1px var(--arancio-3)}
.fr:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.fr__p{
  font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fr__b{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.07)}
.fr__b i{display:block;height:100%;border-radius:2px;background:var(--arancio-3)}
.fr__n{
  font-size:12.5px;color:var(--ink-1);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap;
}
.fr__n small{display:block;font-size:9.5px;color:var(--ink-4)}

/* ── la formula ───────────────────────────────────────────────────────
   Monospaziata e con i numeri veri gia' sostituiti: serve a controllare
   il conto, non a decorare il pannello. Se non si puo' rifare a mano,
   non e' una formula, e' un'affermazione. */
.formula{
  padding:13px 14px;border-radius:11px;overflow-x:auto;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.75;color:var(--ink-3);
  white-space:pre;
}
.formula:empty{display:none}

/* ── il piano di ammortamento ───────────────────────────────────────── */
.scorre{overflow-x:auto;margin-top:22px}
.piano{width:100%;border-collapse:collapse;font-size:11.5px}
.piano caption{
  text-align:left;margin-bottom:12px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
}
.piano th{
  text-align:right;padding:0 0 8px 14px;font-weight:400;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
  border-bottom:1px solid rgba(255,255,255,.10);white-space:nowrap;
}
.piano th:first-child,.piano td:first-child{text-align:left;padding-left:0}
.piano td{
  text-align:right;padding:8px 0 8px 14px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* ── l'elenco delle festivita' ──────────────────────────────────────── */
.feste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.feste li{font-size:12px;color:var(--ink-2)}
.feste b{font-weight:400;color:var(--ink-1);font-variant-numeric:tabular-nums;margin-right:8px}
.feste small{font-size:10.5px;color:var(--ink-4)}

/* ── le tendine ─────────────────────────────────────────────────────── */
.tendina{
  width:100%;padding:11px 13px;border:0;border-radius:11px;
  font:inherit;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  padding-right:34px;cursor:pointer;
  transition:box-shadow .3s var(--ease);
}
.tendina:focus{outline:0;box-shadow:inset 0 0 0 1px var(--arancio-2)}
.tendina:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.tendina option{background:#0b0b0b;color:#fff}

/* Il calendario di sistema e' bianco su bianco se non si dichiara che la
   pagina e' scura: color-scheme e' l'unico modo per farlo sapere. */
.campo input[type="date"]{color-scheme:dark;font-family:var(--f-body)}

/* ── l'eco per i lettori di schermo ───────────────────────────────────
   «Copiato» va detto anche a chi non vede il contorno accendersi. Resta
   fuori dallo schermo ma dentro la pagina, cosi' viene annunciato. */
.eco{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


@media (max-width:620px){
  .campo--due{grid-template-columns:1fr}
  .dati{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .dato__n{font-size:20px}
  .fr{grid-template-columns:minmax(0,1fr) auto}
  .fr__b{display:none}
}