/* ==========================================================================
   SAGO T SUGGERIMENTI DI QUANTITA' 2026-08-15
   --------------------------------------------------------------------------
   Foglio della catena 't', servito solo dietro ?sago_t=1, in due copie
   (testa e coda) come tutti gli altri. Nell'elenco di tail_styles() sta al
   penultimo posto: quando e' stato scritto veniva dopo standalone-t-quote.css
   e prima di standalone-t-recover.css; il 15/08 la famiglia 't' e' stata
   sostituita dalla famiglia 'lab' e questo foglio e' rimasto nello stesso
   posto, fra standalone-lab-quote.css e standalone-lab-fix.css. La posizione
   e' quella giusta in tutti e due i casi: dopo il preventivo, prima
   dell'ultima rete.

   IL ROLLBACK e' cancellare questo file insieme a standalone-t-suggerimenti.js:
   senza i due file tail_styles() non li appende nemmeno (c'e' un is_readable
   davanti) e la pagina T torna esattamente a com'era. La pagina dei clienti,
   senza parametro, non li ha mai visti.

   CHE COSA VESTE
   Un solo blocco, creato a runtime dal JS gemello come fratello subito dopo
   la scheda della quantita' dentro #sago-configurator-form. Se quel punto
   d'aggancio non esiste, il JS esce e qui non c'e' niente da vestire:
   nessuna regola di questo foglio puo' colpire un elemento altrui, perche'
   sono tutte figlie di #sgo-sugg-t.

   LA DIREZIONE
   Filetti e tipografia: nessuna scatola, nessuna ombra, nessun fondo saturo.
   La regola che vale in tutte e due le direzioni in ballo (Tavola e lab) e'
   che il solo blocco pieno e colorato della pagina resta "Aggiungi al
   carrello", che non e' di questo foglio. Qui il richiamo lo fanno la
   dimensione delle cifre e un filetto verde spesso 4px, che e' una riga, non
   una campitura.

   LE CIFRE SONO IL CONTENUTO
   Quantita', prezzi e differenze vanno in --mono con tabular-nums, cosi' le
   colonne si incolonnano davvero e il confronto fra la riga "ORA" e le
   proposte si legge in verticale, a colpo d'occhio.

   PERCHE' NIENTE PERCENTUALI
   In pagina non compare nessuna percentuale, ne' di sconto ne' di calo: su
   questo progetto e' stabilito che non se ne mostrano. La grandezza del
   guadagno la porta la barra; il numero lo porta la differenza in euro, che
   arriva dal server.

   NESSUN AGGANCIO ALLE CLASSI DEL TEMPLATE
   Ogni selettore parte da #sgo-sugg-t e da niente altro. Il prefisso
   ".sago-page" c'era e l'ho tolto: non serviva a vincere niente (nessuna
   regola di nessuno colpisce le classi .sgo-sugg-*) e legava il foglio a un
   nome di classe che non e' mio. Cosi' il blocco resta vestito anche se
   l'impianto attorno cambia nome alle sue fasce.

   I TOKEN: SI CONSUMANO, NON SI RIDEFINISCONO, MA CON UN RIPIEGO VERO
   Il 15/08 la direzione della pagina t e' passata da "Tavola" alla famiglia
   "lab" (astucci): il plugin non carica piu' standalone-t.css, quindi i token
   --ink, --paper-2, --accent, --ok possono non esistere piu'. Questo foglio
   continua a consumarli per primi - se un domani tornano, il blocco li segue
   da solo - ma i valori di ripiego NON sono piu' quelli della Tavola: sono
   una tavolozza mia, verificata, scelta calda-fredda come quella di astucci
   cosi' che il blocco non stoni se nessuno dichiara quei nomi. Non si punta
   sui nomi --ast-*: sono di un foglio che non e' ancora sul disco e i suoi
   verdi e azzurri non passano il contrasto sul testo piccolo (--ast-green
   #06A579 e' 3,15:1 su bianco, --ast-blue #0878E8 e' 4,32:1).

   CONTRASTI, CALCOLATI E NON STIMATI
   Misurati sui tre fondi possibili: #FFFFFF, #FCFCFD (carta Tavola) e
   #F1F5FA (la riga "ORA" e il passaggio del mouse). Si riporta il PEGGIORE.
     ripiego --sg-ink     #29445F   9,19:1
     ripiego --sg-ink-2   #4E637C   5,64:1
     ripiego --sg-ink-3   #566C85   4,94:1
     ripiego --sg-accent  #075FBD   5,67:1
     ripiego --sg-ok      #04795A   4,93:1  (su #EDFAF5: 5,04:1)
   Tutti oltre il 4,5:1 della AA per il testo normale, su ogni fondo.
   Il bordo del pulsante usa --sg-ink-3 (4,94:1) e non il filetto --sg-rule
   (1,19:1): e' il confine di un componente interattivo e la 1.4.11 chiede
   3:1. I filetti di separazione, che sono decorativi, restano su --sg-rule.

   MISURE DEL CORPO: nessun testo sotto i 12px. Il minimo qui e' esattamente
   12px ed e' riservato alle etichette in mono maiuscolo.

   MOVIMENTO: l'unica transizione e' il fondo del pulsante, ed e' spenta a
   mano qui sotto sotto prefers-reduced-motion. Non ci si appoggia
   all'azzeramento globale di un altro foglio, che potrebbe non essere
   caricato: la rinuncia sta dove sta la transizione.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ALIAS LOCALI
   Due mestieri: dare un ripiego se nessun impianto dichiara i token (senza,
   un var() non risolto annullerebbe l'intera shorthand e i filetti
   sparirebbero del tutto), e tenere in un punto solo le tinte derivate.
   -------------------------------------------------------------------------- */

#sgo-sugg-t {
    --sg-paper-2: var(--paper-2, #F1F5FA);
    --sg-ink: var(--ink, #29445F);
    --sg-ink-2: var(--ink-2, #4E637C);
    --sg-ink-3: var(--ink-3, #566C85);
    --sg-rule: var(--rule, #D7E3EE);
    --sg-accent: var(--accent, #075FBD);
    --sg-ok: var(--ok, #04795A);
    --sg-ok-tint: var(--ok-tint, #EDFAF5);
    --sg-focus: var(--focus, #075FBD);
    --sg-r: var(--r, 3px);
    --sg-sans: var(--sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --sg-mono: var(--mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);

    /* Riempimento della barra del guadagno. Il JS lo riscrive riga per riga.
       LA SCALA E' ASSOLUTA E DICHIARATA: barra piena = 25% di calo sul prezzo
       al pezzo. Non e' relativa alla proposta migliore, altrimenti un calo da
       niente disegnerebbe comunque una barra lunga e la pagina mentirebbe
       sull'appiattimento della curva. Con una scala fissa la seconda proposta
       e' visibilmente piu' corta della prima, che e' la verita'. */
    --sg-barra: 0%;

    display: block;
    margin: 0;
    padding: clamp(15px, 1.8vw, 21px) 0 clamp(13px, 1.6vw, 18px);
    border-top: 1px solid var(--sg-rule);
    border-bottom: 1px solid var(--sg-rule);
    background: transparent;
    color: var(--sg-ink);
    font-family: var(--sg-sans);
}

/* Il blocco vive dentro #sago-configurator-form, che e' una griglia con gap.
   Non serve nessun margine: lo spazio lo da' gia' la griglia del modulo. */


/* --------------------------------------------------------------------------
   2. TESTATA
   -------------------------------------------------------------------------- */

#sgo-sugg-t .sgo-sugg-testa {
    display: block;
    margin: 0 0 clamp(12px, 1.4vw, 16px);
}

/* L'occhiello e' un'etichetta di strumento, non una frase: mono, maiuscolo,
   spaziato. 12px e' il pavimento del progetto. */
#sgo-sugg-t .sgo-sugg-occhiello {
    display: block;
    font-family: var(--sg-mono);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sg-accent);
}

#sgo-sugg-t .sgo-sugg-tit {
    margin: 6px 0 0;
    font-family: var(--sg-sans);
    font-size: clamp(19px, .95rem + .55vw, 24px);
    font-weight: 720;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--sg-ink);
    max-width: 30ch;
    text-wrap: balance;
}

/* La nota spiega PERCHE' il prezzo unitario scende e avverte che il totale
   sale. E' la riga piu' importante del blocco dal punto di vista della
   correttezza: va letta, quindi non e' piccola e non e' grigio chiaro. */
#sgo-sugg-t .sgo-sugg-nota {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sg-ink-2);
    max-width: 64ch;
}


/* --------------------------------------------------------------------------
   3. LA TAVOLA DELLE PROPOSTE
   Filetti al posto delle scatole: una riga di separazione fra una proposta e
   l'altra, niente bordi laterali, niente fondo.
   -------------------------------------------------------------------------- */

#sgo-sugg-t .sgo-sugg-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sg-rule);
}

#sgo-sugg-t .sgo-sugg-riga {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--sg-rule);
}

/* La griglia e' la stessa per la riga di riferimento "ORA" e per il pulsante
   di ogni proposta: e' cosi' che le colonne si incolonnano davvero.
   Sotto i 600px di finestra la colonna centrale e' l'intera pagina meno il
   rientro: quattro colonne non ci stanno, quindi si passa a due per due. */
#sgo-sugg-t .sgo-sugg-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "q a"
        "p t";
    gap: 10px 12px;
    align-items: start;
    width: 100%;
    padding: 12px 0;
    text-align: left;
}

@media (min-width: 600px) {
    #sgo-sugg-t .sgo-sugg-griglia {
        grid-template-columns:
            minmax(0, .78fr)
            minmax(0, 1.05fr)
            minmax(0, .92fr)
            auto;
        grid-template-areas: "q p t a";
        gap: 12px;
        align-items: center;
    }
}

#sgo-sugg-t .sgo-sugg-c-q { grid-area: q; }
#sgo-sugg-t .sgo-sugg-c-p { grid-area: p; }
#sgo-sugg-t .sgo-sugg-c-t { grid-area: t; }
#sgo-sugg-t .sgo-sugg-c-a { grid-area: a; }

#sgo-sugg-t .sgo-sugg-cella {
    display: block;
    min-width: 0;
}

/* L'azione sta a destra su entrambi gli impianti. */
#sgo-sugg-t .sgo-sugg-c-a {
    justify-self: end;
    align-self: center;
}

/* Le intestazioni di colonna. Sono per chi vede: chi usa un lettore di
   schermo riceve la frase intera dall'aria-label del pulsante, quindi qui
   il JS mette aria-hidden e queste etichette non vengono lette due volte. */
#sgo-sugg-t .sgo-sugg-eti {
    display: block;
    font-family: var(--sg-mono);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sg-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tutti i numeri della tavola. tabular-nums e' il punto: senza, "1.000" e
   "120" non si incolonnano e il confronto verticale non funziona. */
#sgo-sugg-t .sgo-sugg-num {
    display: block;
    margin-top: 3px;
    font-family: var(--sg-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--sg-ink);
}

#sgo-sugg-t .sgo-sugg-q {
    font-size: clamp(17px, .8rem + .35vw, 20px);
    line-height: 1.15;
}

/* "pezzi" accanto alla quantita': unita' di misura, non frase. */
#sgo-sugg-t .sgo-sugg-unita {
    display: inline;
    margin-left: 5px;
    font-family: var(--sg-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sg-ink-2);
}

/* Il prezzo al pezzo e' il dato che il blocco esiste per mostrare: e' la
   cifra piu' grande della tavola. */
#sgo-sugg-t .sgo-sugg-p {
    font-size: clamp(17px, .8rem + .4vw, 21px);
    line-height: 1.15;
}

#sgo-sugg-t .sgo-sugg-tot {
    font-size: clamp(14px, .72rem + .2vw, 16px);
    line-height: 1.2;
    font-weight: 620;
    color: var(--sg-ink-2);
}


/* --------------------------------------------------------------------------
   4. IL GUADAGNO PER PEZZO, RESO VISIBILE
   La barra e la differenza in euro stanno sotto il prezzo al pezzo, non in
   una colonna a se': cosi' il calo resta attaccato al numero che cala.
   -------------------------------------------------------------------------- */

#sgo-sugg-t .sgo-sugg-calo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 14px;
}

/* Binario della barra: un filetto spento, sempre della stessa lunghezza,
   cosi' due barre diverse si confrontano sullo stesso righello. */
#sgo-sugg-t .sgo-sugg-barra {
    display: block;
    flex: 1 1 44px;
    max-width: 92px;
    height: 4px;
    border-radius: 0;
    background: var(--sg-ok-tint);
}

/* Riempimento. 4px di altezza: e' un filetto, non un blocco pieno, e non
   entra in concorrenza con "Aggiungi al carrello". */
#sgo-sugg-t .sgo-sugg-barra > i {
    display: block;
    width: var(--sg-barra);
    max-width: 100%;
    height: 100%;
    background: var(--sg-ok);
}

/* La differenza in euro. Verde perche' e' un codice di stato, non una
   decorazione: 6,34:1 su carta, 5,95:1 sul grigio della riga in evidenza. */
#sgo-sugg-t .sgo-sugg-delta {
    font-family: var(--sg-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sg-ok);
    white-space: nowrap;
}

/* Sulla riga "ORA" non c'e' nessun calo da mostrare: al posto della barra
   sta una didascalia neutra, cosi' la colonna non resta vuota e non sembra
   che manchi un dato. */
#sgo-sugg-t .sgo-sugg-ora .sgo-sugg-calo {
    color: var(--sg-ink-3);
}

#sgo-sugg-t .sgo-sugg-ora-eti {
    font-family: var(--sg-mono);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .06em;
    color: var(--sg-ink-3);
}


/* --------------------------------------------------------------------------
   5. LA RIGA "ORA" E LE RIGHE PROPOSTA
   -------------------------------------------------------------------------- */

/* La riga di riferimento e' spenta di proposito: e' il termine di paragone,
   non una proposta. Il grigio la stacca senza aggiungere un bordo. */
#sgo-sugg-t .sgo-sugg-ora .sgo-sugg-griglia {
    background: var(--sg-paper-2);
    padding-inline: 10px;
}

#sgo-sugg-t .sgo-sugg-ora .sgo-sugg-num {
    color: var(--sg-ink-2);
    font-weight: 620;
}

/* Il pulsante e' l'intera riga: bersaglio grande, e resta ovvio che si tratta
   di una proposta perche' finche' non lo si preme non cambia niente. */
#sgo-sugg-t .sgo-sugg-scelta {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: var(--sg-sans);
    font-size: 16px;
    cursor: pointer;
    padding-inline: 10px;
    box-shadow: none;
    transition: background-color .15s ease;
}

#sgo-sugg-t .sgo-sugg-scelta:hover {
    background: var(--sg-paper-2);
}

/* Il fuoco da tastiera deve essere visibile quanto il passaggio del mouse e
   non puo' dipendere solo dal fondo: filetto pieno, spostato dentro perche'
   la riga tocca i bordi del blocco. */
#sgo-sugg-t .sgo-sugg-scelta:focus-visible {
    outline: 2px solid var(--sg-focus);
    outline-offset: -3px;
    background: var(--sg-paper-2);
}

/* L'etichetta d'azione: filetto e inchiostro, nessun fondo pieno. */
#sgo-sugg-t .sgo-sugg-azione {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--sg-ink-3);
    border-radius: var(--sg-r);
    font-family: var(--sg-sans);
    font-size: 13.5px;
    font-weight: 640;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: var(--sg-ink);
    white-space: nowrap;
}

#sgo-sugg-t .sgo-sugg-azione > svg {
    width: 13px;
    height: 13px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#sgo-sugg-t .sgo-sugg-scelta:hover .sgo-sugg-azione,
#sgo-sugg-t .sgo-sugg-scelta:focus-visible .sgo-sugg-azione {
    border-color: var(--sg-accent);
    color: var(--sg-accent);
}

/* Nessuna traslazione ne' ingrandimento al passaggio del mouse: non sono
   transizioni ma stati finali, e l'azzeramento delle durate non li
   spegnerebbe. Qui si rinuncia del tutto, cosi' non c'e' niente da spegnere.
   Resta una sola transizione in tutto il foglio, il fondo del pulsante, e
   chi ha chiesto meno movimento non la vede: la rinuncia sta scritta qui
   sotto e non si appoggia a un altro foglio, che potrebbe non essere in
   linea. */

@media (prefers-reduced-motion: reduce) {
    #sgo-sugg-t .sgo-sugg-scelta {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   6. LA RIGA DI STATO
   Due mestieri in un elemento solo, per non avere due regioni live sulla
   stessa scheda: a riposo ricorda che sono proposte; dopo una scelta annuncia
   che la quantita' e' cambiata e va rilanciata l'analisi.
   -------------------------------------------------------------------------- */

#sgo-sugg-t .sgo-sugg-stato {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sg-ink-2);
    max-width: 64ch;
}

#sgo-sugg-t .sgo-sugg-stato:focus-visible {
    outline: 2px solid var(--sg-focus);
    outline-offset: 3px;
    border-radius: var(--sg-r);
}

/* Dopo una scelta la riga smette di essere una postilla e diventa
   l'istruzione successiva: inchiostro pieno e un filetto d'accento davanti. */
#sgo-sugg-t .sgo-sugg-stato.is-fatto {
    padding-left: 11px;
    border-left: 2px solid var(--sg-accent);
    color: var(--sg-ink);
    font-weight: 560;
}