/* ============================================================================
   standalone-lab-editor.css
   La FINESTRA "Crea online il tuo interno in gommapiuma" nel linguaggio della
   pagina lab-astucci. Caricato SOLO dietro ?sago_t=1.
   ============================================================================

   PERCHE' ESISTE QUESTO FILE INVECE DI UNA MODIFICA AI MU-PLUGIN
   La finestra la costruiscono cinque mu-plugin (v1g + v1h + v1i + v1k + v1n)
   che girano ANCHE sulla pagina dei clienti, senza cancello e senza rete di
   sicurezza. Toccarli manderebbe in produzione stanotte un cambiamento che
   nessuno ha potuto guardare. Quindi non si tocca una riga: si riveste da qui.
   Rollback: cancellare questo file.

   DOVE ATTERRA NELLA CASCATA  (misurato sul servito, non ipotizzato)
   I fogli 'lab' sono appesi DUE VOLTE: in testa (righe 110-116) e in coda
   (righe 10819-10825). I <style> dei mu-plugin stanno nel body alle righe
   4393 (v1n), 4702 (v1k), 5005 (v1i), 5484 (v1h), 6005 (v1g) - cioe' PRIMA
   della copia in coda e DOPO quella in testa.
   Conseguenza pratica, che decide come e' scritto tutto il file:
     se pareggio la specificita' di un mu-plugin vince solo la mia copia in
     coda, e il primo paint mostra la grafica vecchia -> lampeggio.
   Percio' ogni regola qui sotto porta un prefisso che SUPERA la specificita'
   dell'avversario, cosi' vince gia' la copia in testa:
     html[data-sago-a] #sgoFoamModalV1G .classe        = (1,2,1)
     avversario piu' forte fra i mu-plugin: .classe    = (0,1,0) !important
     avversario a id: #sagoRealSvgBtnV5                = (1,0,0) !important
   Con !important da entrambe le parti vince la specificita' piu' alta, non
   l'ordine: quindi il lampeggio non c'e'.

   COSA C'ERA DA BATTERE, IN ORDINE DI OSTINAZIONE
   - v1n-clean-polish: quasi tutto !important, e' l'ultimo strato "moderno"
     (raggi 8px, blu #1d4ed8, bordi rgba(203,213,225,.x));
   - v1k: border-radius:8px !important su quattordici selettori in una volta;
   - v1i: raggi 10px e il trucco font-size:0 sull'occhiello del riquadro;
   - v1h: gradienti, ombre alte e raggi 16-18px !important;
   - v1g: il foglio base, senza !important (perde da solo).

   DUE TRAPPOLE VERIFICATE, DA NON RIAPRIRE
   1. v1n scansiona TUTTI i bottoni ogni 500 ms e cancella quelli il cui
      testo e' "Duplica" fuori da #sgoDuplicateBoxV1K. Il CSS non cambia
      textContent (content: e' un altro albero), quindi da qui e' innocuo -
      ma nessuno aggiunga mai un bottone "Duplica" altrove.
   2. v1i mette font-size:0 !important su #sgoFoamCardV1G .sgo-v1g-kicker e
      rimette la scritta in ::after. Quel riquadro NON e' di questo foglio
      (lo veste standalone-lab-steps.css, righe 368-478): qui non si tocca.

   LE TRE REGOLE DEL SISTEMA, APPLICATE
   - il testo corrente non e' nero: e' --ast-text #29445f;
   - le ombre quasi non esistono: profondita' con filetti azzurrati e fondi
     tenui. La finestra aveva raggi 8-18px e ombre 0 32px 110px: grammatica
     vecchia, tolta;
   - --ast-blue e --ast-green sono SUPERFICI, mai inchiostro: per il testo
     esistono --ast-blue-text (6,21:1) e --ast-green-text (5,40:1).

   CONTRASTI CALCOLATI (sRGB, formula WCAG, non stimati)
     --ast-text  #29445f su bianco            10,07:1
     --ast-copy  #62788e su bianco             4,57:1   <- il piu' stretto
     --ast-copy  #62788e su --ast-soft         4,32:1   SOTTO AA
        -> su fondo tenue --ast-copy NON si usa: si passa a --ast-text.
     --ast-blue-text su bianco                 6,21:1
     bianco su --ast-blue-dark                 6,21:1
     bianco su --ast-green    3,15:1  SOTTO AA -> i glifi verdi usano
        --ast-green-text come fondo: bianco su #04795a = 5,40:1.

   DUE SEGNALAZIONI DEL BANCO CHE SONO FALSI POSITIVI, GIA' VERIFICATE
   1. banco.py: "contenitore d'anteprima 34x34 sotto 180x140" su
      .sgo-v1g-close. Quel controllo scatta su qualunque selettore che
      contenga 'foam|preview|stage|canvas' e abbia larghezza E altezza fisse:
      qui il selettore contiene 'sgoFoamModalV1G' e il nodo e' il tasto di
      chiusura, non un'anteprima. Non si aggira senza togliere il prefisso a
      id, che serve per la specificita'.
   2. cascata.py, sezione C: dice che le dichiarazioni dentro i blocchi
      ::before "cedono" a .sgo-v1g-pill{border-radius:8px!important} e simili.
      Una regola senza pseudo-elemento non colpisce lo pseudo-elemento: sono
      due scatole diverse. Quei blocchi portano comunque !important, cosi' la
      questione non si ripresenta a ogni rilettura.
   -------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------
   1. IL GUSCIO
   ----------------------------------------------------------------------------
   Da battere: v1h .sgo-v1g-shell{border-radius:34px;box-shadow:0 42px 150px}
   e v1n {border-radius:14px}. La pagina astucci non ha una sola forma con
   quei numeri: il raggio grande delle schede e' 9px (--ast-r-lg) e l'ombra
   piu' alta di tutto il sistema e' --ast-shadow (0 12px 36px al 9%).
   Qui l'ombra serve solo a staccare la finestra dal velo: il velo fa gia'
   quasi tutto il lavoro, quindi basta quella di sistema.
   Il velo perde il backdrop-filter blur(16px) saturate(125%): costa un
   compositing a schermo intero a ogni frame e non appartiene a un linguaggio
   fatto di filetti da 1px.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G{
  padding:18px !important;
  background:rgba(11,39,69,.55) !important;   /* --ast-navy velato */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  /* NIENTE color qui: il velo e' scuro e l'inchiostro corrente e' chiaro solo
     per caso, perche' sopra il velo non c'e' testo. Il banco lo legge come una
     coppia testo/fondo da 2,78:1 e ha ragione a diffidare: l'inchiostro si
     dichiara sul guscio, che e' la superficie dove il testo esiste davvero. */
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-shell{
  width:min(1480px,98vw) !important;
  height:min(900px,94vh) !important;
  color:var(--ast-text,#29445f) !important;   /* su --ast-page = 9,60:1 */
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r-lg,9px) !important;
  background:var(--ast-page,#f8fafc) !important;
  box-shadow:var(--ast-shadow,0 12px 36px rgba(16,49,82,.09)) !important;
}

/* Lo "Schermo pieno" di v1i mette la classe sul <body> e la sua regola vale
   (0,2,0): con i prefissi di questo foglio la perderebbe e il bottone
   smetterebbe di funzionare senza che nessuno capisca perche'. Si ridichiara
   qui a specificita' superiore. NON e' una copia inutile: e' la condizione
   perche' un comando esistente resti vivo. */
html[data-sago-a] body.sgo-v1i-fullscreen #sgoFoamModalV1G{
  padding:0 !important;
}

html[data-sago-a] body.sgo-v1i-fullscreen #sgoFoamModalV1G .sgo-v1g-shell{
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  max-height:100vh !important;
  border:0 !important;
  border-radius:0 !important;
}


/* ----------------------------------------------------------------------------
   2. L'INTESTAZIONE
   ----------------------------------------------------------------------------
   Il titolo prende --ast-navy e la misura dei titoli di sezione astucci
   (.ast-section-title h2: 20px, interlinea 1,08, letter-spacing -.025em).
   Il sottotitolo tecnico va in --ast-copy su bianco: 4,57:1, sopra AA di poco,
   ed e' l'unico punto del file dove --ast-copy sta su un fondo non bianco -
   infatti il fondo qui e' --ast-paper, non un tenue.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top{
  gap:16px !important;
  align-items:flex-start !important;
  padding:14px 16px !important;
  border-bottom:1px solid var(--ast-line,#d7e3ee) !important;
  background:var(--ast-paper,#fff) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top > div{
  min-width:0;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top h3{
  margin:0 !important;
  color:var(--ast-navy,#0b2745) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:20px !important;
  font-weight:850 !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top p{
  margin:5px 0 0 !important;
  max-width:64ch !important;
  color:var(--ast-copy,#62788e) !important;
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
}

/* Chiusura: quadrato piccolo con filetto, non un tasto da 44px con raggio 16.
   Resta 34px, cioe' sopra il minimo comodo per il dito su desktop; sotto i
   700px torna a 40px (sezione 11). */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-close{
  flex:0 0 auto;
  width:34px !important;
  height:34px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-close:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  color:var(--ast-blue-text,#075fbd) !important;
}


/* ----------------------------------------------------------------------------
   3. I QUATTRO CARTELLINI  --  distinti per SIGNIFICATO
   ----------------------------------------------------------------------------
   Oggi si somigliano: tre pillole verdine e una arancione, tutte con lo stesso
   peso. Ma non dicono la stessa cosa.
     "Solo gommapiuma" / "Bordo minimo 10 mm" / "Anti-collisione"
        sono VINCOLI: il software li impone, sono sempre veri, non c'e' niente
        da decidere. Li marca un filetto sinistro verde e un segno di spunta.
     "12 mm consigliati"
        e' un CONSIGLIO: si puo' ignorare e il disegno resta producibile.
        Lo marca un filetto sinistro ambra e un punto esclamativo, su fondo
        appena caldo.
   Il filetto sinistro da 4px e' esattamente il modo in cui la pagina astucci
   qualifica un elemento (.ast-price-card). Le due famiglie differiscono per
   TRE canali indipendenti: forma del glifo, colore del filetto, fondo. Chi non
   distingue i colori legge comunque due glifi diversi.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pillbar{
  gap:6px !important;
  margin-top:10px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pill{
  gap:6px !important;
  padding:5px 9px 5px 7px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-left-width:4px !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.25 !important;
  box-shadow:none !important;
}

/* Il glifo. v1i, ogni 550 ms, riscrive l'innerHTML del cartellino partendo dal
   suo textContent per togliere i glifi che v1g ci aveva messo dentro. Tocca il
   TESTO del nodo: gli pseudo-elementi non stanno nel textContent e non passano
   di li'. Percio' questo segno e' l'unico posto sicuro dove metterlo. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pill::before{
  content:"\2713";                 /* spunta: vincolo verificato */
  flex:0 0 auto !important;
  width:15px !important;
  height:15px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#fff !important;
  background:var(--ast-green-text,#04795a) !important;   /* bianco su #04795a = 5,40:1 */
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pill.ok{
  border-left-color:var(--ast-green,#06a579) !important;
  background:var(--ast-paper,#fff) !important;
}

/* Il consiglio. Ambra presa dalla pagina astucci (.ast-input.is-draft-empty
   usa #e0a43a): non e' una tinta nuova, e' la sua tinta di "manca qualcosa".
   Il glifo ha inchiostro --ast-navy sull'ambra = 6,86:1, calcolato. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pill.warn{
  border-left-color:#e0a43a !important;
  background:#fdf6e9 !important;              /* --ast-text sopra = 9,36:1 */
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-pill.warn::before{
  content:"!";                     /* esclamativo: consiglio, non vincolo */
  color:var(--ast-navy,#0b2745) !important;
  background:#e0a43a !important;
}


/* ----------------------------------------------------------------------------
   4. LA BARRA DEI COMANDI
   ----------------------------------------------------------------------------
   Quattro interruttori. Da battere v1n
   .sgo-v1h-quote-btn.active{background:#1d4ed8;color:#fff !important}, cioe'
   un pieno saturo per ogni comando acceso: fino a quattro pieni blu in una
   riga, in una finestra dove il pieno deve essere uno solo.
   L'idioma astucci per "questo comando e' acceso" senza rubare la scena e'
   quello della barra dell'editor pro: fondo blu tenue, inchiostro
   --ast-blue-text e un filetto di 2px sotto (box-shadow inset). Si legge
   subito e non compete con "Conferma e genera DXF".
   #eef6ff e' il tenue della pagina astucci (.ast-editor-topbar button.is-active
   nella variante pro): --ast-blue-text sopra sta a 5,70:1.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-controls{
  gap:6px !important;
  margin-top:10px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-btn{
  gap:6px !important;
  min-height:32px !important;
  padding:0 10px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-btn svg{
  width:14px !important;
  height:14px !important;
  stroke:var(--ast-blue,#0878e8) !important;
  stroke-width:1.7 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-btn:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-btn.active{
  border-color:#bcd9f6 !important;
  background:#eef6ff !important;
  color:var(--ast-blue-text,#075fbd) !important;
  box-shadow:inset 0 -2px 0 0 var(--ast-blue,#0878e8) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-quote-btn.active svg{
  stroke:var(--ast-blue-text,#075fbd) !important;
}


/* ----------------------------------------------------------------------------
   5. LE DUE COLONNE LATERALI
   -------------------------------------------------------------------------- */
/* Le colonne restano quelle di v1g (320 / 1fr / 340): provato a stringerle a
   308 e la misura non regge. A 1440px la colonna sinistra vale 308-28=280px di
   contenuto, cioe' 114px per bottone nella griglia a due colonne delle forme;
   tolti l'icona da 20 e il salto da 8 restano 86px per l'etichetta, e
   "Rett. arrotondato" a 12px ne chiede circa 92. Andrebbe a capo su ogni
   schermo. Con 320px ne restano 92,5: al pelo, ma senza andare a capo. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-body{
  grid-template-columns:320px minmax(0,1fr) 336px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-right{
  padding:14px !important;
  background:var(--ast-paper,#fff) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left{
  border-right:1px solid var(--ast-line,#d7e3ee) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-right{
  border-left:1px solid var(--ast-line,#d7e3ee) !important;
}

/* I titoletti di sezione. Erano 10,5px (v1h !important) e 11px (v1g): sotto
   i 12px non si leggono su schermo piccolo. 12px con maiuscoletto spaziato e'
   il minimo onesto, e --ast-blue-text sta a 6,21:1 dove --ast-blue starebbe
   a 4,32:1. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-title,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-align-title,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-title,
html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-kicker{
  margin:0 0 9px !important;
  padding-bottom:7px !important;
  border-bottom:1px solid var(--ast-line,#d7e3ee) !important;
  color:var(--ast-blue-text,#075fbd) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}

/* I titoletti che NON aprono la colonna hanno bisogno d'aria sopra: il primo
   no, altrimenti si stacca dal bordo del pannello. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left .sgo-v1g-title + *,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-title:not(:first-child){
  margin-top:0;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left .sgo-v1g-title ~ .sgo-v1g-title{
  margin-top:16px !important;
}

/* --- campi -----------------------------------------------------------------
   Modello: .ast-input della pagina astucci (altezza 38-44px, filetto #cbdbe9,
   raggio 4px, fondo bianco, anello di fuoco --ast-focus). L'etichetta e' un
   testo di servizio: --ast-copy su bianco, 4,57:1. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field{
  margin-bottom:10px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field label,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-field label{
  margin-bottom:5px !important;
  color:var(--ast-copy,#62788e) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.25 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field input,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field select,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-field input{
  height:38px !important;
  padding:0 10px !important;
  border:1px solid #cbdbe9 !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-navy,#0b2745) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:14px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field input:focus,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field select:focus,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-field input:focus{
  border-color:var(--ast-blue,#0878e8) !important;
  box-shadow:var(--ast-focus,0 0 0 3px rgba(8,120,232,.11)) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-grid2{
  gap:8px !important;
}

/* --- forme semplici --------------------------------------------------------
   Da battere: v1n .sgo-v1g-tool{border:1px solid rgba(203,213,225,.9)}
   piu' i raggi 10px di v1i e 8px di v1k. Diventano riquadri con filetto
   azzurrato, come ogni superficie di questo sistema. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-tools{
  gap:7px !important;
  margin-bottom:14px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-tool{
  gap:8px !important;
  min-height:40px !important;
  padding:8px 10px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.2 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-tool:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  transform:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-icon{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1h-icon svg{
  width:18px !important;
  height:18px !important;
  stroke:var(--ast-blue,#0878e8) !important;
  stroke-width:1.6 !important;
}

/* --- la nota di produzione -------------------------------------------------
   E' un richiamo, non un pannello: nel linguaggio astucci un richiamo si dice
   con un filetto sinistro colorato e un fondo appena tinto (.ast-price-card).
   Il testo passa da --ast-copy a --ast-text: su fondo tenue --ast-copy sta a
   4,32:1, sotto AA. Oggi infatti il banco segnala 4,34:1 su questo nodo. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-note{
  margin-bottom:14px !important;
  padding:10px 11px !important;
  border:1px solid #cfe3f6 !important;
  border-left:4px solid var(--ast-blue,#0878e8) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-price-bg,#f8fcff) !important;
  color:var(--ast-text,#29445f) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-note strong{
  color:var(--ast-navy,#0b2745) !important;
  font-weight:800 !important;
}

/* --- la libreria sagome ----------------------------------------------------
   La scheda v15b arriva con raggio 14px, gradiente e ombra 0 10px 24px: la
   sua CSS la scrive un <style> messo in <head> a runtime, quindi anche la mia
   copia in testa deve superarla per specificita' - da qui i due id in fila.
   Il bottone "Apri libreria sagome" era un pieno blu: e' un'azione di
   servizio, non l'azione finale. Diventa un contorno blu, cosi' il solo pieno
   saturo della finestra resta "Conferma e genera DXF". */
html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B{
  margin:14px 0 10px !important;
  padding:12px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-title{
  margin:0 0 5px !important;
  color:var(--ast-navy,#0b2745) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-text{
  color:var(--ast-copy,#62788e) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-preview{
  gap:6px !important;
  margin:10px 0 9px !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-mini{
  min-height:56px !important;
  gap:6px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-soft,#f5f9fd) !important;
}

/* Le siluette sono ritagli clip-path su un blocco pieno: restano forme, quindi
   prendono il colore delle superfici scure del sistema, non il nero. */
html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-icon{
  background:var(--ast-navy,#0b2745) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-mini span{
  color:var(--ast-text,#29445f) !important;   /* su --ast-soft = 9,51:1 */
  font-size:12px !important;
  font-weight:650 !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-badges{
  gap:5px !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-badge{
  padding:3px 7px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  color:var(--ast-blue-text,#075fbd) !important;   /* su bianco = 6,21:1 */
  background:var(--ast-paper,#fff) !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.3 !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoRealSvgBtnV5{
  width:100%;
  height:38px !important;
  margin-bottom:16px;
  border:1px solid var(--ast-blue,#0878e8) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-blue-text,#075fbd) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:13px !important;
  font-weight:800 !important;
  cursor:pointer;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G #sagoRealSvgBtnV5:hover{
  background:#eef6ff !important;
  filter:none !important;
}

/* --- l'elenco degli scassi -------------------------------------------------
   Righe di una tabella tecnica: nome a sinistra, misura a destra in cifre
   tabellari. Il selezionato prende il filetto sinistro blu, che e' il modo in
   cui questo sistema dice "questo": non un'ombra, non un alone. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-list{
  gap:6px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item{
  align-items:baseline !important;
  padding:9px 10px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-left:4px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-size:12px !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item strong{
  color:var(--ast-navy,#0b2745) !important;
  font-weight:800 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item.sgo-selected{
  border-color:#bcd9f6 !important;
  border-left-color:var(--ast-blue,#0878e8) !important;
  background:#eef6ff !important;
  box-shadow:none !important;
}


/* ----------------------------------------------------------------------------
   6. IL PIANO DI DISEGNO
   ----------------------------------------------------------------------------
   Modello: .ast-editor-canvas della pagina astucci, alla lettera -
     background-color:#f7fafc;
     background-image:linear-gradient(#eaf0f5 1px,transparent 1px),
                      linear-gradient(90deg,#eaf0f5 1px,transparent 1px);
     background-size:22px 22px;
   piu' il filetto --ast-line e il raggio piccolo. Sparisce il quarto strato
   radiale azzurro di v1g/v1h e l'ombra interna: il piano tecnico e' carta
   quadrettata, non una superficie lucida.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-center{
  padding:14px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-canvas{
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background-color:#f7fafc !important;
  background-image:
    linear-gradient(#eaf0f5 1px,transparent 1px),
    linear-gradient(90deg,#eaf0f5 1px,transparent 1px) !important;
  background-size:22px 22px,22px 22px !important;
  box-shadow:none !important;
}

/* Le scritte dentro il disegno sono CIFRE: vanno in --ast-mono con cifre di
   larghezza fissa, altrimenti una quota che passa da 99 a 100 mm fa saltare
   tutta la riga. Il corpo NON si tocca: l'SVG ha viewBox -30 -30 (w+60)
   (h+60), quindi quei numeri sono unita' utente e non pixel - a 300x200 mm
   dentro un piano da ~800px la scala e' circa 2,2x. Riscriverli in px qui
   significherebbe scritte grandi il doppio del voluto. */
html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G text{
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace) !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:0 !important;
}

/* Le quote del perimetro e degli scassi (v1h): il tratto e' una superficie,
   quindi --ast-blue; la scritta e' inchiostro, quindi --ast-blue-text. */
html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1h-quote-line{
  stroke:var(--ast-blue,#0878e8) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1h-quote-guide{
  stroke:#a9c0d5 !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1h-quote-dot{
  fill:var(--ast-blue,#0878e8) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1h-quote-text{
  fill:var(--ast-blue-text,#075fbd) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1h-quote-text-mini{
  fill:var(--ast-text,#29445f) !important;
}

/* La distanza dal bordo (v1i) e' un'altra misura ancora: resta la piu' scura
   perche' e' quella che dice se il pezzo si puo' produrre. */
html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1i-edge-line{
  stroke:var(--ast-navy,#0b2745) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1i-edge-dot{
  fill:var(--ast-navy,#0b2745) !important;
}

html[data-sago-a] #sgoFoamModalV1G #sgoSvgV1G .sgo-v1i-edge-text{
  fill:var(--ast-navy,#0b2745) !important;
}


/* ----------------------------------------------------------------------------
   7. LA FASCIA DI STATO  --  l'elemento piu' importante della finestra
   ----------------------------------------------------------------------------
   Dice se il disegno e' producibile. Oggi e' un blocco pieno e saturo
   (verde al 96%, ambra al 97%, rosso al 97%) con ombra 0 18px 52px: grida, e
   il bianco su quel verde sta a 2,45:1 - il banco lo segnala come ERRORE.

   Nel linguaggio astucci uno stato si dice come .ast-validation:
   filetto colorato a sinistra, glifo tondo, parola. Fondo chiaro, inchiostro
   scuro, contrasto alto.

   LO STATO NON DIPENDE MAI DAL SOLO COLORE. Quattro canali indipendenti:
     1. il GLIFO ha forma diversa in ogni stato:  spunta / ! / x / -
     2. il FILETTO sinistro cambia colore;
     3. il FONDO cambia tinta;
     4. la FRASE dice l'esito a parole, ed e' scritta dal mu-plugin
        ("Disegno valido...", "Valido, ma attenzione:...", "Disegno non
        valido:...", il motivo del blocco). Chi non vede colore legge tutto.
   Il glifo e' un ::before: nessuno puo' aggiungere un <i> vero senza toccare
   i mu-plugin. E' segnalato all'agent del comportamento.

   Contrasti, calcolati:
     --ast-text su bianco 10,07 - su #fdf6e9 9,36 - su #fff5f6 9,42 - su
     --ast-soft 9,51. Glifi: bianco su #04795a 5,40 - --ast-navy su #e0a43a
     6,86 - bianco su #c6424f 4,89 - bianco su --ast-navy 15,10.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status{
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  padding:10px 12px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-left:4px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.4 !important;
  /* L'unica ombra della finestra: la fascia galleggia sopra il disegno e senza
     un minimo di stacco si confonde con la quadrettatura. E' --ast-shadow-soft,
     la piu' bassa del sistema. */
  box-shadow:var(--ast-shadow-soft,0 8px 18px rgba(15,23,42,.045)) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status::before{
  width:20px !important;
  height:20px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.ok{
  border-color:#c8e7dc !important;
  border-left-color:var(--ast-green,#06a579) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.ok::before{
  content:"\2713";                     /* spunta */
  background:var(--ast-green-text,#04795a) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.warn{
  border-color:#eddcbb !important;
  border-left-color:#e0a43a !important;
  background:#fdf6e9 !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.warn::before{
  content:"!" !important;
  color:var(--ast-navy,#0b2745) !important;
  background:#e0a43a !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.bad{
  border-color:#f0c6ca !important;
  border-left-color:#c6424f !important;
  background:#fff5f6 !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.bad::before{
  content:"\00d7";                     /* per: disegno non valido */
  background:#c6424f !important;
  font-size:15px !important;
}

/* "block" e' il fermo momentaneo: una mossa e' stata rifiutata, il disegno di
   prima e' ancora buono. Grigio-blu, non rosso: il rosso qui direbbe una cosa
   piu' grave di quella che e' successa. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.block{
  border-color:var(--ast-line,#d7e3ee) !important;
  border-left-color:var(--ast-navy,#0b2745) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-status.block::before{
  content:"\2013";                     /* trattino: movimento bloccato */
  background:var(--ast-navy,#0b2745) !important;
  font-size:15px !important;
}


/* ----------------------------------------------------------------------------
   8. LA COLONNA DESTRA
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G #sgoAlignBoxV1I,
html[data-sago-a] #sgoFoamModalV1G #sgoDuplicateBoxV1K{
  margin:14px 0 0 !important;
  padding:12px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-mini,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-ghost-note{
  color:var(--ast-copy,#62788e) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-ghost-note{
  margin-top:9px !important;
  padding:9px 10px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-left:4px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  /* su fondo tenue --ast-copy scende a 4,32:1, sotto AA: qui serve --ast-text */
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-row{
  gap:8px !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-align-grid,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-dir-grid{
  gap:6px !important;
}

/* I bottoni di servizio delle due scatole: contorno, mai pieno.
   Da battere v1n .sgo-v1k-btn.primary{background:#1d4ed8 !important}: quel
   pieno navy competeva con l'azione finale a quindici pixel di distanza. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-btn,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-btn{
  gap:6px !important;
  min-height:36px !important;
  padding:8px 9px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-btn svg,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-btn svg{
  width:14px !important;
  height:14px !important;
  stroke:var(--ast-blue,#0878e8) !important;
  stroke-width:1.7 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-btn:hover,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-btn:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  color:var(--ast-text,#29445f) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-btn.primary{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-blue-text,#075fbd) !important;
  font-weight:800 !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-btn.primary:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:#eef6ff !important;
  color:var(--ast-blue-text,#075fbd) !important;
}

/* "Elimina": rosso della pagina astucci (.ast-validation.is-error usa #c6424f),
   come contorno e come inchiostro. 4,89:1 su bianco. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-danger{
  width:100%;
  min-height:36px !important;
  margin-top:2px;
  padding:8px 12px !important;
  border:1px solid #f0c6ca !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:#c6424f !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-danger:hover{
  border-color:#c6424f !important;
  background:#fff5f6 !important;
  color:#c6424f !important;
}

/* --- le due azioni in fondo ------------------------------------------------
   "Conferma e genera DXF" e' l'azione finale ed e' L'UNICO PIENO SATURO della
   finestra: tutto il resto - comandi accesi, duplica, libreria - e' stato
   riportato a contorno apposta perche' questo bottone non abbia rivali.
   Il pieno e' --ast-blue-dark e NON --ast-blue: il bianco su #0878e8 sta a
   4,32:1, sotto AA; su #075fbd sta a 6,21:1. E' la stessa scelta fatta in
   standalone-lab-steps.css:1038.
   L'ombra e' l'unica del sistema sotto un bottone blu, presa dal CONTRATTO:
   0 7px 16px rgba(8,119,230,.16). */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-actions{
  gap:8px !important;
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid var(--ast-line,#d7e3ee) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-primary{
  min-height:46px !important;
  padding:12px 14px !important;
  border:1px solid var(--ast-blue-dark,#075fbd) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-blue-dark,#075fbd) !important;
  color:#fff !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  box-shadow:0 7px 16px rgba(8,119,230,.16) !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-primary:hover{
  border-color:var(--ast-navy,#0b2745) !important;
  background:#064f9e !important;      /* --ast-blue-dark premuto: bianco sopra = 8,02:1 */
  color:#fff !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-secondary{
  min-height:38px !important;
  padding:10px 14px !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r,4px) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--ast-text,#29445f) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif) !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-secondary:hover{
  border-color:var(--ast-blue,#0878e8) !important;
  background:var(--ast-soft,#f5f9fd) !important;
  color:var(--ast-text,#29445f) !important;
}


/* ----------------------------------------------------------------------------
   9. LE CIFRE
   ----------------------------------------------------------------------------
   Questo e' un editor tecnico: i numeri sono il contenuto, non un dettaglio.
   Vanno in --ast-mono con font-variant-numeric:tabular-nums, cosi' ogni cifra
   occupa la stessa larghezza e una misura che passa da 99 a 100 mm non fa
   ballare la colonna. Sono gli stessi punti in cui la pagina astucci usa
   tabular-nums (#astApp .ast-fields .ast-input input).
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field input[type="number"],
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-field input[type="number"],
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item span,
html[data-sago-a] #sgoFoamModalV1G #sgoDupGapV1K{
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace) !important;
  font-variant-numeric:tabular-nums !important;
}

/* Nei campi la cifra e' il soggetto: centrata e un po' piu' grande, come nelle
   misure della pagina astucci. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-field input[type="number"],
html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-field input[type="number"]{
  padding:0 6px !important;
  text-align:center !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* La misura nell'elenco degli scassi: cifre, quindi mono; ma e' un dato di
   servizio, quindi resta piccola e in --ast-text. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item span{
  flex:0 0 auto;
  color:var(--ast-text,#29445f) !important;
  font-size:12px !important;
  font-weight:650 !important;
  white-space:nowrap;
}


/* ----------------------------------------------------------------------------
   10. FUOCO DA TASTIERA
   ----------------------------------------------------------------------------
   L'anello di sistema (standalone-lab.css:582) e' agganciato a
   .sago-page > main :focus-visible, e questa finestra e' figlia diretta del
   <body>, FUORI da main: senza questa sezione qui dentro non ci sarebbe
   nessun anello. Verificato sul servito, non ipotizzato.
   Si usano DUE segni insieme: l'anello --ast-focus (che si vede sui fondi
   chiari) e un outline pieno (che si vede anche sul pieno blu del bottone
   finale, dove un alone azzurro sparirebbe).
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G button:focus-visible,
html[data-sago-a] #sgoFoamModalV1G input:focus-visible,
html[data-sago-a] #sgoFoamModalV1G select:focus-visible,
html[data-sago-a] #sgoFoamModalV1G [data-pick]:focus-visible{
  outline:2px solid var(--ast-blue-dark,#075fbd) !important;
  outline-offset:2px !important;
  box-shadow:var(--ast-focus,0 0 0 3px rgba(8,120,232,.11)) !important;
}

/* Sul pieno blu l'outline dello stesso blu sparirebbe: li' e' bianco, con
   l'anello scuro appena fuori. */
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-primary:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:-4px !important;
  box-shadow:0 0 0 3px var(--ast-navy,#0b2745) !important;
}


/* ----------------------------------------------------------------------------
   11. SCHERMI BASSI E STRETTI
   ----------------------------------------------------------------------------
   Il guscio e' alto min(900px,94vh). Sotto i 1050px v1g impila le tre colonne
   con .sgo-v1g-body{grid-template-rows:auto 1fr auto} e mette max-height:265px
   sui due pannelli laterali; il piano di disegno pero' conserva
   min-height:470px. Su uno schermo da 768px di altezza il conto non torna:
   14+34 di intestazione + i cartellini + la barra + 470 + due pannelli da 265
   superano il guscio, e .sgo-v1g-shell ha overflow:hidden - cioe' il fondo
   della finestra, dove sta "Conferma e genera DXF", viene tagliato via.
   Rimedio: sotto i 1050px scorre il CORPO, i pannelli tornano di altezza
   naturale e il piano scende a 260px. Un solo scorrimento invece di tre
   annidati, e nessun nodo nascosto.
   -------------------------------------------------------------------------- */
@media (max-width:1050px){

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-body{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-right{
    max-height:none !important;
    overflow:visible !important;
    border-right:0 !important;
    border-left:0 !important;
    border-bottom:1px solid var(--ast-line,#d7e3ee) !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-canvas{
    min-height:260px !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-center{
    min-height:300px;
  }
}

/* Sotto gli 820px la finestra deve prendersi tutto: 18px di cornice per lato
   su un telefono sono il 9% della larghezza utile. */
@media (max-width:820px){

  html[data-sago-a] #sgoFoamModalV1G{
    padding:0 !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-shell{
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top{
    flex-wrap:wrap !important;
    padding:12px !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-top h3{
    font-size:17px !important;
  }

  /* Sul telefono il tocco vuole 40px: sopra i 820px ne bastano 34 perche' il
     bersaglio e' il puntatore. */
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-close{
    width:40px !important;
    height:40px !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-left,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-right,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-center{
    padding:12px !important;
  }
}

/* Sotto i 430px le griglie a due colonne lasciano meno di 90px per bottone:
   "Rett. arrotondato" e "Centro perimetro" andrebbero a capo dentro 80px.
   Si passa a una colonna sola: e' l'unico modo per non tagliare le parole. */
@media (max-width:430px){

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-tools,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1i-align-grid,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-dir-grid,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-grid2{
    grid-template-columns:1fr !important;
  }

  html[data-sago-a] #sgoFoamModalV1G .sgo-v1k-row{
    grid-template-columns:1fr !important;
  }

  html[data-sago-a] #sgoFoamModalV1G #sagoShapeLibraryCardV15B .sago-v15b-preview{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* ----------------------------------------------------------------------------
   12. MOVIMENTO
   ----------------------------------------------------------------------------
   v1h e v1g alzano i bottoni di 1px al passaggio del mouse
   (transform:translateY(-1px)) e la pagina astucci ha una sola transizione di
   sistema, .18s ease. Qui si usa quella e si spegne tutto quando il sistema
   operativo dichiara di non volere animazioni.
   -------------------------------------------------------------------------- */
html[data-sago-a] #sgoFoamModalV1G button,
html[data-sago-a] #sgoFoamModalV1G input,
html[data-sago-a] #sgoFoamModalV1G select,
html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item{
  transition:border-color var(--ast-tr,.18s ease),
             background-color var(--ast-tr,.18s ease),
             box-shadow var(--ast-tr,.18s ease),
             color var(--ast-tr,.18s ease);
}

@media (prefers-reduced-motion:reduce){

  html[data-sago-a] #sgoFoamModalV1G button,
  html[data-sago-a] #sgoFoamModalV1G input,
  html[data-sago-a] #sgoFoamModalV1G select,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-item,
  html[data-sago-a] #sgoFoamModalV1G .sgo-poly{
    transition:none !important;
    animation:none !important;
  }

  html[data-sago-a] #sgoFoamModalV1G button:hover,
  html[data-sago-a] #sgoFoamModalV1G .sgo-v1g-tool:hover{
    transform:none !important;
  }
}