/* La demo dei Numeri: come la tavola numeri.dc.html (stile Apple). Tutto sotto .demo-numeri;
   il modulo dell'obiettivo sta nel foglio (fuori dal contenitore) e usa le classi numeri-…. */

.demo-numeri {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.demo-numeri .demo-segmentato {
  margin: 0;
}
.demo-numeri .demo-segmentato button {
  min-height: 2.75rem;
}
/* Le scelte del periodo: cinque, con parole lunghe, in due colonne (come numeri.tsx). */
.demo-numeri .numeri-scelte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demo-numeri .numeri-scelte button {
  padding: 0 0.5rem;
}
.demo-numeri .numeri-scelte button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.demo-numeri .numeri-scelte button[aria-pressed='true'] {
  background: var(--superficie);
  font-weight: 700;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
.demo-numeri h4,
.demo-numeri h5 {
  margin: 0;
}
.demo-numeri p {
  margin: 0;
}
.demo-numeri .numeri-tenue {
  color: var(--tenue);
}
.demo-numeri .numeri-piccolo {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.demo-numeri .numeri-importo {
  flex: none;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Il periodo: frecce tonde da 44 px e le date in parole. */
.demo-numeri .numeri-periodo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.demo-numeri .numeri-periodo-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--tenue);
  line-height: 1.35;
}
.demo-numeri .numeri-periodo-testo strong {
  font-size: 0.9375rem;
  color: var(--inchiostro);
}

/* La scheda grande dell'incassato, col grafico. */
.demo-numeri .numeri-incassato {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--raggio-lg);
}
.demo-numeri .numeri-etichetta-scheda {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-numeri .numeri-cifra-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.625rem;
}
.demo-numeri .numeri-cifra {
  font-size: 2.375rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.demo-numeri .numeri-nota {
  font-size: 0.875rem;
}
.demo-numeri .numeri-neutra {
  background: var(--superficie-alta);
  color: var(--tenue);
}
.demo-numeri .numeri-vuoto-titolo {
  font-size: 1.125rem;
  font-weight: 700;
}
.demo-numeri .numeri-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-numeri .numeri-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.demo-numeri .numeri-quadretto {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--accento);
}
.demo-numeri .numeri-tratteggio {
  width: 1.375rem;
  border-top: 2px dashed var(--bordo-campo);
}

/* Il grafico SVG: barre nell'accento, la scelta piena, il periodo prima tratteggiato. */
.demo-numeri .numeri-grafico {
  width: 100%;
  height: auto;
  overflow: visible;
}
.demo-numeri .numeri-griglia {
  stroke: var(--superficie-alta);
  stroke-width: 1;
}
.demo-numeri .numeri-asse {
  stroke: var(--bordo);
  stroke-width: 1;
}
.demo-numeri .numeri-tacca,
.demo-numeri .numeri-etichetta {
  fill: var(--tenue);
  font-size: 11px;
  font-weight: 600;
}
.demo-numeri .numeri-etichetta.scelta {
  fill: var(--accento-scuro);
  font-weight: 800;
}
.demo-numeri .numeri-barra {
  fill: var(--accento);
  fill-opacity: 0.6;
}
.demo-numeri .numeri-barra.scelta {
  fill-opacity: 1;
}
.demo-numeri .numeri-zero {
  fill: var(--superficie-alta);
}
.demo-numeri .numeri-colpo {
  fill: transparent;
  cursor: pointer;
}
.demo-numeri .numeri-linea-prima {
  fill: none;
  stroke: var(--bordo-campo);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}
.demo-numeri .numeri-dettaglio {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--raggio-md);
  background: var(--sfondo);
  font-size: 0.875rem;
}
.demo-numeri .numeri-dettaglio-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.demo-numeri .numeri-cifra-piccola {
  font-weight: 800;
  white-space: nowrap;
}
.demo-numeri .numeri-passi {
  display: flex;
  gap: 0.5rem;
}
.demo-numeri .numeri-passo {
  flex: 1;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.demo-numeri .numeri-passo:disabled {
  color: var(--tenue);
  cursor: default;
}

/* Le tre tessere. */
.demo-numeri .numeri-tessere {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.demo-numeri .numeri-tessera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: var(--superficie);
}
.demo-numeri .numeri-tessera-valore {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.demo-numeri .numeri-tessera-nome {
  font-size: 0.8125rem;
  color: var(--tenue);
  line-height: 1.25;
}
.demo-numeri .numeri-tessera .pastiglia {
  font-size: 0.75rem;
  padding: 0.0625rem 0.5rem;
}
.demo-numeri .numeri-spiega {
  padding: 0 0.25rem;
}

/* L'obiettivo del mese: la scheda piena dell'accento, testo bianco. */
.demo-numeri .numeri-obiettivo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--raggio-lg);
  background: var(--accento-scuro);
  color: #ffffff;
}
.demo-numeri .numeri-obiettivo :focus-visible {
  outline-color: #ffffff;
}
.demo-numeri .numeri-obiettivo p {
  color: var(--accento-chiaro);
  font-size: 0.875rem;
}
.demo-numeri .numeri-obiettivo-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
.demo-numeri .numeri-obiettivo-testa h4 {
  font-size: 1.0625rem;
  font-weight: 800;
}
.demo-numeri .numeri-obiettivo-testa span,
.demo-numeri .numeri-obiettivo-cifre span + span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accento-chiaro);
}
.demo-numeri .numeri-obiettivo-cifre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
.demo-numeri .numeri-obiettivo-cifra {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.demo-numeri .numeri-obiettivo-binario {
  height: 0.625rem;
  border-radius: 999px;
  background: var(--accento);
  overflow: hidden;
}
.demo-numeri .numeri-obiettivo-pieno {
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
}
.demo-numeri .numeri-obiettivo .numeri-obiettivo-frase {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
}
.demo-numeri .numeri-obiettivo-cambia {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-underline-offset: 4px;
  cursor: pointer;
}
.demo-numeri .numeri-obiettivo-cambia:hover {
  text-decoration: underline;
}

/* Titoli delle sezioni ed elenchi raggruppati (team, servizi, metodi, tempi). */
.demo-numeri section {
  min-width: 0;
}
.demo-numeri .numeri-titoletto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.75rem 0 0.5rem;
  padding: 0 0.25rem;
}
.demo-numeri .numeri-titoletto h4 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.demo-numeri .numeri-titoletto span {
  font-size: 0.875rem;
  color: var(--tenue);
}
.demo-numeri .demo-scheda {
  margin: 0;
}
.demo-numeri .numeri-elenco {
  padding: 0.25rem 1rem;
}
.demo-numeri .numeri-elenco > p {
  padding: 0.5rem 0;
}
.demo-numeri .numeri-elenco > p + p {
  padding-top: 0;
}
.demo-numeri .numeri-riga {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.demo-numeri .numeri-riga + .numeri-riga {
  border-top: 1px solid var(--bordo);
}
.demo-numeri .numeri-riga-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.demo-numeri .numeri-riga-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.demo-numeri .numeri-riga-testa > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.demo-numeri .numeri-senza-colore {
  background: var(--tenue);
}
.demo-numeri .numeri-binario {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--superficie-alta);
  overflow: hidden;
}
.demo-numeri .numeri-binario.sottile {
  height: 0.375rem;
}
.demo-numeri .numeri-pieno {
  height: 100%;
  border-radius: 999px;
  background: var(--accento);
}
.demo-numeri .numeri-pieno.primo {
  background: var(--accento-scuro);
}
.demo-numeri .numeri-piede {
  padding: 0.625rem 0;
  border-top: 1px solid var(--bordo);
}
.demo-numeri .demo-scheda > .numeri-piede {
  margin-top: 0.75rem;
  padding-bottom: 0;
}
.demo-numeri .numeri-elenco > .numeri-piede {
  margin-top: 0;
  padding-bottom: 0.625rem;
}
.demo-numeri .numeri-servizi,
.demo-numeri .numeri-metodi,
.demo-numeri .numeri-tempi-blocco ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.demo-numeri .numeri-servizi li,
.demo-numeri .numeri-tempi-blocco li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0;
}
.demo-numeri .numeri-servizi li + li,
.demo-numeri .numeri-tempi-blocco li + li {
  border-top: 1px solid var(--bordo);
}

/* Come pagano: la striscia e l'elenco col nome (il colore da solo non dice niente). */
.demo-numeri .numeri-striscia {
  display: flex;
  gap: 3px;
  height: 1.25rem;
  border-radius: var(--raggio-sm);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.demo-numeri .numeri-m-contanti {
  background: var(--positivo);
}
.demo-numeri .numeri-m-carta {
  background: var(--accento);
}
.demo-numeri .numeri-m-satispay {
  background: var(--attenzione);
}
.demo-numeri .numeri-m-bonifico {
  background: var(--accento-scuro);
}
.demo-numeri .numeri-m-altro {
  background: var(--tenue);
}
.demo-numeri .numeri-metodi li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
}
.demo-numeri .numeri-metodi li > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.demo-numeri .numeri-metodi i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
}
.demo-numeri .numeri-pagato {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--bordo);
  font-weight: 700;
}

/* Quanto durano i servizi. */
.demo-numeri .numeri-tempi-blocco {
  padding: 0.5rem 0;
}
.demo-numeri .numeri-tempi-blocco + .numeri-tempi-blocco {
  border-top: 1px solid var(--bordo);
}
.demo-numeri .numeri-tempi-blocco h5 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tenue);
}
.demo-numeri .numeri-pallino {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  margin-right: 0.375rem;
}

/* I movimenti: una volta sola all'apertura e al cambio di periodo, sotto il secondo, solo a chi li vuole. */
@media (prefers-reduced-motion: no-preference) {
  .demo-numeri.numeri-entra .numeri-barra,
  .demo-numeri.numeri-entra .numeri-zero {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: numeri-sale 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  }
  .demo-numeri.numeri-entra .numeri-pieno,
  .demo-numeri.numeri-entra .numeri-obiettivo-pieno,
  .demo-numeri.numeri-entra .numeri-striscia > div {
    transform-origin: left center;
    animation: numeri-scorre 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  }
  .demo-numeri .numeri-obiettivo-cambia {
    transition: transform 0.15s ease;
  }
}
@keyframes numeri-sale {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes numeri-scorre {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Il modulo dell'obiettivo, dentro il foglio che sale (fuori dal contenitore). */
.numeri-modulo {
  display: grid;
  gap: 0.5rem;
}
.numeri-modulo-etichetta {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.numeri-errore {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--raggio-md);
  background: var(--negativo-chiaro);
  color: var(--negativo);
  font-size: 0.875rem;
  font-weight: 600;
}
.numeri-errore[hidden] {
  display: none;
}
.numeri-modulo-nota {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--tenue);
}