/* ==========================================================================
   SAGO LAB 2026-08-15 - COLONNA TECNICA (la colonna sinistra)
   Porta sul configuratore il linguaggio della pagina lab-astucci, indicata
   dal committente il 15/08 come il risultato voluto. Il DNA estratto dalla
   pagina viva sta in /root/backups/2026-08-15-astucci-dna/CONTRATTO.md.

   AGGIORNATO IL 2026-08-16 - LA QUESTIONE DELLA PREVIEW TECNICA, CHIUSA.
   Sei tentativi di fila sul pannello PREVIEW TECNICA sono falliti perche'
   nessuno aveva mai risolto la cascata su questi nodi: si spostava un pezzo
   alla volta indovinando dove fossero gli altri. Il lavoro di risoluzione sta
   in /root/backups/2026-08-16-preview/ (risolvi.py, simula-t.py, geometria.py,
   contrasti.py) e le sue conclusioni sono scritte nelle sezioni 5-bis, 6-bis,
   7 e 8. Le due sole cose da ricordare senza rileggerle:

     1. LA GEOMETRIA E' UN CONTRATTO, NON UN EQUILIBRIO DI z-index. Il wrap ha
        una RIGA (il disegno) e una FASCIA (i comandi) alte in tutto quanto
        --sago-banda decide. Chi aggiunge qualcosa qui dentro sceglie una
        delle due zone: non ne inventa una terza sovrapposta.
     2. LA CAUSA VERA DEI SEI TENTATIVI erano due sole righe altrui, ed erano
        tutte e due invisibili leggendo il markup:
          standalone.css:1429  transform:translateX(-50%) sul comando avanzato
          questo foglio, sezione 8  il riquadro 3D a bottom:0 sulla fascia
        Nessuna delle due dava un errore. Spostavano soltanto le cose.

   ZONE DI QUESTO FOGLIO, e nessun'altra:
     - il pannello .sago-tech-preview ("PREVIEW TECNICA") e la sua testata
     - il segmento #sago-a2-views (Disegno tecnico / Vista 3D)
     - il disegno quotato #sago-drawing e cio' che vive dentro di lui
     - la quotatura #sago-mini-dims-v1, creata dal mu-plugin 000003
     - i due comandi che standalone.js appoggia dentro .sago-drawing-wrap
     - il riquadro #sago-a2-3d-pane, creato da standalone-a-stage.js
   La griglia .sago-benefits-grid NON e' vestita: vedi l'ultima sezione, e'
   una scelta motivata e non una dimenticanza.

   I NODI CREATI DA JAVASCRIPT sono segnalati riga per riga: chi verra' dopo
   non deve cercarli nel template, non ci sono.

   I TOKEN --ast-* li dichiara standalone-lab.css, primo della lista dei
   fogli. Qui si consumano con valore di ripiego, mai ridichiarati. Il valore
   di ripiego serve a non lasciare un pannello senza colore se un domani il
   contratto cambiasse nome ai token.

   POSIZIONE NELLA CASCATA: questo foglio e' appeso due volte, in testa e in
   coda. La copia in coda arriva dopo standalone.css e dopo i 16 blocchi
   <style> inline, quindi a parita' di specificita' vince per ordine; la
   copia in testa esiste per non far lampeggiare la pagina al primo paint,
   ma vince solo dove nessun inline le contende la stessa proprieta'. Dove
   c'e' un avversario inline (solo #sago-mini-dims-v1, blocco del mu-plugin
   000003) la specificita' e' stata alzata di proposito, cosi' vincono
   ENTRAMBE le copie e il lampeggio non esiste.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LA SCHEDA "ANTEPRIMA PRODOTTO" RESTA FUORI DALLA VISTA
   Il committente l'ha fatta togliere: mostrava un rettangolo nero vuoto.
   La regola che la nascondeva viveva in un foglio della famiglia precedente,
   che non e' piu' caricata: senza queste sei righe la scheda RITORNA in
   pagina, e nessun errore lo direbbe.

   PERCHE' NON display:none. standalone.js (findProductPreviewCard, riga
   ~3320) accetta quella scheda solo se misura almeno 260px di larghezza e
   fra 300 e 900px di altezza; un mu-plugin antiflicker rifa' la stessa
   risalita. A 0x0 tutti e due finirebbero in un ramo che oggi non percorrono
   mai. La larghezza fissa serve proprio a questo: fuori dal flusso un blocco
   assoluto senza width si stringe sul contenuto e potrebbe scendere sotto i
   260px.

   PERCHE' ANCHE visibility:hidden. Il mu-plugin 000003 (dxf-mini-dimensions)
   sceglie l'SVG VISIBILE piu' grande dentro la scheda che trova, e il suo
   test visible() legge proprio getComputedStyle().visibility. Il palco della
   scheda tolta (~330x236) batterebbe #sago-drawing (~324x223) e a -10000px
   le frecce di quota finirebbero fuori dal viewBox. Nascosta alla vista esce
   da quella gara e le quote restano sul disegno giusto.

   Per rimetterla in pagina: cancellare questa sola regola.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-visual-column .sago-product-preview{
  position:absolute;
  left:-10000px;
  top:0;
  width:340px;
  visibility:hidden;
  pointer-events:none;
}

/* Il -18px di standalone.css (@media min-width:1181px) allineava la preview
   tecnica alla scheda che le stava sopra, e quella scheda non e' piu' in
   vista. NON si azzera qui: lo fa gia' standalone-lab.css con
   html[data-sago-a] .sago-visual-column > * {transform:none}, che copre tutti
   i figli della colonna e non solo questo. Due regole per la stessa
   proprieta' vorrebbero dire due padroni: se un domani lo scostamento dovesse
   tornare, il posto e' un selettore nominato qui, non una seconda copia.


   IL VESTITO DELLA SCHEDA NON STA IN QUESTO FOGLIO, ED E' UNA SCELTA.
   Il componente pannello (imbottitura, filetto, raggio, fondo, assenza di
   ombra) lo dichiara standalone-lab.css su html[data-sago-a] .sago-panel e
   lo condividono tutte e tre le colonne. Ridichiararlo qui con una
   specificita' piu' alta darebbe alla colonna tecnica una scheda diversa
   dalle altre due: e' esattamente cio' che nella pagina astucci non succede
   mai. Chi vorra' cambiare l'imbottitura di questa scheda cambi
   --ast-panel-pad, non aggiunga una regola.

   UNA SOLA COSA VA RICORDATA A CHI TOCCHERA' QUELLA SCHEDA: non metterle
   overflow:hidden. Il mu-plugin 000003 le appende dentro #sago-mini-dims-v1
   con overflow:visible, e le frecce di quota escono di qualche pixel dai
   bordi del disegno. Ritagliarle le troncherebbe senza che nulla lo segnali.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. LA TESTATA DELLA PREVIEW TECNICA
   Etichetta in maiuscoletto spaziato, titolo in blu profondo, pastiglia
   verde a destra: e' la gerarchia di astucci, dove il verde dice sempre
   e soltanto "questo e' a posto".

   ATTENZIONE per chi verra' dopo: .sago-panel-head.compact ha DUE figli
   elemento e il mu-plugin 000003 cerca l'intestazione fra gli elementi con
   meno di tre figli. Da CSS non si possono aggiungere figli (i pseudo-
   elementi non contano in element.children), quindi questo foglio e' al
   sicuro; ma chi tocchera' il template deve saperlo.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-visual-column .sago-panel-head.compact{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 12px;
  flex-wrap:wrap;
  margin:0;
}

/* standalone.css da' 11px a .sago-mini-label: sotto i 12px non si scende,
   percio' la misura sale e la spaziatura scende un poco per compensare. */
html[data-sago-a] .sago-visual-column .sago-mini-label{
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--ast-text,#29445f);
}

html[data-sago-a] .sago-visual-column .sago-panel-head.compact strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ast-navy,#0b2745);
}

/* La pastiglia verde di astucci (.ast-canvas-status). Vale la regola dei
   due verdi: --ast-green e' una SUPERFICIE (qui il filetto), --ast-green-text
   e' INCHIOSTRO. Misurato: --ast-green #06a579 su fondo --ast-green-soft da'
   2,94 e non passa AA; --ast-green-text #04795a sullo stesso fondo da' 5,04
   e passa. */
html[data-sago-a] .sago-visual-column .sago-tech-badge{
  padding:5px 10px;
  border:1px solid var(--ast-green,#06a579);
  border-radius:var(--ast-r-pill,999px);
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}


/* --------------------------------------------------------------------------
   4. IL SEGMENTO A DUE STATI (Disegno tecnico / Vista 3D)
   E' lo stesso componente di .ast-model-tabs, il segmento ASTUCCIO CHIUSO /
   ASTUCCIO APERTO della pagina astucci: un blocco scuro unico, filetto
   ancora piu' scuro, ombra bassa, e la meta' attiva riempita di azzurro.
   Portato, non reinventato: forma, raggio, altezza e peso vengono da li'.

   Due sole differenze, e sono obbligate:
   a) astucci lo appoggia in assoluto sull'angolo del palco; qui il segmento
      vive in .sago-a2-viewbar, un nodo del template che sta FUORI da
      .sago-drawing-wrap. Riposizionarlo in assoluto vorrebbe dire portarlo
      dentro il disegno, dove standalone.js appoggia gia' due comandi: si
      coprirebbero. Resta la barra sopra il disegno, che e' anche il posto
      dove il comando governa cio' che gli sta sotto.
   b) l'azzurro pieno di astucci (#0877df) con testo bianco da' 4,32 di
      contrasto e non passa AA. Qui la meta' attiva usa una sfumatura della
      stessa famiglia il cui punto piu' chiaro sta a 4,57: l'occhio non
      distingue i due azzurri, il testo si legge.

   LA COLONNA STRETTA, con i conti fatti. standalone-lab.css tiene la colonna
   a minmax(0,clamp(288px,23vw,368px)) sopra i 1181px e a clamp(268px,29vw,
   330px) fra 1025 e 1180: il minimo vero e' 288px, e capita proprio nella
   banda desktop stretta (1181-1250 circa), non sul telefono, dove la pagina
   e' a una colonna sola e larga. A 288px, tolti il filetto del pannello e la
   sua imbottitura (--ast-panel-pad, 13px per lato a quella taglia), restano
   260px: ogni meta' ne ha 130, e detratti imbottitura e glifo all'etichetta
   ne avanzano circa 91. "Disegno tecnico" a 12px ne chiede circa 103, quindi
   in quella sola banda va a capo su due righe. E' voluto: le alternative
   erano scendere sotto i 12px o troncare con i puntini, cioe' testo presente
   e non leggibile. La parola piu' lunga ("Disegno", circa 48px) sta comoda,
   quindi non c'e' nessun taglio; il bottone non ha altezza fissa e cresce.

   Le due meta' si dividono lo spazio (flex:1 1 0) invece di stare a
   larghezza di contenuto: a larghezza naturale il segmento uscirebbe dalla
   scheda ben prima dei 288px.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-a2-viewbar{
  display:flex;
  margin:13px 0 12px;
}

html[data-sago-a] #sago-a2-views{
  display:flex;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid #0b416f;
  border-radius:var(--ast-r,4px);
  background:#0b3155;
  box-shadow:0 6px 16px rgba(5,40,75,.15);
}

html[data-sago-a] #sago-a2-views button{
  flex:1 1 0;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  margin:0;
  padding:7px 9px;
  border:0;
  background:transparent;
  color:#ffffff;
  font-family:inherit;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

/* Il filetto fra le due meta' e' un bordo e non un gap: nel blocco scuro di
   astucci le due meta' si toccano. */
html[data-sago-a] #sago-a2-views button+button{
  border-left:1px solid #0b416f;
}

/* I due glifi. Nel markup di questo segmento non ci sono <svg> (li ha solo
   il segmento vecchio #sago-a-views), quindi le icone si disegnano con
   mask-image e un SVG in data: URI - nessuna richiesta di rete in piu'.
   Il blocco sta dentro @supports perche' senza maschere il quadratino
   resterebbe un rettangolo pieno accanto alla scritta: senza il ritaglio
   non e' un'icona, e' un errore. Il test usa un gradiente e non una url():
   questo foglio non contiene nessuna url() che non sia un data: URI. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  html[data-sago-a] #sago-a2-views button::before{
    content:"";
    flex:none;
    width:17px;
    height:17px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:17px 17px;
    mask-size:17px 17px;
  }

  /* pianta quotata: e' il disegno tecnico */
  html[data-sago-a] #sago-a2-view-2d::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1'/%3E%3Cpath d='M3.5 9.5h17M9 9.5V19.5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1'/%3E%3Cpath d='M3.5 9.5h17M9 9.5V19.5'/%3E%3C/svg%3E");
  }

  /* solido: e' lo stesso glifo che astucci mette su ASTUCCIO CHIUSO */
  html[data-sago-a] #sago-a2-view-3d::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 7-4 7 4-7 4-7-4Z'/%3E%3Cpath d='M5 8v8l7 4 7-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 7-4 7 4-7 4-7-4Z'/%3E%3Cpath d='M5 8v8l7 4 7-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E");
  }
}

/* astucci schiarisce la meta' sotto il mouse invece di cambiarle colore:
   filter:brightness resta fedele e non introduce una terza tinta. */
html[data-sago-a] #sago-a2-views button:hover:not([disabled]){
  background:rgba(255,255,255,.08);
}

/* La meta' attiva. aria-pressed e' l'unico stato che il JS aggiorna
   (standalone-a-stage.js, setOpen): si veste quello, non una classe che
   nessuno scrive. */
html[data-sago-a] #sago-a2-views button[aria-pressed="true"]:not([disabled]){
  background:linear-gradient(180deg,#0a75dc 0%,#0664cb 100%);
  color:#ffffff;
}

/* Non ancora disponibile. Lo stato non e' affidato al solo colore: il
   bottone non risponde al mouse (cursor) e porta gia' dal template il
   title "Si attiva quando c'e' un DXF caricato" piu' aria-disabled. */
html[data-sago-a] #sago-a2-views button[disabled]{
  background:transparent;
  color:#a9c6de;
  cursor:not-allowed;
  opacity:1;
}

/* L'anello di fuoco generale lo da' standalone-lab.css a tutto cio' che sta
   dentro <main>: outline azzurro piu' l'alone --ast-focus. Su questo blocco
   scuro l'azzurro su blu notte sparirebbe, quindi qui si cambia SOLO il
   colore del contorno e lo si porta dentro il bordo per non farlo debordare
   dalla scheda. L'alone resta quello del foglio delle fondamenta: box-shadow
   non e' dichiarato qui apposta, cosi' non c'e' niente da tenere allineato. */
html[data-sago-a] #sago-a2-views button:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:-4px;
}


/* --------------------------------------------------------------------------
   5. IL DISEGNO QUOTATO
   Modello: .ast-editor-canvas di astucci, che e' carta appena azzurrata
   (#f7fafc) con un reticolo chiarissimo a passo 22px e un filetto azzurrato
   intorno. Il disegno ci galleggia sopra con un'ombra bassissima.

   IL PASSO DEL <pattern id="grid"> STA NEGLI ATTRIBUTI e da CSS non si
   cambia in modo affidabile: percio' il reticolo si dipinge come
   background-image sull'elemento <svg>, che accetta background come
   qualunque scatola, e il rettangolo che portava il vecchio reticolo va a
   fill:none. Un solo reticolo in pagina, in pixel CSS, nitido a ogni scala
   del disegno.

   La riga di sfondo si riconosce dall'attributo fill="url(#grid)": la sagoma
   e' l'unico altro <rect> figlio diretto e ha un id, quindi non e' toccata.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   5-bis. LA GEOMETRIA DEL RIQUADRO, RISOLTA UNA VOLTA SOLA
   --------------------------------------------------------------------------
   Qui vivono QUATTRO cose nello stesso spazio: il disegno, i due comandi che
   standalone.js appoggia dentro il wrap, il riquadro 3D e l'overlay delle
   quote del mu-plugin 000003. Sei tentativi sono falliti perche' ognuno
   spostava un pezzo senza sapere dove stavano gli altri tre. Il contratto,
   scritto qui una volta e rispettato da tutte le regole che seguono:

     RIGA DEL DISEGNO   da 0 alla fine dell'<svg>
     FASCIA DEI COMANDI --sago-banda, sotto il disegno, dentro il wrap

   Il wrap e' un riquadro alto quanto il disegno PIU' la fascia. Il disegno e
   il riquadro 3D stanno nella riga; l'unico comando che deve restare sempre
   raggiungibile sta nella fascia. Non si sovrappongono perche' occupano due
   zone disgiunte, non perche' qualcuno ha vinto una gara di z-index.

   LA FASCIA NON E' UN'INVENZIONE DI QUESTO FOGLIO. La riserva gia'
   standalone.css:1398, e vale 68px:
     .sago-preview-on-demand.sago-preview-dual-mode.sago-advanced-has-file{
        min-height:286px; padding-bottom:68px }
   La classe .sago-advanced-has-file la mette standalone.js:3172 e c'e'
   ESATTAMENTE quando c'e' un DXF valido, cioe' esattamente quando esiste il
   comando da ospitare (senza file standalone.css:1379 lo tiene a
   display:none !important). Fascia e comando nascono e muoiono insieme.

   IL 68 NON E' LIBERO. standalone.css:1403 centra l'altro comando con
     #sago-open-piece-preview:not(.is-open){ top:calc((100% - 68px)/2) }
   cioe' con la meta' di quel numero scritta a mano. Cambiare --sago-banda
   senza cambiare quella regola (che sta in un foglio che non e' nostro)
   scentra il comando della differenza. Percio' il token vale 68 e non 56:
   il valore che il coordinatore aveva messo in standalone-lab-fix.css
   scentrava "Apri preview pezzo" di 6px verso il basso.
   Sotto i 520px standalone.css:1464 passa a 64px: il token lo segue.

   min-height:0 E' LA CHIAVE DELL'ALLINEAMENTO. Con il 286px di standalone.css
   la scatola del wrap resta piu' alta del disegno nella banda 1024-1180
   (disegno 269x185, scatola 218+68): il riquadro 3D, che copre la riga,
   sarebbe 33px piu' alto del disegno che sostituisce e passando da una vista
   all'altra il bordo salterebbe. Azzerato il minimo, la riga vale ESATTAMENTE
   la scatola dell'<svg> e i due bordi coincidono al pixel.
   Serve (0,3,1) per battere il (0,3,0) di standalone.css: da qui la colonna
   nel selettore. Nessun !important: la specificita' basta.
   -------------------------------------------------------------------------- */
/* UN SOLO INTERRUTTORE. --sago-banda vale 0 finche' non c'e' un file, e vale
   la fascia appena la classe di standalone.js arriva. Tutto cio' che dipende
   dalla fascia - l'imbottitura del wrap, il fondo del riquadro 3D, la
   posizione del comando - LEGGE questo token e non ripete il numero. Se un
   domani la fascia dovesse cambiare misura si cambia qui e le tre cose
   restano d'accordo: e' la sola difesa contro il difetto che si e' ripetuto
   sei volte, cioe' due regole che descrivono la stessa geometria e non lo
   sanno.
   Le custom property si ereditano: il riquadro 3D e' un discendente del wrap
   e legge lo stesso valore senza che nessuno glielo ripeta. */
html[data-sago-a] .sago-visual-column .sago-drawing-wrap{
  --sago-banda:0px;
}

html[data-sago-a] .sago-visual-column .sago-drawing-wrap.sago-advanced-has-file{
  --sago-banda:68px;
}

@media (max-width:520px){
  html[data-sago-a] .sago-visual-column .sago-drawing-wrap.sago-advanced-has-file{
    --sago-banda:64px;
  }
}

/* (0,4,1): serve a battere sia il (0,3,0) di standalone.css sia il (0,3,1) con
   !important che standalone-lab-fix.css tiene sulla stessa proprieta'. Cosi'
   questa regola e' giusta ANCHE PRIMA che quel blocco venga cancellato, e
   resta giusta dopo. */
html[data-sago-a] .sago-visual-column .sago-tech-preview .sago-drawing-wrap{
  position:relative;
  display:grid;
  min-height:0;
  margin-top:0;
  padding-bottom:var(--sago-banda,0px) !important;
}

html[data-sago-a] #sago-drawing{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background-color:var(--ast-page,#f8fafc);
  background-image:
    linear-gradient(#eaeff5 1px,transparent 1px),
    linear-gradient(90deg,#eaeff5 1px,transparent 1px);
  background-size:22px 22px;
  box-shadow:var(--ast-shadow-soft,0 8px 18px rgba(15,23,42,.045));
}

html[data-sago-a] #sago-drawing>rect[fill*="url"]{
  fill:none;
}

/* Se un domani l'attributo fill di quel rettangolo cambiasse, il pattern
   tornerebbe visibile: meglio che sia gia' del colore giusto invece che
   dell'azzurro acceso di oggi. */
html[data-sago-a] #sago-drawing #grid path{
  fill:none;
  stroke:#eaeff5;
  stroke-width:1;
}

/* LA SAGOMA. Il colore NON e' libero: il mu-plugin 000003 riconosce "il
   disegno" fiutando il colore del tratto, e pretende canale blu > 145, blu >
   rosso+55 e blu > verde+35. Se la sagoma non passa quel test il mu-plugin
   non trova nulla, la quotatura con tacche e frecce non viene disegnata e
   NESSUN ERRORE LO DICE.
   --ast-blue #0878e8 = rgb(8,120,232): 232>145, 232>63, 232>155. Passa con
   largo margine. Chi derivera' una tinta piu' scura rifaccia i tre conti.

   filter:none toglie l'ombra portata di standalone.css. Non e' solo gusto:
   getBoundingClientRect di un elemento filtrato puo' comprendere la regione
   del filtro, e quel rettangolo e' esattamente cio' che il mu-plugin misura
   per decidere dove mettere le quote. L'ombra morbida di astucci sta sulla
   scatola dell'<svg> (box-shadow), dove non misura niente nessuno.

   IL TRATTO E' SCESO DA 2,6 A 2. Il committente ha chiamato "orribili" le
   quote, ed era vero, ma il contorno a 2,6 era l'altra meta' del difetto: un
   bordo cosi' marcato obbliga le quote ad alzare la voce per farsi vedere
   accanto. In una tavola tecnica il pezzo e' un contorno sottile e continuo.

   DUE UNITA' DI MISURA DIVERSE, e va detto perche' i due numeri qui sotto non
   sono uguali per sbaglio: #sago-drawing-shape non ha vector-effect, quindi
   il suo spessore e' in unita' del viewBox e viene scalato; #sago-drawing-real
   porta vector-effect="non-scaling-stroke" in attributo, quindi il suo
   spessore e' gia' in pixel veri. Nel caso peggiore (finestra 1024px, SVG
   servito a 269px, scala 0,8405) 2 unita' valgono 1,68px: percio' il tratto
   reale sta a 1,7 e i due disegni pesano uguale dove piu' conta.
   Il contorno mantiene 3,85:1 sul proprio riempimento e 4,13:1 sulla carta:
   sopra il 3:1 richiesto alla grafica che porta informazione.

   SULLA SPECIFICITA' DI QUESTE REGOLE E DI QUELLE DELLE QUOTE.
   standalone-lab-fix.css e' l'ultimo foglio della cascata e tiene sugli stessi
   nodi un blocco con !important (il suo blocco 11). Finche' resta li', una
   regola scritta qui senza !important e' lavoro morto: morte.py lo direbbe, e
   il committente vedrebbe ancora i colori vecchi. Percio' i selettori qui
   sotto sono alzati di un grado rispetto ai suoi e portano !important sulle
   sole proprieta' che lui contende. Cosi' questo foglio e' corretto ADESSO e
   resta corretto quando quel blocco verra' cancellato - che e' cio' che il
   rapporto chiede di fare.
     suo   html[data-sago-a] #sago-drawing #sago-drawing-shape        (2,1,1)
     mio   html[data-sago-a] .sago-drawing-wrap #sago-drawing #...    (2,2,1)
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-drawing-wrap #sago-drawing #sago-drawing-shape{
  fill:#eaf3fd !important;
  stroke:var(--ast-blue,#0878e8) !important;
  stroke-width:2 !important;
  stroke-linejoin:round;
  rx:3px;
  ry:3px;
  filter:none;
}

html[data-sago-a] .sago-drawing-wrap #sago-drawing #sago-drawing-real{
  fill:#eaf3fd !important;
  stroke:var(--ast-blue,#0878e8) !important;
  stroke-width:1.7 !important;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none;
}

/* LE DUE LINEE DI QUOTA DEL TEMPLATE. "Orribili": erano 1,4 di spessore in
   --ast-mute, cioe' due bastoni piu' scuri e piu' grossi del contorno che
   dovevano descrivere. Scese a 1 e schiarite.

   IL COLORE NON E' LIBERO, e non e' una scelta di gusto: il mu-plugin 000003
   nasconde queste due linee (e disegna al loro posto la quotatura moderna)
   SOLO se le riconosce neutre - canale massimo < 175 e scarto fra canali
   < 42, funzione neutral() a riga 740. Se non le riconosce restano in pagina
   insieme alle nuove, doppie, e nessun errore lo dice.
   #78899e = rgb(120,137,158): massimo 158 < 175, scarto 38 < 42. Passa.
   Non e' nemmeno "blu" per la funzione blue() (servirebbe 158 > 120+55):
   quindi non viene mai scambiato per il disegno da quotare.
   ATTENZIONE per chi cambiera' tinta: --ast-copy #62788e ha scarto 44 e NON
   passerebbe il test dei neutri.

   Contrasto, calcolato e non stimato: 3,42:1 sulla carta del riquadro
   (#f8fafc), 3,09:1 sopra una riga del reticolo (#eaeff5) e 3,19:1 dove la
   linea passa sopra la sagoma (#eaf3fd). Sopra il 3:1 in TUTTI E TRE i fondi
   che puo' incontrare: il #7d8fa4 che era stato proposto stava a 2,87 sul
   reticolo, cioe' passava solo nel caso migliore. */
html[data-sago-a] .sago-drawing-wrap #sago-drawing line{
  stroke:#78899e !important;
  stroke-width:1 !important;
  stroke-linecap:round !important;
}

/* Le due scritte "Larghezza —" / "Altezza —". Il mu-plugin le nasconde per
   id appena conosce le misure vere, quindi si vedono solo prima del primo
   DXF: e' comunque il primo stato che il cliente incontra.

   IL PAVIMENTO DEI 12px, RIFATTO CON LE COLONNE DI OGGI. La misura e' in
   unita' del viewBox (320 di larghezza) e va convertita alla larghezza
   servita. La catena e' in /root/backups/2026-08-16-preview/geometria.py:
   main rientra di --ast-pad-x, la colonna e' clamp(349px,27.8vw,446px) sopra
   i 1181px e clamp(268px,29vw,330px) fra 1024 e 1180, il pannello toglie
   2 x --ast-panel-pad piu' 2px di filetto.
   Il caso peggiore NON e' il desktop stretto: e' 1024px, dove la colonna vale
   297px e l'SVG e' servito a 269px, scala 0,8405. Li' servono 14,28 unita'
   per arrivare a 12px veri. A 320px di finestra (una colonna sola, ma
   rientrata) si scende a 260px e la soglia sale a 14,77 unita'.
   Percio' 15 resta il pavimento e non si scende: 15 x 0,8125 = 12,19px veri.
   Le 13,5 unita' che erano state proposte valgono 10,97px reali a 320px e
   11,35px a 1024px, cioe' sotto il pavimento in due bande su cinque.
   Peso 500 invece di 700 e tinta piu' tenue: e' li' che si toglie il grasso,
   non nella misura. #5b6b7f su #f8fafc = 5,21:1, sopra AA. */
html[data-sago-a] .sago-visual-column .sago-drawing-wrap #sago-drawing-width,
html[data-sago-a] .sago-visual-column .sago-drawing-wrap #sago-drawing-height{
  fill:#5b6b7f !important;
  font-family:var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
}


/* --------------------------------------------------------------------------
   6. LA QUOTATURA VERA (nodi creati dal mu-plugin 000003, non nel template)
   #sago-mini-dims-v1 e' un <svg> che il mu-plugin appende alla scheda quando
   conosce larghezza e altezza: e' LUI a disegnare linee di richiamo, quote,
   frecce e numeri, ed e' quindi lui il "disegno quotato" che il cliente vede
   davvero appena carica un file.

   Modello: .ast-dimension-label di astucci - numero in blu profondo con
   alone di carta, linea sottile con frecce, richiami tratteggiati.

   QUI C'E' UNA TRAPPOLA CHE VA SCRITTA. Il mu-plugin, a ogni nuovo giro,
   sceglie l'SVG piu' grande dentro la scheda: dopo il primo disegno quello
   piu' grande e' il SUO overlay, non #sago-drawing. Poi cerca dentro
   l'SVG scelto gli elementi con tratto blu per ricavare il rettangolo da
   quotare. Oggi non trova niente (le sue linee sono grigie) e si ferma
   senza danno. Se qualcuno colorasse di azzurro .sago-q o le frecce, il
   mu-plugin comincerebbe a quotare LE PROPRIE QUOTE, spingendole piu' in
   fuori a ogni giro. Percio' qui l'azzurro di astucci sta sui NUMERI (che
   nessuno misura) e le linee restano grigie.
   Verifica: #0b2745 = rgb(11,39,69), canale blu 69, molto sotto la soglia
   di 145; #64748b ha blu 139, sotto 145; --ast-line #d7e3ee ha blu 238 ma
   238 non e' maggiore di 215+55, quindi fallisce il test lo stesso.

   Il blocco <style> del mu-plugin non usa !important su questi tratti e sta
   in mezzo al documento: la specificita' e' comunque alzata di un grado
   (html[data-sago-a]) perche' vinca anche la copia in TESTA di questo
   foglio, e non solo quella in coda. Altrimenti il primo paint mostrerebbe
   i colori del mu-plugin e poi salterebbe ai nostri.
   -------------------------------------------------------------------------- */
/* QUESTE SONO LE QUOTE CHE IL CLIENTE VEDE DAVVERO.
   Va detto forte perche' il primo tentativo di rispondere a "le quote sono
   orribili" ha vestito #sago-drawing line, cioe' le due linee del TEMPLATE,
   che il mu-plugin nasconde appena conosce le misure: da quel momento in poi
   chi guarda la pagina sta guardando questi nodi qui, non quelli. Chi
   correggera' l'aspetto delle quote deve cambiare QUESTA sezione. */
html[data-sago-a] #sago-mini-dims-v1 .sago-q{
  fill:none;
  stroke:#78899e;
  stroke-width:1.25;
  stroke-linecap:round;
}

/* I richiami che collegano il numero allo spigolo. Erano --ast-line #d7e3ee,
   cioe' 1,25:1 sulla carta del riquadro: una linea che porta informazione e
   che praticamente non si vede. Portati allo stesso grigio delle quote: a
   distinguerli basta il tratteggio, che e' anche il segno che una tavola
   tecnica usa da sempre per i richiami. Ora tutto cio' che quota sta sopra
   il 3:1, senza asterischi. */
html[data-sago-a] #sago-mini-dims-v1 .sago-e{
  fill:none;
  stroke:#78899e;
  stroke-width:1;
  stroke-dasharray:3 4;
}

/* Le frecce stanno dentro <marker> e portano lo stroke scritto in
   attributo: un attributo di presentazione perde contro qualunque regola
   d'autore, quindi da qui si raggiungono senza toccare il markup. */
html[data-sago-a] #sago-mini-dims-v1 marker path{
  fill:none;
  stroke:#78899e;
  stroke-width:1.15;
}

/* Il numero interrompe la linea di quota: lo stacco e' l'alone di carta
   ottenuto con paint-order (gia' nel blocco del mu-plugin), qui se ne
   cambiano colore e misura.

   ERA QUESTO IL "GRASSETTO QUASI NERO". --ast-navy #0b2745 a peso 700 da'
   15,10:1 su carta: non e' un numero di quota, e' un titolo appoggiato sul
   disegno. Sceso a #475569 e peso 600, che su bianco vale 7,58:1 - largamente
   sopra AA - e smette di pesare piu' del pezzo.

   QUI IL viewBox NON VA CONVERTITO, e va scritto perche' e' l'eccezione:
   il mu-plugin monta l'overlay con viewBox "0 0 card.clientWidth
   card.clientHeight" e lo stende a inset:0 sulla stessa scheda, quindi la
   scala e' esattamente 1:1 e questi 12px sono 12px veri a qualunque
   larghezza. Sotto i 12 non si scende comunque.

   IL COLORE HA UN VINCOLO. Il mu-plugin, al giro dopo, cerca dentro l'SVG
   piu' grande gli elementi con tratto BLU per capire cosa quotare. Se questi
   numeri diventassero azzurri comincerebbe a quotare le proprie quote.
   #475569 = rgb(71,85,105): canale blu 105, molto sotto la soglia di 145.
   L'alone e' bianco (255,255,255) e non passa il test perche' 255 non e'
   maggiore di 255+55. Nessuno dei due viene scambiato per il disegno. */
html[data-sago-a] #sago-mini-dims-v1 text{
  fill:#475569;
  stroke:#ffffff;
  stroke-width:4.5;
  font-family:var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif);
  font-size:12px;
  font-weight:600;
  letter-spacing:.012em;
}

/* --------------------------------------------------------------------------
   6-bis. LE QUOTE NON SI DISEGNANO SOPRA IL SOLIDO
   --------------------------------------------------------------------------
   Sovrapposizione vera, verificata sulla cascata e non dedotta: l'overlay del
   mu-plugin sta a z-index 20 con inset:0 SULLA SCHEDA INTERA (blocco inline
   sago-mini-dims-v1-css, con !important), mentre il riquadro 3D sta a
   z-index 12 dentro il wrap. Nessuno dei due antenati crea un contesto di
   impilamento - .sago-panel e .sago-mini-dims-card-v1 sono position:relative
   con z-index auto - quindi i due numeri si confrontano davvero, e 20 vince.
   Risultato: passando a "Vista 3D" le quote del disegno 2D restano disegnate
   sopra il solido nero, dove non descrivono piu' niente.

   visibility:hidden e non opacity:0, e non e' un dettaglio: il mu-plugin
   sceglie l'SVG piu' grande dentro la scheda filtrando per visible(), che
   legge getComputedStyle().visibility. Nascosto cosi', l'overlay ESCE da
   quella gara e il mu-plugin torna a misurare #sago-drawing, che e' il nodo
   giusto; con opacity:0 resterebbe il piu' grande e continuerebbe a vincerla.
   L'overlay viene comunque ridisegnato mentre e' invisibile, quindi tornando
   al disegno le quote sono gia' quelle giuste.

   :has() e' la sola strada da CSS: lo stato sta su #sago-a2-3d-pane, che nel
   DOM viene DOPO l'overlay e dopo i comandi, e non esiste un combinatore
   all'indietro. Dove :has() non c'e' non si perde nulla di nuovo: si resta al
   comportamento di oggi. */
html[data-sago-a] .sago-tech-preview:has(#sago-a2-3d-pane.is-on) #sago-mini-dims-v1{
  visibility:hidden;
}


/* --------------------------------------------------------------------------
   7. I TRE COMANDI DELLA PREVIEW, E DOVE STA CIASCUNO
   --------------------------------------------------------------------------
   Nodi creati da JavaScript, nessuno dei tre e' nel template:
     #sago-open-piece-preview      standalone.js:1447, appeso al wrap
     #sago-open-advanced-preview   standalone.js:2432, clone del primo,
                                   inserito subito dopo di lui
     #sago-a2-3d-reset             standalone-a-stage.js:2135, dentro il
                                   riquadro 3D
   Nessuno dei tre si puo' nascondere alla leggera: il mu-plugin 000003
   riconosce la scheda da quotare risalendo fino all'antenato che contiene sia
   "ingombro rilevato" sia "anteprima avanzata" (findCard, riga 693). Il testo
   sopravvive anche a display:none, ma la scheda va tenuta d'occhio.

   LA GARA DI CASCATA SUL POSIZIONAMENTO, RISOLTA. Chi vince, e perche':

   position   .sago-open-piece-preview{position:absolute}   standalone.css:919
              html[data-sago-a] .sago-visual-column #sago-open-advanced-preview
              {position:absolute!important}                 lab-fix.css (1,2,1)
              -> assoluto in ogni caso.
              NON ESISTE NESSUN position:static !important su .sago-drawing-wrap.
              I due che ci sono in standalone.css (righe 35 e 49) stanno su
              `body .sago-page > main` e su `.sago-page .sago-hero`, e non
              toccano questo nodo. Il wrap e' relative da standalone.css:913
              (.sago-preview-on-demand) e da questo foglio: quella regola non
              ha mai perso nulla.

   transform  .sago-preview-on-demand.sago-preview-dual-mode
              #sago-open-advanced-preview.sago-open-piece-preview
              {transform:translateX(-50%)}   standalone.css:1429, (1,3,0)
              -> E' QUESTO il motivo per cui il comando e' uscito dal pannello
              sul bordo sinistro. Nessuno lo aveva dichiarato altrove, quindi
              ha continuato a vincere; con left:12px, right:12px e width:auto
              il bottone e' largo circa 289px e viene traslato di -144px, cioe'
              esce dal pannello di circa 132px. Il difetto non era un
              position:relative perso: era una traslazione rimasta accesa.
              La regola del foglio delle fondamenta che azzera le traslazioni
              (html[data-sago-a] .sago-visual-column > *) colpisce solo i figli
              DIRETTI della colonna, e questo bottone e' due livelli piu' sotto.
              Percio' qui transform:none e' dichiarato per nome, con !important
              e a (1,3,1), che batte il (1,3,0) avversario in ogni caso.

   display    .sago-preview-on-demand.sago-preview-dual-mode
              #sago-open-advanced-preview:disabled{display:none!important}
              standalone.css:1379, (1,2,0) con !important.
              -> senza DXF il comando NON ESISTE in pagina. Da qui discende
              che vestire il suo stato :disabled e' lavoro morto, ed e' il
              motivo per cui questo foglio non lo veste.

   LA FORMA DEFINITIVA, e perche' non puo' sovrapporsi a niente:
   il comando non galleggia piu' sopra qualcosa sperando che l'altro sia
   altrove. Sta nella FASCIA riservata sotto il disegno (--sago-banda, sezione
   5-bis), e tutto cio' che potrebbe coprirlo si ferma sopra la fascia:
     - il riquadro 3D arriva a bottom:var(--sago-banda), non a 0 (sezione 8);
     - l'overlay delle quote e' a z-index 20, il comando a 30;
     - l'altro comando e' centrato nella sola area del disegno.
   Sono tre zone disgiunte, quindi la non sovrapposizione e' una proprieta'
   della geometria, non un equilibrio fra z-index da rifare a ogni modifica.

   E NON PUO' USCIRE DAL PANNELLO A NESSUNA LARGHEZZA: left e right sono
   entrambi dichiarati e width e' auto, quindi la larghezza del bottone e'
   per costruzione quella del wrap meno 24px. min-width:0 toglie il
   min-width:210px di standalone.css:1414, che a colonne piu' strette di 234px
   avrebbe fatto sfondare la scatola. Verificato: la colonna piu' stretta e'
   269px a 1024px di finestra, quindi il bottone e' largo 245px.

   La coppia e' quella di astucci: il secondario e' bianco con filetto
   azzurrato (.ast-view-group button), il primario e' l'azzurro pieno
   (.ast-action-blue), unico riempimento saturo di questa colonna.
   -------------------------------------------------------------------------- */
/* IL FILETTO NON E' DECORAZIONE, E' IL CONFINE DEL COMANDO. Questo bottone e'
   bianco e sta appoggiato sulla carta del disegno (#f8fafc): il riempimento
   non lo distingue dal fondo (1,03:1), quindi l'unica cosa che dice "qui c'e'
   un bottone" e' il bordo, e per WCAG 1.4.11 deve stare sopra 3:1.
   Il #d4e1ec di prima valeva 1,27:1 sul riquadro e 1,33:1 su carta: era un
   comando senza confine visibile. #7d8fa4 sta a 3,17:1 sul riquadro, 3,31:1
   su carta e 3,13:1 sul fondo spento, e resta un filetto sottile. */
html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview{
  min-height:42px;
  padding:0 16px;
  border:1px solid #7d8fa4;
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#ffffff);
  color:var(--ast-text,#29445f);
  font-family:var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:-.005em;
  box-shadow:0 3px 10px rgba(20,57,89,.06);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}

/* Il rombo azzurro diventa il quadratino di riferimento del disegno: e' lo
   stesso segno che astucci usa sugli angoli delle quote. */
html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview::before{
  width:9px;
  height:9px;
  margin-right:9px;
  border:1.5px solid var(--ast-blue,#0878e8);
  border-radius:1px;
  background:transparent;
  box-shadow:none;
}

/* L'azzurro che qui diventa inchiostro e' --ast-blue-text, non --ast-blue:
   #0878e8 su #f0f8ff sarebbe sotto 4,5, #075fbd sta a 5,79.
   Il filetto era #7eb9ec, che sul proprio fondo vale 1,95:1: al passaggio del
   mouse il bordo del comando SPARIVA quasi. #3b8fd6 sta a 3,22:1 e resta
   della stessa famiglia azzurra. */
html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview:hover:not(:disabled){
  border-color:#3b8fd6;
  background:#f0f8ff;
  color:var(--ast-blue-text,#075fbd);
  box-shadow:0 5px 14px rgba(8,119,230,.12);
}

html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview.is-open{
  min-height:32px;
  padding:0 11px;
  font-size:12px;
  box-shadow:0 3px 10px rgba(20,57,89,.08);
}

html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview:disabled{
  border-color:#7d8fa4;
  background:var(--ast-soft,#f5f9fd);
  color:var(--ast-text,#29445f);
  box-shadow:none;
  opacity:1;
}

html[data-sago-a] .sago-drawing-wrap .sago-open-piece-preview:disabled::before{
  border-color:var(--ast-mute,#64748b);
}

/* MENTRE SI GUARDA IL 3D, "Apri preview pezzo" NON DEVE RESTARE SOTTO IL
   RIQUADRO. E' centrato nell'area del disegno, che il riquadro 3D copre per
   intero: coperto resterebbe comunque nell'ordine di tabulazione, cioe' un
   comando che prende il fuoco senza che si veda dove e' finito. Ed e' anche
   un comando che in quello stato non ha piu' senso: governa il disegno 2D.
   visibility:hidden lo toglie dalla vista E dal fuoco in un colpo solo.
   Il testo resta nel DOM, quindi findCard() del mu-plugin continua a
   riconoscere la scheda.
   Sul perche' :has(): vedi la nota della sezione 6-bis. Dove non c'e', si
   resta al comportamento di oggi. */
html[data-sago-a] .sago-drawing-wrap:has(#sago-a2-3d-pane.is-on) #sago-open-piece-preview{
  visibility:hidden;
}

/* IL PRIMARIO, E LA SUA POSIZIONE DEFINITIVA.
   standalone.css lo veste e lo posiziona con
   .sago-preview-on-demand.sago-preview-dual-mode #sago-open-advanced-preview.sago-open-piece-preview
   che vale (1,3,0): il selettore qui sotto vale (1,3,1) e lo batte per
   specificita' in ogni copia del foglio, quindi non c'e' lampeggio al primo
   paint. !important sulle sole proprieta' di posizione, per battere anche il
   blocco 10 di standalone-lab-fix.css finche' resta in cascata: cosi' questa
   regola e' corretta prima e dopo la sua cancellazione.

   left+right+width:auto -> larghezza vincolata al wrap, mai in eccedenza.
   transform:none        -> annulla il translateX(-50%) di standalone.css,
                            che e' l'unica causa reale dell'uscita a sinistra.
   bottom -> il comando e' centrato nella fascia: (68-44)/2 = 12.
   top:auto -> il top:50% di .sago-open-piece-preview non deve tornare vivo se
               un domani cadesse la regola dual-mode che oggi lo azzera.
   z-index:30 -> sopra l'overlay delle quote (20). Serve perche' il mu-plugin
               calcola la linea di quota orizzontale a y2+19 dal fondo della
               sagoma: con un DXF che riempie il viewBox quella linea puo'
               finire nella fascia, e passerebbe sopra il comando.

   L'azzurro pieno di astucci (.ast-action-blue) e' una sfumatura verticale;
   qui il punto piu' chiaro e' portato a #0a75dc perche' il testo bianco
   arrivi a 4,57:1 invece dei 3,84 dell'originale. Sul punto scuro sta a
   5,69:1. */
html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview{
  position:absolute !important;
  top:auto !important;
  right:12px !important;
  bottom:12px !important;
  left:12px !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  transform:none !important;
  z-index:30 !important;

  /* !important anche sul vestito, e per lo stesso motivo scritto alla
     sezione 5: il blocco 5 di standalone-lab-fix.css veste questo bottone
     con !important a (1,2,1). Il selettore qui vale (1,3,1) e lo batte fra
     gli !important, quindi il comando ha il suo aspetto definitivo gia'
     adesso, senza aspettare che quel blocco venga cancellato. */
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px !important;
  padding:0 14px !important;
  border:1px solid #0768ce !important;
  border-radius:var(--ast-r,4px) !important;
  background:linear-gradient(180deg,#0a75dc 0%,#0664cb 100%) !important;
  color:#ffffff !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  box-shadow:0 7px 16px rgba(8,119,232,.18) !important;
}

/* DIRE CHE QUEL TASTO APRE IL 3D GRANDE, SENZA INVENTARE UN'ETICHETTA.
   Il committente ha scritto "non c'e' un tasto per aprire il 3d grande"
   mentre il tasto gli stava davanti: si chiama "Apri anteprima avanzata", e
   quella parola la scrive standalone.js, che e' condiviso con la pagina dei
   clienti e non si tocca.
   Dal CSS la strada onesta e' UNA SOLA: due glifi decorativi, content:"" e
   ritaglio con mask-image. Un ::after con del TESTO dentro sarebbe
   un'etichetta finta - alcuni lettori di schermo annunciano il contenuto
   generato e altri no, quindi cio' che si legge e cio' che si sente
   divergerebbe a seconda dell'ausilio. Un glifo no: e' decorazione per tutti.
     ::before  lo stesso cubo della meta' "Vista 3D" del segmento qui sopra,
               cosi' l'occhio collega il comando a quella vista;
     ::after   i quattro angoli dell'ingrandimento, che e' il segno con cui
               tutti aprono qualcosa a schermo intero.
   Letti insieme: cubo + a tutto schermo. Il testo resta quello che e'.
   La riscrittura vera dell'etichetta e' nel rapporto: e' markup, non CSS. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview::before,
  html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview::after{
    content:"";
    flex:none;
    width:17px;
    height:17px;
    margin:0;
    border:0;
    border-radius:0;
    background:currentColor;
    box-shadow:none;
    transform:none;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:17px 17px;
    mask-size:17px 17px;
  }

  html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 7-4 7 4-7 4-7-4Z'/%3E%3Cpath d='M5 8v8l7 4 7-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 7-4 7 4-7 4-7-4Z'/%3E%3Cpath d='M5 8v8l7 4 7-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M15 20h5v-5'/%3E%3Cpath d='M9 20H4v-5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M15 20h5v-5'/%3E%3Cpath d='M9 20H4v-5'/%3E%3C/svg%3E");
  }
}

/* Senza supporto alle maschere due quadrati pieni non sono icone, sono un
   errore: in quel caso restano il quadratino bianco di standalone.css al
   posto del cubo e nessun ::after. Il comando resta leggibile e cliccabile. */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview::before{
    width:9px;
    height:9px;
    margin:0;
    border:1.5px solid rgba(255,255,255,.92);
    border-radius:1px;
    background:transparent;
    box-shadow:none;
    transform:none;
  }
}

html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview:hover:not(:disabled){
  border-color:#075fbd;
  background:linear-gradient(180deg,#0768ce 0%,#075fbd 100%);
  color:#ffffff;
  transform:none !important;
  box-shadow:0 9px 20px rgba(8,119,232,.24);
}

/* standalone.css:1445 e :1455 rialzano il bottone di 1-2px al passaggio del
   mouse e al click RIDICHIARANDO transform con il translateX dentro. Se non
   si annullano anche li', il comando torna a uscire dal pannello per il tempo
   in cui ci si passa sopra: un difetto che si vede solo col mouse addosso, ed
   e' esattamente il tipo di cosa che nessuno riesce a riprodurre. */
html[data-sago-a] .sago-drawing-wrap #sago-open-advanced-preview.sago-open-piece-preview:active:not(:disabled){
  transform:none !important;
}

/* Questi due comandi NON hanno una regola di fuoco propria: quella generale
   di standalone-lab.css (main :focus-visible, outline azzurro piu' alone
   --ast-focus) e' gia' giusta su fondo chiaro. Scriverne una qui vincerebbe
   per specificita' e, non ridichiarando il box-shadow, spegnerebbe l'alone:
   sarebbe un peggioramento travestito da rifinitura. */


/* --------------------------------------------------------------------------
   8. IL RIQUADRO 3D (creato da standalone-a-stage.js, non nel template)
   #sago-a2-3d-pane e i suoi quattro figli (#sago-a2-3d-host, -hint, -reset,
   -foot) nascono da JS e si sovrappongono al disegno quando si sceglie
   "Vista 3D".

   ATTENZIONE: queste righe non sono vestizione, sono LA MECCANICA DELLO
   STATO. Il foglio che le conteneva (standalone-a-stage.css) non e' fra i
   fogli 'lab': senza il display:none qui sotto il riquadro 3D resterebbe
   SEMPRE aperto sopra il disegno, perche' nessuno gli direbbe di stare
   chiuso. La struttura e' quella gia' provata sulla variante A; cambiano
   solo colori, raggi e filetti.

   Il fondo e' quello di .ast-three-wrap: un alone radiale chiarissimo che
   fa sembrare il solido illuminato dall'alto. RESTA CHIARO anche adesso che
   il solido e' gommapiuma nera vera (window.SagoPreview3DColor = 0x24262a,
   dichiarato nel template solo per questa pagina): un pezzo nero su carta
   bianca e' come si guarda un pezzo, e il contrasto fra i due e' 15,15:1.
   Fondo scuro piu' pezzo scuro sarebbe l'unica combinazione che non funziona.

   bottom:var(--sago-banda) E' LA CORREZIONE PIU' IMPORTANTE DI QUESTO FOGLIO.
   Il riquadro stava a bottom:0, cioe' copriva anche la fascia dei comandi -
   e con z-index 12 contro 8 copriva davvero "Apri anteprima avanzata". E'
   l'unica causa di tre dei sei tentativi falliti:
     - comando lasciato nel flusso        -> ci finiva sotto;
     - comando alzato a z-index sopra 12  -> galleggiava sopra la nota degli
                                             scassi, che sta nel PIEDE DI
                                             QUESTO RIQUADRO (#sago-a2-3d-foot,
                                             riempito da describe()): ecco
                                             perche' "copre tutto";
     - fascia riservata ma riquadro sempre a inset:0 -> la fascia c'era e il
                                             riquadro ci stava sopra lo stesso.
   Fermando il riquadro sopra la fascia le due zone diventano disgiunte e non
   c'e' piu' niente da arbitrare. Il token vale 0 quando non c'e' un file, e
   in quel caso il riquadro torna a coprire tutto il wrap: e' giusto, perche'
   senza file il comando non esiste (standalone.css:1379).
   Nota: standalone-a-stage.js chiude il riquadro appena il file sparisce
   (syncEnabled), quindi riquadro aperto e fascia esistono sempre insieme.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sago-a2-3d-pane{
  position:absolute;
  top:0;
  right:0;
  bottom:var(--sago-banda,0px);
  left:0;
  z-index:12;
  display:none;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:radial-gradient(circle at 52% 43%,#ffffff 0,#ffffff 38%,#f7fbff 100%);
}

html[data-sago-a] #sago-a2-3d-pane.is-on{display:flex}

/* Il piede porta due righe fisse piu' l'avvertenza sugli scassi, che nella
   colonna piu' stretta (SVG servito a 269px) va a cinque righe e si mangia
   127px dei 186 del riquadro: resterebbero 59px per il solido, cioe' niente.
   Percio' l'ospite ha un pavimento in percentuale (il riquadro ha un'altezza
   definita, quindi la percentuale si risolve) e il piede puo' comprimersi e
   scorrere invece di schiacciare la vista. A 1181px e oltre il piede ci sta
   per intero e non compare nessuna barra.
   La cura vera non e' qui: e' spostare quell'avvertenza fuori dal riquadro.
   Sta nel rapporto perche' e' markup, non CSS. */
html[data-sago-a] #sago-a2-3d-host{
  position:relative;
  flex:1 1 auto;
  min-height:46%;
  display:flex;
  overflow:hidden;
}

/* La pastiglia dell'aiuto: e' .ast-scene-hint di astucci, riportata in alto
   a sinistra perche' in basso al centro incrocerebbe il piede, che qui
   esiste e li' no.

   VIA LA TRASPARENZA, ED E' UN CONTO NON UN GUSTO. Il fondo era
   rgba(255,255,255,.86): su carta bianca il testo #62788e valeva 4,57:1, ma
   il solido e' nero e quando ci passa sotto la pastiglia diventa #e0e1e1 e il
   testo scende a 3,49:1, cioe' sotto AA. Una pastiglia traslucida ha il
   contrasto di cio' che le sta dietro, e qui dietro ci gira un pezzo che
   l'utente muove col mouse: il fondo non e' prevedibile, quindi non puo'
   essere trasparente. Opaca, con inchiostro --ast-text: 10,07:1 sempre.
   Il filetto serve a staccare la pastiglia bianca dal fondo bianco del
   riquadro: #7d8fa4 vale 3,31:1 li' e 4,57:1 sopra il solido nero.

   max-width: l'aiuto e "Reimposta vista" sono due assoluti agganciati allo
   stesso bordo superiore, uno a sinistra e uno a destra. L'aiuto a 12px e'
   largo circa 215px e il bottone circa 120px: sotto i 344px di riquadro si
   sovrapporrebbero, e il riquadro e' largo 269px a 1024px di finestra, cioe'
   sempre nella banda desktop stretta. Con il tetto l'aiuto va a capo invece
   di finire sotto il bottone. 132px = 120 del bottone piu' 9 di margine piu'
   3 di aria. */
html[data-sago-a] #sago-a2-3d-hint{
  position:absolute;
  left:9px;
  top:9px;
  z-index:2;
  max-width:calc(100% - 132px);
  padding:5px 9px;
  border:1px solid #7d8fa4;
  border-radius:var(--ast-r-pill,999px);
  background:var(--ast-paper,#ffffff);
  color:var(--ast-text,#29445f);
  font-size:12px;
  line-height:1.25;
  font-weight:600;
  pointer-events:none;
}

/* Stesso ragionamento del filetto dei comandi: un bottone bianco sul fondo
   bianco del riquadro ha il solo bordo a dire dove finisce, e sopra il solido
   nero deve continuare a leggersi. #7d8fa4 passa su tutti e due i fondi
   (3,31:1 sul chiaro, 4,57:1 sul nero); il #d4e1ec di prima stava a 1,33:1. */
html[data-sago-a] #sago-a2-3d-reset{
  position:absolute;
  right:9px;
  top:9px;
  z-index:2;
  height:32px;
  padding:0 12px;
  border:1px solid #7d8fa4;
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#ffffff);
  color:var(--ast-text,#29445f);
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}

html[data-sago-a] #sago-a2-3d-reset:hover{
  border-color:#3b8fd6;
  background:#f0f8ff;
  color:var(--ast-blue-text,#075fbd);
}

/* Anche qui il fuoco lo da' standalone-lab.css: vedi la nota sui due comandi
   dentro il disegno. */

/* Il piede porta spessore e numero di fori. La riga di avvertenza sugli
   scassi ha il colore scritto in style inline dal JS (#8A5A12): da qui non
   si tocca senza !important, e non lo merita - e' un ambra di avviso, che
   nella famiglia astucci ci sta. */
html[data-sago-a] #sago-a2-3d-foot{
  flex:0 1 auto;
  min-height:0;
  overflow:auto;
  padding:9px 11px;
  border-top:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-paper,#ffffff);
  color:var(--ast-copy,#62788e);
  font-size:12px;
  line-height:1.45;
}

html[data-sago-a] #sago-a2-3d-foot b{
  color:var(--ast-navy,#0b2745);
  font-weight:800;
}

html[data-sago-a] #sago-a2-3d-foot:empty{display:none}

html[data-sago-a] .sago-a2-3d-msg{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:18px;
  text-align:center;
  color:var(--ast-copy,#62788e);
  font-size:13px;
  line-height:1.5;
}

html[data-sago-a] .sago-a2-3d-msg strong{
  color:var(--ast-navy,#0b2745);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
}

html[data-sago-a] .sago-a2-3d-msg p{
  margin:0;
  max-width:42ch;
}


/* --------------------------------------------------------------------------
   9. NESSUN PUNTO DI ROTTURA IN QUESTO FOGLIO, ED E' UNA SCELTA
   Il primo giro ne aveva uno a max-width:1180px per stringere il segmento.
   E' stato tolto dopo aver rifatto i conti sulle colonne vere: sotto i
   1180px la colonna sta a clamp(268px,29vw,330px) e in quella banda non
   scende mai sotto i 297px, mentre il caso peggiore (288px) sta SOPRA i
   1181px, dove una @media max-width non arriva. Era una regola che
   rispondeva a un problema in una banda in cui il problema non c'e'.
   Il segmento e' dimensionato per il caso peggiore fin dalla regola base:
   non serve un punto di rottura.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   10. LA GRIGLIA DEI QUATTRO VANTAGGI: NON E' VESTITA, DI PROPOSITO
   .sago-benefits-grid (01 Su misura / 02 Materiali premium / 03 Da 1 pezzo /
   04 Produzione rapida) e' nel markup, ma uno script inline del template la
   CANCELLA DAL DOM a caricamento: STEP_SAGOMATO_REMOVE_REPETITIVE_FEATURE_
   CARDS_V1 cerca i quattro titoli come nodi foglia, risale al contenitore
   minimo che li comprende tutti e fa group.remove().

   Verificato sul servito il 15/08: ciascuno dei quattro titoli compare una
   volta sola nel markup (la seconda occorrenza e' dentro l'elenco dello
   script stesso, che non e' un nodo foglia), i quattro <strong> sono foglie
   vere, e il contenitore minimo che li comprende e' proprio
   .sago-benefits-grid - il suo testo non contiene nessuna delle tre frasi
   che farebbero fermare la risalita. Quindi la griglia sparisce sempre.

   Vestirla sarebbe lavoro invisibile, e morte.py lo direbbe morto solo se
   guardasse il DOM dopo il caricamento, che non fa. Se un domani quello
   script venisse tolto, la griglia tornerebbe con il vestito dorato di
   standalone.css: e' allora che questa sezione va riempita.
   -------------------------------------------------------------------------- */