/* ==========================================================================
   standalone-lab-pronto.css
   Ultimo foglio della lista della variante 't' (?sago_t=1).
   Caricato SOLO dietro quel cancello: la pagina dei clienti non lo vede mai.

   Contiene tre cose, e nient'altro:
     1. la barra dei passi 1 - 2 - 3 in cima alla testata;
     2. il prezzo al pezzo come numero grande della scheda del preventivo;
     3. il blocco "TOTALE IVA INCLUSA" spento finche' un prezzo non c'e'.

   REGOLE RISPETTATE
   - i token li definisce standalone-lab.css: qui si CONSUMANO sempre con
     valore di ripiego, var(--ast-x, #fallback). Nessun token ridefinito.
   - --ast-blue e --ast-green sono SUPERFICI, non inchiostro: 4,32:1 e 3,15:1
     su bianco. Per il testo si usano --ast-blue-text (#075fbd, 6,21:1) e
     --ast-green-text (#04795a, 5,40:1).
   - nessun font-size sotto i 12px.
   - contrasti calcolati, non stimati: i valori sono annotati dove servono.
   ========================================================================== */


/* ==========================================================================
   1. LA BARRA DEI PASSI
   Il markup e' l'ultimo figlio di <section class="sago-hero">:

     <nav class="sago-steps"> <button data-sago-step="1"><b>1</b>
       <span><strong>..</strong><small>..</small></span></button> ... </nav>

   La forma e' quella viva di .ast-steps su lab-astucci (ricetta in
   /root/backups/2026-08-15-astucci-dna/componenti-astucci.txt, righe 355-395):
   cerchio a sinistra, titolo e sottotitolo a destra, un trattino grigio nel
   vuoto fra un passo e il successivo, e una sottolineatura azzurra sotto il
   passo corrente. La versione viva di astucci NON usa la lunga linea che
   attraversa tutta la barra: quella sta solo nel foglio di partenza ed e'
   spenta con content:none. Qui si porta la forma viva.

   DUE SORGENTI DI VERITA', MAI IN CONFLITTO
   Lo stato dei passi si puo' sapere in due modi indipendenti:
     a) da CSS puro, con :has(), leggendo le classi che standalone.js mette
        gia' sul DOM: .sago-dropzone.has-file (standalone.js:1229) e
        .sago-material-card.is-selected (standalone.js:1248-1249). Verificate
        sul servito e nello script, non supposte.
     b) dalle classi .is-active/.is-done che standalone-lab-pronto.js scrive.
   Se :has() c'e', vince :has() e le classi vengono azzerate: il blocco
   @supports in fondo al capitolo azzera per attributo (specificita' pari a
   quella delle classi, ma piu' avanti nel file) e poi ridipinge. Se :has()
   non c'e', restano le classi. Se non c'e' nemmeno il JS, resta il solo
   .is-active che il template scrive sul passo 1: tutti gli altri neutri.
   Mai una barra rotta, in nessuna delle tre combinazioni.
   -------------------------------------------------------------------------- */

html body .sago-page .sago-hero .sago-steps{
    /* la barra prende sempre tutta la larghezza della testata: sotto i 1181px
       la griglia della testata ha una colonna sola, sopra ne ha due e la
       barra sta nella quarta riga, sotto occhiello/titolo/sottotitolo e
       accanto a niente. */
    grid-column:1 / -1;

    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:18px;
    row-gap:0;

    /* lo stacco dal blocco di testo e il filetto che separa: e' l'unico
       filetto orizzontale della testata, quindi non compete con nulla */
    margin:clamp(16px,1.8vw,24px) 0 0;
    padding:clamp(14px,1.4vw,18px) 0 0;
    border-top:1px solid var(--ast-line,#d7e3ee);

    font-family:var(--ast-sans,Inter,"Segoe UI",Arial,sans-serif);
}

html body .sago-page .sago-hero .sago-steps>button{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:center;
    gap:12px;

    min-width:0;
    min-height:64px;
    margin:0;
    padding:8px 0 10px;

    border:0;
    border-radius:0;
    background:transparent;
    text-align:left;
    cursor:pointer;

    /* --ast-text: 10,07:1 su carta bianca */
    color:var(--ast-text,#29445f);
    font-family:inherit;
    transition:color var(--ast-tr,.18s ease);
}

/* Il trattino che collega un cerchio al successivo. Sta nel vuoto della
   griglia (column-gap:18px), quindi non ruba spazio al testo. top:50% e'
   esatto e non stimato: i pulsanti sono celle di griglia della stessa
   altezza e il cerchio e' centrato in verticale dentro il pulsante, quindi
   il centro del cerchio E' il centro del pulsante. */
html body .sago-page .sago-hero .sago-steps>button::after{
    content:"";
    position:absolute;
    top:50%;
    right:-18px;
    width:18px;
    height:1px;
    background:var(--ast-line,#d7e3ee);
    transition:background var(--ast-tr,.18s ease);
}

html body .sago-page .sago-hero .sago-steps>button:last-child::after{
    content:none;
}

/* La sottolineatura del passo corrente. Nasce spenta e schiacciata: si
   accende solo sullo stato attivo, come su astucci. */
html body .sago-page .sago-hero .sago-steps>button::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    border-radius:2px;
    background:var(--ast-blue,#0878e8);
    opacity:0;
    transform:scaleX(.45);
    transform-origin:left center;
    transition:opacity var(--ast-tr,.18s ease),transform var(--ast-tr,.18s ease);
}

/* Il cerchio numerato. A riposo: filetto azzurrato, fondo carta, inchiostro
   --ast-copy (4,57:1 su bianco, sopra la soglia AA di 4,5). */
html body .sago-page .sago-hero .sago-steps>button>b{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    min-width:40px;
    border:1px solid var(--ast-line,#d7e3ee);
    border-radius:50%;
    background:var(--ast-paper,#ffffff);
    color:var(--ast-copy,#62788e);
    box-shadow:none;
    font-size:13px;
    line-height:1;
    font-weight:900;
    transition:color var(--ast-tr,.18s ease),border-color var(--ast-tr,.18s ease),background var(--ast-tr,.18s ease);
}

html body .sago-page .sago-hero .sago-steps>button>span{
    display:block;
    min-width:0;
}

/* 13px: astucci usa 13px per il titolo del passo. text-overflow non serve
   perche' il testo va a capo, ma il min-width:0 sul contenitore si': senza,
   una cella di griglia non scende sotto la parola piu' lunga e la barra
   allargherebbe la testata. */
html body .sago-page .sago-hero .sago-steps strong{
    display:block;
    min-width:0;
    color:inherit;
    font-size:13px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.005em;
}

/* astucci qui sta a 10,5px. Non si scende sotto i 12px: e' la regola di
   questa pagina e vale anche quando il modello dice altro.
   --ast-copy su carta bianca: 4,57:1. */
html body .sago-page .sago-hero .sago-steps small{
    display:block;
    min-width:0;
    margin-top:4px;
    color:var(--ast-copy,#62788e);
    font-size:12px;
    line-height:1.25;
    font-weight:600;
}

html body .sago-page .sago-hero .sago-steps>button:hover>b{
    border-color:var(--ast-price-line,#76baf1);
}


/* --- stato PASSO CORRENTE ------------------------------------------------
   Cerchio pieno --ast-blue-dark e non --ast-blue: sopra ci sta un numero
   bianco di 13px, cioe' testo normale, che su #0878e8 vale 4,32:1 e non
   passa. Su #075fbd vale 6,21:1. */
html body .sago-page .sago-hero .sago-steps>button.is-active>b{
    border-color:var(--ast-blue-dark,#075fbd);
    background:var(--ast-blue-dark,#075fbd);
    color:var(--ast-paper,#ffffff);
    box-shadow:0 7px 16px rgba(8,119,232,.18);
}

html body .sago-page .sago-hero .sago-steps>button.is-active::before{
    opacity:1;
    transform:scaleX(1);
}

/* --- stato PASSO FATTO ---------------------------------------------------
   Verde: nel sistema astucci il verde vuol dire "confermato", ed e' l'unica
   cosa che questo stato deve dire. Fondo --ast-green-text e non --ast-green
   per lo stesso motivo di sopra: bianco su #06a579 e' 3,15:1, su #04795a e'
   5,40:1. Il numero resta il numero: non diventa una spunta, cosi' chi
   torna indietro riconosce ancora il passo. */
html body .sago-page .sago-hero .sago-steps>button.is-done>b{
    border-color:var(--ast-green-text,#04795a);
    background:var(--ast-green-text,#04795a);
    color:var(--ast-paper,#ffffff);
    box-shadow:none;
}

/* il trattino verso il passo successivo si tinge quando quello prima e'
   fatto: e' questa la "linea di avanzamento" della barra */
html body .sago-page .sago-hero .sago-steps>button.is-done::after{
    background:var(--ast-blue,#0878e8);
}


/* --- la stessa cosa, ma dedotta da :has() --------------------------------
   Qui non serve JavaScript: le classi le mette gia' standalone.js.
   Il blocco parte azzerando gli stati per ATTRIBUTO: [data-sago-step] pesa
   quanto una classe, quindi la specificita' e' pari a quella delle regole
   .is-active/.is-done qui sopra e vince perche' viene dopo. Da li' in poi
   la sola verita' e' il DOM.
   Il passo 3 dipende da .sago-summary-card.has-price, che la scrive il JS:
   e' inevitabile, un prezzo e' un valore di testo e nessun selettore lo
   sa leggere. Passi 1 e 2 restano completamente senza JS.
   -------------------------------------------------------------------------- */
@supports selector(:has(*)){

    html body .sago-page .sago-hero .sago-steps>button[data-sago-step]>b{
        border-color:var(--ast-line,#d7e3ee);
        background:var(--ast-paper,#ffffff);
        color:var(--ast-copy,#62788e);
        box-shadow:none;
    }

    html body .sago-page .sago-hero .sago-steps>button[data-sago-step]::before{
        opacity:0;
        transform:scaleX(.45);
    }

    html body .sago-page .sago-hero .sago-steps>button[data-sago-step]::after{
        background:var(--ast-line,#d7e3ee);
    }

    /* FATTO
       Il passo 2 chiede DUE cose: il file e la scheda materiale scelta.
       Non e' pignoleria: il template preseleziona la prima scheda
       (standalone-t.php:1433, `$is_first ? 'is-selected' : ''`), quindi
       .sago-material-card.is-selected e' vero fin dal primo pixel dipinto,
       prima che qualcuno abbia toccato niente. Verificato sul servito il
       16/08: delle sei schede altezza, una nasce gia' scelta.
       Senza la catena la barra si sarebbe aperta con il passo 2 "fatto" e
       il passo 1 ancora da fare: una barra che dice il falso e' peggio di
       una barra che non c'e'. Con la catena, il materiale conta come fatto
       solo da quando c'e' un file - e a quel punto e' vero, perche' una
       scelta valida c'e' davvero, ed e' quella predefinita. */
    html body .sago-page:has(.sago-dropzone.has-file) .sago-hero .sago-steps>button[data-sago-step="1"]>b,
    html body .sago-page:has(.sago-dropzone.has-file):has(.sago-material-card.is-selected) .sago-hero .sago-steps>button[data-sago-step="2"]>b,
    html body .sago-page:has(.sago-summary-card.has-price) .sago-hero .sago-steps>button[data-sago-step="3"]>b{
        border-color:var(--ast-green-text,#04795a);
        background:var(--ast-green-text,#04795a);
        color:var(--ast-paper,#ffffff);
    }

    html body .sago-page:has(.sago-dropzone.has-file) .sago-hero .sago-steps>button[data-sago-step="1"]::after,
    html body .sago-page:has(.sago-dropzone.has-file):has(.sago-material-card.is-selected) .sago-hero .sago-steps>button[data-sago-step="2"]::after{
        background:var(--ast-blue,#0878e8);
    }

    /* CORRENTE = il primo non fatto */
    html body .sago-page:not(:has(.sago-dropzone.has-file)) .sago-hero .sago-steps>button[data-sago-step="1"]>b,
    html body .sago-page:has(.sago-dropzone.has-file):not(:has(.sago-material-card.is-selected)) .sago-hero .sago-steps>button[data-sago-step="2"]>b,
    html body .sago-page:has(.sago-dropzone.has-file):has(.sago-material-card.is-selected):not(:has(.sago-summary-card.has-price)) .sago-hero .sago-steps>button[data-sago-step="3"]>b{
        border-color:var(--ast-blue-dark,#075fbd);
        background:var(--ast-blue-dark,#075fbd);
        color:var(--ast-paper,#ffffff);
        box-shadow:0 7px 16px rgba(8,119,232,.18);
    }

    html body .sago-page:not(:has(.sago-dropzone.has-file)) .sago-hero .sago-steps>button[data-sago-step="1"]::before,
    html body .sago-page:has(.sago-dropzone.has-file):not(:has(.sago-material-card.is-selected)) .sago-hero .sago-steps>button[data-sago-step="2"]::before,
    html body .sago-page:has(.sago-dropzone.has-file):has(.sago-material-card.is-selected):not(:has(.sago-summary-card.has-price)) .sago-hero .sago-steps>button[data-sago-step="3"]::before{
        opacity:1;
        transform:scaleX(1);
    }
}


/* --- sotto i 760px -------------------------------------------------------
   A tre colonne strette il sottotitolo non ci sta: "Famiglia e spessore"
   vuole circa 114px a 12px e la colonna a 390px ne offre 112 in tutto,
   cerchio compreso. Invece di rimpicciolire il testo (vietato: 12px e' il
   pavimento) si toglie il sottotitolo e si impila il cerchio sopra il
   titolo. Cosi' la parola piu' lunga rimasta e' "Preventivo", circa 72px:
   ci sta senza andare a capo e senza essere tagliata.
   -------------------------------------------------------------------------- */
@media (max-width:760px){

    html body .sago-page .sago-hero .sago-steps{
        column-gap:10px;
    }

    html body .sago-page .sago-hero .sago-steps>button{
        grid-template-columns:minmax(0,1fr);
        justify-items:center;
        gap:8px;
        min-height:0;
        padding:6px 0 10px;
        text-align:center;
    }

    html body .sago-page .sago-hero .sago-steps>button>b{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:12px;
    }

    html body .sago-page .sago-hero .sago-steps small{
        display:none;
    }

    html body .sago-page .sago-hero .sago-steps strong{
        text-align:center;
    }

    /* il trattino torna all'altezza del cerchio, che ora non e' piu' al
       centro del pulsante ma in cima */
    html body .sago-page .sago-hero .sago-steps>button::after{
        top:23px;
        right:-10px;
        width:10px;
    }
}


/* ==========================================================================
   2. IL PREZZO AL PEZZO
   Su lab-astucci il numero grande della scheda e' il PREZZO PER PEZZO e il
   totale sta nel blocco piccolo accanto: e' quella composizione che rende
   la scheda leggibile in un colpo d'occhio.

   Qui il dato esiste gia'. Il server manda net_unit gia' arrotondato e
   standalone.js:1388 lo scrive in #sago-unit-price - ma ci scrive UNA
   STRINGA SOLA, "0,63 EUR per pezzo - IVA esclusa", nello stesso <small>
   che fa anche da messaggio d'attesa. Numero e parole nello stesso nodo di
   testo non si compongono da CSS.

   standalone.js e' condiviso con la pagina dei clienti e NON si tocca.
   Percio' il template porta tre nodi vuoti in piu' dentro .sago-price-block
   e standalone-lab-pronto.js li riempie leggendo quel <small>. Se il
   formato della frase cambia, il JS non trova niente, non toglie l'attributo
   hidden, non mette la classe: la scheda resta esattamente com'e' oggi.

   La composizione a due colonne di astucci qui NON si copia alla lettera:
   la colonna del preventivo e' larga 288-368px e dentro la scheda restano
   229px utili. "1.234,56 EUR" a 28px ne prende 170, e l'etichetta del
   totale a destra ne vorrebbe 90: 272 > 229, il testo verrebbe tagliato.
   Il "blocco piccolo accanto" pero' c'e' gia' ed e' .sago-gross-row, che la
   scheda affianca da sola quando ha spazio (flex-wrap, vedi
   standalone-lab-quote.css). Percio' qui si impila: etichetta, numero
   grande, suffisso, filetto, e in fondo la riga del totale IVA esclusa.
   -------------------------------------------------------------------------- */

/* i tre nodi nuovi esistono nel documento anche prima del JS, ma con
   l'attributo hidden. Questa regola serve a impedire che una qualunque
   dichiarazione di display piu' avanti li riaccenda per sbaglio. */
main .sago-configurator .sago-summary-column .sago-price-block>[hidden]{
    display:none !important;
}

main .sago-configurator .sago-summary-column .sago-price-block.has-unit{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-content:center;
    column-gap:10px;
    row-gap:0;
}

/* riga 1: l'etichetta. Eredita gia' il trattamento di .sago-price-block>span
   (12px, 800, maiuscolo, --ast-blue-text a 6,02:1 su #f8fcff): qui basta
   dirle dove sta. */
main .sago-configurator .sago-summary-column .sago-price-block.has-unit>.sago-unit-label{
    grid-row:1;
    grid-column:1 / -1;
}

/* riga 2: il numero grande. Eredita da .sago-price-block>strong il corpo di
   28px e l'inchiostro --ast-blue-text: e' esattamente cio' che serve, ed e'
   il motivo per cui questo nodo e' uno <strong> e non un <div>. */
main .sago-configurator .sago-summary-column .sago-price-block.has-unit>.sago-unit-value{
    grid-row:2;
    grid-column:1 / -1;
}

/* riga 3: il suffisso, con il filetto che chiude il blocco del prezzo al
   pezzo e apre quello del totale. <em> per difetto e' corsivo: qui no.
   --ast-text su #f8fcff vale 9,76:1; --ast-copy scenderebbe a 4,43:1,
   sotto la soglia. */
main .sago-configurator .sago-summary-column .sago-price-block.has-unit>.sago-unit-suffix{
    grid-row:3;
    grid-column:1 / -1;
    margin:6px 0 11px;
    padding-bottom:11px;
    border-bottom:1px solid var(--ast-price-line,#76baf1);
    color:var(--ast-text,#29445f);
    font-size:12px;
    line-height:1.3;
    font-weight:600;
    font-style:normal;
}

/* riga 4: il totale IVA esclusa, che smette di essere il numero grande e
   diventa la riga di servizio. L'etichetta a sinistra, il valore a destra. */
main .sago-configurator .sago-summary-column .sago-price-block.has-unit>span:not(.sago-unit-label){
    grid-row:4;
    grid-column:1;
    align-self:center;
}

main .sago-configurator .sago-summary-column .sago-price-block.has-unit>strong#sago-net-total{
    grid-row:4;
    grid-column:2;
    align-self:center;
    margin:0;
    font-size:17px;
    line-height:1.1;
    letter-spacing:0;
    text-align:right;
}

/* il vecchio <small> diceva "0,63 EUR per pezzo - IVA esclusa": ora quella
   stessa informazione e' il numero grande e il suo suffisso. Sparisce solo
   quando c'e' davvero un prezzo al pezzo; senza, resta il messaggio
   d'attesa "Carica il DXF per ottenere il prezzo". */
main .sago-configurator .sago-summary-column .sago-price-block.has-unit>small#sago-unit-price{
    display:none;
}


/* ==========================================================================
   3. IL BLOCCO BLU SPENTO FINCHE' NON C'E' UN PREZZO
   "TOTALE IVA INCLUSA" e' un blocco azzurro pieno che a pagina appena
   aperta contiene un trattino: molto colore per nessuna informazione. Su
   lab-astucci la scheda del prezzo non esiste finche' non c'e' il dato.
   Qui non si puo' togliere il nodo (lo riempie standalone.js), ma si puo'
   spegnere: fondo --ast-soft, filetto --ast-line, e il pieno saturo torna
   nel momento esatto in cui arriva la cifra.

   La classe .has-price la mette standalone-lab-pronto.js sulla scheda
   quando #sago-gross-total contiene almeno una cifra. Senza JS la classe
   non arriva mai e il blocco resta spento: e' il caso peggiore accettabile,
   perche' senza JS non c'e' comunque nessun prezzo da mostrare.

   INCHIOSTRO. Su --ast-soft (#f5f9fd) i conti sono: --ast-text 9,51:1,
   --ast-mute 4,4985:1, --ast-copy 4,32:1. Le ultime due NON passano la
   soglia AA di 4,5 - --ast-mute la manca per un millesimo, ed e' comunque
   mancarla. Quindi il "tenue" qui lo fa la superficie, non l'inchiostro:
   il testo resta --ast-text.
   -------------------------------------------------------------------------- */

main .sago-configurator .sago-summary-column .sago-summary-card:not(.has-price) .sago-gross-row{
    border-color:var(--ast-line,#d7e3ee);
    background:var(--ast-soft,#f5f9fd);
    color:var(--ast-text,#29445f);
    transition:background var(--ast-tr,.18s ease),border-color var(--ast-tr,.18s ease),color var(--ast-tr,.18s ease);
}

main .sago-configurator .sago-summary-column .sago-summary-card:not(.has-price) .sago-gross-row>span{
    color:var(--ast-text,#29445f);
    opacity:1;
}

main .sago-configurator .sago-summary-column .sago-summary-card:not(.has-price) .sago-gross-row>strong{
    color:var(--ast-text,#29445f);
    font-weight:800;
}

/* acceso: si lascia parlare standalone-lab-quote.css, che questo blocco lo
   ha gia' disegnato. Qui si aggiunge solo la transizione, cosi' il passaggio
   spento -> acceso si vede come un'accensione e non come un salto. */
main .sago-configurator .sago-summary-column .sago-summary-card.has-price .sago-gross-row{
    transition:background var(--ast-tr,.18s ease),border-color var(--ast-tr,.18s ease),color var(--ast-tr,.18s ease);
}


/* --------------------------------------------------------------------------
   Chi non vuole animazioni non ne ha nessuna.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){

    html body .sago-page .sago-hero .sago-steps>button,
    html body .sago-page .sago-hero .sago-steps>button::before,
    html body .sago-page .sago-hero .sago-steps>button::after,
    html body .sago-page .sago-hero .sago-steps>button>b,
    main .sago-configurator .sago-summary-column .sago-gross-row{
        transition:none;
    }
}