/* =============================================================================
   Base & Lid — "Upload your artwork": la veste
   -----------------------------------------------------------------------------
   Solo gettoni di scatole-officina-00-fondamenta.css. I ripieghi fra parentesi
   tengono in piedi la finestra anche se quel foglio non c'e' (fuori dal
   cancello, o se un domani l'interruttore lo spegne).

   I CONTRASTI, MISURATI SUL SERIO
   Ogni accoppiata usata qui sotto e' stata calcolata con la formula WCAG 2.1
   (luminanza relativa, non "a occhio"). Il registro:

     inchiostro          su bianco   su --sc-carta  su --sc-mar-velo
     --sc-ink            18,90       18,08          16,73     AAA
     --sc-ink-2           9,42        9,02           8,34     AAA
     --sc-ink-4           5,48        5,24           4,85     AA
     --sc-mar-testo       5,88        5,63           5,21     AA
     --sc-urg             6,01        5,75           5,32     AA
     bianco su --sc-mar-scuro  8,38                            AAA
     bianco su --sc-mar        3,94   -> BOCCIATO sotto i 19px

   Da cui la regola che governa tutti i pulsanti pieni di questo foglio:
   **il pieno e' --sc-mar-scuro, mai --sc-mar.** Il petrolio chiaro qui fa solo
   bordi e tratti di disegno, dove la soglia e' 3:1 e 3,94 basta.

   E i bordi dei comandi: --sc-linea-2 su bianco fa 1,31:1. Va benissimo per
   separare due zone, NON per delimitare un pulsante — sotto i 3:1 il comando
   non si distingue dal fondo. Quindi ogni cosa cliccabile qui ha bordo
   --sc-ink-4 (5,48:1) oppure un fondo pieno.

   IL TEMA RIDIPINGE I BOTTONI
   Porto ed Elementor colorano i <button> di blu notte con !important. Non si
   puo' vincere senza un !important mirato: sta SOLO su `background` e `color`,
   solo dentro `.bla` e `.bla-scheda`, e non tocca nient'altro. Stessa cura di
   scatole-bl-3d.css.

   -----------------------------------------------------------------------------
   LA DENSITA' (rifacimento del 24 agosto)
   -----------------------------------------------------------------------------
   Il difetto che questo foglio corregge non e' il colore: e' l'ARIA. La vecchia
   finestra era un rettangolo di 1380×880 sospeso in mezzo alla pagina, con tre
   colonne larghe e poche parole dentro. Un editor vero occupa tutto lo schermo
   e mette in vista, senza aprire niente, quello che serve per decidere: quanto
   e' grande la faccia, dove sta nel foglio disteso, se il file e' stampabile,
   che inchiostro esce dalla macchina.

   Le tre leve della densita', prese dal LAB di sagomato e misurate:
     1. corpo piccolo, peso alto — le micro-etichette stanno a 9-10,5 px ma
        MAI sotto peso 600, con lettere spaziate: si leggono come tipografia da
        pannello tecnico, non come testo rimpicciolito;
     2. gap piccoli rispetto ai bersagli — le righe si separano con un bordo,
        non con dieci pixel di vuoto;
     3. niente ombre dentro le zone dense. Le ombre restano ai tre pannelli che
        galleggiano davvero (avvisi, anteprima tecnica, lastra).
   ========================================================================== */

.bla, .bla-scheda {
  --i:    var(--sc-ink, #0F1115);
  --i2:   var(--sc-ink-2, #3F4750);
  --i3:   var(--sc-ink-3, #616A75);
  --i4:   var(--sc-ink-4, #616A76);
  --li:   var(--sc-linea, #ECEEF1);
  --li2:  var(--sc-linea-2, #DDE1E6);
  --inc:  var(--sc-incasso, #F4F6F7);
  --car:  var(--sc-carta, #FAFAF8);
  --mar:  var(--sc-mar, #2F8C98);
  --mart: var(--sc-mar-testo, #226E78);
  --mars: var(--sc-mar-scuro, #1A555E);
  --marv: var(--sc-mar-velo, #E9F3F4);
  --urg:  var(--sc-urg, #C41239);
  --urgf: var(--sc-urg-fondo, #FDF0F3);
  --ok:   var(--sc-ok, #10704F);
  --okf:  var(--sc-ok-fondo, #EAF6F1);
  --r:    var(--sc-r, 12px);
  --mono: var(--sc-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --disp: var(--sc-disp, Lato, "Helvetica Neue", Arial, sans-serif);
  --testo: var(--sc-testo, Poppins, system-ui, -apple-system, sans-serif);
  font-family: var(--testo);

  /* Le misure dello scheletro, in un posto solo. Cambiare qui cambia tutto:
     e' il motivo per cui non sono scritte a mano in venti regole. */
  --alta:   clamp(60px, 4.6vw, 72px);    /* barra in alto */
  --bassa:  58px;                        /* barra in basso */
  --ferri:  clamp(154px, 11.4vw, 176px); /* colonna strumenti */
  --gaveta: clamp(228px, 18vw, 262px);   /* cassetto del ferro scelto */
  --dritta: clamp(298px, 23.5vw, 352px); /* pannello proprieta' */
  --schede: 54px;                        /* schede delle facce */

  /* --- LA SCALA LEGGIBILE (25 agosto) ------------------------------------
     I corpi non stanno piu' scritti a mano in novanta regole: stanno qui, e
     qui si cambiano. Pavimento 12px, peso minimo 600. Sotto quelle due soglie
     questo pannello si leggeva solo su un monitor grande e da vicino — che e'
     esattamente il difetto segnalato.

     PERCHE' LE ETICHETTE NON SONO PIU' MONOSPAZIATE
     Misurato in questo browser, non stimato: "IBM Plex Mono" non e' MAI stato
     caricato dal sito. Nessun @font-face, nessun collegamento a un servizio di
     caratteri: il nome sta scritto in dieci fogli e non corrisponde a niente.
     Ogni etichetta finiva quindi nel monospaziato di sistema — DejaVu Sans
     Mono su Linux, Consolas su Windows, SF Mono su Mac: tre disegni diversi,
     nessuno dei tre scelto da noi, tutti con metriche diverse da quelle su cui
     era stata tarata questa scala.
     E a parita' di corpo il monospaziato costa il 15% di larghezza in piu' su
     una parola breve e il 24% su una frase italiana (misurato con
     measureText sulle tre famiglie del sito). Quella larghezza in eccesso e'
     precisamente cio' che aveva schiacciato le etichette a 8 px: non c'era
     posto per farle piu' grandi.
     Quindi il monospaziato resta dove serve davvero — misure, quote, numeri
     che devono incolonnarsi e confrontarsi a colpo d'occhio — e lascia il
     posto a Lato per le etichette e a Poppins per la prosa. Stessa larghezza
     di prima, tre punti di corpo in piu'.

     ATTENZIONE: --et e --testo NON sono intercambiabili. Lato ha l'altezza
     della x piu' bassa delle tre (0,52) e la maiuscola piu' alta (0,73):
     e' il carattere giusto per il MAIUSCOLETTO e quello sbagliato per una
     frase. Poppins ha la x piu' alta (0,57): il contrario. */
  --et:     var(--disp);    /* etichette in maiuscoletto: Lato */
  --t-et:   12px;           /* micro-etichetta maiuscola: il pavimento */
  --t-cmd:  13px;           /* comandi: pulsanti, ferri, schede, viste */
  --t-val:  13.5px;         /* letture e valori: questi restano monospaziati */
  --t-txt:  14px;           /* prosa, note, avvisi */
  --t-tit:  15.5px;         /* titoli di pannello */
  --ls-et:  .07em;          /* spaziatura del maiuscoletto. Era fino a .16em:
                               una parola di dieci lettere costava mezzo
                               centimetro di colonna senza leggersi meglio.
                               A corpo piu' grande serve meno spaziatura, non
                               di piu' — la spaziatura compensa il corpo
                               piccolo, e qui il corpo piccolo non c'e' piu'. */
  --ls-cmd: .03em;
  --dito:   44px;           /* superficie minima di qualunque cosa si prema:
                               non e' un'aspirazione, e' misurata a fine lavoro */
}

/* `hidden` contro i nostri display: un attributo del browser (0,1,0) e una
   nostra classe (0,1,0) hanno la stessa specificita', e vince l'ultima scritta.
   Senza questa riga `.bla__editor { display: grid }` terrebbe visibile una
   schermata dichiarata nascosta. */
.bla [hidden], .bla-scheda [hidden] { display: none !important; }

/* Le icone: tratto, mai riempimento. Il colore lo decide chi le contiene. */
.bla .bla-icona {
  flex: 0 0 auto; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* =============================================================================
   I PULSANTI — una famiglia sola, tre pesi
   ========================================================================== */
.bla .bla-btn,
.bla-scheda .bla-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--dito);          /* bersaglio da dito, non da mouse */
  padding: 0 13px; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--i4);
  font: 700 var(--t-cmd)/1.2 var(--et);
  letter-spacing: var(--ls-cmd); text-transform: uppercase;
  text-shadow: none; box-shadow: none; background-image: none !important;
  transition: background-color 150ms, color 150ms, border-color 150ms, transform 150ms;
}
.bla .bla-btn--vuoto,
.bla-scheda .bla-btn--vuoto { background: #fff !important; color: var(--i2) !important; }
.bla .bla-btn--vuoto:hover,
.bla-scheda .bla-btn--vuoto:hover {
  background: var(--marv) !important; color: var(--mart) !important; border-color: var(--mar);
}
/* Pieno = --sc-mar-scuro. Con --sc-mar sarebbe 3,94:1: bocciato a 10,5px. */
.bla .bla-btn--pieno,
.bla-scheda .bla-btn--pieno {
  background: var(--mars) !important; color: #fff !important; border-color: var(--mars);
}
.bla .bla-btn--pieno:hover:not(:disabled),
.bla-scheda .bla-btn--pieno:hover:not(:disabled) { transform: translateY(-1px); }
.bla .bla-btn--rosso { background: #fff !important; color: var(--urg) !important; border-color: var(--urg); }
.bla .bla-btn--rosso:hover { background: var(--urgf) !important; }
.bla .bla-btn--largo, .bla-scheda .bla-btn--largo { width: 100%; }
.bla .bla-btn:disabled, .bla-scheda .bla-btn:disabled {
  background: var(--inc) !important; color: var(--i4) !important;
  border-color: var(--li2); cursor: not-allowed; transform: none;
}
.bla .bla-btn[aria-pressed="true"] {
  background: var(--mars) !important; color: #fff !important; border-color: var(--mars);
}

/* Il pulsante tondo: annulla, ripeti, chiudi pannellino. Bersaglio 36, bordo
   visibile, nessun testo. */
.bla .bla-tondo {
  flex: 0 0 auto; width: var(--dito); height: var(--dito); padding: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  background: #fff !important; color: var(--i2) !important;
  border: 1px solid var(--i4); border-radius: 9px;
  box-shadow: none; background-image: none !important;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}
/* Il tondo "minuto" stava a 28 px: si vedeva ma non si prendeva col pollice.
   Adesso e' grande come gli altri e cambia solo raggio e icona — la differenza
   che aveva senso era visiva, non dimensionale. */
.bla .bla-tondo--min { width: var(--dito); height: var(--dito); border-radius: 9px; font: 700 var(--t-val)/1 var(--mono); }
.bla .bla-tondo--min .bla-icona { width: 16px; height: 16px; }
.bla .bla-tondo:hover:not(:disabled) { background: var(--marv) !important; color: var(--mart) !important; border-color: var(--mar); }
.bla .bla-tondo:disabled { background: var(--inc) !important; color: var(--i4) !important; border-color: var(--li2); cursor: not-allowed; }
.bla .bla-tondo[aria-pressed="true"] { background: var(--mars) !important; color: #fff !important; border-color: var(--mars); }

/* =============================================================================
   LA SCHEDA NELLO STUDIO (Step 2)
   Vive dentro .bl__acquisto, quindi si accontenta di poco spazio.
   ========================================================================== */
.bla-scheda {
  margin: 18px 0 16px; padding: 16px;
  background: var(--car); border: 1px solid var(--li2); border-radius: var(--r);
}
.bla-scheda__occhiello {
  margin: 0 0 6px; font: 800 var(--t-et)/1 var(--et);
  letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--mart);
}
.bla-scheda__stato { margin: 0 0 10px; font-size: var(--t-txt); line-height: 1.45; color: var(--i2); }
.bla-scheda__stato strong { color: var(--i); font-weight: 700; }
.bla-scheda.is-pronta { background: var(--marv); border-color: var(--mar); }
.bla-scheda__azioni { display: flex; gap: 8px; }
.bla-scheda__azioni .bla-btn { flex: 1 1 auto; }
.bla-scheda__nota { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--i4); }
/* I pezzi restano monospaziati: sono numeri e sigle, e incolonnati si leggono
   meglio. Il peso sale da 400 a 600 perche' a 400 il monospaziato di sistema e'
   sottile come un capello. */
.bla-scheda__pezzi { display: block; margin-top: 4px; font: 600 13px/1.45 var(--mono); color: var(--i4); }

/* =============================================================================
   LA FINESTRA — adesso occupa lo schermo
   -----------------------------------------------------------------------------
   Non e' una preferenza estetica. Un pannello sospeso al centro dice "sei in
   una parentesi, sbrigati"; un editor a tutto schermo dice "questo e' il posto
   dove si lavora". E in pratica: la fustella distesa di una scatola 250×200 su
   una tela alta 500 px si vede come un francobollo.
   ========================================================================== */
.bla {
  position: fixed; inset: 0; z-index: 100001;   /* uno sopra il 3D: se sono
     aperti tutti e due, quello aperto per ultimo e' questo */
  display: none;
}
.bla.is-aperta { display: block; }
body.bla-bloccato { overflow: hidden; }

.bla__velo { position: absolute; inset: 0; background: rgb(15 17 21 / .38); }

.bla__foglio {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: var(--alta) minmax(0, 1fr);
  width: 100%; height: 100%;
  background: #fff; overflow: hidden;
  animation: bla-entra 180ms cubic-bezier(.2, .9, .3, 1);
}
@keyframes bla-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bla__foglio { animation: none; }
  .bla * { transition: none !important; }
}

/* =============================================================================
   1. LA BARRA IN ALTO
   Tre zone: identita' + stato · le tre tappe dello Studio · i comandi globali.
   ========================================================================== */
.bla__testa {
  display: grid; align-items: center;
  /* "ALL CHANGES SAVED" e' corto; "TUTTE LE MODIFICHE SONO SALVATE" no, e a
     232 px veniva tagliato di netto. Misurato: ne chiede 243. */
  grid-template-columns: minmax(160px, 272px) minmax(0, 1fr) auto;
  gap: 14px; padding: 0 14px;
  border-bottom: 1px solid var(--li2); background: var(--car);
}

.bla__marchio { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bla__sigla {
  display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 9px; background: var(--mars); color: #fff;
  font: 900 16px/1 var(--disp);
}
.bla__marchio-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bla__marchio-t strong {
  font: 800 var(--t-cmd)/1.2 var(--disp); letter-spacing: .02em; color: var(--i);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* IL SOTTOTITOLO DEL MARCHIO NON SI DISEGNA PIU'.
   Spariva gia' sotto i 1080 px senza che mancasse a nessuno: ripete in
   maiuscoletto quello che c'e' scritto sopra a lettere grandi. Toglierlo
   libera una riga intera nella barra, ed e' quella riga a pagare il corpo piu'
   grande del nome e dello stato senza far crescere la barra di un pixel.
   Resta nel markup per chi legge con lo screen reader. */
.bla__marchio-t small {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Lo stato del salvataggio. Verde solo quando e' davvero salvato: durante la
   chiamata resta neutro, e se fallisce diventa rosso. Un "salvato" ottimista
   e' una bugia che si scopre al carrello. */
.bla__salvato {
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
  font: 700 var(--t-et)/1.2 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--ok); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bla__salvato .bla-icona { width: 13px; height: 13px; stroke-width: 1.8; }
.bla__salvato.e-corso { color: var(--i4); }
.bla__salvato.e-guasto { color: var(--urg); }

/* --- le tre tappe --------------------------------------------------------- */
.bla-tappe {
  list-style: none; margin: 0; padding: 3px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  background: #fff; border: 1px solid var(--li2); border-radius: 10px;
  max-width: 620px;
}
.bla-tappa {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center;
  gap: 7px; padding: 4px 9px; border-radius: 7px; min-width: 0;
}
.bla-tappa i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--i4); font: 800 var(--t-et)/1 var(--et); font-style: normal; color: var(--i4);
}
.bla-tappa span { display: flex; flex-direction: column; min-width: 0; }
.bla-tappa strong {
  font: 800 var(--t-cmd)/1.2 var(--et); letter-spacing: var(--ls-cmd); text-transform: uppercase; color: var(--i2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bla-tappa small {
  font: 600 var(--t-et)/1.25 var(--testo); color: var(--i4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bla-tappa.is-fatta i { border-color: var(--ok); color: var(--ok); background: var(--okf); }
.bla-tappa.is-viva { background: var(--marv); box-shadow: inset 0 -2px 0 var(--mars); }
.bla-tappa.is-viva i { border-color: var(--mars); background: var(--mars); color: #fff; }
.bla-tappa.is-viva strong { color: var(--mart); }

/* --- i comandi globali ---------------------------------------------------- */
.bla__testa-azioni { display: flex; align-items: center; gap: 6px; }

.bla .bla-tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--dito); min-width: var(--dito);   /* senza etichetta resta un
     quadrato da 44, non una fessura da 37: misurato sotto i 1560 px */
  padding: 0 12px; cursor: pointer; white-space: nowrap;
  background: #fff !important; color: var(--i2) !important;
  border: 1px solid var(--i4); border-radius: 9px;
  font: 700 var(--t-cmd)/1 var(--et); letter-spacing: var(--ls-cmd); text-transform: uppercase;
  box-shadow: none; background-image: none !important;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}
.bla .bla-tasto:hover:not(:disabled) { background: var(--marv) !important; color: var(--mart) !important; border-color: var(--mar); }
.bla .bla-tasto[aria-pressed="true"] { background: var(--mars) !important; color: #fff !important; border-color: var(--mars); }
.bla .bla-tasto--pieno { background: var(--mars) !important; color: #fff !important; border-color: var(--mars); }
.bla .bla-tasto--pieno:hover:not(:disabled) { background: var(--mart) !important; color: #fff !important; }
.bla .bla-tasto:disabled { background: var(--inc) !important; color: var(--i4) !important; border-color: var(--li2); cursor: not-allowed; }
/* Il bordo di CHIUDI resta --i4 come tutti: era piu' chiaro per "pesare meno"
   e faceva 1,26:1 sul bianco — sotto la soglia 3:1 dei contorni dei comandi.
   Misurato nel browser, non stimato. */
.bla .bla-tasto--chiudi { border-color: var(--i4); }
.bla .bla-tasto em {
  font-style: normal; padding: 2px 4px; border-radius: 4px;
  background: var(--marv); color: var(--mart);
  font: 800 var(--t-et)/1 var(--mono); letter-spacing: .04em;
}
.bla .bla-tasto--pieno em { background: rgb(255 255 255 / .22); color: #fff; }

/* La pastiglia della tecnica: l'unica cosa in barra che vale per TUTTO il
   progetto. Il pallino e' l'inchiostro vero, con un anello scuro perche' un
   bianco su fondo bianco non esiste. */
.bla .bla-pastiglia {
  display: inline-flex; align-items: center; gap: 8px; height: var(--dito);
  padding: 0 10px; margin: 0 2px; cursor: pointer; max-width: 340px;
  background: #fff !important; color: var(--i2) !important;
  border: 1px solid var(--i4); border-radius: 10px;
  box-shadow: none; background-image: none !important; text-transform: none;
}
.bla .bla-pastiglia:hover { background: var(--marv) !important; border-color: var(--mar); }
.bla-pastiglia__ic {
  display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px;
  border-radius: 7px; background: var(--inc); color: var(--mart);
}
.bla-pastiglia__t { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.bla-pastiglia__t small {
  font: 700 var(--t-et)/1.2 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-pastiglia__t strong {
  font: 800 var(--t-cmd)/1.2 var(--disp); color: var(--i);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 172px;
}
.bla-pastiglia__b {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 3px 8px; border-radius: 999px; background: var(--inc);
  font: 800 var(--t-et)/1.2 var(--et); letter-spacing: .04em;
  text-transform: uppercase; color: var(--i2); max-width: 124px;
}
.bla-pastiglia__b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bla-pastiglia__b:empty, .bla-pastiglia__b[hidden] { display: none; }
.bla-pastiglia__tinta {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--i4); box-shadow: inset 0 0 0 1px rgb(15 17 21 / .38);
}

/* =============================================================================
   SCHERMATA 1 — LA SCELTA DELLA TECNICA
   ========================================================================== */
.bla__scelta {
  overflow-y: auto; padding: 26px 22px 34px; background: var(--car);
  display: grid; align-content: center;   /* su un monitor alto le tre carte
     stanno al centro invece che appese in cima a mezzo schermo vuoto */
}
.bla__scelta-dentro { max-width: 1180px; margin: 0 auto; }
.bla__scelta h2 {
  margin: 0 0 20px; font-family: var(--disp); font-weight: 900;
  font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.15;
  letter-spacing: -.02em; color: var(--i); text-transform: none; text-align: center;
}
.bla__carte {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}
.bla-carta {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--i4); border-radius: var(--r);
  overflow: hidden; transition: border-color 150ms, box-shadow 150ms;
}
.bla-carta.is-scelta { border-color: var(--mar); border-width: 2px; box-shadow: 0 0 0 4px var(--marv); }
.bla-carta__testa {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 18px 16px 48px; position: relative;
  background: #fff !important; color: var(--i2) !important;
  border: 0; border-bottom: 1px solid var(--li);
  font-family: inherit; text-transform: none; letter-spacing: normal;
}
.bla-carta.is-scelta .bla-carta__testa { background: var(--marv) !important; }
.bla-carta__testa:hover { background: var(--marv) !important; }
/* La spunta: lo stato "scelto" non puo' dipendere dal solo colore. */
.bla-carta__spunta {
  position: absolute; left: 16px; top: 19px; width: 20px; height: 20px;
  border: 2px solid var(--i4); border-radius: 50%;
}
.bla-carta.is-scelta .bla-carta__spunta { border-color: var(--mars); background: var(--mars); }
.bla-carta.is-scelta .bla-carta__spunta::after {
  content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.bla-carta__nome {
  display: block; font-family: var(--disp); font-weight: 900;
  font-size: 1.06rem; line-height: 1.2; letter-spacing: -.01em; color: var(--i);
}
.bla-carta__claim { display: block; margin-top: 6px; font-size: var(--t-txt); line-height: 1.45; color: var(--i2); }
.bla-carta__corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.bla-carta__buono { margin: 0; font-size: var(--t-txt); line-height: 1.45; color: var(--i2); }
.bla-carta__file {
  /* "Vector SVG or PDF, one colour": una frase, non un codice. Poppins. */
  margin: 0; font: 600 13.5px/1.45 var(--testo); color: var(--i2);
  padding: 9px 11px; background: var(--inc); border-radius: 8px;
}
.bla-carta__file span {
  display: block; font: 800 var(--t-et)/1.3 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--i4); margin-bottom: 3px;
}
.bla-carta__nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--i4); }
.bla-carta__opz { margin: 0; padding: 0; border: 0; }
.bla-carta__opz legend {
  padding: 0; margin-bottom: 8px; font: 800 var(--t-et)/1 var(--et);
  letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-campioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bla-campioni--fitti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bla-campione {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: var(--dito);          /* e' un bersaglio, non una didascalia */
  padding: 7px 8px; border: 1px solid var(--li2); border-radius: 8px;
  transition: border-color 140ms, background-color 140ms;
}
.bla-campioni--fitti .bla-campione { flex-direction: column; gap: 5px; padding: 7px 4px; text-align: center; }
.bla-campione:hover { border-color: var(--mar); background: var(--marv); }
.bla-campione input { position: absolute; opacity: 0; width: 0; height: 0; }
.bla-campione:has(input:checked) { border-color: var(--mars); border-width: 2px; padding: 6px 7px; background: var(--marv); }
.bla-campioni--fitti .bla-campione:has(input:checked) { padding: 6px 3px; }
.bla-campione input:focus-visible ~ .bla-campione__tinta { outline: 2px solid var(--mart); outline-offset: 2px; }
.bla-campione__tinta {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; background: var(--tinta);
  /* Un anello scuro sempre: un campione bianco su fondo bianco non esiste. */
  box-shadow: inset 0 0 0 1px rgb(15 17 21 / .38);
}
.bla-campione__nome { font: 700 var(--t-cmd)/1.25 var(--et); color: var(--i2); }
.bla-campione:has(input:checked) .bla-campione__nome { color: var(--i); font-weight: 700; }
.bla__piede-nota {
  max-width: 62ch; margin: 16px auto 0; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--i4);
}

/* =============================================================================
   SCHERMATA 2 — L'EDITOR: quattro colonne
   ferri · cassetto (solo quando serve) · tela · proprieta'
   ========================================================================== */
.bla__editor {
  display: grid; min-height: 0;
  grid-template-columns: var(--ferri) 0 minmax(0, 1fr) var(--dritta);
  transition: grid-template-columns 180ms var(--sc-curva, ease);
}
.bla__editor.e-gaveta { grid-template-columns: var(--ferri) var(--gaveta) minmax(0, 1fr) var(--dritta); }

/* Le colonne si dichiarano a mano, e NON e' pedanteria: il cassetto chiuso e'
   `display:none`, quindi sparisce dalla griglia. Senza queste quattro righe la
   tela scivolerebbe nella colonna da 0 px e il pannello destro in quella della
   tela — cioe' l'editor si spezzerebbe ogni volta che si chiude un cassetto. */
.bla-rail     { grid-column: 1; }
.bla-gaveta   { grid-column: 2; }
.bla__scena   { grid-column: 3; }
.bla__comandi { grid-column: 4; }

/* Il lampo che accompagna "Allinea" e "Copia to" dalla colonna dei ferri al
   blocco giusto del pannello di destra. Dura poco e non muove niente. */
@keyframes bla-lampo {
  0%, 100% { box-shadow: 0 0 0 0 rgb(47 140 152 / 0); }
  25%      { box-shadow: 0 0 0 4px var(--marv); }
}
.bla .e-lampo { animation: bla-lampo 900ms ease-out 2; border-radius: 10px; }

/* Quando si apre il 3D — che sta a z-index 100000, sotto di noi — l'editor si
   mette dietro invece di coprirlo. Torna avanti da solo alla chiusura. */
.bla.is-dietro { z-index: 99990; }

/* --- 2. LA COLONNA DEI FERRI ---------------------------------------------- */
.bla-rail {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 7px 14px; overflow-y: auto; scrollbar-width: thin;
  background: var(--car); border-right: 1px solid var(--li2);
}
.bla-rail__et {
  margin: 9px 0 3px; padding-left: 7px;
  font: 800 var(--t-et)/1 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--i4);
}
.bla-rail__et:first-child { margin-top: 2px; }

.bla .bla-ferro {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--dito); padding: 0 8px; cursor: pointer;
  background: transparent !important; color: var(--i2) !important;
  border: 1px solid transparent; border-radius: 8px;
  font: 700 var(--t-cmd)/1.15 var(--et); letter-spacing: var(--ls-cmd);
  text-transform: uppercase; text-align: left;
  box-shadow: none; background-image: none !important;
  transition: background-color 130ms, color 130ms;
}
.bla .bla-ferro > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bla .bla-ferro:hover { background: #fff !important; color: var(--mart) !important; border-color: var(--li2); }
/* Due stati diversi, e la differenza conta: `is-viva` e' il ferro che sto
   usando (barretta a sinistra), `aria-pressed` e' un interruttore acceso
   (pallino a destra). Confonderli fa sembrare "griglia accesa" la stessa cosa
   di "sto disegnando una griglia". */
.bla .bla-ferro.is-viva {
  background: var(--marv) !important; color: var(--mart) !important; border-color: var(--mar);
}
.bla .bla-ferro.is-viva::before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--mars);
}
.bla .bla-ferro[aria-pressed="true"]::after {
  content: ""; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mars); box-shadow: 0 0 0 3px var(--marv);
}
.bla .bla-ferro[aria-pressed="true"] > span { padding-right: 12px; }

/* --- IL CASSETTO ----------------------------------------------------------- */
.bla-gaveta {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border-right: 1px solid var(--li2);
}
.bla-gaveta__testa {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 10px 9px 13px; border-bottom: 1px solid var(--li);
}
.bla-gaveta__testa strong {
  font: 800 var(--t-cmd)/1.2 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--i);
}
.bla-gaveta__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 13px 18px; }
.bla-gav { display: flex; flex-direction: column; gap: 10px; }
/* Nota discorsiva: Poppins. Il monospaziato serve a incolonnare i numeri, non
   a spiegare le cose — e a 400 di peso spariva. */
.bla-gav__nota { margin: 0; font: 600 13.5px/1.45 var(--testo); color: var(--i4); }
.bla-gav__nota b { color: var(--i2); font-weight: 700; }
.bla-gav__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bla-gav__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Le righe dato: etichetta a sinistra, valore a destra, separate da un bordo e
   non da uno spazio vuoto. E' la leva numero due della densita'. */
.bla-dati { margin: 0; display: flex; flex-direction: column; }
.bla-dati > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--li);
}
.bla-dati > div:last-child { border-bottom: 0; }
.bla-dati dt {
  font: 800 var(--t-et)/1.3 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--i4); flex: 0 0 auto;
}
/* Il VALORE resta monospaziato, ed e' voluto: "155 × 125 mm" sopra
   "155 × 40 mm" si confrontano a colpo d'occhio solo se le cifre stanno
   incolonnate. E' l'unico mestiere per cui quel carattere e' il migliore. */
.bla-dati dd {
  margin: 0; text-align: right; font: 700 var(--t-val)/1.35 var(--mono); color: var(--i);
}
.bla-dati--tasti dd { font-weight: 600; color: var(--i2); }
/* Il riassunto della faccia: sta nel pannello di destra quando non c'e' niente
   di selezionato, cioe' quando quel pannello sarebbe altrimenti vuoto. */
.bla-dati--faccia { padding: 2px 10px; background: #fff; border: 1px solid var(--li2); border-radius: 10px; }

/* --- 3. LA SCENA ----------------------------------------------------------- */
.bla__scena {
  position: relative; display: grid; min-width: 0; min-height: 0;
  /* QUATTRO RIGHE, NON TRE — 05/09/2026. La prima e' per il selettore dei
     pezzi (`.bla-tavole`), che esiste solo sulle scatole a piu' tavole: dove
     non c'e', una riga di griglia senza contenuto e' alta ZERO e non si vede.
     Con tre righe il selettore, essendo un quarto figlio infilato in testa,
     faceva slittare tutto: le linguette delle superfici finivano nella riga
     elastica e diventavano alte 720 px, mangiandosi la tela. Misurato sul
     cassetto contro la calamitata (720 contro 54). */
  grid-template-rows: auto var(--schede) minmax(0, 1fr) var(--bassa);
  background: var(--inc);
}

/* Le schede delle facce: attaccate, separate da un bordo, la scelta con la
   sottolineatura interna. La miniatura resta perche' e' l'unica cosa che dice
   "questa faccia ha gia' qualcosa sopra" senza leggere. */
.bla-schede {
  display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  background: #fff; border-bottom: 1px solid var(--li2);
}
.bla-schede::-webkit-scrollbar { display: none; }
.bla .bla-scheda-f {
  position: relative; flex: 1 1 0; min-width: 150px;
  display: flex; align-items: center; gap: 8px; padding: 0 11px; cursor: pointer;
  background: #fff !important; color: var(--i2) !important;
  border: 0; border-right: 1px solid var(--li);
  border-radius: 0; text-align: left; text-transform: none; letter-spacing: normal;
  font-family: inherit; box-shadow: none; background-image: none !important;
}
.bla .bla-scheda-f:hover { background: var(--marv) !important; }
.bla .bla-scheda-f[aria-pressed="true"] {
  background: var(--marv) !important; box-shadow: inset 0 -3px 0 var(--mars);
}
.bla-scheda-f__mini {
  flex: 0 0 auto; width: 32px; height: 26px; border-radius: 4px;
  background: #fff center/contain no-repeat;
  box-shadow: inset 0 0 0 1px var(--i4);
  font: 800 var(--t-et)/26px var(--et); text-align: center; color: var(--i2);
}
.bla-scheda-f__t { display: flex; flex-direction: column; min-width: 0; }
.bla-scheda-f__n { font: 800 var(--t-cmd)/1.25 var(--disp); color: var(--i); }
.bla .bla-scheda-f[aria-pressed="true"] .bla-scheda-f__n { color: var(--mart); }
/* La misura della faccia: monospaziata, perche' e' una misura.
   MA si disegna solo sopra i 1560 px. Misurato: a 1440 la colonna del testo
   nella scheda vale 69 px e "155 × 125 mm" ne chiede 87 — si tagliava a meta'
   su tutte e cinque le schede. Una misura tagliata a meta' e' peggio di una
   misura assente, e la stessa misura sta gia', per intero, nel pannello di
   destra e nell'anteprima tecnica. */
.bla-scheda-f__m { display: none; font: 600 var(--t-et)/1.3 var(--mono); color: var(--i4); white-space: nowrap; }
@media (min-width: 1560px) { .bla-scheda-f__m { display: block; } }
.bla-scheda-f__p {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font: 800 var(--t-et)/1 var(--et); letter-spacing: .04em;
  text-transform: uppercase; color: var(--i4);
}
/* La pastiglia "2 layers / empty" costa 56 px. Sotto i 1200 quei 56 px sono la
   differenza fra un nome per intero e un nome tagliato — e la stessa cosa la
   dice gia' la miniatura, che porta scritto il numero degli elementi. */
@media (max-width: 1199px) { .bla-scheda-f__p { display: none; } }
.bla .bla-scheda-f.is-piena .bla-scheda-f__p { color: var(--ok); }

.bla__tela {
  position: relative; min-height: 0; margin: 0;
  background: #fff; overflow: hidden;
  display: grid; place-items: center;
}
.bla__tela svg { display: block; width: 100%; height: 100%; touch-action: none; }

/* Gli avvisi galleggiano in alto a sinistra sulla tela. Non spingono niente:
   se spostassero il disegno, l'elemento che si sta trascinando scapperebbe da
   sotto il dito nel momento esatto in cui esce dall'area sicura. */
.bla-avvisi {
  position: absolute; left: 14px; top: calc(var(--schede) + 12px); z-index: 6;
  display: grid; gap: 7px; max-width: min(360px, 44%); pointer-events: none;
}
.bla-avvisi:empty { display: none; }
.bla-avvisi p {
  margin: 0; padding: 9px 12px; border-radius: 9px;
  font: 600 var(--t-txt)/1.4 var(--testo); pointer-events: auto;
  box-shadow: var(--sc-ombra-2, 0 10px 24px rgb(15 17 21 / .12));
}
.bla-avvisi .e-errore { background: var(--urgf); border-left: 3px solid var(--urg); color: var(--urg); font-weight: 600; }
.bla-avvisi .e-nota   { background: #fff; border-left: 3px solid var(--mar); color: var(--i2); }
/* Gli avvisi sono l'unico testo dell'editor che appare all'improvviso mentre si
   lavora: se non si legge al primo colpo non si legge affatto. */

/* =============================================================================
   IL PANNELLO DELL'ANTEPRIMA TECNICA
   -----------------------------------------------------------------------------
   Galleggia sulla tela, si sposta col trascinamento, si riduce a striscia e si
   chiude. La posizione arriva da `left/top` in pixel scritti dal JS: durante il
   gesto pero' si scrive SOLO `transform`, perche' toccare left/top a ogni
   pointermove costa un ricalcolo di layout per fotogramma.
   ========================================================================== */
.bla-tecnico {
  position: absolute; right: 16px; top: calc(var(--schede) + 12px); z-index: 8;
  width: 324px; max-width: calc(100% - 32px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--li2); border-radius: 13px;
  box-shadow: var(--sc-ombra-3, 0 22px 48px rgb(15 17 21 / .16));
  overflow: hidden;
}
.bla-tecnico[hidden] { display: none !important; }
.bla-tecnico__testa {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 9px 9px 9px 12px; cursor: grab; touch-action: none;
  background: var(--car); border-bottom: 1px solid var(--li);
}
.bla-tecnico.is-presa .bla-tecnico__testa { cursor: grabbing; }
.bla-tecnico__titolo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bla-tecnico__titolo small {
  font: 800 var(--t-et)/1.25 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--mart);
}
.bla-tecnico__titolo strong { font: 800 var(--t-tit)/1.2 var(--disp); color: var(--i); }
.bla-tecnico__trascina { font: 600 var(--t-et)/1.25 var(--testo); color: var(--i4); }
.bla-tecnico__cmd { display: flex; gap: 4px; flex: 0 0 auto; }
.bla-tecnico__corpo { display: flex; flex-direction: column; gap: 9px; padding: 10px; }
.bla-tecnico.is-ridotta .bla-tecnico__corpo { display: none; }

.bla-tecnico__tela {
  position: relative; height: 152px; border-radius: 9px;
  background: #fff; border: 1px solid var(--li2); overflow: hidden;
}
.bla-tecnico__tela svg { display: block; width: 100%; height: 100%; }
.bla-tecnico__live {
  position: absolute; left: 7px; top: 7px;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px; background: var(--okf);
  font: 800 var(--t-et)/1.2 var(--et); letter-spacing: .04em; text-transform: uppercase; color: var(--ok);
}
.bla-tecnico__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.bla-tecnico__ora {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 8px; background: var(--inc);
}
.bla-tecnico__ora small,
.bla-tecnico__dati small {
  font: 800 var(--t-et)/1.25 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-tecnico__ora strong { font: 700 var(--t-val)/1.2 var(--mono); color: var(--i); }
.bla-tecnico__dati { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bla-tecnico__dati > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px; border-radius: 8px; background: var(--inc);
}
.bla-tecnico__dati strong { font: 700 var(--t-val)/1.25 var(--mono); color: var(--i); }
.bla-tecnico__leg {
  margin: 0; display: flex; flex-wrap: wrap; gap: 10px;
  font: 700 var(--t-et)/1.25 var(--testo); color: var(--i4);
}
.bla-tecnico__leg span { display: flex; align-items: center; gap: 4px; }
.bla-tecnico__leg i { width: 14px; height: 0; border-top-width: 1.5px; border-top-style: solid; }
.bla-tecnico__leg .e-taglio { border-color: var(--i); }
.bla-tecnico__leg .e-piega  { border-color: var(--i4); border-top-style: dashed; }
.bla-tecnico__leg .e-sicura { border-color: var(--mar); border-top-style: dashed; }
.bla-tecnico__azioni { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.bla-tecnico__azioni .bla-btn { min-height: var(--dito); font-size: var(--t-et); padding: 0 10px; }

/* =============================================================================
   5. LA BARRA IN BASSO
   Le tre letture, lo zoom, il suggerimento, la coppia di viste, lo stato.
   ========================================================================== */
.bla__fondo {
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: #fff; border-top: 1px solid var(--li2); overflow-x: auto; scrollbar-width: none;
}
.bla__fondo::-webkit-scrollbar { display: none; }
.bla-letture { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.bla-lettura {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 12px 0 0; margin-right: 12px; border-right: 1px solid var(--li);
}
.bla-lettura:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.bla-lettura small {
  font: 800 var(--t-et)/1.25 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
/* Le tre letture sono numeri che cambiano dieci volte al secondo mentre si
   trascina: monospaziate, cosi' non ballano di larghezza a ogni cifra. */
.bla-lettura strong { font: 700 var(--t-val)/1.25 var(--mono); color: var(--i); white-space: nowrap; }

.bla-zoom {
  display: flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 3px; background: #fff; border: 1px solid var(--li2); border-radius: 10px;
}
/* I comandi minuti: piccoli ma con bersaglio da 30 px e bordo visibile.
   Senza bordo non si vedono, sotto i 30 px non si prendono. */
.bla .bla-mini {
  min-width: var(--dito); height: var(--dito); padding: 0 6px; cursor: pointer;
  display: inline-grid; place-items: center;
  background: #fff !important; color: var(--i2) !important;
  border: 1px solid var(--i4); border-radius: 8px;
  font: 700 16px/1 var(--mono); letter-spacing: 0; text-transform: none;
  text-shadow: none; box-shadow: none; background-image: none !important;
}
.bla .bla-mini--largo { font: 700 var(--t-cmd)/1 var(--et); letter-spacing: var(--ls-cmd); text-transform: uppercase; padding: 0 10px; }
.bla .bla-mini:hover:not(:disabled) { background: var(--marv) !important; color: var(--mart) !important; border-color: var(--mar); }
.bla .bla-mini[aria-pressed="true"] { background: var(--mars) !important; color: #fff !important; border-color: var(--mars); }
.bla .bla-mini:disabled { background: var(--inc) !important; color: var(--i4) !important; border-color: var(--li2); cursor: not-allowed; }
.bla-mini__eco { min-width: 48px; text-align: center; font: 700 var(--t-val)/1 var(--mono); color: var(--i2); }
.bla-mini__sel {
  height: var(--dito); padding: 0 8px; border: 1px solid var(--i4); border-radius: 8px;
  font: 700 var(--t-cmd) var(--et); color: var(--i); background: #fff;
}

.bla__aiuto {
  flex: 1 1 auto; min-width: 0; margin: 0;
  /* Il suggerimento e' una frase, e in italiano diventa lunga: Poppins, che
     costa il 24% di larghezza in meno del monospaziato a parita' di corpo. */
  font: 600 var(--t-et)/1.35 var(--testo); color: var(--i4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bla-vista {
  /* Il gruppo 2D/3D e' un interruttore a due posizioni: il bersaglio da dito e'
     il GRUPPO (44 px in altezza con la sua cornice), non il singolo pulsante,
     che condivide il bordo col gemello e non ha un vicino da sbagliare. */
  display: flex; gap: 3px; flex: 0 0 auto; align-items: center;
  padding: 3px; background: var(--inc); border-radius: 10px;
}
.bla .bla-vista__b {
  height: var(--dito); min-height: var(--dito); padding: 0 12px; cursor: pointer;
  background: transparent !important; color: var(--i2) !important;
  border: 1px solid transparent; border-radius: 8px;
  font: 700 var(--t-cmd)/1 var(--et); letter-spacing: var(--ls-cmd); text-transform: uppercase;
  box-shadow: none; background-image: none !important;
}
.bla .bla-vista__b:hover { color: var(--mart) !important; }
.bla .bla-vista__b[aria-selected="true"] {
  background: #fff !important; color: var(--i) !important; border-color: var(--i4);
}
.bla__piede-stato {
  flex: 0 0 auto; margin: 0; max-width: 340px;
  font: 600 var(--t-et)/1.35 var(--testo); color: var(--i2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bla__piede-stato.e-pronto { color: var(--ok); font-weight: 700; }

/* =============================================================================
   4. IL PANNELLO DELLE PROPRIETA'
   ========================================================================== */
.bla__comandi {
  border-left: 1px solid var(--li2); background: var(--car);
  padding: 11px 12px 20px; overflow-y: auto; scrollbar-width: thin;
  /* Gap ridotto da 11 a 9: i blocchi adesso hanno bersagli da 44 px e si
     distinguono da soli. Lo spazio che si toglie qui e' esattamente quello che
     serve piu' in basso, e il pannello non diventa piu' lungo di prima. */
  display: flex; flex-direction: column; gap: 9px;
}
/* =============================================================================
   NIENTE SI SCHIACCIA. La riga che rendeva bugiarde tutte le altre.
   -----------------------------------------------------------------------------
   Questi tre contenitori sono colonne flex con scorrimento proprio. In una
   colonna flex il RESTRINGIMENTO agisce sull'altezza, e vale 1 per difetto:
   quando il contenuto supera la colonna, il browser non fa scorrere — prima
   comprime tutti i figli. Misurato: un campo dichiarato `height: 44px` veniva
   disegnato alto 37,4. Cioe' ogni bersaglio da dito di questo pannello era
   piu' piccolo di quanto il foglio dichiarasse, e nessuno se n'era accorto
   perche' i numeri si leggevano nel CSS invece che nel browser.
   Con `flex: 0 0 auto` ognuno tiene la sua altezza e la colonna scorre, che e'
   quello che il suo `overflow-y: auto` prometteva gia'.
   ========================================================================== */
.bla__comandi > *,
.bla-rail > *,
.bla-gaveta > * { flex: 0 0 auto; }
/* E non basta fermarsi ai figli diretti: i campi stanno tre livelli sotto, in
   .bla-sez > .bla-due > .bla-campo, e ognuno di quei tre e' a sua volta una
   colonna flex che comprime i propri figli. Invece di inseguire ogni annidamento
   blocco il restringimento sui COMANDI, che sono le uniche cose la cui altezza
   e' una promessa da mantenere. Le righe che devono davvero allargarsi si
   riprendono il loro `flex` piu' avanti nel foglio, dove sono dichiarate. */
.bla input, .bla select, .bla textarea,
.bla .bla-btn, .bla .bla-tondo, .bla .bla-mini, .bla-spunta { flex-shrink: 0; }
/* Il corpo del cassetto e' l'unica eccezione: DEVE prendersi lo spazio che
   avanza, perche' e' lui a scorrere. */
.bla-gaveta__corpo { flex: 1 1 auto; }

.bla__et {
  margin: 0 0 6px; font: 800 var(--t-et)/1 var(--et);
  letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-com__testa { display: flex; flex-direction: column; gap: 2px; padding-bottom: 9px; border-bottom: 1px solid var(--li2); }
.bla-com__testa small {
  font: 800 var(--t-et)/1.25 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-com__testa strong { font: 900 18px/1.15 var(--disp); letter-spacing: -.01em; color: var(--i); }
.bla-com__sync {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px 9px; border-radius: 8px; background: var(--marv);
  font: 600 var(--t-et)/1.35 var(--testo); color: var(--mart);
}
.bla-com__sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--mars); flex: 0 0 auto; }

/* --- la compatibilita' di stampa (specchio di 000919) ---------------------- */
.bla-compat { border: 1px solid var(--li2); border-radius: 10px; background: #fff; overflow: hidden; }
.bla-compat__testa {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-bottom: 1px solid var(--li);
}
.bla-compat__t {
  display: flex; align-items: center; gap: 6px;
  font: 800 var(--t-cmd)/1.2 var(--disp); letter-spacing: .01em; color: var(--i);
}
.bla-compat__t .bla-icona { width: 17px; height: 17px; color: var(--mart); }
.bla-compat__esito {
  flex: 0 0 auto; font-style: normal; padding: 4px 8px; border-radius: 999px;
  background: var(--inc); color: var(--i4);
  font: 800 var(--t-et)/1.2 var(--et); letter-spacing: .04em; text-transform: uppercase;
}
.bla-compat[data-stato="ok"] .bla-compat__esito { background: var(--okf); color: var(--ok); }
.bla-compat[data-stato="verifica"] .bla-compat__esito { background: var(--marv); color: var(--mart); }
.bla-compat[data-stato="problema"] .bla-compat__esito { background: var(--urgf); color: var(--urg); }
.bla-compat__righe { list-style: none; margin: 0; padding: 0 10px; }
.bla-compat__riga {
  /* Etichetta e valore erano affiancati in 64+lo-spazio-che-resta: a corpo 13
     "Trim & bleed" non ci stava piu' e si sarebbe tagliato. Impilati, ognuno
     dei due ha tutta la larghezza del pannello e nessuno dei due si tronca —
     e la riga cresce di 10 px, non di trenta, perche' le due righe di testo
     stanno dentro il bersaglio da 44 che comunque le serviva. */
  display: grid; grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center; gap: 2px 8px; min-height: var(--dito); padding: 5px 0;
  border-bottom: 1px solid var(--li);
}
.bla-compat__riga b { grid-column: 1; }
.bla-compat__riga > span { grid-column: 1; }
.bla-compat__riga i { grid-column: 2; grid-row: 1 / span 2; }
.bla-compat__riga:last-child { border-bottom: 0; }
.bla-compat__riga b { font: 800 var(--t-cmd)/1.25 var(--et); color: var(--i2); }
/* Prima erano una riga sola con i puntini di sospensione: "Text and shapes
   only — nothing that can ...". Adesso che etichetta e valore sono impilati il
   valore ha tutta la larghezza del pannello e puo' andare a capo. Due righe
   lette valgono piu' di una riga e mezza indovinata. */
.bla-compat__riga > span {
  font: 600 var(--t-et)/1.35 var(--testo); color: var(--i4);
  overflow-wrap: anywhere;
}
.bla-compat__riga i {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font: 800 var(--t-et)/1 var(--et); font-style: normal;
  background: var(--inc); color: var(--i4);
}
.bla-compat__riga.e-ok i { background: var(--okf); color: var(--ok); }
.bla-compat__riga.e-verifica i { background: var(--marv); color: var(--mart); }
.bla-compat__riga.e-problema i { background: var(--urgf); color: var(--urg); }
.bla-compat__riga.e-ok > span { color: var(--i2); }
.bla-compat__nota { margin: 0; padding: 8px 10px 0; font: 600 13px/1.45 var(--testo); color: var(--i4); }
.bla-compat__nota b { color: var(--i2); font-weight: 700; }
.bla-compat__az { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 10px 10px; }
.bla-compat__az .bla-btn { min-height: var(--dito); font-size: var(--t-et); padding: 0 6px; }

.bla-strumenti { display: flex; flex-direction: column; gap: 10px; }
.bla-strumenti__file {
  margin: 0; padding: 9px 10px; background: #fff;
  border: 1px solid var(--li2); border-radius: 9px;
}
.bla-strumenti__file strong {
  /* Il NOME DEL FILE resta monospaziato per davvero: e' l'unico posto dove
     serve distinguere l0 da lO, e dove uno zero puntato salva una telefonata. */
  display: block; font: 700 var(--t-cmd)/1.4 var(--mono); color: var(--i); word-break: break-all;
}
.bla-strumenti__file span { display: block; margin-top: 3px; font: 600 var(--t-et) var(--testo); color: var(--i4); }

.bla-cursore { display: block; }
.bla-cursore > span {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px;
  font: 800 var(--t-et)/1 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-cursore em { font: 700 var(--t-val)/1 var(--mono); font-style: normal; color: var(--i); letter-spacing: 0; }
/* La slitta e' alta 16 px: col mouse si prende, col pollice no. L'altezza
   dichiarata allarga la zona sensibile senza ingrossare il tratto disegnato. */
.bla-cursore input[type="range"] {
  width: 100%; height: var(--dito); margin: 0; accent-color: var(--mars); cursor: pointer;
}

.bla-terna { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bla-terna .bla-btn { padding: 0 5px; font-size: var(--t-et); letter-spacing: .02em; min-height: var(--dito); }
.bla-quattro { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bla-quattro .bla-btn { padding: 0 6px; font-size: var(--t-et); letter-spacing: .02em; min-height: var(--dito); }
.bla-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bla-coppia .bla-btn { padding: 0 7px; font-size: var(--t-et); letter-spacing: .02em; }

.bla-copia label {
  display: block; margin-bottom: 5px;
  font: 800 var(--t-et)/1 var(--et); letter-spacing: var(--ls-et); text-transform: uppercase; color: var(--i4);
}
.bla-copia select {
  width: 100%; height: var(--dito); margin-bottom: 6px; padding: 0 10px;
  font: 700 var(--t-cmd) var(--et); color: var(--i);
  background: #fff; border: 1px solid var(--i4); border-radius: 9px;
}
.bla-copia .bla-coppia .bla-btn { min-height: var(--dito); }

.bla-zona {
  padding: 15px 12px; text-align: center;
  background: #fff; border: 2px dashed var(--i4); border-radius: var(--r);
  transition: border-color 150ms, background-color 150ms;
}
.bla-zona.is-sopra { border-color: var(--mars); background: var(--marv); }
.bla-zona__titolo { margin: 0 0 3px; font: 800 var(--t-txt)/1.3 var(--disp); color: var(--i); }
.bla-zona__sotto { margin: 0 0 9px; font: 600 var(--t-et)/1.4 var(--testo); color: var(--i4); }
.bla-zona__limite { margin: 7px 0 0; font: 600 var(--t-et)/1.4 var(--testo); color: var(--i4); }
.bla-file { position: relative; }

.bla-fondo__riga { display: flex; gap: 6px; align-items: center; }
.bla-fondo__riga .bla-btn { flex: 1 1 auto; padding: 0 8px; font-size: var(--t-et); }
.bla__tecnica-riga { margin: 0 0 8px; font: 700 var(--t-txt)/1.4 var(--disp); color: var(--i); }

/* Il campo colore: i browser lo disegnano ognuno a modo suo, ma tutti
   rispettano misure e bordo. Un anello scuro sempre, perche' un bianco su
   fondo bianco altrimenti non esiste. */
.bla .bla-colore {
  flex: 0 0 auto; width: var(--dito); height: var(--dito); padding: 3px; cursor: pointer;
  background: #fff; border: 1px solid var(--i4); border-radius: 9px;
}
.bla .bla-colore::-webkit-color-swatch-wrapper { padding: 0; }
.bla .bla-colore::-webkit-color-swatch { border: 1px solid rgb(15 17 21 / .38); border-radius: 5px; }
.bla .bla-colore::-moz-color-swatch { border: 1px solid rgb(15 17 21 / .38); border-radius: 5px; }
.bla .bla-colore:disabled { cursor: not-allowed; opacity: .55; }

/* --- i numeri esatti ------------------------------------------------------- */
.bla-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bla-numeri label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bla-numeri span {
  font: 800 var(--t-et)/1.2 var(--et); letter-spacing: var(--ls-cmd);
  text-transform: uppercase; color: var(--i4);
}
/* Il contenuto dei campi resta monospaziato — sono numeri da confrontare — ma
   sale a 13,5 e a peso 700: a 11,5/600 nel monospaziato di sistema le cifre
   erano filiformi. */
.bla-numeri input,
.bla-campo input, .bla-campo select {
  width: 100%; min-width: 0; height: var(--dito); padding: 0 7px;
  font: 700 var(--t-val) var(--mono); color: var(--i);
  background: #fff; border: 1px solid var(--i4); border-radius: 7px;
}
.bla-campo input[type="text"] { font-family: var(--testo); font-size: var(--t-txt); font-weight: 600; }
.bla-numeri input:focus-visible,
.bla-campo input:focus-visible, .bla-campo select:focus-visible,
.bla .bla-colore:focus-visible, .bla-mini__sel:focus-visible {
  outline: 2px solid var(--mart); outline-offset: 2px;
}
.bla-campo input:disabled { background: var(--inc); color: var(--i4); cursor: not-allowed; }

.bla-sez {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px; background: #fff; border: 1px solid var(--li2); border-radius: 9px;
}
.bla-sez__nota { margin: 0; font: 600 13px/1.45 var(--testo); color: var(--i4); }
.bla-due { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.bla-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bla-campo > span {
  font: 800 var(--t-et)/1.2 var(--et); letter-spacing: var(--ls-cmd);
  text-transform: uppercase; color: var(--i4);
}
.bla-campo--largo { grid-column: 1 / -1; }
.bla-campo .bla-terna { gap: 4px; }
.bla-campo .bla-terna .bla-btn { min-height: var(--dito); padding: 0; font-size: var(--t-cmd); }
.bla-spunta {
  display: flex; align-items: center; gap: 8px; min-height: var(--dito); cursor: pointer;
  font: 600 var(--t-txt)/1.25 var(--testo); color: var(--i);
}
.bla-spunta input { width: 20px; height: 20px; accent-color: var(--mars); cursor: pointer; }

/* --- l'allineamento a nove punti ------------------------------------------- */
.bla-allinea { display: flex; flex-direction: column; }
.bla-nove {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 4px; width: max-content;
  background: #fff; border: 1px solid var(--li2); border-radius: 9px;
}
.bla .bla-nove button {
  position: relative; width: var(--dito); height: var(--dito); padding: 0; cursor: pointer;
  background: #fff !important; border: 1px solid var(--li2); border-radius: 6px;
  box-shadow: none; background-image: none !important;
}
.bla .bla-nove button::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 2px; background: var(--i4);
}
.bla .bla-nove button:hover { background: var(--marv) !important; border-color: var(--mar); }
.bla .bla-nove button:hover::after { background: var(--mars); }
.bla .bla-nove .e-centro::after { border-radius: 50%; }

/* =============================================================================
   IL PANNELLO DEI LIVELLI (nel cassetto)
   Elenco dall'alto in basso, cioe' dall'elemento che sta SOPRA a quello che sta
   sotto: e' l'ordine in cui si vedono, e invertirlo per comodita' di
   programmazione confonderebbe chiunque abbia usato un programma di grafica.
   ========================================================================== */
.bla-livelli { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.bla-livelli__conta { font-weight: 800; color: var(--i2); letter-spacing: 0; }
.bla-livelli__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 42vh; overflow-y: auto; scrollbar-width: thin;
}
.bla-livelli__vuoto { margin: 0; font: 600 13.5px/1.45 var(--testo); color: var(--i4); }
.bla-liv {
  display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--i4); border-radius: 8px;
  padding: 2px 2px 2px 0;
}
.bla-liv.is-scelto { border-color: var(--mars); border-width: 2px; padding: 1px 1px 1px 0; background: var(--marv); }
.bla-liv.is-nascosto { opacity: .55; }
.bla-liv.is-trascinata { border-style: dashed; box-shadow: 0 6px 16px rgb(15 17 21 / .18); }
.bla-liv__presa {
  flex: 0 0 auto; width: 22px; height: var(--dito); display: grid; place-items: center;
  cursor: grab; color: var(--i4); touch-action: none;
}
.bla-liv.is-trascinata .bla-liv__presa { cursor: grabbing; }
.bla .bla-liv__nome {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  min-height: var(--dito); padding: 4px 2px; cursor: pointer; text-align: left;
  background: transparent !important; color: var(--i2) !important;
  border: 0; font-family: inherit; text-transform: none; letter-spacing: normal;
}
.bla-liv__tipo {
  flex: 0 0 auto; padding: 2px 5px; border-radius: 4px;
  background: var(--inc); color: var(--i4);
  font: 800 var(--t-et)/1.35 var(--et); letter-spacing: .04em;
}
.bla-liv.is-scelto .bla-liv__tipo { background: #fff; color: var(--mart); }
.bla-liv__testo {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--t-txt)/1.3 var(--testo); color: var(--i);
}
.bla .bla-liv__ic {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: transparent !important; color: var(--i4) !important;
  border: 1px solid transparent; border-radius: 6px; padding: 0;
}
.bla .bla-liv__ic:hover { background: #fff !important; color: var(--mart) !important; border-color: var(--mar); }
.bla .bla-liv__ic[aria-pressed="true"] { color: var(--i2) !important; }
.bla-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bla-livelli__azioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bla-livelli__azioni .bla-btn { min-height: var(--dito); padding: 0 4px; font-size: var(--t-cmd); letter-spacing: 0; }

.bla-nota-inchiostro {
  margin: 0; padding: 8px 10px; border-radius: 8px;
  background: var(--marv); border-left: 3px solid var(--mar);
  font: 600 13px/1.45 var(--testo); color: var(--i2);
}

/* =============================================================================
   LA LASTRA DEL PACCHETTO STAMPA
   ========================================================================== */
.bla-lastra { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; }
.bla-lastra[hidden] { display: none !important; }
.bla-lastra__velo { position: absolute; inset: 0; background: rgb(15 17 21 / .32); }
.bla-lastra__foglio {
  position: relative; display: flex; flex-direction: column;
  width: min(520px, 100%); max-height: 100%;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: var(--sc-ombra-3, 0 22px 48px rgb(15 17 21 / .2));
}
.bla-lastra__testa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--li);
}
.bla-lastra__testa small {
  display: block; font: 800 var(--t-et)/1.25 var(--et); letter-spacing: var(--ls-et);
  text-transform: uppercase; color: var(--mart);
}
.bla-lastra__testa strong { font: 900 var(--t-tit)/1.2 var(--disp); color: var(--i); }
.bla-lastra__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.bla-lastra__mis { margin: 0 0 10px; font: 700 var(--t-val)/1.4 var(--mono); color: var(--i2); }
.bla-lastra__mis:empty { display: none; }
.bla-lastra__righe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bla-lastra__riga { padding: 9px 11px; border: 1px solid var(--li2); border-radius: 9px; }
.bla-lastra__riga-t {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 3px;
}
.bla-lastra__riga-t b { font: 800 var(--t-txt)/1.25 var(--disp); color: var(--i); }
.bla-lastra__riga-t em {
  font-style: normal; padding: 2px 7px; border-radius: 999px;
  font: 800 var(--t-et)/1.3 var(--et); letter-spacing: .04em; text-transform: uppercase;
  background: var(--inc); color: var(--i4);
}
.bla-lastra__riga.e-ok em { background: var(--okf); color: var(--ok); }
.bla-lastra__riga.e-verifica em { background: var(--marv); color: var(--mart); }
.bla-lastra__riga.e-problema em { background: var(--urgf); color: var(--urg); }
.bla-lastra__riga p { margin: 0; font: 600 13.5px/1.45 var(--testo); color: var(--i2); }
.bla-lastra__riga p + p { margin-top: 3px; color: var(--i4); }
.bla-lastra__vuoto { margin: 0; font: 600 13.5px/1.5 var(--testo); color: var(--i4); }
.bla-lastra__piede { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--li); }

/* =============================================================================
   LA VISTA PULITA
   Toglie di mezzo tutto quello che non e' il disegno. Non e' una modalita' di
   lavoro: e' il modo di GIUDICARE, che con le quote addosso non si puo' fare.
   ========================================================================== */
.bla.is-pulita .bla-rail,
.bla.is-pulita .bla-gaveta,
.bla.is-pulita .bla__comandi,
.bla.is-pulita .bla-tecnico,
.bla.is-pulita .bla-avvisi { display: none !important; }
.bla.is-pulita .bla__editor { grid-template-columns: minmax(0, 1fr); }

/* =============================================================================
   IL DISEGNO TECNICO
   Il viewBox e' in MILLIMETRI: le coordinate sono le misure vere della scatola,
   senza nessun fattore di conversione da tenere allineato.
   Due conseguenze da gestire qui:
   1. i tratti userebbero i millimetri anche loro, e una linea da 0,3 mm su una
      fustella da 300 mm sparirebbe. `vector-effect: non-scaling-stroke` li
      riporta in pixel di schermo, costanti a qualunque ingrandimento;
   2. la misura del testo NON si dichiara qui — la calcola il JS in proporzione
      al viewBox e la scrive come attributo. Se la mettessi nel CSS vincerebbe
      sull'attributo (una regola batte sempre una presentation attribute) e le
      etichette diventerebbero illeggibili sulla vista larga.
   ========================================================================== */
.bla-fu-carta, .bla-fu-bordo, .bla-fu-piega, .bla-fu-sicura, .bla-fu-attiva,
.bla-fu-quota, .bla-fu-segna, .bla-fu-pdf { vector-effect: non-scaling-stroke; }

.bla-fu-carta  { fill: #fff; stroke: var(--i); stroke-width: 1.1; }
.bla-fu-bordo  { fill: none; stroke: var(--i); stroke-width: 1.1; }
.bla-fu-piega  { fill: none; stroke: var(--i4); stroke-width: 1; stroke-dasharray: 7 4; }
.bla-fu-sicura { fill: none; stroke: var(--mar); stroke-width: 1; stroke-dasharray: 3 3; }
.bla-fu-attiva { fill: var(--marv); stroke: var(--mars); stroke-width: 1.6; }
.bla-fu-quota  { stroke: var(--mart); stroke-width: 1; }
.bla-fu-segna  { fill: none; stroke: var(--mars); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bla-fu-pdf    { fill: var(--inc); stroke: var(--i4); stroke-width: 1; }

/* ---------------------------------------------------------------------------
   LE QUOTE NON SI DISEGNANO NELLA MINIATURA
   ---------------------------------------------------------------------------
   Il pannello dell'anteprima tecnica e' largo 324 px. Con il pavimento da
   12 px che le quote hanno adesso, "Flat sheet 235 x 205 mm" ne occuperebbe
   centocinquanta: meta' del pannello per una riga che sta gia' scritta,
   in testo vero e leggibile, nella casella DEVELOPMENT due centimetri piu'
   sotto. E senza pavimento erano alte 6 px, cioe' i trattini illeggibili che
   si vedevano prima.
   La miniatura serve a giudicare una FORMA, non a leggere dei numeri: qui la
   forma resta e le scritte se ne vanno. Quella del cliente no — la sua grafica
   e' esattamente cio' che deve vedere.
   -------------------------------------------------------------------------- */
.bla-tecnico__tela .bla-fu-testo,
.bla-tecnico__tela .bla-fu-nome { display: none; }

.bla-fu-testo  { fill: var(--i2); font-family: var(--mono); font-weight: 700; text-anchor: middle; }
.bla-fu-nome   { fill: var(--i4); font-family: var(--mono); font-weight: 700; text-anchor: middle;
                 text-transform: uppercase; }
.bla-fu-pdftxt { fill: var(--i2); font-family: var(--mono); font-weight: 700; text-anchor: middle;
                 dominant-baseline: middle; }
.bla-fu-presa  { cursor: grab; }
.bla-fu-presa.is-presa { cursor: grabbing; }

/* =============================================================================
   LA GRAFICA DEL CLIENTE DENTRO IL DISEGNO
   -----------------------------------------------------------------------------
   ⚠️ `.bla-art-forma` e `.bla-art-testo` NON hanno `vector-effect` e NON hanno
   ne' `fill` ne' `stroke`: quei valori arrivano come attributi dal manifesto,
   e una regola CSS li batterebbe tutti e tre insieme facendo diventare nero
   qualunque colore scelto dal cliente. Un contorno da 2 mm deve inoltre
   ingrandirsi con la scatola — e' inchiostro vero, non un tratto tecnico.
   ========================================================================== */
.bla-el--presa { cursor: grab; }
.bla-el--presa.is-presa { cursor: grabbing; }
.bla-el.is-bloccato { cursor: default; }

/* Il contorno di selezione c'e' sempre nel nodo e lo accende il CSS: cosi'
   cambiare selezione non richiede un ridisegno, che durante un trascinamento
   distruggerebbe il nodo che tiene la cattura del puntatore. */
.bla-fu-segna { display: none; }
.bla-el.is-scelto > .bla-fu-segna { display: inline; }

.bla-griglia line { stroke: var(--li2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bla-griglia--mediana line { stroke: var(--sc-quota, #C6CCD3); stroke-width: 1.2; stroke-dasharray: 6 4; }

/* Le guide dell'aggancio sono rosse e appaiono solo durante il gesto: e' la
   convenzione di ogni programma di grafica, e serve che NON si confondano con
   la cornice dell'area sicura, che e' petrolio e sta li' sempre. */
.bla-guida { stroke: var(--urg); stroke-width: 1.2; vector-effect: non-scaling-stroke; display: none; }
.bla-guida.is-viva { display: inline; }

/* =============================================================================
   SCHERMI STRETTI
   -----------------------------------------------------------------------------
   L'anatomia non cambia, cambia la disposizione. In ordine di importanza su un
   telefono: la TELA (e' il lavoro), le schede delle facce (dove sto lavorando),
   i ferri (cosa posso fare), e in fondo i pannelli — che diventano fogli bassi
   con scorrimento proprio invece di colonne.
   ========================================================================== */
/* Fra i 1080 e i 1560 il posto in barra non basta per titolo E sottotitolo
   delle tappe: misurato a 1440, uscivano tutte e due tagliate a meta' parola.
   Meglio una riga intera che due monconi. */
@media (max-width: 1560px) {
  /* Misurato a 1436 px: i comandi si prendevano 914 px e alle tre tappe ne
     restavano 219 — sessantanove a testa, cioe' tre parole tagliate a meta'.
     I comandi che hanno un'icona parlante restano icona (titolo e aria-label
     ci sono gia'); SALVA e CHIUDI tengono la parola, perche' sono le due
     uscite e non si indovinano. Cosi' le tappe tornano a ~440 px. */
  .bla .bla-tasto span { display: none; }
  .bla .bla-tasto { padding: 0 9px; }
  .bla .bla-tasto--pieno span, .bla .bla-tasto--chiudi span { display: inline; }
  /* LE TAPPE SPARISCONO SOTTO I 1560, e non e' una resa.
     Provato con GTranslate in italiano: "Size / Artwork / Quote" diventa
     "Misure / Opera d'arte / Citazione", i comandi in barra si allargano di
     conseguenza, e alle tre tappe restavano una settantina di pixel a testa —
     cioe' "MIS...", "OPE...", "CITA...". Tre parole troncate non insegnano
     niente a nessuno, e le stesse tre tappe stanno per intero, in chiaro,
     nella pagina dello Studio da cui questo editor si apre.
     Sopra i 1560 ci stanno per intero in tutte e quattro le lingue e restano. */
  .bla-tappe { display: none; }
  .bla-tappa small { display: none; }
  .bla-tappa { padding: 6px 9px; }
}

@media (max-width: 1280px) {
  /* Le colonne si stringono, i CORPI NO: e' il patto di questo lavoro. Quello
     che si toglie e' spazio vuoto e larghezza di colonna, mai leggibilita'. */
  .bla { --dritta: 292px; --ferri: 150px; --gaveta: 224px; }
  .bla-tecnico { width: 292px; }
}

@media (max-width: 1080px) {
  .bla__testa { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bla-tappe { display: none; }              /* le tappe le sa gia' lo Studio */
  .bla__marchio-t small { display: none; }
  .bla-pastiglia__b { display: none; }
}

@media (max-width: 860px) {
  /* Le quattro colonne diventano una pila. Il cassetto e le proprieta' si
     appoggiano in fondo con un tetto d'altezza: nessuno dei due puo' mangiare
     la tela, che ha un minimo dichiarato. */
  .bla { --alta: auto; --bassa: auto; }
  .bla__foglio { grid-template-rows: auto minmax(0, 1fr); }
  .bla__testa {
    grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 10px;
    align-content: start;
  }
  .bla__testa-azioni { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bla__testa-azioni::-webkit-scrollbar { display: none; }
  .bla .bla-pastiglia { max-width: 190px; }

  /* NIENTE GRIGLIA su schermo stretto, e non e' pigrizia: con quattro zone
     impilate dentro una griglia ognuna si prende un pezzo dell'altezza e le
     ultime due si schiacciano sotto il loro contenuto (misurato: la barra
     bassa finiva a 20 px e il pannello tecnico a 5). In colonna semplice, con
     UNO scorrimento solo, ogni zona e' alta quanto le serve. */
  .bla__editor,
  .bla__editor.e-gaveta {
    display: block; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .bla-rail {
    position: sticky; top: 0; z-index: 12;   /* i ferri restano a portata di
       pollice anche scorrendo fino ai comandi in fondo */
  }
  .bla__scena { display: block; }
  /* In colonna semplice la riga della griglia non detta piu' l'altezza: le
     schede se la devono dichiarare, e su un telefono il bersaglio e' il dito. */
  .bla-schede { min-height: 56px; }
  .bla .bla-scheda-f { min-height: 56px; }
  .bla__tela { height: 46vh; min-height: 210px; }
  .bla__comandi, .bla-gaveta { max-height: none; }

  /* I FERRI diventano una fila che scorre di lato: e' il modo in cui una
     colonna di diciassette voci sta in 390 px senza sparire. */
  .bla-rail {
    flex-direction: row; align-items: center; gap: 4px;
    padding: 7px 10px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--li2);
  }
  .bla-rail__et {
    margin: 0 2px 0 6px; padding: 0; flex: 0 0 auto;
    writing-mode: horizontal-tb; font-size: var(--t-et);
  }
  .bla-rail__et:first-child { margin-left: 0; }
  .bla .bla-ferro { width: auto; flex: 0 0 auto; min-height: var(--dito); padding: 0 11px; }
  .bla .bla-ferro.is-viva::before {
    left: 50%; top: auto; bottom: -7px; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 3px 3px 0 0;
  }

  .bla-gaveta { border-right: 0; border-top: 1px solid var(--li2); max-height: 40vh; }
  .bla__comandi { border-left: 0; border-top: 1px solid var(--li2); max-height: 46vh; }

  /* L'anteprima tecnica non galleggia piu': su un telefono un pannello
     spostabile sopra la tela copre il lavoro. Diventa una striscia in fondo
     alla scena, aperta su richiesta. */
  .bla-tecnico {
    position: static; width: auto; max-width: none; margin: 8px;
    box-shadow: none; border-color: var(--li2);
  }
  .bla-tecnico__testa { cursor: default; }
  .bla-tecnico__trascina { display: none; }

  .bla__fondo { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .bla__aiuto { flex: 1 1 100%; white-space: normal; }
  .bla__piede-stato { flex: 1 1 100%; max-width: none; white-space: normal; }
}

@media (max-width: 560px) {
  .bla__scelta { padding: 16px 12px 26px; }
  .bla__carte { grid-template-columns: minmax(0, 1fr); }
  .bla-schede { --schede: 52px; }
  .bla .bla-scheda-f { min-width: 116px; flex: 0 0 auto; }
  .bla-scheda-f__m { display: none; }
  /* Quattro campi numerici in 390 px: due righe da due, non quattro colonne da
     ottanta. A quattro colonne il campo restava largo 78 px e il bersaglio
     scendeva sotto la soglia — e comunque un campo dove non ci sta "-360" non
     serve a niente. */
  .bla-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bla-numeri input { height: var(--dito); padding: 0 7px; font-size: var(--t-val); }
  .bla-avvisi { left: 8px; right: 8px; max-width: none; }
  .bla-livelli__lista { max-height: 30vh; }
  .bla-lastra { padding: 10px; }
  .bla-lastra__piede { grid-template-columns: 1fr; }
}


/* =============================================================================
   DOVE VANNO I DUE PEZZI CHE CONOSCIAMO — 05/09/2026
   -----------------------------------------------------------------------------
   Dichiararlo serve a rendere irrilevante l'ORDINE dei figli di `.bla__scena`:
   `scatole-bl-grafica.js` infila il selettore delle tavole PRIMA delle
   linguette, e senza queste due righe la griglia assegnava le corsie per
   ordine di apparizione — con il risultato che le linguette finivano nella
   riga elastica e diventavano alte 720 px.
   La tela e la barra bassa NON si dichiarano: si posano da sole nelle due
   righe che restano, e cosi' restano libere di cambiare ordine domani.
   ========================================================================== */
.bla .bla-tavole { grid-row: 1; }
.bla .bla-schede { grid-row: 2; }