/* ==========================================================================
   SAGO LAB 2026-08-15 - COLONNA CENTRALE: IL PERCORSO D'ACQUISTO
   Porta sul configuratore DXF il linguaggio della pagina lab-astucci.
   Zona: passo 1 "Carica il tuo DXF" (trascinamento, scheda del file,
   riquadro "Controlla il file" e la sua finestra), il bivio "Crea senza
   DXF", passo 2 "Scegli il materiale" (famiglie + altezze gommapiuma),
   passo 3 la quantita', e il comando "Analizza il DXF e calcola il prezzo".

   COME SI SENTE QUESTA PAGINA (dal contratto, non da un'idea):
   bianco su grigio appena azzurrato, filetti chiari, raggi piccoli,
   un azzurro che compare spesso ma sempre per dire "questo e' selezionato"
   o "questo e' il prossimo passo", verde solo per confermare, numeri grandi
   dove il cliente deve leggere un valore. Le ombre sono rare e bassissime:
   la profondita' la fanno i filetti azzurrati e i fondi tenui.

   I TOKEN NON SI RIDICHIARANO. Li scrive standalone-lab.css, primo della
   cascata. Qui si consumano sempre con valore di ripiego, cosi' il foglio
   regge anche da solo. Le uniche dichiarazioni nuove sono le tinte DERIVATE
   piu' sotto, che non esistono nell'impianto e servono a stati che questa
   colonna ha e la pagina astucci non ha.

   TRE NODI DI QUESTA COLONNA NON SONO NEL TEMPLATE, nascono a runtime, e
   sono stati ricostruiti leggendo gli script perche' sul server non c'e'
   alcun motore JavaScript:
   - #sgoFoamCardV1G, il riquadro "Crea senza DXF": lo costruisce
     installCard() del mu-plugin online-foam-editor-v1g e lo infila come
     FRATELLO SUCCESSIVO del div piu' corto che contiene sia "Carica il tuo
     DXF" sia "Trascina qui il file DXF". Simulato sul servito: quel div e'
     .sago-panel.sago-step-card del passo 1 (51.945 caratteri di testo,
     contro 62.669 della colonna e 66.470 della sezione). Nessun pareggio
     di lunghezza, e la frase "Due strade portano allo stesso risultato"
     NON esiste in questa pagina: non c'e' nulla che rompa un pareggio
     perche' un pareggio non c'e'. La card atterra quindi DENTRO il form,
     fra passo 1 e passo 2.
   - le classi .sago-qty-*-v2 sui comandi della quantita', messe dai due
     mu-plugin create-dxf-quantity-enlarge e quantity-quick-polish-v3, che
     aprono ob_start() a livello di file: il loro <style> finisce nel <head>
     e le loro classi arrivano davvero sui bottoni.
   - i nodi .sgq-* (mensola del prezzo sotto ogni pillola, fascia di stato,
     nota) messi da standalone-a-quantity.js, che la variante 'lab' carica
     come la 'a' ma senza il foglio che li vestiva: senza le righe qui sotto
     resterebbero trattini e parole sciolte sotto i bottoni.

   COSA NON E' MIO E NON SI TOCCA: #sgo-sugg-t, il blocco dei suggerimenti
   di quantita', si aggancia come fratello del figlio diretto di
   #sago-configurator-form che contiene #sago-quantity, cioe' subito dopo la
   scheda della quantita'. Ha foglio e script propri. Qui non c'e' nessun
   selettore generico su #sago-configurator-form > * e nessun margine sotto
   la scheda quantita': lo spazio glielo da' il gap:18px del form.

   ROLLBACK: cancellare questo file. Il plugin lo appende solo se
   is_readable(), quindi sparisce da solo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TINTE DERIVATE
   Tre sole, e nessuna sostituisce un token: sono varianti da INCHIOSTRO di
   tinte che l'impianto pubblica per le superfici, piu' un rosso che la
   pagina astucci non ha perche' non ha errori - questa finestra invece li
   ha, e un esito negativo non puo' essere grigio.

   PERCHE' SERVONO, MISURATO E NON STIMATO:
     --ast-copy  #62788e su --ast-soft #f5f9fd sta a 4,32:1 e su
                 --ast-paper a 4,57:1: passa sul bianco e NON passa sui
                 fondi tenui, che in questa colonna sono ovunque.
                 --sgl-copy #5a6f84 sta a 5,20:1 sul bianco, 4,91:1 su
                 --ast-soft, 4,77:1 sul blu tenue: passa su tutti e tre.
     --sgl-bad   #8c2016 su --sgl-bad-soft #f7e7e4 sta a 7,50:1.
   Le varianti da testo dell'azzurro e del verde NON si dichiarano qui:
   le pubblica standalone-lab.css come --ast-blue-text e --ast-green-text.
   Qui si consumano con ripiego, nel caso il suo foglio arrivi dopo.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column{
  --sgl-copy:#5a6f84;
  --sgl-bad:#8c2016;
  --sgl-bad-soft:#f7e7e4;
}


/* --------------------------------------------------------------------------
   I PASSI: schede bianche con filetto azzurrato
   Il raggio grande (--ast-r-lg, 9px) e' quello delle schede piu' larghe;
   i controlli dentro restano a --ast-r (4px). L'ombra c'e' ma e' quella
   bassa del contratto: la profondita' la fa il filetto, non il buio.
   Le schede stanno dentro #sago-configurator-form, che e' gia' una griglia
   con gap:18px: nessun margine verticale, cosi' il blocco dei suggerimenti
   che si infila fra loro prende lo stesso ritmo senza inventarsi spazio.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-panel.sago-step-card{
  margin:0;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r-lg,9px);
  background:var(--ast-paper,#fff);
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}

html[data-sago-a] .sago-main-column .sago-step-head{
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-bottom:18px;
}

/* Il numero del passo e' il cerchio pieno di .ast-steps. Pieno AZZURRO
   SCURO e non --ast-blue: il bianco su #0878e8 sta a 4,32:1 e questo e'
   testo piccolo, non un titolo. Su --ast-blue-dark sta a 6,21:1. */
html[data-sago-a] .sago-main-column .sago-step-number{
  width:36px;
  height:36px;
  min-width:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--ast-blue-dark,#075fbd);
  border-radius:50%;
  background:var(--ast-blue-dark,#075fbd);
  color:var(--ast-paper,#fff);
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:0 7px 16px rgba(8,119,230,.16);
}

/* L'occhiello era a 11px. Sotto i 12px non si scende: e' testo che il
   cliente legge mentre decide, non una filigrana. */
html[data-sago-a] .sago-main-column .sago-mini-label{
  display:block;
  margin:0;
  color:var(--ast-blue-text,#075fbd);
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}

html[data-sago-a] .sago-main-column .sago-step-head h2{
  margin:3px 0 0;
  color:var(--ast-navy,#0b2745);
  font-size:22px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
}

/* 13,5px e non 13: e' la stessa misura che il mu-plugin enlarge impone
   con !important alla descrizione del passo 3. Allinearsi al valore altrui
   dove e' sano costa una riga e toglie una lotta. */
html[data-sago-a] .sago-main-column .sago-step-head p{
  margin:6px 0 0;
  max-width:60ch;
  color:var(--sgl-copy,#5a6f84);
  font-size:13.5px;
  line-height:1.5;
}


/* --------------------------------------------------------------------------
   PASSO 1: LA ZONA DI TRASCINAMENTO
   Tratteggio azzurro finche' e' vuota: nella grammatica astucci l'azzurro
   dice "questo e' il prossimo passo", ed e' esattamente cio' che questa
   zona sta dicendo. Con il file dentro diventa filetto PIENO verde: lo
   stato non e' mai affidato al solo colore, cambia anche il tratto.

   Il filetto tratteggiato e' --ast-blue #0878e8, che sta a 4,08:1 sul
   fondo --ast-soft: sopra il 3:1 che la 1.4.11 chiede al confine di un
   componente. --ast-line qui non basterebbe (1,23:1) ed e' per questo che
   sui filetti di SEPARAZIONE, che sono decorativi, resta invece --ast-line.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-dropzone{
  min-height:186px;
  padding:clamp(18px,2.4vw,26px);
  border:1px dashed var(--ast-blue,#0878e8);
  border-radius:var(--ast-r-lg,9px);
  background:var(--ast-soft,#f5f9fd);
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-dropzone:hover,
html[data-sago-a] .sago-main-column .sago-dropzone.is-dragging{
  border-color:var(--ast-blue-dark,#075fbd);
  background:#eff6ff;
  transform:none;
}

/* Il filetto e' --ast-green-text e non --ast-green: qui il bordo E' il
   confine del componente e su --ast-green-soft il verde chiaro sta a
   2,94:1, sotto il 3:1 che la 1.4.11 chiede. Il verde da testo sta a
   5,04:1. Il colore comunque non e' solo: cambia anche il TRATTO, da
   tratteggiato a pieno. */
html[data-sago-a] .sago-main-column .sago-dropzone.has-file{
  border-style:solid;
  border-color:var(--ast-green-text,#04795a);
  background:var(--ast-green-soft,#edfaf5);
}

/* Il riquadro dell'icona e' quello di .ast-input i: tinta chiarissima,
   glifo nel colore, raggio piccolo. */
html[data-sago-a] .sago-main-column .sago-upload-icon{
  width:44px;
  height:44px;
  margin-bottom:13px;
  border:1px solid #cfe3f8;
  border-radius:var(--ast-r,4px);
  background:#eff7ff;
  color:var(--ast-blue-text,#075fbd);
  box-shadow:none;
}

html[data-sago-a] .sago-main-column .sago-upload-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-sago-a] .sago-main-column .sago-dropzone.has-file .sago-upload-icon{
  border-color:#b7e7d6;
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
}

html[data-sago-a] .sago-main-column .sago-dropzone strong{
  color:var(--ast-navy,#0b2745);
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
  word-break:break-word;
}

/* Era a 12px, e diventa 13px: e' la riga che spiega cosa fare. */
html[data-sago-a] .sago-main-column .sago-dropzone>span:not(.sago-upload-icon){
  margin-top:6px;
  color:var(--sgl-copy,#5a6f84);
  font-size:13px;
  line-height:1.5;
}

/* La riga tecnica sotto il titolo e' un DATO (formato e peso): mono con
   cifre tabellari, come tutte le misure di questa colonna. Era a 10px. */
html[data-sago-a] .sago-main-column .sago-dropzone small{
  margin-top:10px;
  color:var(--sgl-copy,#5a6f84);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}


/* --------------------------------------------------------------------------
   PASSO 1: "CONTROLLA IL FILE PRIMA DI PROCEDERE"
   Nel template c'e' un <style> a specificita' (0,1,0) SENZA !important che
   lo faceva verde-azzurro sfumato con raggio 16px e due ombre sovrapposte.
   Qui basta la specificita' - ma si usa (0,4,2) e non (0,3,1) di proposito:
   i fogli sono appesi DUE VOLTE, in testa e in coda, e pareggiare la
   specificita' di un inline del body farebbe vincere solo la copia in coda,
   con un lampeggio al primo paint. Stando piu' in alto vince gia' la copia
   in testa, che il browser ha prima di dipingere.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-step3b7-wrap{
  margin-top:16px;
  gap:10px 16px;
}

html[data-sago-a] .sago-main-column .sago-step3b7-btn{
  gap:11px;
  padding:11px 14px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#fff);
  color:var(--ast-text,#29445f);
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-step3b7-btn:hover{
  border-color:var(--ast-blue,#0878e8);
  background:var(--ast-soft,#f5f9fd);
  transform:none;
  box-shadow:none;
}

/* Verde: qui significa "verifica", cioe' lo stesso verde della zona con il
   file dentro. Riquadro chiaro con glifo scuro invece di pieno saturo: il
   pieno in questa pagina e' riservato a cio' che e' selezionato. */
html[data-sago-a] .sago-main-column .sago-step3b7-btn-icon{
  width:30px;
  height:30px;
  border:1px solid #b7e7d6;
  border-radius:var(--ast-r,4px);
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
  font-size:13px;
}

html[data-sago-a] .sago-main-column .sago-step3b7-btn-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Dentro questi riquadri convivono un glifo di riserva (la spunta, il meno,
   il piu') e l'SVG vero: senza questa riga si vedono tutti e due.
   NON si usa display:none - qui la scatola resta in piedi, larga un pixel e
   ritagliata, cosi' il testo continua a esistere nel DOM per chi legge con
   la voce e per i mu-plugin che frugano nel testo della pagina.
   Questo NON e' pedanteria: create-dxf-quantity-enlarge trova i bottoni
   della quantita' confrontando textContent con "-", "+" e la regex
   "NN pz". Togliere quei caratteri dal DOM gli farebbe perdere il bersaglio
   e la scheda quantita' resterebbe senza le sue misure. */
html[data-sago-a] .sago-main-column .sago-step3b7-btn-icon .gl,
html[data-sago-a] .sago-main-column .sago-quantity-control .gl{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

html[data-sago-a] .sago-main-column .sago-step3b7-btn strong{
  color:var(--ast-navy,#0b2745);
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
}

html[data-sago-a] .sago-main-column .sago-step3b7-btn small{
  margin-top:3px;
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px;
  font-weight:500;
  line-height:1.35;
}

html[data-sago-a] .sago-main-column .sago-step3b7-note{
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px;
  font-weight:400;
  line-height:1.5;
}


/* --------------------------------------------------------------------------
   PASSO 1: IL BIVIO "CREA SENZA DXF"
   #sgoFoamCardV1G non e' nel template: sul servito atterra come fratello
   della scheda del passo 1, dentro il form (vedi la testata del foglio).
   Da scheda azzurra con ombra da 44px a scheda di questa pagina.

   QUI SERVE !important, e non per pigrizia. Sul riquadro scrivono QUATTRO
   mu-plugin in fila - v1g, v1h, v1i, v1n - e i loro <style> stanno nel body
   in quest'ordine: v1n, v1k, v1i, v1h, v1g. Fra dichiarazioni d'autore
   importanti vince prima la specificita' e poi l'ordine: questo selettore
   vale piu' del loro #sgoFoamCardV1G nudo e il foglio arriva dopo. Senza
   !important le stesse righe sono lettera morta.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column #sgoFoamCardV1G{
  margin:0 !important;
  padding:clamp(18px,2vw,22px) !important;
  border:1px solid var(--ast-line,#d7e3ee) !important;
  border-radius:var(--ast-r-lg,9px) !important;
  background:var(--ast-paper,#fff) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045) !important;
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif);
}

/* L'occhiello e' un caso a se'. Il mu-plugin v1i azzera il font del nodo
   (font-size:0 !important) e rimette la scritta "CREA SENZA DXF" in un
   ::after. IL TESTO CHE SI LEGGE NON E' IL TESTO DEL NODO: vestire il nodo
   qui sarebbe una riga morta. Percio' sul nodo si tolgono solo pillola,
   fondo e bordo, e la tipografia si mette sul pseudo-elemento, che v1i
   lascia senza !important (11px, letter-spacing .12em) e che quindi si
   batte con la sola specificita'. */
html[data-sago-a] .sago-main-column #sgoFoamCardV1G .sgo-v1g-kicker{
  display:block !important;
  margin:0 0 12px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--ast-blue-text,#075fbd) !important;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G .sgo-v1g-kicker:after{
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.14em;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G .sgo-v1g-row{
  gap:16px 24px;
  align-items:start;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G strong{
  margin-bottom:5px;
  color:var(--ast-navy,#0b2745);
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G span{
  max-width:56ch;
  color:var(--sgl-copy,#5a6f84);
  font-size:13px;
  line-height:1.5;
}

/* Le due porte del bivio. "Crea disegno online" NON e' pieno azzurro:
   il pieno azzurro di questa colonna e' UNO, ed e' "Analizza il DXF e
   calcola il prezzo". Qui filetto azzurro e inchiostro azzurro, che nella
   grammatica astucci vuol dire comunque "questa e' una strada". */
html[data-sago-a] .sago-main-column #sgoFoamCardV1G button{
  min-height:44px;
  padding:11px 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-size:14px;
  font-weight:700;
  box-shadow:none !important;
  transition:background-color .18s ease,border-color .18s ease;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G button:hover{
  background:#eff6ff !important;
  color:var(--ast-blue-dark,#075fbd) !important;
  transform:none;
}

/* Il secondo comando distrugge un disegno: resta secondario, a filetto
   grigio, perche' non deve avere il peso di quello che crea. */
html[data-sago-a] .sago-main-column #sgoFoamCardV1G #sgoResetDrawingV2C{
  border-color:var(--ast-line,#d7e3ee) !important;
  background:var(--ast-paper,#fff) !important;
  color:var(--sgl-copy,#5a6f84) !important;
  font-weight:600 !important;
}

html[data-sago-a] .sago-main-column #sgoFoamCardV1G #sgoResetDrawingV2C:hover{
  border-color:var(--ast-mute,#64748b) !important;
  background:var(--ast-page,#f8fafc) !important;
  color:var(--ast-text,#29445f) !important;
}

/* La frase di stato che standalone-a-fork.js scrive in data-sgf-lead e che
   il CSS legge con content:attr(): non entra in textContent, quindi nessun
   mu-plugin che cerca bersagli per testo puo' vederla. Lo script gira anche
   su questa variante ed etichetta le porte solo se il riquadro e' davvero
   fratello della scheda dentro il form. Se l'ancora si perdesse, l'attributo
   non compare e questa regola non disegna nulla: nessun buco in pagina. */
html[data-sago-a] .sago-main-column #sgoFoamCardV1G[data-sgf-lead]::before{
  content:attr(data-sgf-lead);
  display:block;
  margin:0 0 12px;
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px;
  line-height:1.5;
}

/* A disegno vuoto la frase e' la sola parola "oppure": non e' una frase di
   stato, e' una congiunzione. Non merita una riga sua. */
html[data-sgf-state="empty"][data-sago-a] .sago-main-column #sgoFoamCardV1G[data-sgf-lead]::before{
  content:none;
}


/* --------------------------------------------------------------------------
   PASSO 2: LE FAMIGLIE DI MATERIALE
   Schede bianche con filetto e un CARTELLINO in alto a destra, come le
   opzioni della pagina astucci. La disposizione e' dichiarata per aree,
   senza posizionamento assoluto: il markup e' strong / span / b, e con il
   solo flusso automatico il cartellino finirebbe sotto.

   LA SELEZIONATA: filetto azzurro, fondo appena azzurrato, e una SPUNTA.
   I NON DISPONIBILI: filetto TRATTEGGIATO, l'icona dell'orologio che e' gia'
   nel markup, e la scritta "Presto online" a piena leggibilita'.
   Lo stato non dipende mai dal solo colore, e l'opacity:.45 che sbiadiva
   tutto sparisce.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-family-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr));
  gap:10px;
}

html[data-sago-a] .sago-main-column .sago-family-tab{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-content:start;
  gap:6px 10px;
  padding:13px 13px 14px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r-lg,9px);
  background:var(--ast-paper,#fff);
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-family-tab:hover{
  border-color:var(--ast-blue,#0878e8);
  background:var(--ast-soft,#f5f9fd);
  transform:none;
}

html[data-sago-a] .sago-main-column .sago-family-tab strong{
  grid-area:1/1/2/2;
  align-self:center;
  color:var(--ast-navy,#0b2745);
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
}

html[data-sago-a] .sago-main-column .sago-family-tab>span{
  grid-area:2/1/3/3;
  margin:0;
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px;
  line-height:1.4;
}

/* Il cartellino della famiglia disponibile ("6 opzioni"): azzurro su tinta
   azzurra, come "Inclusa" e' verde su tinta verde nella pagina astucci. */
html[data-sago-a] .sago-main-column .sago-family-tab b{
  grid-area:1/2/2/3;
  align-self:start;
  justify-self:end;
  margin:0;
  padding:4px 8px;
  border-radius:var(--ast-r,4px);
  background:#eff6ff;
  color:var(--ast-blue-text,#075fbd);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:nowrap;
}

html[data-sago-a] .sago-main-column .sago-family-tab.is-active{
  border-color:var(--ast-blue,#0878e8);
  background:#f8fcff;
  box-shadow:inset 4px 0 0 0 var(--ast-blue,#0878e8);
}

/* La spunta della famiglia scelta. Il markup non ha un nodo libero, quindi
   il segno sta su un pseudo-elemento del bottone: e' generato, non entra in
   textContent, e nessun mu-plugin che legge il testo se ne accorge. */
html[data-sago-a] .sago-main-column .sago-family-tab.is-active strong::after{
  content:"";
  display:inline-block;
  width:15px;
  height:15px;
  margin-left:7px;
  vertical-align:-2px;
  background-color:var(--ast-blue-text,#075fbd);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:15px 15px;
  mask-size:15px 15px;
  -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%3E%3C/svg%3E");
}

/* Il tratteggio dice "non ancora" prima di qualunque colore. Il fondo resta
   di carta tenue, non spento: quello che non e' disponibile va comunque
   letto, perche' e' un'informazione commerciale. */
html[data-sago-a] .sago-main-column .sago-family-tab.is-coming-soon,
html[data-sago-a] .sago-main-column .sago-family-tab.is-coming-soon:disabled,
html[data-sago-a] .sago-main-column .sago-family-tab.is-coming-soon:disabled:hover{
  border:1px dashed var(--ast-mute,#64748b);
  background:var(--ast-page,#f8fafc);
  box-shadow:none;
  opacity:1;
  cursor:not-allowed;
  transform:none;
}

html[data-sago-a] .sago-main-column .sago-family-tab.is-coming-soon strong{
  color:var(--ast-text,#29445f);
}

/* "PRESTO ONLINE": inchiostro corrente su tinta di pagina, 9,62:1.
   Il lucchetto lo fa gia' l'orologio che sta nel markup - il cartellino
   porta quindi icona PIU' parola PIU' tratteggio: tre segni, nessuno dei
   quali e' il colore. */
html[data-sago-a] .sago-main-column .sago-family-tab .sago-coming-soon-badge{
  grid-area:1/2/2/3;
  align-self:start;
  justify-self:end;
  width:max-content;
  gap:5px;
  margin:0;
  padding:4px 8px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#fff);
  color:var(--ast-text,#29445f);
  box-shadow:none;
}

html[data-sago-a] .sago-main-column .sago-family-tab .sago-coming-soon-badge svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-sago-a] .sago-main-column .sago-family-tab .sago-coming-soon-badge em{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* --------------------------------------------------------------------------
   PASSO 2: LA GUIDA ALLE ALTEZZE
   Pannello interno a fondo tenue, il riquadro dell'icona come .ast-input i.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-foam-height-guide{
  gap:12px;
  align-items:flex-start;
  margin:18px 0 12px;
  padding:13px 14px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:var(--ast-soft,#f5f9fd);
  box-shadow:none;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-icon{
  width:38px;
  height:38px;
  min-width:38px;
  margin-top:1px;
  border:1px solid #cfe3f8;
  border-radius:var(--ast-r,4px);
  background:#eff7ff;
  color:var(--ast-blue-text,#075fbd);
  box-shadow:none;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-copy{
  gap:3px;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-copy>small{
  color:var(--ast-blue-text,#075fbd);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-copy>strong{
  color:var(--ast-navy,#0b2745);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.015em;
}

html[data-sago-a] .sago-main-column .sago-foam-height-guide-copy>span{
  max-width:56ch;
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px;
  line-height:1.45;
}


/* --------------------------------------------------------------------------
   PASSO 2: LE ALTEZZE GOMMAPIUMA
   Le schede tengono le aree di griglia che gia' avevano (visual / radio /
   height / meta): cambia il vestito, non l'impianto. L'anteprima sta in
   cima come nelle schede materiale di astucci, il valore grande in mezzo,
   i dati sotto. Il blocchetto era un solido nero lucido con tre gradienti
   sovrapposti: diventa un volume chiaro con filetto, e si tinge d'azzurro
   quando la scheda e' scelta - cosi' l'anteprima stessa dice lo stato.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-material-list.sago-foam-height-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,146px),1fr));
  gap:10px;
  margin-top:0;
  max-height:none;
  overflow:visible;
}

html[data-sago-a] .sago-main-column .sago-material-card.sago-rubber-height-card{
  min-height:132px;
  padding:12px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r-lg,9px);
  background:var(--ast-paper,#fff);
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-material-card.sago-rubber-height-card:hover{
  border-color:var(--ast-blue,#0878e8);
  background:var(--ast-soft,#f5f9fd);
}

/* Il blocchetto piu' alto misura 52px: a 34px la visuale lo tagliava. */
html[data-sago-a] .sago-main-column .sago-foam-height-visual{
  height:58px;
  align-items:flex-end;
  padding-bottom:3px;
  border-bottom:1px solid var(--ast-line,#d7e3ee);
}

html[data-sago-a] .sago-main-column .sago-foam-block{
  width:38px;
  border:1px solid #b8cde3;
  border-radius:2px;
  background:#e3edf7;
  box-shadow:none;
}

/* La linea di misura e' fatta di bordi, non di SVG: le due tacche sono i
   suoi pseudo-elementi, qui riportate a trattini diritti invece dei
   triangoli ruotati. L'SVG che sta dentro non ha ne' fill ne' stroke
   propri: senza questa riga verrebbe disegnato in nero pieno. */
html[data-sago-a] .sago-main-column .sago-foam-measure-line{
  border-left:1px solid #9db5cd;
}

html[data-sago-a] .sago-main-column .sago-foam-measure-line:before,
html[data-sago-a] .sago-main-column .sago-foam-measure-line:after{
  left:-3px;
  width:7px;
  height:1px;
  border:0;
  background:#9db5cd;
  transform:none;
}

html[data-sago-a] .sago-main-column .sago-foam-measure-line svg{
  fill:none;
  stroke:#9db5cd;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* La spunta della scheda scelta. Il pallino di standalone.css viene spento
   e al suo posto c'e' un segno di spunta ritagliato in mask-image: e' il
   solo modo di avere una spunta vera senza toccare il markup. */
html[data-sago-a] .sago-main-column .sago-rubber-height-card .sago-radio{
  width:18px;
  height:18px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#fff);
}

html[data-sago-a] .sago-main-column .sago-material-card.is-selected .sago-radio{
  border:0;
  border-radius:0;
  background-color:var(--ast-blue-text,#075fbd);
  -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:18px 18px;
  mask-size:18px 18px;
}

html[data-sago-a] .sago-main-column .sago-material-card.is-selected .sago-radio:after{
  content:none;
}

html[data-sago-a] .sago-main-column .sago-foam-height-main{
  align-items:baseline;
  gap:4px;
}

html[data-sago-a] .sago-main-column .sago-foam-height-main>small{
  align-self:center;
  margin-right:auto;
  color:var(--sgl-copy,#5a6f84);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}

/* La misura e' una cifra che il cliente legge: mono, tabellare, grande. */
html[data-sago-a] .sago-main-column .sago-foam-height-main>strong{
  color:var(--ast-navy,#0b2745);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:26px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

html[data-sago-a] .sago-main-column .sago-foam-height-main>em{
  padding-bottom:2px;
  color:var(--sgl-copy,#5a6f84);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:13px;
  font-style:normal;
  font-weight:600;
}

html[data-sago-a] .sago-main-column .sago-foam-height-meta{
  gap:3px 6px;
}

/* Le due targhette erano pillole a 8px: qui sono testo, e a 12px. */
html[data-sago-a] .sago-main-column .sago-foam-height-meta>small{
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--sgl-copy,#5a6f84);
  font-size:12px;
  font-weight:400;
  line-height:1.35;
}

html[data-sago-a] .sago-main-column .sago-material-card.is-selected{
  border-color:var(--ast-blue,#0878e8);
  background:#f8fcff;
  box-shadow:inset 4px 0 0 0 var(--ast-blue,#0878e8);
}

html[data-sago-a] .sago-main-column .sago-material-card.is-selected:hover{
  background:#f8fcff;
}

html[data-sago-a] .sago-main-column .sago-rubber-height-card.is-selected .sago-foam-block{
  border-color:var(--ast-blue-dark,#075fbd);
  background:var(--ast-blue,#0878e8);
}

html[data-sago-a] .sago-main-column .sago-rubber-height-card.is-selected .sago-foam-height-main>strong{
  color:var(--ast-blue-text,#075fbd);
}


/* ==========================================================================
   PASSO 3: LA QUANTITA'
   E' il componente meglio riuscito della pagina astucci e quello piu' povero
   qui: e' il pezzo che va portato quasi identico.

   ZONA AFFOLLATA. Due mu-plugin (create-dxf-quantity-enlarge e
   quantity-quick-polish-v3) aprono ob_start() a livello di file: i loro
   <style> finiscono nel <head> e le classi .sago-qty-*-v2 arrivano davvero
   sui nodi. Ricostruito leggendo il loro JS, che cerca per TESTO ESATTO:
     .sago-qty-section-v2  -> .sago-panel.sago-step-card.sago-quantity-card
     .sago-qty-title-v2    -> l'h2 "Quanti pezzi ti servono?"
     .sago-qty-desc-v2     -> il p "Il prezzo viene ricalcolato..."
     .sago-qty-stepper-v2  -> .sago-quantity-control
     .sago-qty-side-v2     -> #sago-minus e #sago-plus
     .sago-qty-current-v2  -> #sago-quantity
     .sago-qty-quick-v2    -> .sago-quick-quantity
     .sago-qty-label-v2    -> .sago-quick-quantity-label
     .sago-qty-row-v2      -> .sago-quick-quantity-buttons
     .sago-qty-preset-v2   -> i cinque button[data-sago-quantity]
     .sago-qty-helper-v2   -> il p dentro .sago-quick-quantity

   LE LORO MISURE SI ASSECONDANO, NON SI COMBATTONO. Sono generose e
   coincidono quasi sempre con quelle di astucci: lo stepper alto 70px con
   8px di passo (astucci: riga da 54-56px), i lati da 52px (astucci: 44x56),
   il numero a 22px (astucci: 22px identico), le cinque colonne, le
   spaziature, il titolo a 22px, la descrizione a 13,5px. Tutto questo resta
   loro, e infatti le regole corrispondenti QUI NON CI SONO: le ho tolte
   invece di scriverle piu' forti.

   SI BATTE SOLO QUESTO, e ogni voce ha una ragione dichiarata:
     1. i raggi 14/18/21px, che rimettono in pagina una morbidezza che
        questa direzione non ha (il raggio corrente e' 4px, 9px sulle
        schede piu' grandi);
     2. il max-width:350px sulla riga dei preset, che stringe cinque celle a
        62px e manda a capo "1.000 pz";
     3. l'altezza fissa 50/52px della pillola: la parola "SCELTA" sotto il
        numero e' il segno d'identita' di questo componente e in 50px non
        ci sta insieme al numero e all'unita';
     4. tre corpi sotto i 12px (8px del "pz", 11px dell'occhiello, 7,5px in
        versione stretta): sotto i 12 non si scende;
     5. il centraggio e i 340px della nota, in una colonna allineata a
        sinistra;
     6. il row-gap di 10px sulla riga dei preset, che staccherebbe il prezzo
        dalla sua pillola.
   ========================================================================== */
html[data-sago-a] .sago-main-column .sago-quantity-ui{
  display:grid;
  gap:16px;
  width:100%;
}


/* --- la riga della quantita' esatta (.ast-qty-row) -----------------------
   Un solo riquadro con filetto azzurro chiaro, i due comandi ai lati e il
   numero grande in mezzo con l'unita' piccola accanto. */
html[data-sago-a] .sago-main-column .sago-quantity-ui .sago-quantity-control{
  width:100%;
  justify-content:flex-start;
  gap:0;
  border:1px solid #76baf1;
  background:var(--ast-paper,#fff);
  box-shadow:none;
}

html[data-sago-a] .sago-main-column .sago-quantity-control,
html[data-sago-a] .sago-main-column .sago-quantity-control.sago-qty-stepper-v2{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column .sago-quantity-control button{
  border:0;
  background:#f6fbff;
  color:var(--ast-blue-text,#075fbd);
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-quantity-control button.sago-qty-side-v2{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column .sago-quantity-control button:hover{
  background:#eff6ff;
  color:var(--ast-blue-dark,#075fbd);
}

html[data-sago-a] .sago-main-column .sago-quantity-control button svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Il numero grande. Il corpo 22px e il peso 850 arrivano dal mu-plugin e
   coincidono con astucci: qui si aggiungono solo la famiglia monospazio e
   le cifre tabellari, perche' il numero cambia sotto gli occhi del cliente
   e non deve ballare in larghezza a ogni cifra.
   Il min-width:74px del mu-plugin si tiene: la riga che glielo contendeva
   era scritta qui, morte.py l'ha dichiarata morta sul DOM ricostruito ed e'
   stata TOLTA invece che resa piu' forte - 74px e' esattamente la larghezza
   che astucci da' al suo numero. */
html[data-sago-a] .sago-main-column .sago-quantity-control input{
  flex:1 1 auto;
  border:0;
  background:transparent;
  color:var(--ast-navy,#0b2745);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  text-align:center;
}

html[data-sago-a] .sago-main-column .sago-quantity-control input.sago-qty-current-v2{
  border-radius:0 !important;
}

/* L'unita' accanto al numero. Nel markup c'e' la parola "pezzi": astucci
   scrive "pz". Il cambio e' nel rapporto, qui si veste quel che c'e'. */
html[data-sago-a] .sago-main-column .sago-quantity-control>span{
  padding:0 14px 0 4px;
  color:var(--sgl-copy,#5a6f84);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}


/* --- il riquadro delle scelte rapide ------------------------------------
   Fondo tenue e filetto: e' un pannello interno, non una seconda scheda.
   Il passo interno (17px 14px 16px) e il margine sono dei mu-plugin e si
   tengono; si batte solo il raggio da 18px. */
html[data-sago-a] .sago-main-column .sago-quick-quantity{
  min-width:0;
  border:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-soft,#f5f9fd);
}

html[data-sago-a] .sago-main-column .sago-quick-quantity.sago-qty-quick-v2{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-label,
html[data-sago-a] .sago-main-column .sago-quick-quantity-label.sago-qty-label-v2{
  display:block;
  color:var(--ast-blue-text,#075fbd);
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
}


/* --- le pillole di scelta rapida (.ast-qty-presets) ----------------------
   Quella attiva e' AZZURRA PIENA CON TESTO BIANCO e la parola "SCELTA"
   sotto; le altre bianche con filetto. Esattamente il componente astucci.

   IL PIENO E' --ast-blue-dark E NON --ast-blue: il bianco su #0878e8 sta a
   4,32:1 e questo e' testo piccolo, non un titolo. Su #075fbd sta a 6,21:1.
   Il filetto resta --ast-blue, cosi' la pillola conserva la brillantezza
   del colore della pagina sul bordo senza spenderla dove si legge.

   "SCELTA" e' un ::after: e' contenuto generato, non entra in textContent, e
   il mu-plugin che riconosce le pillole confrontando il testo con la regex
   "^(25|100|200|500|1\.?000)pz$" continua a trovarle. Se lo scrivessi nel
   markup, invece, perderebbe tutte e cinque le pillole e la scheda
   quantita' resterebbe senza le sue misure. */
html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons.sago-qty-row-v2{
  max-width:none !important;
  margin:0 !important;
  column-gap:8px !important;
  row-gap:0 !important;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-paper,#fff);
  color:var(--ast-text,#29445f);
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.sago-qty-preset-v2{
  height:auto !important;
  min-height:58px !important;
  max-height:none !important;
  border-radius:var(--ast-r-lg,9px) !important;
  box-shadow:none !important;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button:hover{
  border-color:var(--ast-blue,#0878e8);
  background:#eff6ff;
  color:var(--ast-blue-text,#075fbd);
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.is-selected{
  border-color:var(--ast-blue,#0878e8);
  background:var(--ast-blue-dark,#075fbd);
  color:var(--ast-paper,#fff);
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.sago-qty-preset-v2.is-selected{
  box-shadow:0 7px 16px rgba(8,119,230,.16) !important;
}

/* La cifra della pillola: 14px non e' "il numero grande" del componente
   astucci, che sta a 17px. */
html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons strong{
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.sago-qty-preset-v2 strong{
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.sago-qty-preset-v2 small{
  margin:2px 0 0 !important;
  color:inherit !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  opacity:1 !important;
}

/* La pillola scelta porta DUE segni, e non sono la stessa cosa.

   1. LA SPUNTA NELL'ANGOLO, sempre. E' il segno della variante "premium"
      della pagina astucci ed e' l'unico che regge a qualunque larghezza,
      perche' e' fuori dal flusso e non allarga la cella.
   2. LA PAROLA "SCELTA" sotto il numero, che e' il segno della variante
      "balanced", quella che il committente ha davanti. E' anche la piu'
      chiara, perche' si legge invece di doverla interpretare.

   PERCHE' LA PAROLA HA UNA SOGLIA. La pillola eredita
   white-space:nowrap !important dal mu-plugin: se non ci sta, non va a
   capo, esce dalla cella. "SCELTA" a 12px peso 800 con letter-spacing .08em
   misura 57,7px (misurato con lo stesso stimatore del banco). Sotto i 640px
   di finestra la cella interna scende sotto i 50px e la parola sborderebbe.
   A 640px la cella sta sopra i 100px, e sopra i 1181px - dove torna la
   colonna centrale a minmax(480px,1fr) - sta a circa 70px: in entrambi i
   casi ci sta con margine. La soglia e' quindi una misura, non un gusto.
   Sotto quella soglia resta la spunta, e con essa il pieno azzurro e
   aria-pressed="true" che standalone.js tiene aggiornato: lo stato non
   dipende mai dal solo colore, a nessuna larghezza. */
html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.is-selected{
  position:relative;
}

html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.is-selected::before{
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  width:13px;
  height:13px;
  background-color:var(--ast-paper,#fff);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:13px 13px;
  mask-size:13px 13px;
  -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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%3E%3C/svg%3E");
}

@media (min-width:640px){
  html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button.is-selected::after{
    content:"SCELTA";
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.92);
    font-size:12px;
    font-weight:800;
    line-height:1;
    letter-spacing:.08em;
  }
}

/* La nota di servizio era centrata e larga 340px: in una colonna allineata
   a sinistra tornava a bandiera in mezzo al nulla. */
html[data-sago-a] .sago-main-column .sago-quick-quantity p,
html[data-sago-a] .sago-main-column .sago-quick-quantity p.sago-qty-helper-v2{
  margin:12px 0 0 !important;
  max-width:60ch !important;
  color:var(--sgl-copy,#5a6f84);
  font-size:12.5px !important;
  line-height:1.5 !important;
  text-align:left !important;
}

/* La scheda della quantita' riceve un raggio di 21px. Il rientro di 24px
   invece si tiene: e' quasi quello delle altre due schede. */
html[data-sago-a] .sago-main-column .sago-step-card.sago-qty-section-v2{
  border-radius:var(--ast-r-lg,9px) !important;
}


/* --------------------------------------------------------------------------
   QUANTITA': I NODI DI standalone-a-quantity.js
   Lo script gira anche su questa variante e aggiunge, come FRATELLI dei
   bottoni dentro la stessa griglia, una "mensola" per cella (.sgq-foot, il
   prezzo al pezzo per quella quantita') e sotto una fascia di stato
   (.sgq-band) con la sua spiegazione (.sgq-why). Il foglio che li vestiva
   sulla variante 'a' qui non c'e'.

   La mensola e' il posto dove astucci mette la parola "SCELTA": qui porta
   un'informazione vera - il prezzo gia' calcolato - e resta agganciata alla
   sua pillola. Per questo il row-gap della griglia va a zero e la pillola
   perde il raggio in basso: sono due pezzi di un unico oggetto.
   Le regole sono scritte per .sgq-row, che lo script mette PRIMA delle
   mensole nella stessa funzione: se lo script non girasse, le pillole
   resterebbero intere e non ci sarebbe nessun bordo tagliato a meta'.
   -------------------------------------------------------------------------- */
/* CINQUE COLONNE SEMPRE, E COLLOCAZIONE ESPLICITA. Senza queste righe la
   mensola si stacca dalla sua pillola sotto i 390px, dove il mu-plugin
   enlarge porta la riga a tre colonne: le mensole hanno grid-column 4 e 5,
   che in una griglia da tre diventano tracce implicite larghe a piacere.
   Con cinque colonne dichiarate e la posizione scritta cella per cella, la
   disposizione non dipende ne' dall'ordine dei figli ne' dal numero di
   tracce che una media query altrui potrebbe generare. Sugli schermi molto
   stretti la cella scende sotto la larghezza del prezzo e la mensola lo
   tronca con i puntini: e' la degradazione voluta, gia' scelta dal foglio
   che vestiva questi stessi nodi sulla variante 'a'. */
html[data-sago-a] .sago-main-column .sgq-row{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  align-items:stretch !important;
}

html[data-sago-a] .sago-main-column .sgq-row .sgq-c1{ grid-column:1 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-c2{ grid-column:2 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-c3{ grid-column:3 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-c4{ grid-column:4 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-c5{ grid-column:5 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-pill{ grid-row:1 !important; }
html[data-sago-a] .sago-main-column .sgq-row .sgq-foot{ grid-row:2 !important; }

html[data-sago-a] .sago-main-column .sgq-row button.sago-qty-preset-v2{
  border-bottom-right-radius:0 !important;
  border-bottom-left-radius:0 !important;
}

html[data-sago-a] .sago-main-column .sgq-foot{
  display:block;
  min-width:0;
  min-height:27px;
  padding:5px 4px 6px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-top:0;
  border-radius:0 0 var(--ast-r-lg,9px) var(--ast-r-lg,9px);
  background:var(--ast-paper,#fff);
  color:var(--sgl-copy,#5a6f84);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Con il prezzo dentro diventa inchiostro corrente; senza resta un trattino
   in tono minore. Il segno "-" c'e' comunque: non e' solo colore. */
html[data-sago-a] .sago-main-column .sgq-foot.sgq-has{
  color:var(--ast-text,#29445f);
  font-weight:600;
}

html[data-sago-a] .sago-main-column .sgq-foot.sgq-is-on{
  border-color:var(--ast-blue,#0878e8);
  background:#f8fcff;
  color:var(--ast-blue-text,#075fbd);
}

/* --- la fascia di stato --------------------------------------------------
   E' la riga che nella pagina astucci dice "Disponibile - aggiornamento
   istantaneo" con il pallino verde. Qui il pallino non e' un ornamento:
   e' verde quando il prezzo di questa quantita' e' arrivato dal motore,
   spento quando non e' ancora stato calcolato. Accanto c'e' sempre la frase
   che dice la stessa cosa a parole, quindi lo stato non e' solo colore. */
html[data-sago-a] .sago-main-column .sgq-band{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-left:4px solid var(--ast-green,#06a579);
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#fff);
}

html[data-sago-a] .sago-main-column .sgq-band-k{
  flex:0 0 auto;
  color:var(--ast-blue-text,#075fbd);
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}

html[data-sago-a] .sago-main-column .sgq-band-q{
  flex:0 0 auto;
  color:var(--ast-navy,#0b2745);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

html[data-sago-a] .sago-main-column .sgq-band-p{
  flex:1 1 auto;
  min-width:0;
  color:var(--ast-text,#29445f);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}

html[data-sago-a] .sago-main-column .sgq-band-p::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:7px;
  border-radius:50%;
  background:var(--ast-green,#06a579);
}

html[data-sago-a] .sago-main-column .sgq-band-p.sgq-wait{
  color:var(--sgl-copy,#5a6f84);
  font-weight:400;
}

html[data-sago-a] .sago-main-column .sgq-band-p.sgq-wait::before{
  background:var(--ast-line,#d7e3ee);
  box-shadow:inset 0 0 0 1px var(--ast-mute,#64748b);
}

html[data-sago-a] .sago-main-column .sgq-band-src{
  flex:1 1 100%;
  margin-top:2px;
  color:var(--sgl-copy,#5a6f84);
  font-size:12px;
  line-height:1.45;
}

html[data-sago-a] .sago-main-column .sgq-why{
  margin:10px 0 0;
  max-width:60ch;
  color:var(--sgl-copy,#5a6f84);
  font-size:12px;
  line-height:1.5;
}


/* --------------------------------------------------------------------------
   IL COMANDO CHE CALCOLA
   E' l'UNICO pieno azzurro di questa colonna, e la sua forma e' quella di
   .ast-action-blue: raggio 4px, filetto d'accento, un'ombra bassa.
   Il fondo e' --ast-blue-dark e non --ast-blue perche' la scritta e' bianca
   e sta a 6,21:1 invece di 4,32:1.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column .sago-primary-action{
  width:100%;
  height:auto;
  min-height:60px;
  padding:14px 18px;
  gap:12px;
  border:1px solid var(--ast-blue-dark,#075fbd);
  border-radius:var(--ast-r,4px);
  background:var(--ast-blue-dark,#075fbd);
  color:var(--ast-paper,#fff);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.005em;
  box-shadow:0 7px 16px rgba(8,119,230,.16);
  transition:background-color .18s ease,box-shadow .18s ease;
}

html[data-sago-a] .sago-main-column .sago-primary-action:hover{
  background:#064f9e;
  filter:none;
  transform:none;
  box-shadow:0 4px 10px rgba(7,74,137,.18);
}

/* Il riquadro dell'icona di .ast-action: nel markup l'SVG e' figlio diretto
   e non c'e' nessun nodo da vestire, quindi il riquadro lo fa l'SVG stesso
   con il proprio passo interno. */
html[data-sago-a] .sago-main-column .sago-primary-action svg{
  width:34px;
  height:34px;
  flex:none;
  padding:7px;
  border-radius:var(--ast-r,4px);
  background:rgba(255,255,255,.16);
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-sago-a] .sago-main-column .sago-action-loader{
  border-color:rgba(255,255,255,.34);
  border-top-color:var(--ast-paper,#fff);
}

html[data-sago-a] .sago-main-column .sago-form-message{
  padding:13px 15px;
  border-radius:var(--ast-r,4px);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}

html[data-sago-a] .sago-main-column .sago-form-message.is-error{
  border:1px solid #e6bfba;
  border-left:4px solid var(--sgl-bad,#8c2016);
  background:var(--sgl-bad-soft,#f7e7e4);
  color:var(--sgl-bad,#8c2016);
}

html[data-sago-a] .sago-main-column .sago-form-message.is-success{
  border:1px solid #b7e7d6;
  border-left:4px solid var(--ast-green,#06a579);
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
}


/* ==========================================================================
   LA FINESTRA "CONTROLLA IL FILE"
   #sago-step3b7-modal vive dentro la scheda del passo 1, quindi in questa
   colonna, e si apre sopra tutto con position:fixed. E' l'unico momento in
   cui il cliente vede solo questa finestra: se qui la grammatica cambia
   (raggi da 24px, ombre da 80px, vetro smerigliato) la pagina si smentisce
   proprio dove il cliente sta decidendo se il suo file va bene.

   NEL TEMPLATE CI SONO DUE BLOCCHI <style> CHE LA RIGUARDANO, non uno:
     - riga ~600  : la veste originale, specificita' (0,1,0), SENZA !important
     - riga ~1290 : il ritocco "compatto", #sago-step3b7-modal .classe, cioe'
                    (1,1,0), con !important su quasi tutte le MISURE
   Le regole sono quindi divise in due gruppi dichiarati: prima quelle che
   non combattono nessuno, poi quelle che devono battere il blocco compatto
   a pari importanza. Chi tornera' qui deve vedere a colpo d'occhio quali
   righe sono in lotta e quali no.

   LA FINESTRA NASCE CHIUSA (display:none, la classe .is-open la mette il
   JS). Quindi qui il doppio aggancio dei fogli non puo' produrre lampeggio:
   quando si apre, testa e coda sono state parsate entrambe da un pezzo.
   E' anche il motivo per cui su questi selettori non ho dovuto alzare la
   specificita' oltre il necessario.

   NON VERIFICABILE DAL SERVER: selmatch.py conferma che tutti i nodi del
   template esistono, ma .is-open, .sago-step3b7-row (.ok/.bad/.wait) e le
   classi .ok/.bad su .sago-step3b7-final nascono solo a runtime. Le ho
   ricostruite leggendo gli script del template (righe 636 e 846 per le
   righe, 743/781/785/1132 per l'esito finale). Restano da guardare in
   browser.
   ========================================================================== */


/* --- PRIMO GRUPPO: regole che non combattono nessuno ---------------------
   Vincono per sola specificita' e ordine sul blocco della riga ~600. */

/* Il velo era vetro smerigliato: il blur costa una passata di composizione
   a ogni ridisegno e inventa una superficie che questa pagina non ha.
   Resta un velo piano di --ast-navy al 62%. */
html[data-sago-a] .sago-main-column .sago-step3b7-modal{
  padding:24px;
  background:rgba(11,39,69,.62);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

html[data-sago-a] .sago-main-column .sago-step3b7-box{
  border:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-paper,#fff);
  box-shadow:0 12px 36px rgba(16,49,82,.09);
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif);
}

html[data-sago-a] .sago-main-column .sago-step3b7-top{
  align-items:flex-start;
  border-bottom:1px solid var(--ast-line,#d7e3ee);
}

/* L'occhiello dice lo stato del controllo, quindi resta verde: e' un
   segnale vero, non un ornamento. */
html[data-sago-a] .sago-main-column .sago-step3b7-pill{
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

html[data-sago-a] .sago-main-column .sago-step3b7-top h3{
  color:var(--ast-navy,#0b2745);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.03em;
}

html[data-sago-a] .sago-main-column .sago-step3b7-top p{
  color:var(--sgl-copy,#5a6f84);
  font-weight:400;
  line-height:1.5;
}

/* La chiusura: bersaglio da dito (44px), filetto, raggio di questa pagina.
   Il blocco compatto non la tocca, quindi qui basta la specificita'. */
html[data-sago-a] .sago-main-column .sago-step3b7-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-radius:var(--ast-r,4px);
  background:var(--ast-paper,#fff);
  color:var(--ast-text,#29445f);
  font-size:20px;
  line-height:1;
  transition:border-color .18s ease,background-color .18s ease;
}

html[data-sago-a] .sago-main-column .sago-step3b7-close:hover{
  border-color:var(--ast-blue,#0878e8);
  background:var(--ast-soft,#f5f9fd);
}

html[data-sago-a] .sago-main-column .sago-step3b7-file{
  align-items:flex-start;
  border:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-soft,#f5f9fd);
}

html[data-sago-a] .sago-main-column .sago-step3b7-icon{
  position:relative;
  flex:none;
  border:1px solid #cfe3f8;
  background:#eff7ff;
  color:var(--ast-blue-text,#075fbd);
  font-weight:600;
}

html[data-sago-a] .sago-main-column .sago-step3b7-file strong{
  color:var(--ast-navy,#0b2745);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
}

/* Il peso e il formato del file sono misure: cifre tabellari. */
html[data-sago-a] .sago-main-column .sago-step3b7-file small{
  color:var(--sgl-copy,#5a6f84);
  font-family:var(--ast-mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace);
  font-variant-numeric:tabular-nums;
  font-weight:400;
  letter-spacing:.02em;
}

/* --- le righe di esito ---
   Ogni riga porta gia' un simbolo dentro il pallino, scritto dal JS: lo
   stato quindi non e' affidato al solo colore nemmeno oggi. Quello che
   manca e' una PAROLA di esito, perche' il grassetto della riga dice
   l'argomento ("Dimensioni rilevate") e non il verdetto. Quella parola va
   nel markup, non qui: e' scritto nel rapporto. */
html[data-sago-a] .sago-main-column .sago-step3b7-row{
  align-items:center;
  border:1px solid var(--ast-line,#d7e3ee);
  background:var(--ast-paper,#fff);
}

html[data-sago-a] .sago-main-column .sago-step3b7-dot{
  position:relative;
  flex:none;
  border-radius:50%;
  font-weight:700;
}

html[data-sago-a] .sago-main-column .sago-step3b7-row.ok .sago-step3b7-dot{
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
}

html[data-sago-a] .sago-main-column .sago-step3b7-row.bad .sago-step3b7-dot{
  background:var(--sgl-bad-soft,#f7e7e4);
  color:var(--sgl-bad,#8c2016);
}

/* "warn" esiste nel secondo costruttore di riga del template ma non ha
   nessuna regola nei due blocchi inline: fino a oggi il suo pallino
   restava trasparente. E' l'unico stato che qui nasce invece di essere
   rivestito. Prende il viola, l'accento raro dell'impianto. */
html[data-sago-a] .sago-main-column .sago-step3b7-row.warn .sago-step3b7-dot{
  background:#f1eeff;
  color:#5b39c4;
}

/* "wait" non e' un esito: e' l'assenza di esito. Nessun colore, quindi,
   perche' qui il colore deve voler dire qualcosa di vero. */
html[data-sago-a] .sago-main-column .sago-step3b7-row.wait .sago-step3b7-dot{
  background:var(--ast-page,#f8fafc);
  color:var(--sgl-copy,#5a6f84);
}

html[data-sago-a] .sago-main-column .sago-step3b7-row strong{
  color:var(--ast-navy,#0b2745);
  font-weight:800;
  letter-spacing:-.01em;
}

html[data-sago-a] .sago-main-column .sago-step3b7-row small{
  color:var(--sgl-copy,#5a6f84);
  font-weight:400;
}

/* La riga di chiusura. Il filetto pieno a sinistra e' lo stesso segno delle
   schede scelte: un filetto, non un'ombra. */
html[data-sago-a] .sago-main-column .sago-step3b7-final{
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid var(--ast-line,#d7e3ee);
  border-left:4px solid var(--ast-blue,#0878e8);
  background:var(--ast-soft,#f5f9fd);
  color:var(--ast-text,#29445f);
  font-weight:400;
  line-height:1.5;
}

html[data-sago-a] .sago-main-column .sago-step3b7-final.ok{
  border-color:#b7e7d6;
  border-left-color:var(--ast-green,#06a579);
  background:var(--ast-green-soft,#edfaf5);
  color:var(--ast-green-text,#04795a);
}

html[data-sago-a] .sago-main-column .sago-step3b7-final.bad{
  border-color:#e6bfba;
  border-left-color:var(--sgl-bad,#8c2016);
  background:var(--sgl-bad-soft,#f7e7e4);
  color:var(--sgl-bad,#8c2016);
}

html[data-sago-a] .sago-main-column .sago-step3b7-actions{
  align-items:center;
}

/* Il bottone di conferma era pieno #123b8c con raggio 14px e un'ombra da
   26px: grammatica vecchia. In questa direzione il pieno azzurro e'
   legittimo - e' l'unica uscita da una finestra che blocca la pagina, e li'
   dentro non c'e' piu' nessun contesto che faccia gerarchia al posto suo -
   ma la FORMA deve essere quella di .ast-action-blue: raggio 4px e ombra
   bassissima. Fondo, peso e ombra stanno nel blocco senza !important e si
   battono con la sola specificita'; raggio, corpo e passo interno stanno in
   quello compatto e sono nel secondo gruppo. */
html[data-sago-a] .sago-main-column .sago-step3b7-ok{
  min-height:44px;
  border:1px solid var(--ast-blue-dark,#075fbd);
  background:var(--ast-blue-dark,#075fbd);
  color:var(--ast-paper,#fff);
  font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif);
  font-weight:800;
  letter-spacing:-.005em;
  box-shadow:0 7px 16px rgba(8,119,230,.16);
  transition:background-color .18s ease,box-shadow .18s ease;
}

html[data-sago-a] .sago-main-column .sago-step3b7-ok:hover{
  background:#064f9e;
  box-shadow:0 4px 10px rgba(7,74,137,.18);
}


/* --- i glifi della finestra ---------------------------------------------
   I simboli che il JS scrive nel pallino e nel riquadro del file sono
   caratteri di testo: la spunta passi, ma "per", "punto" e "onda" non sono
   icone, sono ripieghi tipografici. Qui diventano glifi ritagliati.

   Il carattere NON viene tolto dal DOM - nessuno puo' toccare quel JS - e
   nemmeno rimpicciolito: si rende TRASPARENTE, cosi' la scatola resta in
   piedi e il testo resta a disposizione di chi legge con la voce.
   E il color:transparent sta DENTRO l'@supports insieme alla maschera: se
   un browser non sapesse ritagliare, il carattere resterebbe visibile
   invece di lasciare lo stato al solo colore. E' questa la ragione
   dell'@supports, non una prudenza generica. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){

  html[data-sago-a] .sago-main-column .sago-step3b7-dot,
  html[data-sago-a] .sago-main-column .sago-step3b7-icon{
    color:transparent;
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-dot::after,
  html[data-sago-a] .sago-main-column .sago-step3b7-icon::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-dot::after{
    -webkit-mask-size:13px 13px;
    mask-size:13px 13px;
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-icon::after{
    -webkit-mask-size:18px 18px;
    mask-size:18px 18px;
    background-color:var(--ast-blue-text,#075fbd);
    -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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7l5 5v12H6Z'/%3E%3Cpath d='M13 3.5v5h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7l5 5v12H6Z'/%3E%3Cpath d='M13 3.5v5h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-row.ok .sago-step3b7-dot::after{
    background-color:var(--ast-green-text,#04795a);
    -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-row.bad .sago-step3b7-dot::after{
    background-color:var(--sgl-bad,#8c2016);
    -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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-row.warn .sago-step3b7-dot::after{
    background-color:#5b39c4;
    -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='M12 4.6 21 19.4H3Z'/%3E%3Cpath d='M12 10v4M12 16.6v.1'/%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='M12 4.6 21 19.4H3Z'/%3E%3Cpath d='M12 10v4M12 16.6v.1'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-row.wait .sago-step3b7-dot::after{
    background-color:var(--sgl-copy,#5a6f84);
    -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%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4v5l3.2 2'/%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%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4v5l3.2 2'/%3E%3C/svg%3E");
  }

  /* La riga di chiusura porta il suo glifo davanti al testo: e' un esito
     complessivo, e leggerlo per colore non basta. */
  html[data-sago-a] .sago-main-column .sago-step3b7-final::before{
    content:"";
    flex:none;
    width:18px;
    height:18px;
    margin-top:1px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:18px 18px;
    mask-size:18px 18px;
    -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 11v5.4M12 7.8v.1'/%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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 11v5.4M12 7.8v.1'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-final.ok::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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 5 5L19.5 6.8'/%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='m4.5 12.6 5 5L19.5 6.8'/%3E%3C/svg%3E");
  }

  html[data-sago-a] .sago-main-column .sago-step3b7-final.bad::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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 21 19.4H3Z'/%3E%3Cpath d='M12 10v4M12 16.6v.1'/%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='M12 4.6 21 19.4H3Z'/%3E%3Cpath d='M12 10v4M12 16.6v.1'/%3E%3C/svg%3E");
  }
}


/* --- SECONDO GRUPPO: le righe che combattono il blocco compatto ----------
   Quel blocco marca !important su quasi tutte le misure con selettori
   #sago-step3b7-modal .classe, cioe' (1,1,0). Questi valgono (1,4,2): fra
   dichiarazioni importanti d'autore decide prima la specificita' e poi
   l'ordine, quindi vincono - ma solo dove serve davvero.

   SI BATTE:
     - i raggi 13/14/15px, che rimetterebbero in pagina una morbidezza che
       questa direzione non ha: tutti a --ast-r;
     - QUATTRO corpi sotto i 12px (10,5 dell'occhiello, 10,8 del sottotitolo
       del file, 11,8 del titolo di riga, 10,6 della descrizione di riga);
     - il riquadro dell'icona a 34px, che sta fuori dai 30-38px in cui
       stanno tutte le altre icone di questa colonna.

   NON SI BATTE, DI PROPOSITO: passi interni, larghezza, altezza massima,
   scorrimento del corpo, colonne della griglia di riga, distanze, e il
   corpo del titolo (22px) e del sottotitolo (12px, gia' al minimo). Sono
   misure sane, e la finestra compatta e' nata per stare negli schermi
   bassi: toglierla sarebbe un danno, non un miglioramento. */
html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-box{
  border-radius:var(--ast-r-lg,9px);
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-pill{
  border-radius:var(--ast-r,4px) !important;
  font-size:12px !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-file{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-icon{
  width:32px !important;
  height:32px !important;
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-file small{
  font-size:12px !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-row{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-row strong{
  font-size:12.5px !important;
  line-height:1.3 !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-row small{
  font-size:12px !important;
  line-height:1.4 !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-final{
  border-radius:var(--ast-r,4px) !important;
}

html[data-sago-a] .sago-main-column #sago-step3b7-modal .sago-step3b7-ok{
  padding:12px 18px !important;
  border-radius:var(--ast-r,4px) !important;
  font-size:14px !important;
}


/* --------------------------------------------------------------------------
   FUOCO DA TASTIERA
   Un solo modo di dire "sei qui" in tutta la colonna, ed e' l'anello di
   fuoco dell'impianto astucci.
   -------------------------------------------------------------------------- */
html[data-sago-a] .sago-main-column button:focus-visible,
html[data-sago-a] .sago-main-column input:focus-visible,
html[data-sago-a] .sago-main-column label:focus-within{
  outline:2px solid var(--ast-blue,#0878e8);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(8,120,232,.11);
}


/* --------------------------------------------------------------------------
   MOVIMENTO
   I due mu-plugin della quantita' fanno saltare la pillola di un pixel al
   passaggio del puntatore: e' l'unico effetto loro che si tiene, perche'
   anche astucci lo fa. Qui resta da spegnere SOLO quello.

   QUI C'ERA ANCHE L'AZZERAMENTO GENERALE DELLE DURATE su *, ed e' STATO
   TOLTO invece di essere reso piu' forte: standalone-lab.css lo fa gia' su
   html[data-sago-a] body .sago-page > main * con !important e valori piu'
   bassi dei miei. morte.py lo aveva rilevato come l'unica riga morta del
   foglio. Riscriverlo piu' specifico avrebbe solo duplicato una regola
   corretta che sta gia' dove deve stare.

   Il transform invece non lo spegne nessuno, e per una ragione dichiarata
   nel foglio delle fondamenta: un transform statico non e' movimento, e
   azzerarlo distruggerebbe la lastra in prospettiva della preview. Percio'
   qui si spengono i tre transform che SONO movimento, uno per uno.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html[data-sago-a] .sago-main-column .sago-quick-quantity-buttons button:hover,
  html[data-sago-a] .sago-main-column #sgoFoamCardV1G button:hover,
  html[data-sago-a] .sago-main-column .sago-step3b7-btn:hover{
    transform:none !important;
  }
}
