@esfaenza/dpe-builder 20.3.6 → 20.3.8

package/styles/dpe-builder.css

@@ -68,6 +68,13 @@
    */
   --dpe-not-compilable: #7c5cd6;
 
+  /*
+   * Velo della dialog modale (`::backdrop`). E' un token perche' la regola della casa e' «colori
+   * solo attraverso i token», e perche' l'ospite deve poter cambiare quanto la sua pagina resta
+   * visibile sotto la finestra.
+   */
+  --dpe-scrim: rgba(16, 18, 24, 0.55);
+
   /*
    * Colore per **famiglia** di categoria: sorgenti, trasformazioni, scritture, e cio' che il
    * compilatore non traduce in v1. La famiglia si deriva da `isSource`/`isSink`/
@@ -162,6 +169,8 @@
   --dpe-success: #63b57f;
   --dpe-info: #7ea6f0;
   --dpe-not-compilable: #a78bfa;
+  /* Su fondo scuro il velo deve pesare piu': la superficie sotto e' gia' scura. */
+  --dpe-scrim: rgba(4, 5, 8, 0.66);
   /*
    * Famiglie in tema scuro: tratto piu' chiaro e pastiglia scura. Le `-soft` chiare del tema
    * chiaro qui diventerebbero macchie luminose sulla card, cioe' l'icona pesarebbe piu' del
@@ -428,23 +437,57 @@ dpe-builder {
 
 /* ---------------------------------------------------------------------- corpo */
 
+/*
+ * Due colonne e non tre (ADR 0026): i 340px dell'ispettore vanno al canvas, che e' cio' per cui
+ * esiste un editor di DAG. Un nodo si modifica nella dialog, e tenere **entrambi** i posti
+ * significherebbe due form che scrivono gli stessi campi dello stesso nodo.
+ */
 .dpe-shell__body {
   display: grid;
   flex: 1 1 auto;
-  grid-template-columns: 210px minmax(0, 1fr) 340px;
+  grid-template-columns: 210px minmax(0, 1fr);
   min-height: 0;
   border-bottom: 1px solid var(--dpe-border, #e2e5eb);
 }
 
-.dpe-shell__palette,
-.dpe-shell__inspector {
+.dpe-shell__palette {
   min-height: 0;
   max-height: 100%;
 }
 
-.dpe-shell__inspector {
-  border-left: 1px solid var(--dpe-border, #e2e5eb);
+/*
+ * Striscia della selezione multipla: l'unico contenuto che era **solo** della colonna di destra.
+ * Neutra di proposito — selezionare tre nodi non e' un avviso — con l'avviso vero dentro, sulla
+ * `.dpe-note--warning` che gia' esiste.
+ */
+.dpe-shell__multi {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--dpe-border, #e2e5eb);
   background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font-size: 12px;
+}
+
+.dpe-shell__multi-head {
+  display: flex;
+  flex: 1 1 260px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.dpe-shell__multi .dpe-multi__names {
+  margin: 0;
+}
+
+.dpe-shell__multi .dpe-note {
+  flex: 1 1 100%;
 }
 
 /* Il canvas ha bisogno di un'altezza esplicita, e in una griglia la prende dalla riga. */
@@ -1117,13 +1160,19 @@ dpe-node-icon {
 /*
  * Stili condivisi da tutti gli ispettori. Prima erano un foglio incluso per riferimento in
  * quindici componenti — quindi quindici copie nel bundle; qui e' una copia sola.
+ *
+ * **La scala tipografica e' stata alzata una volta, qui** (ADR 0026). Queste classi — `dpe-field`,
+ * `dpe-row`, `dpe-section`, `dpe-table`, `dpe-btn`, `dpe-empty` — le usano **solo** i dodici
+ * ispettori di categoria e i due editor condivisi che includono, e il loro unico contenitore e'
+ * ora la dialog di modifica, larga fino a 1180px. Gli 11px, e i 10px delle intestazioni di
+ * tabella, erano la tipografia dei 316px della colonna laterale: quei 316px non ci sono piu'.
  */
 
 .dpe-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .dpe-field {
@@ -1134,19 +1183,20 @@ dpe-node-icon {
 
 .dpe-field__label {
   color: var(--dpe-text-muted, #6b7086);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
 }
 
 .dpe-field__hint {
   color: var(--dpe-text-subtle, #98a2b3);
-  font-size: 10px;
+  font-size: 11px;
 }
 
 /* Un rilievo del backend sul campo: si mostra sotto, non in un tooltip. */
 .dpe-field__issue {
   color: var(--dpe-error, #dc2626);
-  font-size: 10px;
+  font-size: 11px;
+  line-height: 1.45;
 }
 
 .dpe-field__issue--warning {
@@ -1164,13 +1214,13 @@ dpe-node-icon {
 .dpe-form textarea {
   box-sizing: border-box;
   width: 100%;
-  padding: 5px 7px;
+  padding: 6px 8px;
   border: 1px solid var(--dpe-border, #e2e5eb);
   border-radius: var(--dpe-radius-xs, 6px);
   background: var(--dpe-surface, #fff);
   color: var(--dpe-text, #1a1c23);
   font: inherit;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .dpe-form input:focus-visible,
@@ -1210,39 +1260,50 @@ dpe-node-icon {
   min-width: 0;
 }
 
+/*
+ * Un bottone dentro una `.dpe-row` e' un'**azione accanto a un campo**, non un campo: si dimensiona
+ * sul proprio testo. Diviso in parti uguali come gli altri figli, nella colonna larga della dialog
+ * «Rinomina» diventava un bottone da quattrocento pixel accanto a un campo da quattrocento, e i
+ * bottoni «rimuovi» delle liste altrettanto. Nei 316px della vecchia colonna non si vedeva, perche'
+ * nessuno dei due aveva spazio da sprecare.
+ */
+.dpe-row > button {
+  flex: 0 0 auto;
+}
+
 .dpe-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .dpe-table th {
-  padding: 3px 4px;
+  padding: 5px 6px;
   color: var(--dpe-text-muted, #6b7086);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 600;
   text-align: left;
 }
 
 .dpe-table td {
-  padding: 2px 4px;
+  padding: 4px 6px;
   vertical-align: top;
 }
 
 .dpe-table input,
 .dpe-table select {
-  padding: 3px 5px;
-  font-size: 11px;
+  padding: 5px 6px;
+  font-size: 12px;
 }
 
 .dpe-btn {
-  padding: 4px 9px;
+  padding: 5px 10px;
   border: 1px solid var(--dpe-border, #e2e5eb);
   border-radius: var(--dpe-radius-xs, 6px);
   background: var(--dpe-surface, #fff);
   color: var(--dpe-text, #1a1c23);
   font: inherit;
-  font-size: 11px;
+  font-size: 12px;
   cursor: pointer;
 }
 
@@ -1274,7 +1335,7 @@ dpe-node-icon {
 
 .dpe-section__title {
   margin: 0;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
@@ -1289,7 +1350,7 @@ dpe-node-icon {
   border-radius: var(--dpe-radius-xs, 6px);
   background: var(--dpe-surface-alt, #f7f8fa);
   color: var(--dpe-text-muted, #6b7086);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.45;
 }
 
@@ -1307,7 +1368,7 @@ dpe-node-icon {
 
 .dpe-empty {
   color: var(--dpe-text-subtle, #98a2b3);
-  font-size: 11px;
+  font-size: 12px;
   font-style: italic;
 }
 
@@ -1317,86 +1378,398 @@ dpe-node-icon {
   font-weight: 600;
 }
 
-/* =============================================================== ispettore */
+/* ================================================= ispettore e fatti del nodo */
+/*
+ * I due componenti che stanno nelle colonne della dialog. **Nessuno dei due dichiara
+ * `overflow`**: lo scorrimento e' della colonna che li contiene, e due contenitori annidati con
+ * `overflow-y: auto` sono il modo tipico di ritrovarsi due barre e non sapere quale scorre. Anche
+ * il `padding` e' della colonna, per la regola della casa: il posizionamento e' del contenitore.
+ *
+ * `display: block` va dichiarato: un elemento personalizzato e' `inline` per difetto, e un
+ * contenitore inline con dentro dei blocchi rende un layout che sembra rotto senza errori.
+ */
 
-dpe-node-inspector {
+dpe-node-inspector,
+dpe-node-facts {
   display: block;
-  padding: 12px;
-  overflow: auto;
 }
 
-.dpe-inspector__head {
+/*
+ * Le due liste sotto sono nate nell'ispettore. `.dpe-columns`/`.dpe-column` ora servono a
+ * `dpe-node-facts`, e `.dpe-multi__*` alla striscia della selezione multipla nel guscio: i nomi
+ * restano perche' sono cio' che rendono, non dove stanno.
+ */
+
+.dpe-columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.dpe-column {
+  padding: 2px 7px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  font-size: 11px;
+}
+
+.dpe-column--nullable {
+  border-style: dashed;
+}
+
+.dpe-multi__names {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dpe-multi__name {
+  padding: 2px 7px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 11px;
+}
+
+/* ========================================================= dialog del nodo */
+/*
+ * La finestra di modifica di un nodo: elemento `<dialog>` nativo aperto con `showModal()`
+ * (ADR 0026). Dal browser arrivano Esc, il focus trap, il fondo inerte, `::backdrop` e il top
+ * layer — cioe' **nessun `z-index`**: in tutto questo foglio ne esiste uno solo, e vale 1.
+ *
+ * Tre trappole, che costerebbero un giro di verifica ciascuna.
+ *
+ *  1. **Il foglio dell'agente utente va disfatto in modo esplicito.** `<dialog>` arriva con
+ *     `padding: 1em`, `border: solid`, `background: canvas` e `color: canvastext`, piu'
+ *     `max-width`/`max-height: calc(100% - 6px - 2em)` sulla forma modale. `color: canvastext`
+ *     **ignora il tema**: senza `color: var(--dpe-text, …)` il testo della dialog resta nero anche
+ *     sotto `data-dpe-theme="dark"`. E i due `max-*` vanno riscritti, altrimenti le misure qui
+ *     sotto non si applicano.
+ *  2. **`::backdrop` non erede i token in modo affidabile.** Storicamente non erede da nessuno; la
+ *     revisione recente della specifica lo fa eredere dall'elemento originante, con supporto
+ *     disuguale. Quindi si scrive `var(--dpe-scrim, …)` **con ripiego**: dove l'eredita' funziona
+ *     l'ospite ritematizza, dove non funziona vale il valore scritto e il risultato e' comunque
+ *     giusto.
+ *  3. **Non si stila la dialog chiusa.** Il foglio dell'agente utente le da' `display: none`; le
+ *     regole di layout valgono su `dialog[open]`, altrimenti si vince su quel `display: none` e la
+ *     finestra e' visibile all'avvio.
+ */
+
+/*
+ * Il componente non deve occupare una riga nella colonna flex del guscio: cio' che si vede e' la
+ * dialog, e la dialog vive nel top layer.
+ */
+dpe-node-dialog {
+  display: contents;
+}
+
+.dpe-dialog {
+  /* Le misure: **altezza fissa**, non `max-height`. Con l'altezza automatica la finestra si
+     ridimensiona quando si aggiunge una riga di mappatura o cambia `transformType`, e il contenuto
+     si sposta sotto il puntatore mentre si lavora. I due `max-*` ripetono le stesse misure solo per
+     disfare quelli del foglio dell'agente utente. */
+  box-sizing: border-box;
+  width: min(1180px, 92vw);
+  max-width: min(1180px, 92vw);
+  height: min(760px, 88vh);
+  max-height: min(760px, 88vh);
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--dpe-border-strong, #cfd4de);
+  border-radius: var(--dpe-radius-lg, 12px);
+  background: var(--dpe-surface, #fff);
+  /* Senza questa riga il testo resta `canvastext` e il tema scuro non lo raggiunge. */
+  color: var(--dpe-text, #1a1c23);
+  box-shadow: var(--dpe-shadow-lg, 0 18px 44px rgb(16 24 40 / 18%));
+  font: inherit;
+  /* Lo scorrimento sta sulle due colonne interne, **mai** sulla dialog. */
+  overflow: hidden;
+  /*
+   * Contenitore della container query che impila le colonne (in fondo al blocco).
+   *
+   * Sta qui e **non** su `.dpe-dialog__body`, e non e' un dettaglio: una container query non puo'
+   * stilare il **proprio** contenitore, solo i suoi discendenti. Con `container-type` sul corpo la
+   * regola `@container` che cambia `grid-template-columns` del corpo non si applicava mai —
+   * misurato: a 800px di finestra il corpo restava a due colonne, senza nessun errore. La
+   * larghezza che decide resta quella del corpo, perche' il corpo riempie la dialog.
+   */
+  container-type: inline-size;
+}
+
+.dpe-dialog::backdrop {
+  background: var(--dpe-scrim, rgba(16, 18, 24, 0.55));
+}
+
+/* Layout solo sull'elemento **aperto**: vedi la trappola 3. */
+.dpe-dialog[open] {
   display: flex;
+  flex-direction: column;
+}
+
+/* ------------------------------------------------------------------ testata */
+
+.dpe-dialog__head {
+  display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface, #fff);
 }
 
 /* Pastiglia identica a quella della palette e della card: stessa misura, stessi token. */
-.dpe-inspector__icon {
+.dpe-dialog__icon {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   border-radius: var(--dpe-radius-sm, 8px);
   background: var(--dpe-cat-soft, #eef0f4);
   color: var(--dpe-cat, #6b7086);
 }
 
-.dpe-inspector__name {
-  flex: 1 1 auto;
+.dpe-dialog__label {
   overflow: hidden;
   min-width: 0;
+  color: var(--dpe-text, #1a1c23);
+  font-size: 15px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.dpe-inspector__category {
-  /* All'estremita' opposta del titolo, come prima di avere l'icona in testa. */
-  margin-left: auto;
+.dpe-dialog__category {
   flex: 0 0 auto;
   color: var(--dpe-text-muted, #6b7086);
-  font-size: 11px;
-  text-transform: uppercase;
+  font-size: 12px;
   letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-.dpe-columns {
+/* Nome tecnico: e' la chiave con cui i nodi a valle si riferiscono a questo, quindi monospaziato. */
+.dpe-dialog__name {
+  flex: 0 1 auto;
+  overflow: hidden;
+  /* `margin-left: auto` lo spinge a destra, accanto al comando di chiusura. */
+  margin-left: auto;
+  color: var(--dpe-text-muted, #6b7086);
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* -------------------------------------------------------------------- corpo */
+
+/*
+ * Due colonne: i campi a sinistra, i fatti dal backend a destra. `min-height: 0` non e' rumore —
+ * senza, un figlio flex non scende sotto il proprio contenuto e il fondo del form viene tagliato
+ * **senza** barra di scorrimento (la stessa lezione gia' pagata sul pannello inferiore).
+ *
+ * L'impilamento sotto i 900px lo decide una **container query** e non una media query, perche' cio'
+ * che conta e' la larghezza del contenitore e non quella della finestra del browser: e' la
+ * dipendenza vera, e dichiararla e' gratis adesso e costosa dopo. Il `container-type` sta sulla
+ * dialog — vedi il commento la' sopra, e' l'unico posto dove funziona.
+ */
+.dpe-dialog__body {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  min-height: 0;
+}
+
+/*
+ * Le due colonne che scorrono **nella modalita' affiancata**. Chi scorre sta scritto qui, una volta,
+ * perche' e' la riga che si sbaglia:
+ *
+ *  - **affiancate** (corpo oltre 900px): scorrono `.dpe-dialog__main` e `.dpe-dialog__side`, una per
+ *    conto proprio, e il corpo **non** scorre;
+ *  - **impilate** (corpo fino a 900px): scorre **il corpo**, e le due aree tornano ad altezza
+ *    automatica. Vedi la container query in fondo al blocco.
+ *
+ * Le due modalita' sono **mutuamente esclusive**, non sovrapposte: due contenitori annidati con
+ * `overflow-y: auto` danno due barre e nessuno sa quale scorre — nel progetto di riferimento il
+ * commento che lo dichiarava nominava perfino il contenitore sbagliato.
+ *
+ * Nessuno scorrimento annidato dentro le colonne: `dpe-node-inspector` e `dpe-node-facts` non
+ * dichiarano `overflow`.
+ *
+ * `scrollbar-gutter: stable`: senza, la comparsa della barra stringe la colonna, il contenuto che
+ * dipende dalla larghezza rientra sotto la soglia, la barra sparisce, e il ciclo non finisce.
+ * `overscroll-behavior: contain`: la rotella a fondo corsa non deve proseguire nel canvas, che
+ * sotto **zooma**.
+ *
+ * **Guardia per il futuro**: il giorno in cui un ispettore introducesse una tendina scritta a mano
+ * (`position: absolute`), quella tendina non potrebbe stare qui dentro — verrebbe tagliata in
+ * silenzio. Oggi non e' un problema perche' gli elenchi sono `<select>` e `<datalist>` **nativi**,
+ * che il browser rende fuori dal layout e che nessun `overflow` puo' tagliare.
+ */
+.dpe-dialog__main,
+.dpe-dialog__side {
+  min-width: 0;
+  min-height: 0;
+  padding: 14px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.dpe-dialog__side {
   display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
+  flex-direction: column;
+  gap: 10px;
+  border-left: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface-alt, #f7f8fa);
 }
 
-.dpe-column {
+/*
+ * La pastiglia «non compilabile» (**I10**) in testa alla colonna dei fatti.
+ *
+ * Le regole di `.dpe-badge` esistono gia', ma **dichiarano la specificita' che serve a battere
+ * @foblex/flow** (`dpe-canvas .dpe-flow .dpe-badge`): fuori dal canvas non arrivano, e riusare la
+ * classe senza questa regola darebbe una pastiglia senza pastiglia — testo nudo, nessun errore e
+ * nessun modo di accorgersene se non guardando. Stessi token del badge sulla card, cosi' i due
+ * posti dicono la stessa cosa con lo stesso aspetto invece di divergere.
+ */
+dpe-node-facts .dpe-badge {
+  display: inline-block;
+  margin-right: 6px;
   padding: 1px 6px;
   border: 1px solid var(--dpe-border, #e2e5eb);
   border-radius: 999px;
-  background: var(--dpe-surface-alt, #f7f8fa);
-  font-size: 10px;
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  white-space: nowrap;
 }
 
-.dpe-column--nullable {
-  border-style: dashed;
+dpe-node-facts .dpe-badge--not-compilable {
+  border-color: var(--dpe-not-compilable, #7c5cd6);
+  color: var(--dpe-not-compilable, #7c5cd6);
 }
 
-.dpe-multi__names {
+/*
+ * Sotto i 900px di **corpo** le colonne si impilano, i fatti sotto i campi — e **lo scorrimento
+ * diventa uno solo**, quello del corpo. Si scorre una volta, dal primo campo fino ai rilievi in
+ * fondo.
+ *
+ * Perche' l'altezza non si ripartisce fra le due righe: ripartendola (`1.6fr` / `1fr`) su una
+ * finestra alta 760px il form riceveva **399px** e i fatti in sola lettura se ne prendevano **249**
+ * — misurato, con la mappatura dei campi visibile per **una riga sola** e due rilievi con spazio in
+ * abbondanza sotto. E su un nodo con sei rilievi il form si stringeva ancora: e' lo stesso muro di
+ * avvisi che mettere i fatti **di fianco** evita, rientrato dalla porta di servizio. Con righe
+ * dimensionate sul contenuto nessuna delle due cede altezza all'altra, e cio' che non entra si
+ * raggiunge scorrendo.
+ *
+ * `scrollbar-gutter` e `overscroll-behavior` si spostano **qui**, sul contenitore che scorre in
+ * questa modalita'. Sulle due aree diventano inerti da se', perche' non sono piu' contenitori
+ * scorrevoli: non serve annullarle.
+ *
+ * L'ordine conta. Queste regole hanno la **stessa** specificita' di quelle sopra — una container
+ * query non ne aggiunge — quindi devono stare dopo. Spostare questo blocco piu' in alto rimette due
+ * `overflow: auto` annidati senza che niente lo segnali.
+ */
+@container (max-width: 900px) {
+  /*
+   * **Colonna flex, non griglia.** Con `grid-template-rows: auto auto` Chrome ha compresso la prima
+   * riga allo spazio che restava — misurato: **479px per un contenuto di 1026** — e il form, ormai
+   * con `overflow: visible`, dipingeva **sopra** la colonna dei fatti. Non un taglio: due testi
+   * sovrapposti. In colonna flex con `flex: 0 0 auto` l'altezza di ciascuna area **e'** il proprio
+   * contenuto e non c'e' niente da ripartire; cio' che eccede lo scorre il corpo.
+   */
+  .dpe-dialog__body {
+    display: flex;
+    flex-direction: column;
+    /* `min-height: 0` resta dichiarato sopra: senza, questo contenitore non scende sotto il proprio
+       contenuto e il fondo viene tagliato **senza** barra di scorrimento. */
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  .dpe-dialog__main,
+  .dpe-dialog__side {
+    /* `0 0 auto`: base sul contenuto, e **nessuna** compressione. E' la riga che tiene separate le
+       due aree. */
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .dpe-dialog__side {
+    border-top: 1px solid var(--dpe-border, #e2e5eb);
+    border-left: 0;
+  }
+}
+
+/* --------------------------------------------------------------------- piede */
+
+.dpe-dialog__foot {
   display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 8px 0;
-  padding: 0;
-  list-style: none;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface-alt, #f7f8fa);
 }
 
-.dpe-multi__name {
-  padding: 1px 6px;
-  border: 1px solid var(--dpe-border, #e2e5eb);
-  border-radius: 999px;
+/*
+ * La nota che dice come si torna indietro. E' obbligatoria, non decorativa: le modifiche sono gia'
+ * nel documento e **chiudere non annulla**, quindi l'unico modo di disfare e' ↶ nella barra.
+ */
+.dpe-dialog__note {
+  flex: 1 1 auto;
+  margin: 0;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+/*
+ * I comandi della finestra hanno una classe propria e non `.dpe-btn`: `.dpe-btn` e' degli
+ * ispettori, ed e' l'insieme di classi su cui l'ADR 0026 ha alzato la scala tipografica proprio
+ * perche' lo usano **solo** loro. Riusarla qui renderebbe falsa quell'affermazione al primo
+ * ritocco.
+ */
+.dpe-dialog__btn {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border: 1px solid var(--dpe-border-strong, #cfd4de);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.dpe-dialog__btn:hover {
   background: var(--dpe-surface-alt, #f7f8fa);
-  font-family: var(--dpe-font-mono, monospace);
-  font-size: 10px;
+}
+
+.dpe-dialog__btn:focus-visible {
+  outline: 2px solid var(--dpe-accent, #2f7d8f);
+  outline-offset: 1px;
+}
+
+.dpe-dialog__btn--icon {
+  padding: 4px 9px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 13px;
+}
+
+.dpe-dialog__btn--danger:hover {
+  border-color: var(--dpe-error, #dc2626);
+  color: var(--dpe-error, #dc2626);
 }
 
 /* ============================================================ diagnostiche */