/*
 * Componenti del calcolatore. Solo ciò che serve allo strumento: il resto del
 * sito (intestazione, articolo, categorie) arriva quando ci sono nome e grafica.
 *
 * Regola che governa tutto il blocco: la pagina non deve MAI saltare sotto le
 * dita. Il contenitore del risultato ha altezza riservata, i messaggi di errore
 * hanno il loro spazio, i campi condizionali si aprono senza spostare il resto.
 */

.calcolatore {
  font-family: var(--testo);
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-md);
  padding: var(--s5);
}

.calcolatore__titolo {
  font-family: var(--titoli);
  font-size: var(--t-sezione);
  font-weight: 600;
  margin: 0 0 var(--s2);
}

.calcolatore__istruzione {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-tenue);
  background: var(--superficie-tenue);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
  padding: var(--s3);
  margin-bottom: var(--s5);
}

.calcolatore__campi {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* --- campo ------------------------------------------------------------ */

.campo__intestazione {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.campo__etichetta {
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--inchiostro-tenue);
}

/* Marca il campo che il motore ha ricavato: è la differenza che rende
   comprensibile un calcolatore bidirezionale. Resta modificabile. */
.campo__tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primario);
  background: var(--superficie-marcata);
  border-radius: var(--raggio);
  padding: 2px 6px;
}

.campo__controllo {
  display: flex;
  align-items: stretch;
  gap: var(--s2);
  background: var(--superficie);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio);
  min-height: var(--altezza-comando);
  padding: 0 var(--s3);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.campo__controllo:focus-within {
  border-color: var(--primario);
  box-shadow: inset 0 0 0 1px var(--primario);
}

.campo__valore {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--testo);
  font-size: var(--t-corpo-lg);
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
}

.campo__valore::placeholder { color: var(--inchiostro-lieve); }

.campo__unita {
  align-self: center;
  border: 0;
  background: transparent;
  font-family: var(--testo);
  font-size: var(--t-piccolo);
  color: var(--inchiostro-tenue);
  cursor: pointer;
  padding: var(--s2) 0;
  min-height: 44px;
}

.campo__unita--fissa { cursor: default; pointer-events: none; }

.campo__aiuto {
  font-size: var(--t-minuto);
  color: var(--inchiostro-tenue);
  margin-top: var(--s2);
}

/* Campo ricavato dal motore: fondo tenue e bordo tratteggiato. Si distingue
   da un campo compilato dall'utente senza per questo sembrare disabilitato. */
.campo--calcolato .campo__controllo {
  background: var(--superficie-tenue);
  border-style: dashed;
}

.campo--errore .campo__controllo {
  border-color: var(--errore);
  border-width: 2px;
  padding: 0 calc(var(--s3) - 1px);
}

.campo__messaggio {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-piccolo);
  color: var(--errore);
  margin-top: var(--s2);
}

.campo__messaggio--avviso { color: var(--inchiostro-tenue); }

.campo__messaggio svg { flex: 0 0 auto; margin-top: 2px; }

/* --- risultato -------------------------------------------------------- */

.risultato {
  margin-top: var(--s5);
  border: 2px solid var(--primario);
  border-radius: var(--raggio-md);
  background: var(--superficie);
  overflow: hidden;
  /* Altezza riservata: quando il numero arriva, nulla si sposta. */
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.risultato--vuoto {
  border: 1px dashed var(--bordo-campo);
  background: var(--superficie-tenue);
  align-items: center;
  text-align: center;
  padding: var(--s5);
  color: var(--inchiostro-tenue);
  font-size: var(--t-piccolo);
}

.risultato__etichetta {
  font-size: var(--t-minuto);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.risultato__principale { padding: var(--s5); }

.risultato__numero {
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 1;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s2);
}

.risultato__numero span { font-size: 0.5em; font-weight: 600; margin-left: var(--s1); }

.risultato__secondari {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-tenue);
}

.risultato__voce p {
  font-size: var(--t-corpo-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: var(--s1) 0 0;
}

/* --- azioni ----------------------------------------------------------- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--raggio);
  border: 1px solid var(--bordo-campo);
  background: var(--superficie);
  color: var(--inchiostro-tenue);
  font-family: var(--testo);
  font-size: var(--t-piccolo);
  font-weight: 500;
  cursor: pointer;
}

.bottone:hover { background: var(--superficie-tenue); }
.bottone:active { box-shadow: var(--ombra-premuto); }

.bottone--primario {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--su-primario);
}

.bottone--primario:hover { background: var(--primario-tenue); }

/* --- mobile ----------------------------------------------------------- */

@media (max-width: 640px) {
  .calcolatore { padding: var(--s4); border-radius: 0; border-left: 0; border-right: 0; }
  .risultato__secondari { gap: var(--s5); }

  /* Il risultato resta agganciato in basso e visibile sopra la tastiera
     di sistema mentre si digita. */
  .risultato--ancorato {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(var(--s4) * -1);
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    box-shadow: 0 -6px 18px rgb(0 0 0 / 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campo__controllo { transition: none; }
}

/* Un menu di scelta occupa il posto del valore, con la stessa altezza. */
.campo__scelta {
  appearance: none;
  cursor: pointer;
  padding-right: var(--s5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2341484b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s2) center;
}

/* Una scelta aperta: la tendina sopra, il campo del valore sotto, visibile
   solo quando si sceglie «Altro». Il coefficiente resta un numero che si
   vede e si cambia, non una costante nascosta nella formula. */
.campo__controllo:has(.campo__scelta-altro) {
  flex-wrap: wrap;
}
.campo__scelta-altro {
  flex-basis: 100%;
  margin-top: var(--s2);
  border-top: 1px solid var(--bordo-tenue);
  padding-top: var(--s2);
}

/* -------------------------------------------------------------- il disegno
   La figura quotata che accompagna i calcolatori geometrici. È SVG generato
   dalla definizione, quindi i colori si prendono dai token come tutto il
   resto: nessun valore letterale, e funziona anche se un giorno arriva un
   tema scuro. */
.disegno-riquadro {
  margin: var(--s4) 0 0;
  padding: var(--s3);
  background: var(--superficie-tenue);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
}
.disegno-riquadro[hidden] { display: none; }

.disegno {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}

.dis-figura {
  fill: var(--primario-chiaro);
  fill-opacity: 0.28;
  stroke: var(--primario);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.dis-linea {
  fill: none;
  stroke: var(--primario-tenue);
  stroke-width: 1.2;
}
.dis-linea.tratteggio { stroke-dasharray: 5 4; }

/* Una guida non è la figura: è il contorno da cui la figura si ritaglia —
   il cerchio intero dietro un settore. Niente riempimento, tratto leggero. */
.dis-figura.guida {
  fill: none;
  stroke: var(--inchiostro-lieve);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.dis-angolo {
  fill: none;
  stroke: var(--primario-tenue);
  stroke-width: 1.2;
}

.dis-quota,
.dis-quota-tratto {
  fill: none;
  stroke: var(--inchiostro-lieve);
  stroke-width: 1;
}

.dis-etichetta,
.dis-testo {
  fill: var(--inchiostro-tenue);
  font-family: var(--testo);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}


/* Un elenco di numeri sta in un campo alto quanto serve, non in una riga sola:
   guardare i propri dati incolonnati è metà del motivo per cui si usa uno
   strumento del genere. */
.campo__controllo--lista { height: auto; padding: 0; }

.campo__lista {
  width: 100%;
  min-height: 84px;
  padding: var(--s3);
  border: 0;
  background: transparent;
  font-family: var(--testo);
  font-size: var(--t-corpo);
  line-height: 1.7;
  resize: vertical;
}
.campo__lista:focus { outline: none; }