/* Simulatore di circuiti logici — stile */

:root {
  color-scheme: dark;
  /* Superfici: la grafite dello strumento; il foglio è lo schermo, nero verdastro. */
  --sfondo: #121519;
  --superficie: #1a1e23;
  --tasto: #22282f;
  --tasto-sopra: #2a3139;
  --tasto-premuto: #313942;
  --bordo: #2c333a;
  --bordo-sopra: #3d4751;
  --riga-tenue: #232930;
  --carta: #0b1110;
  --griglia: #2a3833;
  --divisione: #18241f;
  /* Testo */
  --inchiostro: #e3e7ea;
  --testo-tenue: #8f99a3;
  --su-inchiostro: #121519;
  /* Segnali: 1 è il giallo del canale 1, 0 un grigio spento. */
  --grigio-filo: #4b5a57;
  --acceso: #f2cf1d;
  --acceso-testo: #f2cf1d;
  --acceso-bordo: #f2cf1d;
  --contorno-acceso: transparent;
  --acceso-tenue: #332d0e;
  --su-acceso: #17150a;
  --bagliore: rgb(242 207 29 / .5);
  --impulso: #fff1a8;
  --impulso-spento: #5d6b68;
  /* Interfaccia (schede, pulsanti principali, fuoco): il ciano del canale 2. */
  --accento: #2cc4d8;
  --accento-tenue: #0e2f35;
  --accento-forte: #62d8e8;
  --su-accento: #04191c;
  /* Stati */
  --errore: #ff6b5e;
  --errore-tenue: #3a1d1b;
  --avviso: #f5a84a;
  --avviso-tenue: #36270f;
  --ok: #3ecf8e;
  --ok-tenue: #11301f;
  --selezione: #ff9f1c;
  --cambia: #f08cc8;
  --cambia-tenue: #3a1630;
  /* Gruppi della forma minima: magenta e ciano come i canali 3 e 2; il giallo resta al segnale. */
  --gruppo-1: #e04fa8;
  --gruppo-2: #2cc4d8;
  --gruppo-3: #8fd14f;
  --gruppo-4: #ff8a3d;
  --gruppo-5: #a58bff;
  --gruppo-6: #4f8ff7;
  --gruppo-7: #ff7a8a;
  --gruppo-8: #c9d2d0;
  /* Oggetti particolari */
  --nota-fondo: #2b2816;
  --nota-bordo: #6d6130;
  --blocco-fondo: #17222c;
  --calc-corpo: linear-gradient(#232a31, #191e23);
  --calc-display: #06100e;
  --ombra: rgb(0 0 0 / .45);
  --velo: rgb(0 0 0 / .6);
  --raggio: 8px;
  /* Caratteri: Chakra Petch per i titoli, Barlow per il testo, JetBrains Mono per i valori. */
  --titolo: "Chakra Petch", "Bahnschrift", system-ui, sans-serif;
  --carattere: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Versione chiara: lo stesso strumento stampato su carta. Il giallo del segnale diventa ambra, più
   scuro quando è testo; il ciano dell'interfaccia si scurisce per restare leggibile sul chiaro. */
:root[data-tema="chiaro"] {
  color-scheme: light;
  --sfondo: #e9ecee;
  --superficie: #f7f8f9;
  --tasto: #ffffff;
  --tasto-sopra: #eef1f3;
  --tasto-premuto: #e3e7ea;
  --bordo: #d3d9de;
  --bordo-sopra: #b9c2c9;
  --riga-tenue: #e7ebee;
  --carta: #fcfdfc;
  --griglia: #c9d3cf;
  --divisione: #e1e8e5;
  --inchiostro: #1a1f24;
  --testo-tenue: #5c6670;
  --su-inchiostro: #ffffff;
  --grigio-filo: #9aa5a3;
  --acceso: #ffc61a;
  --acceso-testo: #8f6500;
  --acceso-bordo: #8f6500;
  --contorno-acceso: #8f6500;
  --acceso-tenue: #fbefc7;
  --su-acceso: #1f1600;
  --bagliore: rgb(255 198 26 / .55);
  --impulso: #ffe27a;
  --impulso-spento: #b9c2c0;
  --accento: #077584;
  --accento-tenue: #dcf1f4;
  --accento-forte: #066d7b;
  --su-accento: #ffffff;
  --errore: #b93226;
  --errore-tenue: #fbe6e3;
  --avviso: #955800;
  --avviso-tenue: #fcefd6;
  --ok: #177347;
  --ok-tenue: #dff3e8;
  --selezione: #e07b00;
  --cambia: #b8246f;
  --cambia-tenue: #fbe3ef;
  --gruppo-1: #c2257f;
  --gruppo-2: #0a8ea0;
  --gruppo-3: #4f9a1c;
  --gruppo-4: #e0661b;
  --gruppo-5: #6f4fd8;
  --gruppo-6: #2566d6;
  --gruppo-7: #d63a55;
  --gruppo-8: #5c6670;
  --nota-fondo: #fff3b0;
  --nota-bordo: #d9bc4c;
  --blocco-fondo: #e9f1f8;
  --calc-corpo: linear-gradient(#e9edf0, #dde2e6);
  --calc-display: #eaf6f7;
  --ombra: rgb(20 30 40 / .14);
  --velo: rgb(20 25 30 / .45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font: 14px/1.45 var(--carattere);
  color: var(--inchiostro);
  background: var(--sfondo);
}

h1, h2, h3 { margin: 0; line-height: 1.2; }

h2 {
  font-family: var(--titolo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 10px;
}

button, input { font: inherit; color: inherit; }
/* Campi scritti: il fondo dello schermo, non il grigio predefinito del browser. */
input:not([type="checkbox"], [type="radio"]), textarea, select { background-color: var(--carta); color: var(--inchiostro); }

button {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--tasto);
  transition: background-color .12s, border-color .12s;
}
button:hover:not(:disabled) { background: var(--tasto-sopra); border-color: var(--bordo-sopra); }
button:active:not(:disabled) { background: var(--tasto-premuto); }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}
button.pericolo:hover:not(:disabled) { color: var(--errore); border-color: var(--errore); }

/* ---------- Barra in alto ---------- */

.barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}
.barra h1 { display: flex; align-items: center; gap: 9px; font: 600 17px var(--titolo); letter-spacing: .01em; }
.barra h1 .logo { flex: none; width: 26px; height: 26px; }
.logo-schermo { fill: var(--carta); stroke: var(--bordo-sopra); }
.logo-onda { fill: none; stroke: var(--acceso); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.comandi select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--tasto);
  cursor: pointer;
}
.separatore-comandi { align-self: stretch; width: 1px; margin: 2px 4px; background: var(--bordo); }

/* Pulsanti a icona (Annulla, Ripeti): Ripeti è la stessa freccia specchiata. */
button.icona { display: inline-grid; place-items: center; padding: 5px 8px; }
button.icona svg { display: block; }
button.icona.specchio svg { transform: scaleX(-1); }

/* Menu File: una tendina che si apre sotto il pulsante. */
.menu { position: relative; margin-left: auto; }
.menu + input + .comandi { margin-left: 0; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--tasto);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: "";
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 4px;
}
.menu > summary:hover, .menu[open] > summary { background: var(--tasto-sopra); border-color: var(--bordo-sopra); }
.menu > summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* Allineata a destra: sul telefono il menu sta sul bordo destro e aperto verso destra sborderebbe. */
.menu-voci {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: 0 8px 24px var(--ombra);
}
.menu-voci button { border-color: transparent; text-align: left; }
.menu-voci hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--bordo); }

/* ---------- Tre zone ---------- */

.area {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) minmax(300px, 380px);
}

.palette, .pannello {
  overflow: auto;
  background: var(--superficie);
  padding: 14px;
}
.palette { border-right: 1px solid var(--bordo); }
.pannello { border-left: 1px solid var(--bordo); }

/* ---------- Palette ---------- */

/* Scelta dei simboli delle porte, sopra la tavolozza. */
.kmap-selettore.simboli { gap: 4px; margin-bottom: 8px; font-size: 12px; }
.kmap-selettore.simboli button { padding: 2px 10px; font-size: 12px; }

.palette-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.palette-voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 5px;
  font-size: 12px;
  font-weight: 550;
  user-select: none;
  -webkit-user-select: none;
}
.palette-voce svg { width: 54px; height: 36px; overflow: visible; }

/* ---------- Proprietà della selezione ---------- */

.proprieta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
}
.proprieta p { margin: 0 0 8px; }
.proprieta .titolo { font-weight: 650; margin-bottom: 10px; }
.proprieta .tenue { color: var(--testo-tenue); font-size: 13px; }
.proprieta label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.proprieta input[type="text"] {
  width: 3em;
  padding: 4px 6px;
  text-align: center;
  font-weight: 650;
  border: 1px solid var(--bordo);
  border-radius: 6px;
}
.proprieta .azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.proprieta label.campo-nota { flex-direction: column; align-items: stretch; gap: 4px; }
.proprieta textarea {
  width: 100%;
  resize: vertical;
  padding: 6px 8px;
  font: 14px var(--carattere);
  border: 1px solid var(--bordo);
  border-radius: 6px;
}
.proprieta .kmap-selettore { margin-bottom: 10px; }

/* ---------- Blocchi (sottocircuiti) ---------- */

.tipo-block .corpo { fill: var(--blocco-fondo); }
.blocco-nome { font: 650 11px var(--carattere); fill: var(--inchiostro); text-anchor: middle; }
.blocco-porta { font: 10px var(--mono); fill: var(--testo-tenue); }
.blocco-porta.uscita { text-anchor: end; }
.palette-voce.blocco svg .corpo { stroke-width: 1.5; }
.palette-voce.nuovo-blocco { border-style: dashed; }
.finestra-sottotitolo { margin: 18px 0 6px; font-size: 15px; }
.elenco-blocchi { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.elenco-blocchi li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
}
.elenco-blocchi .blocco-voce-nome { font-weight: 650; }
.elenco-blocchi .blocco-voce-porte { flex: 1; min-width: 12em; font-size: 12px; color: var(--testo-tenue); }

/* ---------- Note ed etichette sul foglio ---------- */

.nota-foglio { cursor: grab; }
.nota-sfondo { fill: var(--nota-fondo); stroke: var(--nota-bordo); stroke-width: 1; }
.nota-testo { font: 13px var(--carattere); fill: var(--inchiostro); }
.nota-testo.vuota { fill: var(--testo-tenue); font-style: italic; }
.stile-etichetta .nota-sfondo { fill: transparent; stroke: transparent; }
.stile-etichetta .nota-testo { font-size: 15px; font-weight: 650; }
.nota-foglio.selezionata .nota-sfondo { stroke: var(--selezione); stroke-width: 2; }
.stile-etichetta.selezionata .nota-sfondo { stroke-dasharray: 4 3; }
.proprieta .errore-campo { color: var(--errore); font-size: 13px; }
kbd {
  font: 12px var(--mono);
  padding: 0 4px;
  border: 1px solid var(--bordo);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--sfondo);
}

/* ---------- Esempi ---------- */

.esempi {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
}
.esempi-categoria {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 650;
}
.esempi h2 + .esempi-categoria { margin-top: 0; }
.esempi-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.esempio-voce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
}
.esempio-titolo { font-size: 13px; font-weight: 600; }
.esempio-dettaglio { font-size: 12px; color: var(--testo-tenue); }

/* ---------- Foglio ---------- */

/* Il foglio e, sotto, il diagramma temporale: aprendo il diagramma il foglio si accorcia. */
.colonna-foglio {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.foglio-contenitore {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ---------- Diagramma temporale ---------- */

.cronogramma { border-top: 1px solid var(--bordo); background: var(--superficie); }
.cronogramma summary {
  padding: 7px 14px;
  font: 600 12px var(--titolo);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  cursor: pointer;
}
.cronogramma summary:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.cronogramma-corpo { max-height: 38vh; overflow-y: auto; padding: 0 14px 10px; }
.cronogramma-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.cronogramma-comandi .nota { flex: 1 1 18em; margin: 0; }
.cronogramma-disegno { overflow-x: auto; }
.onde { display: block; }
.onda-griglia { stroke: var(--bordo); stroke-width: 1; }
.onda-separatore { stroke: var(--testo-tenue); stroke-width: 1; }
.onda-tempo { font: 10px var(--mono); fill: var(--testo-tenue); text-anchor: middle; }
.onda-nome { font: 650 13px var(--mono); fill: var(--acceso-testo); dominant-baseline: middle; }
.onda-nome.uscita { fill: var(--accento); }
.onda-alto { fill: var(--acceso-tenue); }
.onda-alto.uscita { fill: var(--accento-tenue); }
.onda-linea { fill: none; stroke: var(--acceso-testo); stroke-width: 2; stroke-linejoin: round; }
.onda-linea.uscita { stroke: var(--accento); }
.onda-indefinito { stroke: var(--errore); stroke-width: 2; stroke-dasharray: 4 3; }
.onda-adesso { fill: var(--selezione); opacity: .14; }
.onda-colonna { fill: transparent; }
.onda-colonna:hover { fill: var(--testo-tenue); fill-opacity: .08; }

#foglio {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--carta);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#foglio.pan-attivo { cursor: grabbing; }

/* Zoom nell'angolo del foglio: un'unica pastiglia di pulsanti. */
.zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: 0 1px 4px var(--ombra);
}
.zoom button {
  min-width: 34px;
  padding: 4px 10px;
  border: 0;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.zoom button + button { border-left: 1px solid var(--bordo); }
#zoom-meno, #zoom-piu { font-size: 17px; line-height: 1; }
#zoom-livello { min-width: 58px; font-size: 13px; color: var(--testo-tenue); }

.foglio-vuoto {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 80%;
  text-align: center;
  color: var(--testo-tenue);
  pointer-events: none;
}

/* Messaggi a comparsa: nell'angolo in basso a destra del foglio, con il colore del tipo. */
.notifica {
  --colore-notifica: var(--accento);
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: min(360px, calc(100% - 24px));
  padding: 10px 6px 10px 12px;
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--colore-notifica);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font-size: 13px;
  box-shadow: 0 6px 20px var(--ombra);
  animation: notifica-entra .18s ease-out;
}
.notifica[hidden] { display: none; }
.notifica.ok { --colore-notifica: var(--ok); }
.notifica.avviso { --colore-notifica: var(--avviso); }
.notifica.errore { --colore-notifica: var(--errore); }
.notifica-icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--colore-notifica);
  color: var(--sfondo);
  font: 700 12px/1 var(--carattere);
}
.notifica-testo { flex: 1; min-width: 0; margin: 1px 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.notifica-chiudi {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -5px 0 -5px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--testo-tenue);
  font-size: 19px;
  line-height: 1;
}
.notifica-chiudi:hover { background: var(--sfondo); color: var(--inchiostro); }
@keyframes notifica-entra {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .notifica { animation: none; }
}

/* Griglia di punti */
.griglia-punto { fill: var(--griglia); }
/* Divisioni grandi ogni cinque quadretti, come la griglia dello schermo dell'oscilloscopio. */
.griglia-divisione { fill: none; stroke: var(--divisione); stroke-width: 1; }

/* Fili: a 1 spessi e colorati, a 0 sottili e grigi, indefiniti tratteggiati. */
.filo { fill: none; stroke-linecap: round; }
.filo.v0 { stroke: var(--grigio-filo); stroke-width: 2; }
.filo.v1 { stroke: var(--acceso); stroke-width: 4.5; }
/* Contorno dei segnali a 1, sotto il filo e sotto i piedini: nel tema scuro è trasparente,
   nel chiaro stacca il giallo dal foglio bianco. */
.filo-contorno { fill: none; stroke: none; }
.filo-contorno.v1 { stroke: var(--contorno-acceso); stroke-width: 7; }
.pin-contorno { stroke: none; }
.pin-contorno.v1 { stroke: var(--contorno-acceso); stroke-width: 6.5; }
.filo.vx { stroke: var(--grigio-filo); stroke-width: 2; stroke-dasharray: 5 5; }
.filo-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
/* Puntino dove si dividono i fili che partono dalla stessa uscita, come negli schemi dei libri. */
.giunzione { fill: var(--grigio-filo); pointer-events: none; }
.giunzione.v1 { fill: var(--acceso); stroke: var(--contorno-acceso); stroke-width: 1.5; r: 5.5px; }
/* Valore a metà del filo, oltre al colore: con un contorno del colore del foglio resta leggibile sopra le linee. */
.filo-valore {
  font: 700 12px var(--mono);
  text-anchor: middle;
  fill: var(--testo-tenue);
  paint-order: stroke;
  stroke: var(--carta);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.filo-valore.v1 { fill: var(--acceso-testo); }
.filo-valore.in-attesa { animation: in-attesa-valore-filo var(--attesa) step-end; }
@keyframes in-attesa-valore-filo {
  from, to { fill: var(--testo-tenue); }
}
.filo-alone { fill: none; stroke: transparent; stroke-width: 11; stroke-linecap: round; }
.filo-gruppo.selezionato .filo-alone { stroke: var(--selezione); opacity: .5; }

.anteprima-filo {
  fill: none;
  stroke: var(--accento);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

/* Impulso di corrente: un tratto luminoso che corre lungo il filo (pathLength = 100). */
.strato-impulsi { pointer-events: none; }
.impulso {
  fill: none;
  stroke: var(--impulso);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 16 100;
  stroke-dashoffset: 16;
  filter: drop-shadow(0 0 4px var(--bagliore));
  animation: impulso 320ms linear both;
}
.impulso.spento { stroke: var(--impulso-spento); stroke-width: 4; filter: none; }
@keyframes impulso {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: -100; }
}

/* Scintilla all'arrivo sulla porta d'ingresso. */
.scintilla {
  fill: var(--impulso);
  stroke: var(--acceso);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: scintilla 380ms ease-out both;
}
@keyframes scintilla {
  0% { opacity: 0; transform: scale(.2); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.9); }
}

/* In attesa del segnale: fili e lampade a valle restano spenti finché l'impulso non arriva. */
.filo.in-attesa,
.nodo.in-attesa .pin.v1 { animation: in-attesa-filo var(--attesa) step-end; }
.filo-contorno.in-attesa,
.nodo.in-attesa .pin-contorno.v1 { animation: in-attesa-contorno var(--attesa) step-end; }
.nodo.in-attesa .lampada { animation: in-attesa-lampada var(--attesa) step-end; }
.nodo.in-attesa .valore { animation: in-attesa-valore var(--attesa) step-end; }
@keyframes in-attesa-filo {
  from, to { stroke: var(--grigio-filo); stroke-width: 2px; }
}
@keyframes in-attesa-contorno {
  from, to { stroke: transparent; }
}
@keyframes in-attesa-lampada {
  from, to { fill: var(--carta); stroke: var(--inchiostro); filter: none; }
}
@keyframes in-attesa-valore {
  from, to { fill: var(--inchiostro); }
}

@media (prefers-reduced-motion: reduce) {
  .impulso, .scintilla { display: none; }
  .filo.in-attesa, .filo-contorno.in-attesa, .filo-valore.in-attesa, .nodo.in-attesa * { animation: none; }
}

/* Nodi */
.nodo { cursor: grab; }
.nodo.tipo-input { cursor: pointer; }

.riquadro-selezione { fill: none; stroke: none; }
/* Alone del colore del gruppo che la porta calcola: si vede solo accanto a mappa ed espressione. */
.alone-gruppo {
  display: none;
  fill: var(--colore);
  fill-opacity: .14;
  stroke: var(--colore);
  stroke-opacity: .75;
  stroke-width: 2;
  transition: fill-opacity .15s;
}
#foglio.gruppi-visibili .alone-gruppo { display: inline; }
#foglio .nodo, #foglio .filo-gruppo { transition: opacity .15s; }
/* Selezione ad area e pulsante «Selezione» attivo. */
.riquadro-area {
  fill: color-mix(in srgb, var(--accento) 10%, transparent);
  stroke: var(--accento);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#foglio.modo-area { cursor: crosshair; }
.barra button[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-inchiostro); }
.proprieta .azioni.allinea { margin-bottom: 8px; }
.proprieta .azioni.allinea button { flex: 1 1 0; padding-inline: 4px; }

.nodo.selezionato .riquadro-selezione {
  stroke: var(--selezione);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  fill: color-mix(in srgb, var(--selezione) 8%, transparent);
}

.corpo { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 2; stroke-linejoin: round; }
.corpo-linea { fill: none; stroke: var(--inchiostro); stroke-width: 2; }
.bolla { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 2; }

.pin { stroke-linecap: round; }
.pin.v0 { stroke: var(--grigio-filo); stroke-width: 2; }
.pin.v1 { stroke: var(--acceso); stroke-width: 4; }
.pin.vx { stroke: var(--grigio-filo); stroke-width: 2; stroke-dasharray: 3 3; }

/* Funzione scritta dentro i simboli rettangolari IEC: &, ≥1, =1, 1. */
.simbolo-iec {
  font: 700 14px var(--carattere);
  fill: var(--inchiostro);
  text-anchor: middle;
  pointer-events: none;
}

.etichetta-tipo {
  font: 600 9px var(--carattere);
  letter-spacing: .04em;
  fill: var(--testo-tenue);
  text-anchor: middle;
  pointer-events: none;
}
.etichetta-nome {
  font: 700 14px var(--carattere);
  fill: var(--inchiostro);
  text-anchor: middle;
  pointer-events: none;
}
.valore {
  font: 700 17px var(--mono);
  text-anchor: middle;
  fill: var(--inchiostro);
  pointer-events: none;
}

/* Interruttore (INPUT) */
.tipo-input.v1 .interruttore { fill: var(--acceso); stroke: var(--acceso-bordo); }
.tipo-input.v1 .valore { fill: var(--su-acceso); }

/* Lampada (OUTPUT) */
.tipo-output.v1 .lampada {
  fill: var(--acceso);
  stroke: var(--acceso-bordo);
  filter: drop-shadow(0 0 6px var(--bagliore));
}
.tipo-output.v1 .valore { fill: var(--su-acceso); }
.tipo-output.vx .lampada { stroke-dasharray: 4 3; }

/* Nodi in un ciclo */
.nodo.in-ciclo .corpo,
.nodo.in-ciclo .bolla { stroke: var(--errore); fill: var(--errore-tenue); stroke-width: 3; }
.nodo.in-ciclo .corpo-linea { stroke: var(--errore); stroke-width: 3; }

/* Porte */
.porta-hit { fill: transparent; cursor: crosshair; }
/* Punti pieni: un cerchietto vuoto si confonderebbe col pallino di negazione. */
.porta-punto { fill: var(--inchiostro); stroke: none; pointer-events: none; }
.porta.scollegata .porta-punto { fill: var(--errore); stroke: var(--errore); r: 5px; }
.porta.bersaglio .porta-punto { fill: var(--accento-tenue); stroke: var(--accento); stroke-width: 3; r: 6px; }
.porta-out:hover .porta-punto, .porta-in:hover .porta-punto { stroke: var(--accento); stroke-width: 2.5; }

/* ---------- Pannello dei risultati ---------- */

.riquadro + .riquadro {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
}

/* Schede dei risultati: la barra resta attaccata in cima mentre si scorre il contenuto.
   Il pannello ha 14px di margine interno: top e margini negativi la portano fino al bordo. */
.schede {
  position: sticky;
  top: -14px;
  z-index: 5;
  display: flex;
  gap: 2px;
  margin: 18px -14px 14px;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--bordo);
  background: var(--superficie);
}
.schede [role="tab"] {
  flex: 1;
  margin-bottom: -1px;
  padding: 8px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--testo-tenue);
  font-weight: 600;
}
.schede [role="tab"]:hover:not(:disabled) { background: var(--sfondo); color: var(--inchiostro); }
.schede [role="tab"][aria-selected="true"] { border-bottom-color: var(--accento); color: var(--accento); }
.schede [role="tab"]:focus-visible { outline-offset: -2px; }

.messaggi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.messaggio {
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid;
  font-size: 13px;
}
.messaggio.errore { background: var(--errore-tenue); border-color: var(--errore); }
.messaggio.avviso { background: var(--avviso-tenue); border-color: var(--avviso); }
.messaggio.ok { background: var(--ok-tenue); border-color: var(--ok); }
.messaggio.info { background: var(--sfondo); border-color: var(--bordo); color: var(--testo-tenue); }
.messaggio strong { font-weight: 650; }

.uscite { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.uscita-valore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font: 600 13px var(--mono);
}
.uscita-valore.v1 { background: var(--acceso); border-color: var(--acceso-bordo); color: var(--su-acceso); }
.uscita-valore.vx { border-style: dashed; color: var(--errore); }

p.messaggio { margin: 0 0 8px; }
.nota { margin: 8px 0; font-size: 13px; color: var(--testo-tenue); }

/* ---------- Tavola di verità ---------- */

.tavola-contenitore {
  max-height: min(56vh, 540px);
  overflow: auto;
  border: 1px solid var(--bordo);
  border-radius: 6px;
}

.tavola {
  width: 100%;
  border-collapse: collapse;
  font: 14px var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tavola th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 8px;
  background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
  font: 700 13px var(--carattere);
}

.tavola td { padding: 3px 8px; border-bottom: 1px solid var(--riga-tenue); }
.tavola tbody tr:last-child td { border-bottom: 0; }
.tavola .separatore { border-left: 2px solid var(--bordo); }
.tavola th.uscita { color: var(--accento); }

.tavola tbody tr[tabindex] { cursor: pointer; }
.tavola tbody tr:hover { background: var(--tasto); }
.tavola tbody tr:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }

/* Riga corrente: barra laterale e grassetto, non solo il colore di fondo. */
.tavola tbody tr.corrente {
  background: var(--accento-tenue);
  box-shadow: inset 4px 0 0 var(--accento);
  font-weight: 700;
}

.tavola td.uscita.v1 { color: var(--acceso-testo); font-weight: 700; }
.tavola td.uscita.vx { color: var(--errore); }

/* Tavola scritta a mano: le celle dell'uscita sono pulsanti 0 → 1 → X. */
.modo-tavola { margin-bottom: 10px; }
.mano-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mano-comandi label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--testo-tenue); }
.tavola td:has(> .cella-mano) { padding: 1px 4px; }
.cella-mano {
  width: 100%;
  min-width: 2.6em;
  padding: 1px 6px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px dashed var(--bordo);
  border-radius: 5px;
}
.cella-mano:hover { background: var(--accento-tenue); border-style: solid; }
.tavola td.uscita.vd { color: var(--avviso); font-weight: 700; }
.tavola td.uscita.vd .cella-mano { background: var(--avviso-tenue); }

/* Nota della tavola con accanto la mini-mappa: la cella della riga sotto il puntatore. */
.tavola-testa { display: flex; align-items: flex-start; gap: 12px; }
.tavola-testa > .nota { flex: 1; }
.mini-mappa-posto:empty { display: none; }
.mini-mappa {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 4px 0 8px;
  padding: 6px 8px 5px;
  font-size: 11px;
  color: var(--testo-tenue);
}
.mini-mappa svg { display: block; }
.mini-mappa-didascalia { max-width: 11em; text-align: center; line-height: 1.2; }
.mini-cella { fill: var(--carta); stroke: var(--bordo); stroke-width: 1; }
.mini-valore { font: 600 9px var(--mono); text-anchor: middle; fill: var(--testo-tenue); }
.mini-valore.v1 { fill: var(--acceso-testo); }
.mini-valore.vd { fill: var(--avviso); }
.mini-segno { fill: color-mix(in srgb, var(--accento) 20%, transparent); stroke: var(--accento); stroke-width: 2; }

/* ---------- Mappa di Karnaugh ---------- */

/* Riga della tavola della cella sotto il puntatore (o degli interruttori), sotto la mappa. */
.kmap-riga { min-height: 1.5em; margin: -4px 0 10px; font: 13px var(--mono); color: var(--testo-tenue); }
.riga-etichetta {
  margin-right: 8px;
  font: 600 11px var(--titolo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accento);
}
.riga-uscita { font-weight: 700; color: var(--inchiostro); }
.riga-uscita.v1 { color: var(--acceso-testo); }
.riga-uscita.vd { color: var(--avviso); }
.riga-uscita.vx { color: var(--errore); }

.kmap-selettore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--testo-tenue);
}
.kmap-selettore button { padding: 3px 12px; font-weight: 650; }
.kmap-selettore button[aria-pressed="true"] {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--su-inchiostro);
}

.kmap-contenitore { overflow-x: auto; }

svg.kmap {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2px 0 10px;
}

.kmap-cella { fill: var(--superficie); stroke: var(--bordo); stroke-width: 1; cursor: pointer; }
.kmap-cella:hover { fill: var(--tasto); }
/* Cella degli interruttori attuali: bordo spesso, non solo colore. */
.kmap-cella.corrente { stroke: var(--inchiostro); stroke-width: 3; }

/* Gli 0 più leggeri degli 1, ma sempre leggibili: la differenza sta anche nel peso. */
.kmap-valore { font: 400 17px var(--mono); text-anchor: middle; fill: var(--testo-tenue); pointer-events: none; }
.kmap-valore.bersaglio { font-weight: 700; font-size: 18px; fill: var(--inchiostro); }
.kmap-valore.indifferente { font-weight: 700; fill: var(--avviso); }
.kmap.modificabile .kmap-cella { cursor: pointer; }
/* Contorno del colore della cella: il numero resta leggibile anche sopra il bordo di un gruppo. */
.kmap-indice {
  font: 9px var(--mono);
  fill: var(--testo-tenue);
  paint-order: stroke;
  stroke: var(--superficie);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.kmap-codice { font: 600 12px var(--mono); fill: var(--testo-tenue); }
.kmap-var { font: 700 13px var(--carattere); fill: var(--inchiostro); }
.kmap-diagonale { stroke: var(--grigio-filo); stroke-width: 1.2; }
.kmap-gruppo { fill-opacity: .15; stroke-width: 2.5; pointer-events: none; }

/* Passaggi con la mappa: ogni gruppo è una voce che lo evidenzia sulla mappa. */
.passaggi > summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--accento); }
.kmap-gruppo-voce {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  text-align: left;
  font-size: 13px;
}
.kmap-gruppo-voce[aria-pressed="true"] { border-color: var(--accento); }
.kmap-lettura { font: 12px var(--mono); color: var(--testo-tenue); }
/* L'evidenziazione di un gruppo (qui, nelle formule e sul foglio) la scrive ui.js nel foglio di stile #stile-gruppo. */
svg.kmap .kmap-gruppo { transition: opacity .15s, stroke-width .15s, fill-opacity .15s; }
.kmap-campione {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2.5px solid var(--colore);
  border-radius: 4px;
  background: color-mix(in srgb, var(--colore) 18%, transparent);
}

/* ---------- Espressione minima ---------- */

.espressioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.espressione {
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--superficie);
}

.espressione-riga {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.formula {
  font: 600 18px/1.6 var(--mono);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.formula .uguale { color: var(--testo-tenue); font-weight: 400; }
.formula .piu { color: var(--testo-tenue); font-weight: 400; padding: 0 .25em; }
.formula .termine { white-space: nowrap; }
/* Termine con il colore del suo gruppo: sottolineato come un evidenziatore. */
.formula .termine.colorato {
  padding: 0 2px;
  border-bottom: 3px solid var(--colore);
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--colore) 10%, transparent);
  cursor: pointer;
  transition: opacity .15s, background-color .15s;
}

/* Forme SP e PS: sigla davanti alla formula, piena per la forma scelta. */
.modo-forma { margin-bottom: 8px; }
.forma-sigla {
  flex: none;
  margin-right: 8px;
  padding: 1px 7px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font: 650 11px var(--carattere);
  color: var(--testo-tenue);
  cursor: help;
}
.espressione-riga.scelta .forma-sigla { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-inchiostro); }
.espressione-riga:not(.scelta) .formula { color: var(--testo-tenue); }
.testo-copiabile + .espressione-riga { margin-top: 10px; }

/* Modalità esercizio: campo per la risposta ed esito del controllo. */
.modo-esercizio { margin-bottom: 6px; }
.esercizio { display: grid; gap: 8px; }
.esercizio-domanda { margin: 0; font-size: 13px; font-weight: 600; }
.esercizio-riga { display: flex; gap: 8px; }
.esercizio-campo {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font: 16px var(--mono);
  border: 1px solid var(--bordo);
  border-radius: 6px;
}
.esercizio-campo:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.esercizio-esito:empty { display: none; }
.esercizio-esito p.messaggio { margin: 0; }
.esercizio-esito pre.finestra-errore { margin: 6px 0 0; }
.esercizio-soluzione { justify-self: start; font-size: 12px; margin-bottom: 6px; }
.esercizio-riga-errata { display: block; margin-top: 6px; font-size: 12px; }

/* Solo NAND o solo NOR: passaggi di De Morgan. */
.universale { margin-top: 12px; }
.universale + .universale { padding-top: 12px; border-top: 1px solid var(--bordo); }
.universale h3 { margin: 0 0 8px; font-size: 14px; }
.universale-passi { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.universale-passi li { display: grid; gap: 2px; }
.universale-regola { font-size: 12px; color: var(--testo-tenue); }
.universale-formula { overflow-x: auto; padding-top: 4px; }
.universale-formula .formula { font-size: 17px; line-height: 2; white-space: nowrap; }
.universale-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--testo-tenue); }

/* Variabile negata: soprallineatura. Il margine interrompe la barra fra due
   negate vicine, altrimenti A'B' si leggerebbe come (AB)', che è un'altra funzione. */
.formula .neg {
  margin: 0 .09em;
  text-decoration: overline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0;
}
/* Negazione che ne contiene altre, come ((AB)'C)': la sua barra sta più in alto di quelle interne. */
.formula .neg:has(.neg) {
  text-decoration: none;
  border-top: 2px solid currentColor;
  padding-top: 3px;
}
.formula .neg:has(.neg .neg) { padding-top: 7px; }
.formula .neg:has(.neg .neg .neg) { padding-top: 11px; }

.espressione .copia {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 12px;
}

.espressione .sigma,
.espressione .testo-copiabile {
  margin: 4px 0 0;
  font: 13px var(--mono);
  color: var(--testo-tenue);
  overflow-wrap: anywhere;
}

.espressione details { margin-top: 8px; }
.espressione summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--testo-tenue);
}
.espressione summary:hover { color: var(--inchiostro); }

/* Passaggi del calcolo */
.espressione .passaggi summary {
  font-weight: 650;
  color: var(--accento);
}
.passi {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.passo { position: relative; padding-left: 34px; }
.passo-numero {
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accento-tenue);
  color: var(--accento);
  font-size: 13px;
  font-weight: 700;
}
.passo-titolo { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.passo-testo { margin: 0 0 6px; font-size: 13px; color: var(--testo-tenue); }
.passo-sottotitolo {
  margin: 8px 0 3px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.passo-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.passo-elenco li { font-size: 14px; overflow-wrap: anywhere; }
.passo .formula { font-size: 15px; line-height: 1.5; }
.passo-formula { margin: 2px 0 6px; }
.passo-formula .formula { font-size: 16px; }
.passo-nota { font: 12px var(--mono); color: var(--testo-tenue); white-space: pre-wrap; }
.passo-altri { font-size: 13px; color: var(--testo-tenue); }

/* ---------- Calcolatore dei passaggi ---------- */

.calcolatore {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  background: var(--calc-corpo);
  color: var(--inchiostro);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 3px 10px var(--ombra);
}
.calcolatore:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

.calc-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.calc-marca { font: 600 10px var(--titolo); letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue); }
.calc-contatore { font: 12px var(--mono); color: var(--testo-tenue); white-space: nowrap; }

.calc-punti { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.calc-punto {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--bordo);
  border-radius: 7px;
  background: var(--tasto);
  color: var(--testo-tenue);
  font: 600 12px var(--mono);
}
.calc-punto:hover:not(:disabled) { background: var(--tasto-sopra); border-color: var(--bordo-sopra); }
.calc-punto.fatto { background: var(--accento-tenue); border-color: color-mix(in srgb, var(--accento) 45%, transparent); color: var(--accento); }
.calc-punto.attivo, .calc-punto.attivo:hover:not(:disabled) { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }

.calc-titolo { margin: 0 2px 6px; font-size: 14px; font-weight: 650; color: var(--inchiostro); }

.calc-schermo {
  min-height: 150px;
  padding: 10px;
  border: 1px solid var(--bordo);
  border-radius: 9px;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: inset 0 2px 7px rgb(0 0 0 / .3);
  overflow: hidden;
}
.calc-contenuto { animation: calc-entra .25s ease-out; }
@keyframes calc-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.calc-spiega { margin: 0 0 8px; font-size: 13px; color: var(--testo-tenue); }
.calc-altri { margin: 6px 0 0; font-size: 12px; color: var(--testo-tenue); }
.calc-nota { font: 12px var(--mono); color: var(--testo-tenue); }
.calc-scorri { overflow-x: auto; }

.calc-tasti { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; margin-top: 8px; }
.calc-tasto {
  padding: 7px 10px;
  border: 1px solid var(--bordo-sopra);
  border-bottom-width: 3px;
  border-radius: 9px;
  background: var(--tasto-sopra);
  color: var(--inchiostro);
  font-weight: 600;
}
.calc-tasto:hover:not(:disabled) { background: var(--tasto-premuto); border-color: var(--bordo-sopra); }
.calc-tasto:active:not(:disabled) { border-bottom-width: 1px; transform: translateY(2px); }
.calc-tasto.primario { background: var(--accento); border-color: color-mix(in srgb, var(--accento) 55%, black); color: var(--su-accento); }
.calc-tasto.primario:hover:not(:disabled) { background: var(--accento-forte); border-color: color-mix(in srgb, var(--accento) 55%, black); }
.calc-tasto:disabled { opacity: .35; }

/* Tasti dei termini: bit sopra, prodotto sotto */
.calc-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 8px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: 0 2px 0 var(--bordo);
  vertical-align: middle;
}
.calc-righe { font: 10px var(--mono); color: var(--testo-tenue); }
.calc-bit { font: 700 15px var(--mono); letter-spacing: .06em; }
.calc-cifra.cambia { padding: 0 1px; border-radius: 3px; background: var(--cambia-tenue); color: var(--cambia); }
.calc-cifra.trattino { color: var(--testo-tenue); }
.calc-prodotto .formula { font-size: 13px; line-height: 1.2; }
.calc-chip.nuovo { border-color: var(--accento); background: var(--accento-tenue); }
.calc-chip.primo { border-color: var(--avviso); background: var(--avviso-tenue); }
.calc-chip.obbligatorio { border-color: var(--ok); background: var(--ok-tenue); }
.calc-chip.scelto { border-color: var(--accento); background: var(--accento-tenue); }
.calc-chip.inutile { opacity: .5; }

.calc-tavola { border-collapse: collapse; font: 13px var(--mono); }
.calc-tavola th, .calc-tavola td { padding: 2px 7px; text-align: center; border-bottom: 1px solid var(--riga-tenue); }
.calc-tavola th { font: 600 12px var(--carattere); color: var(--testo-tenue); }
.calc-tavola .uscita { border-left: 2px solid var(--bordo); }
.calc-tavola tr.bersaglio { background: var(--acceso-tenue); font-weight: 700; }
.calc-tavola tr.bersaglio .uscita { color: var(--acceso-testo); }
.calc-tavola tr.indifferente { background: var(--avviso-tenue); }
.calc-tavola tr.indifferente .uscita { color: var(--avviso); font-weight: 700; }
.calc-tavola .formula { font-size: 13px; }
.calc-num { color: var(--testo-tenue); }

.calc-gruppi { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.calc-gruppo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 74px;
  padding: 6px;
  border-radius: 9px;
  background: var(--superficie);
}
.calc-gruppo-titolo {
  margin: 0;
  text-align: center;
  font: 600 11px var(--carattere);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.calc-unioni { display: grid; gap: 8px; }
.calc-unione { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.calc-op { font: 700 17px var(--mono); color: var(--testo-tenue); }
.calc-primi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--bordo);
}

/* Mappa di Karnaugh disegnata dentro il calcolatore */
.calc-mappa-contenitore { margin: 4px 0 8px; }
svg.calc-mappa { display: block; max-width: 100%; height: auto; }
.calc-cella { fill: var(--superficie); stroke: var(--bordo); stroke-width: 1; }
.calc-cella.bersaglio { fill: var(--acceso-tenue); }
.calc-cella.indifferente { fill: var(--avviso-tenue); }
.calc-mappa .kmap-valore { font-size: 16px; }
.calc-mappa .kmap-gruppo.passato { opacity: .35; }
.calc-mappa .kmap-gruppo.attivo { stroke-width: 3.5; fill-opacity: .28; }

/* Lettura di un gruppo: ogni variabile resta o sparisce */
.calc-lettura {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--colore);
  border-radius: 9px;
  background: var(--superficie);
}
.calc-lettura-titolo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.calc-variabili { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.calc-variabile {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 58px;
  padding: 4px 6px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 12px;
}
.calc-variabile.resta { border-color: var(--ok); background: var(--ok-tenue); }
.calc-variabile.sparisce { border-color: color-mix(in srgb, var(--cambia) 50%, transparent); background: var(--cambia-tenue); color: var(--cambia); }
.calc-variabile-nome { font: 700 15px var(--mono); }
.calc-variabile.sparisce .calc-variabile-nome { text-decoration: line-through; }
.calc-variabile-valore { color: var(--testo-tenue); }
.calc-variabile.sparisce .calc-variabile-valore { color: inherit; }
.calc-variabile-esito { font-weight: 700; }
.calc-variabile-esito .formula { font-size: 14px; }

/* Scelta dei prodotti con Quine-McCluskey, una frase per prodotto */
.calc-scelte { display: grid; gap: 6px; }
.calc-scelta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.calc-scelta.inutile > span:last-child { color: var(--testo-tenue); }

/* Display del risultato, come quello di una calcolatrice */
.calc-display {
  margin: 4px 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--calc-display);
  color: var(--accento);
  text-align: right;
  overflow-wrap: anywhere;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .28);
}
.calc-display .formula { font-size: 20px; }
.calc-display.grande .formula { font-size: 24px; }
.calc-display .formula .uguale { color: var(--testo-tenue); }
.calc-conti { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.calc-conto { padding: 6px 8px; border-radius: 9px; background: var(--superficie); text-align: center; }
.calc-conto-valore { display: block; font: 700 18px var(--mono); }
.calc-conto-etichetta { font-size: 12px; color: var(--testo-tenue); }

@media (prefers-reduced-motion: reduce) {
  .calc-contenuto { animation: none; }
}

.selettore-uscita { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.selettore-uscita select { font: inherit; padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 6px; }

/* ---------- Finestre ---------- */

.finestra {
  width: min(540px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--inchiostro);
  box-shadow: 0 12px 40px var(--ombra);
}
.finestra::backdrop { background: var(--velo); }

/* Guida: finestra più larga, argomenti su due colonne quando c'è spazio. */
.finestra-larga { width: min(760px, calc(100vw - 24px)); }
.aiuto-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 28px; }
.aiuto-colonne h3 { margin: 0 0 6px; font-size: 14px; }
.aiuto-colonne ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--testo-tenue); }
.aiuto-colonne li { margin-bottom: 4px; }
.aiuto-colonne strong { color: var(--inchiostro); font-weight: 600; }

/* Pulsante del tema: l'icona dice la scelta attuale (scuro, chiaro, come il computer). */
.tema-pulsante { display: grid; place-items: center; }
.icona-tema {
  display: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-scelta="scuro"] .icona-tema.scuro,
:root[data-scelta="chiaro"] .icona-tema.chiaro,
:root[data-scelta="sistema"] .icona-tema.sistema { display: block; }

.aiuto-pulsante, .tema-pulsante {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
}
.proprieta-vuote { margin: 0; font-size: 13px; color: var(--testo-tenue); }
button.collegamento {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accento);
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.collegamento:hover:not(:disabled) { background: none; }
.finestra-contenuto { display: grid; gap: 12px; padding: 18px; }
.finestra h2 { margin: 0; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--inchiostro); }
.finestra-campo { display: grid; gap: 4px; font-size: 13px; color: var(--testo-tenue); }
.finestra-campo input {
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font: 600 18px var(--mono);
  color: var(--inchiostro);
}
.finestra-anteprima { min-height: 64px; }
.finestra-anteprima p.messaggio { margin-top: 6px; }
.finestra-formula { margin: 0 0 4px; overflow-wrap: anywhere; }
.finestra-formula .formula { font-size: 20px; }
.finestra-errore {
  margin: 6px 0 0;
  padding: 8px 10px;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--errore-tenue);
  color: var(--errore);
  font: 14px/1.3 var(--mono);
}
.finestra-aiuto summary { cursor: pointer; font-size: 13px; color: var(--accento); }
.finestra-aiuto ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--testo-tenue); }
.finestra-aiuto li { margin-bottom: 3px; }
.finestra-aiuto code { padding: 0 4px; border-radius: 4px; background: var(--sfondo); font: 13px var(--mono); color: var(--inchiostro); }
.finestra-azioni { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
button.primario { border-color: var(--accento); background: var(--accento); color: var(--su-accento); font-weight: 600; }
button.primario:hover:not(:disabled) { border-color: var(--accento-forte); background: var(--accento-forte); }

/* ---------- Dispositivi touch ---------- */

/* Tocchi rapidi sui comandi: niente zoom del browser col doppio tocco. */
button, select, .palette-voce, .calcolatore { touch-action: manipulation; }

/* Uscita scelta col primo tocco, in attesa dell'ingresso da collegare. */
.porta.in-attesa-filo .porta-punto { fill: var(--accento); r: 6px; }
.porta.in-attesa-filo .porta-hit { fill: color-mix(in srgb, var(--accento) 25%, transparent); }

.aiuto-mobile { display: none; margin: 6px 0 0; font-size: 12px; color: var(--testo-tenue); }

/* Con il dito servono bersagli più grandi. */
@media (pointer: coarse) {
  .porta-hit { r: 13px; }
  .filo-hit { stroke-width: 22px; }
  .calc-punto { min-width: 34px; height: 34px; }
  .calc-tasto { padding: 10px 12px; }
  .kmap-gruppo-voce { padding: 8px; }
  .esempio-voce { padding: 9px 10px; }
  .cella-mano { min-height: 34px; }
}

@media (max-width: 900px) {
  .barra h1 { font-size: 15px; }
  /* I comandi stanno su una riga che scorre di lato invece di occupare tre righe. */
  .barra .comandi {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }
  .barra .comandi > * { flex: none; }
  .aiuto-mobile { display: block; }
}

/* ---------- Schermo stretto: il pannello va sotto il foglio ---------- */

@media (max-width: 900px) {
  body { height: auto; min-height: 100%; }
  .barra { padding: 8px 12px; }
  /* Titolo più piccolo e, se serve, su due righe: marchio, nome, File, tema e «?» restano sulla prima riga. */
  .barra { column-gap: 10px; }
  .barra h1 { flex: 1 1 0; min-width: 0; gap: 7px; font-size: 15px; line-height: 1.15; }
  .barra h1 .logo { width: 22px; height: 22px; }
  .comandi { margin-left: 0; gap: 4px; }
  .comandi button, .comandi select { padding: 5px 9px; font-size: 13px; }
  .area { grid-template-columns: minmax(0, 1fr); }
  .palette { border-right: 0; border-bottom: 1px solid var(--bordo); padding: 8px 12px; }
  .palette h2 { display: none; }
  .kmap-selettore.simboli { margin-bottom: 6px; }
  /* La palette diventa una striscia che scorre in orizzontale: il foglio resta subito sotto. */
  .palette-griglia {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .palette-voce { flex: none; min-width: 68px; scroll-snap-align: start; }
  /* Senza selezione il riquadro ha solo il rimando alla guida, che qui sta già nella barra. */
  .proprieta { margin-top: 8px; padding-top: 8px; }
  .proprieta:has(.proprieta-vuote) { display: none; }
  /* Il «?» resta sulla prima riga accanto a File; i comandi scorrono sotto. */
  .aiuto-pulsante, .tema-pulsante { order: 1; }
  .barra .comandi { order: 2; }
  /* Gli esempi restano nel menu della barra: qui spingerebbero il foglio troppo in basso. */
  .esempi { display: none; }
  .colonna-foglio { display: block; }
  .foglio-contenitore { height: 62vh; min-height: 320px; }
  .cronogramma-corpo { max-height: none; }
  .pannello { border-left: 0; border-top: 1px solid var(--bordo); overflow: visible; }

  /* Schede in basso: si vede il foglio oppure i risultati, non una pagina lunghissima con tutti e due. */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .schede { display: none; }
  body[data-vista="foglio"] .pannello { display: none; }
  body[data-vista="risultati"] :is(.palette, .colonna-foglio) { display: none; }
  body[data-vista="risultati"] .pannello { border-top: 0; }
  /* Senza la barra delle schede nel pannello, una riga separa lo stato del circuito dal contenuto. */
  .scheda-contenuto { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordo); }
}

.schede-telefono {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordo);
  background: var(--superficie);
  box-shadow: 0 -2px 12px var(--ombra);
}
.schede-telefono button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--testo-tenue);
  font-size: 11px;
  font-weight: 650;
}
.schede-telefono svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schede-telefono svg text { fill: currentColor; stroke: none; font: 700 13px var(--mono); text-anchor: middle; }
.schede-telefono button[aria-current="page"] { background: var(--accento-tenue); color: var(--accento); }
@media (max-width: 900px) {
  .schede-telefono { display: grid; }
}