:root {
  color-scheme: light;
  --sfondo: #edf0f4;
  --pannello: #ffffff;
  --bordo: #d6dae0;
  --testo: #1d232b;
  --tenue: #5f6975;
  --accento: #1f5fbf;
  --c-elemento: #1f5fbf;
  --c-testo: #2e7d32;
  --c-commento: #7a7f87;
  --c-documento: #7b3fa0;
  --c-js: #a65400;
  --c-implicito: #6d6d6d;
  --sel: #dce8fc;
  --hover: #f1f5fb;
  --cambiato: #ffe9a3;
  --diverso: #fff3c4;
  --errore: #b3261e;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* un colore per ciascun concetto: testo HTML, DOM, pagina, JavaScript */
  --c-html: #a8432f;
  --t-html: #fbefeb;
  --c-dom: #1f5fbf;
  --t-dom: #eaf1fc;
  --c-pag: #17766f;
  --t-pag: #e6f4f1;
  --t-js: #fcf0e2;
  --c-neutro: #6e3a6b;
  --t-neutro: #f6eef5;
  --r: 2px;
  --linea: 2px; /* spessore delle linee dello schema; dom.js lo adatta ai pixel dello schermo */
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
}

code { font-family: var(--mono); font-size: .92em; background: #eef1f5; padding: 0 3px; border-radius: var(--r); }

button {
  font: inherit;
  border: 1px solid var(--bordo);
  background: #f7f8fa;
  border-radius: var(--r);
  padding: 3px 10px;
  cursor: pointer;
  color: var(--testo);
}
button:hover { background: #eaeef3; }
button.piccolo { font-size: 12px; padding: 1px 8px; }
button.js {
  color: var(--c-js);
  background: var(--t-js);
  border-color: color-mix(in srgb, var(--c-js) 35%, white);
}
button.js:hover { background: color-mix(in srgb, var(--c-js) 16%, white); }

/* Testata */

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 8px 16px;
  background: var(--pannello);
  border-bottom: 1px solid var(--bordo);
}
.testata h1 { font-size: 17px; margin: 0; }
.testata p { margin: 0; color: var(--tenue); }

/* Schema del flusso: al caricamento testo HTML → DOM → pagina;
   poi, a ogni evento, JavaScript modifica il DOM e la pagina viene ridisegnata */

.flusso {
  position: relative;
  display: grid;
  grid-template-columns: auto 66px auto 66px auto 66px auto;
  grid-template-rows: 24px;
  align-items: center;
  height: 46px;
  align-content: start;
  font-size: 12.5px;
}
.f-box {
  --acc: var(--c-neutro);
  padding: 2px 12px;
  border: 1px solid color-mix(in srgb, var(--acc) 40%, white);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--acc) 9%, white);
  color: var(--acc);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  cursor: default;
}
.f-box:hover { outline: 2px solid color-mix(in srgb, var(--acc) 45%, white); }
.f-html { --acc: var(--c-html); }
.f-dom { --acc: var(--c-dom); }
.f-pagina { --acc: var(--c-pag); }
.f-js { --acc: var(--c-js); }

/* accensione rapida, spegnimento graduale */
.f-freccia, .f-ritorno { --fc: #a9b1bb; --durata: .9s; }
.f-freccia.attiva, .f-ritorno.attiva { --durata: .15s; }
/* Tutte le frecce sono linee SVG disegnate in dom.js, allineate ai pixel
   dello schermo: linea e punta stanno nello stesso disegno e restano in asse. */
.f-freccia { position: relative; justify-self: stretch; height: 0; }
.f-freccia svg, .f-ritorno svg { position: absolute; overflow: visible; }
.f-freccia path, .f-ritorno path { fill: none; stroke: var(--fc); stroke-width: var(--linea); transition: stroke var(--durata); }
.f-freccia polygon, .f-ritorno polygon { fill: var(--fc); transition: fill var(--durata); }
.f-freccia > span, .f-ritorno > span {
  position: absolute;
  font-size: 11px;
  line-height: 13px;
  color: var(--tenue);
  white-space: nowrap;
  transition: color var(--durata);
}
.f-freccia > span { left: 0; right: 0; bottom: 3px; text-align: center; }

/* anello di ritorno da JavaScript al DOM */
.f-ritorno { position: absolute; }
.f-ritorno svg { left: 0; top: 0; }
/* etichetta centrata sulla linea inferiore, che resta interrotta dove c'è il testo */
.f-ritorno > span { left: 50%; top: calc(100% - var(--linea) / 2); transform: translate(-50%, calc(-50% - 1.5px)); padding: 0 5px; background: var(--pannello); }

#fr-parser.attiva { --fc: var(--c-dom); }
#fr-disegno.attiva { --fc: var(--c-pag); }
#fr-evento.attiva, #fr-js.attiva { --fc: var(--c-js); }
.attiva > span { color: var(--fc); font-weight: 600; }

@media (max-width: 560px) {
  .flusso { grid-template-columns: auto 30px auto 30px auto 30px auto; font-size: 12px; }
  .f-box { padding: 2px 7px; }
  .f-box .lungo, .f-freccia > span { display: none; }
}

/* Disposizione: tre colonne a tutta altezza */

.banco {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(280px, .85fr) minmax(340px, 1.1fr);
  gap: 6px;
  padding: 6px;
}
.colonna { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }

/* Ogni pannello prende il colore del concetto che mostra */

.pannello {
  --acc: var(--c-neutro);
  --tinta: var(--t-neutro);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color .15s;
}
.pannello.indicato { outline-color: var(--acc); }
.p-testo[data-tab="sorgente"] { --acc: var(--c-html); --tinta: var(--t-html); }
.p-testo[data-tab="serializzato"] { --acc: var(--c-dom); --tinta: var(--t-dom); }
.p-console { --acc: var(--c-js); --tinta: var(--t-js); }
.p-albero, .p-staccati, .p-scheda { --acc: var(--c-dom); --tinta: var(--t-dom); }
.p-pagina { --acc: var(--c-pag); --tinta: var(--t-pag); }

.p-testo { flex: 3; }
.p-console { flex: 2; }
.p-albero { flex: 3; }
.p-staccati { flex: 1.3; }
.p-pagina { flex: 2; }
.p-scheda { flex: 3; }

/* Intestazione: etichetta piena nell'angolo e linea del colore del concetto */

.testa-pannello, .schede {
  display: flex;
  align-items: stretch;
  min-height: 29px;
  background: var(--tinta);
  border-bottom: 2px solid var(--acc);
}
.testa-pannello { justify-content: space-between; gap: 8px; padding-right: 8px; }
.testa-pannello > :not(h2) { align-self: center; }
.pannello h2 {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  background: var(--acc);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.interruttore { font-size: 12px; color: var(--tenue); white-space: nowrap; }

.nota { margin: 0; padding: 6px 10px; font-size: 12.5px; color: var(--tenue); }

@media (max-width: 1100px) {
  html, body { height: auto; }
  .banco { display: block; }
  .colonna { margin-bottom: 6px; }
  .p-testo { height: 460px; flex: none; }
  .p-console { height: 300px; flex: none; }
  .p-albero { height: 460px; flex: none; }
  .p-staccati { height: 220px; flex: none; }
  .p-pagina { height: 320px; flex: none; }
  .p-scheda { height: 560px; flex: none; }
}

/* Schede (tab) del primo pannello: quella aperta diventa l'etichetta */

.schede button {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0 14px;
  color: var(--tenue);
}
.schede button::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  background: var(--c-neutro);
  vertical-align: 0;
}
.schede button[data-tab="sorgente"]::before { background: var(--c-html); }
.schede button[data-tab="serializzato"]::before { background: var(--c-dom); }
.schede button:hover { color: var(--testo); background: color-mix(in srgb, var(--acc) 9%, transparent); }
.schede button[aria-selected="true"] { background: var(--acc); color: #fff; font-weight: 600; }
.schede button[aria-selected="true"]::before { background: rgba(255, 255, 255, .8); }
.tab { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tab.attiva { display: flex; }

.cm-host { flex: 1; min-height: 0; position: relative; border-top: 1px solid var(--bordo); }
.cm-host .CodeMirror { position: absolute; inset: 0; height: auto; font-family: var(--mono); font-size: 13px; }

/* Percorso */

.scelta-scenario { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--bordo); }
.scelta-scenario select { flex: 1; font: inherit; font-weight: normal; padding: 3px; }
.percorso { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; }
.percorso .intro {
  margin: 10px 0 12px;
  padding: 8px 12px;
  background: var(--t-neutro);
  border-left: 3px solid var(--c-neutro);
  border-radius: 0;
}
.percorso ol { margin: 0; padding-left: 22px; }
.percorso li { margin-bottom: 10px; padding-left: 2px; }
.percorso li::marker { color: var(--c-neutro); font-weight: 700; }
.percorso li p { margin: 0 0 4px; }
.frammento { display: flex; align-items: flex-start; gap: 6px; }
.frammento pre {
  flex: 1;
  margin: 0;
  padding: 4px 8px;
  background: #f4f6f9;
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  font: 12.5px/1.4 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.frammento button { font-size: 12px; padding: 3px 8px; white-space: nowrap; }

/* Console */

.registro { flex: 1; min-height: 0; overflow: auto; font: 12.5px/1.45 var(--mono); padding: 4px 0; }
.voce { padding: 2px 10px 2px 24px; border-bottom: 1px solid #f0f2f5; white-space: pre-wrap; word-break: break-word; position: relative; }
.voce::before { position: absolute; left: 9px; color: var(--tenue); }
.voce.comando { cursor: pointer; }
.voce.comando::before { content: "›"; color: var(--c-js); font-weight: 700; }
.voce.comando:hover { background: var(--hover); }
.voce.risultato::before { content: "←"; }
.voce.errore { color: var(--errore); background: #fdf1f0; }
.voce.errore::before { content: "✕"; color: var(--errore); }
.voce .suggerimento { display: block; color: var(--testo); font-family: system-ui, sans-serif; font-size: 12.5px; }
.voce.pagina::before { content: "≡"; }
.voce.pagina .fonte { color: var(--tenue); }
.voce.sistema { color: var(--tenue); font-family: system-ui, sans-serif; font-style: italic; }
.voce.sistema::before { content: "·"; }
.voce .nome-var { color: var(--c-documento); }

.riga-comando { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px 0 10px; border-top: 1px solid var(--bordo); }
.prompt { color: var(--c-js); font: 600 14px/22px var(--mono); }
.cm-comando { flex: 1; min-width: 0; border: 1px solid var(--bordo); border-radius: var(--r); }
.cm-comando .CodeMirror { height: auto; font-family: var(--mono); font-size: 13px; }
.cm-comando .CodeMirror-scroll { max-height: 120px; min-height: 24px; }

/* Albero */

.albero { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; font: 13px/1.5 var(--mono); }
.nodo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.nodo:hover { background: var(--hover); }
.nodo.selezionato { background: var(--sel); }
.nodo .apri { width: 14px; flex: none; text-align: center; color: var(--tenue); user-select: none; }
.nodo .etichetta { overflow: hidden; text-overflow: ellipsis; }
.nodo .tipo { margin-left: auto; padding-left: 10px; color: #9aa3ad; font-size: 11.5px; }
.nodo.t1 .nome { color: var(--c-elemento); font-weight: 600; }
.nodo .attr { color: #8a5a00; }
.nodo.t3 .etichetta { color: var(--c-testo); }
.nodo.t3.spazio .etichetta { color: #9ab79c; }
.nodo.t8 .etichetta { color: var(--c-commento); font-style: italic; }
.nodo.t9 .etichetta, .nodo.t10 .etichetta, .nodo.t11 .etichetta { color: var(--c-documento); font-weight: 600; }
.nodo.cambiato { animation: lampo 1.6s ease-out; }
@keyframes lampo { from { background: var(--cambiato); } to { background: transparent; } }

.bollino {
  display: inline-block;
  font: 600 10px/1.5 system-ui, sans-serif;
  padding: 0 4px;
  border-radius: 3px;
  vertical-align: 1px;
}
.bollino.js { background: #fbe6d3; color: var(--c-js); }
.bollino.implicito { background: #e8e8e8; color: var(--c-implicito); }

.legenda { margin: 0; padding: 5px 10px; border-top: 1px solid var(--bordo); font-size: 11.5px; color: var(--tenue); line-height: 1.8; }
.leg::before { content: "■ "; }
.leg { margin-right: 6px; }
.leg.t1::before { color: var(--c-elemento); }
.leg.t3::before { color: var(--c-testo); }
.leg.t8::before { color: var(--c-commento); }
.leg.t9::before { color: var(--c-documento); }
.legenda .bollino { margin-left: 6px; }
.conteggio { display: block; }

/* Oggetti staccati */

.staccato { margin: 4px 8px 8px; border: 1px dashed #b9c0c9; border-radius: var(--r); padding: 3px 0; }
.staccato .motivo, .staccato .riferimenti { padding: 0 8px; font: 12px/1.4 system-ui, sans-serif; color: var(--tenue); white-space: normal; }
.staccato .riferimenti.nessuno { color: var(--c-js); }
.vuoto { padding: 8px 10px; margin: 0; color: var(--tenue); font: 12.5px/1.45 system-ui, sans-serif; }

/* Pagina */

.cornice { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cornice iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.riquadro {
  position: absolute;
  pointer-events: none;
  background: rgba(31, 95, 191, .14);
  outline: 2px solid rgba(31, 95, 191, .8);
}
.riquadro span {
  position: absolute;
  left: 0;
  bottom: 100%;
  background: #1f3f73;
  color: #fff;
  font: 11px/1.5 var(--mono);
  padding: 0 5px;
  border-radius: 0;
  white-space: nowrap;
}
.riquadro.sotto span { bottom: auto; top: 100%; border-radius: 0; }
.riquadro.sel { background: none; outline: 2px dashed #1f3f73; }

/* Scheda oggetto */

.scheda { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 14px; }
.scheda-tipo { font: 600 17px/1.3 var(--mono); color: var(--c-elemento); word-break: break-all; }
.scheda-tipo.t3 { color: var(--c-testo); }
.scheda-tipo.t8 { color: var(--c-commento); }
.scheda-tipo.t9, .scheda-tipo.t10, .scheda-tipo.t11 { color: var(--c-documento); }
.scheda-catena { font: 11.5px/1.4 var(--mono); color: var(--tenue); margin-top: 2px; }
.scheda-origine {
  margin: 8px 0 6px;
  padding: 6px 10px;
  background: #f4f6f9;
  border-left: 3px solid var(--accento);
  font-size: 13px;
}
.scheda-origine.js { border-left-color: var(--c-js); }
.scheda-origine.implicito { border-left-color: var(--c-implicito); }
.scheda-stato { margin: 0 0 2px; font-size: 13px; }
.scheda-stato .no { color: var(--c-js); }
.scheda h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-dom);
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-dom) 20%, white);
}
.scheda h3 .conta { text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--tenue); }
.scheda h3 button { margin-left: auto; text-transform: none; letter-spacing: 0; }
.scheda h4 { margin: 8px 0 2px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.var {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: 8px;
  padding: 2px 4px;
  border-bottom: 1px solid #f0f2f5;
  font: 12.5px/1.5 var(--mono);
}
.var.cambiata { animation: lampo 2s ease-out; }
.var .n { color: #6b3fa0; overflow-wrap: anywhere; }
.var .n .calc { color: var(--tenue); font-size: 11px; margin-left: 3px; cursor: help; }
.var .v { overflow-wrap: anywhere; }
.val-stringa { color: #a31515; white-space: pre-wrap; }
.val-numero { color: #116644; }
.val-nullo { color: #888; }
.val-oggetto { color: var(--tenue); }
.sotto-valore { display: block; padding-left: 10px; color: var(--testo); }

.rif {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 0 5px;
  border: 1px solid #c8d6ee;
  border-radius: var(--r);
  background: #eef3fb;
  font: 12px/1.5 var(--mono);
  color: var(--c-elemento);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.rif:hover { border-color: var(--accento); }
.rif.t3 { color: var(--c-testo); border-color: #cfe3d0; background: #f0f8f0; }
.rif.t8 { color: var(--c-commento); background: #f3f3f3; border-color: #ddd; }
.rif.t9, .rif.t10, .rif.t11 { color: var(--c-documento); background: #f5eefa; border-color: #e0d0ec; }

.funz {
  display: grid;
  grid-template-columns: minmax(150px, 38%) 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 2px 4px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 12.5px;
}
.funz .f { font-family: var(--mono); color: #795e26; overflow-wrap: anywhere; }
.funz .da { display: block; font: 11px var(--mono); color: #9aa3ad; }
.funz button { font-size: 11.5px; padding: 0 7px; }
.elenco-tutte { font: 12px/1.6 var(--mono); color: var(--testo); overflow-wrap: anywhere; }
.elenco-tutte span { margin-right: 10px; display: inline-block; }

/* Evidenziazioni negli editor */

.cm-sel-tag { background: rgba(31, 95, 191, .22); border-radius: 2px; }
.cm-sel-contenuto { background: rgba(31, 95, 191, .07); }
.riga-diversa { background: var(--diverso); }