/* =========================================================
   GUIDE — assistenza/
   ---------------------------------------------------------
   Guida email (indice, passi, lente; iphone/ e android/), guide con
   sottoguide, indice delle guide, guide dei componenti EPS
   (guida-moduli/).
   ========================================================= */

/* ---------------------------------------------------------
   CARTE DI RIMANDO IOS / ANDROID (guida-email/)
   Sezione .sec--bone autonoma, due carte a meta' che sono link
   interi: stessa carta chiara di .blprev (.blk--bone.cell), qui
   con il logo del sistema accanto alla sigla in testa.
   --------------------------------------------------------- */
.osln__c{position:relative;transition:background .35s var(--ease)}

.osln__hd{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.osln__hd .cell__k{margin-bottom:0}
.osln__ic{width:22px;height:22px;flex:0 0 auto;color:var(--orange-ink)}
.osln__go{color:var(--orange-ink);opacity:1}
.osln__go span{display:inline-block;transition:transform .3s var(--ease)}
.osln__c:hover{background:var(--bone-2)}
.osln__c:hover .cell__v{color:var(--orange-ink)}
.osln__c:hover .osln__go span{transform:translateX(6px)}
@media (hover:none){
    .osln__c:active{background:var(--bone-2)}
    .osln__c:active .cell__v{color:var(--orange-ink)}
    .osln__c:active .osln__go span{transform:translateX(6px)}
}

/* ---------------------------------------------------------
   GUIDE — INDICE PASSI E LENTE (guida-email/iphone/, guida-email/android/)
   L'IMPIANTO — indice fermo a sinistra, passi a destra. Stessa
   gabbia della colonna dei passi del modulo (.mod): una colonna
   coal che non scorre, il filetto da 1px nel gap.
   --------------------------------------------------------- */
.gd{display:grid;grid-template-columns:clamp(268px,23vw,376px) minmax(0,1fr);gap:1px;background:var(--line-d)}
.gd__rail{background:var(--coal);color:var(--on-dark);padding:clamp(30px,3vw,48px) var(--pad)}
.gd__stk{position:sticky;top:calc(var(--hdr) + 30px)}
.gd__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.gd__lead{font-size:clamp(15px,1.15vw,17px);line-height:1.55;max-width:34ch}
.gd__lead b{font-weight:inherit;font-variation-settings:'wdth' 100,'wght' 650}

/* l'elenco dei passi. A sinistra un binario: traccia da 1px e
   pieno arancio tirato dallo scroll, in transform e non in
   height. A riposo il pieno e' intero: senza JS non resta un
   filetto spento a meta'. */
.gd__l{position:relative;margin-top:clamp(22px,3vh,34px);padding-left:20px;border-top:1px solid var(--line-d)}
.gd__ol{display:block}
.gd__tr{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-d)}
.gd__fl{position:absolute;left:0;top:0;height:100%;width:1px;background:var(--orange);transform-origin:top center;transition:transform .5s var(--ease)}

.gp{
    position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);
    gap:12px;align-items:baseline;padding:12px 0 13px;border-bottom:1px solid var(--line-d);
}
/* il passo in cui si trova: filetto arancio che cresce da
   sinistra sul bordo basso — transform, non width */
.gp::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
    transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.gp[aria-current="step"]::after{transform:scaleX(1)}
.gp__n{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--on-dark-2);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.gp__t{font-size:15px;line-height:1.3;font-variation-settings:'wdth' 104,'wght' 600;transition:color .3s var(--ease)}
.gp.is-ok .gp__n{color:var(--on-dark)}
.gp:hover .gp__t,.gp:hover .gp__n,
.gp[aria-current="step"] .gp__t,.gp[aria-current="step"] .gp__n{color:var(--orange)}
.gp:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------------------------------------------------------
   IL PASSO — lastra con lo schermo del telefono a sinistra,
   il fatto a destra. La lastra e' SEMPRE coal, qualunque sia
   il fondo del corpo, e porta i segni di taglio agli angoli.
   --------------------------------------------------------- */
.gsl{display:grid;gap:1px;background:var(--line-d)}
.gs{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:1px;background:inherit;min-width:0;scroll-margin-top:12px;
}

.gs__l{
    --gs-cr:clamp(14px,1.5vw,22px);
    --gs-w:clamp(190px,17vw,272px);
    position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(14px,1.6vw,20px);background:var(--coal);
    padding:clamp(44px,4.6vw,76px) clamp(24px,2.6vw,44px);
}
.gs__id{
    position:absolute;z-index:1;top:calc(var(--gs-cr) - 1px);left:calc(var(--gs-cr) + 22px);
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
}
.gs__id b{font-weight:500;color:var(--orange)}
/* segni di taglio: a riposo grigi, sullo schermo sotto il
   mouse arancio e 4px piu' fuori — transform, non posizione */
.gs__cr{position:absolute;inset:var(--gs-cr);pointer-events:none}
.gs__cr i{position:absolute;width:12px;height:12px;border:0 solid rgba(244,242,238,.34);transition:transform .55s var(--ease),border-color .55s var(--ease)}
.gs__cr i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.gs__cr i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.gs__cr i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.gs__cr i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.gs__l:hover .gs__cr i,.gs__l:focus-within .gs__cr i{border-color:var(--orange)}
.gs__l:hover .gs__cr i:nth-child(1),.gs__l:focus-within .gs__cr i:nth-child(1){transform:translate(-4px,-4px)}
.gs__l:hover .gs__cr i:nth-child(2),.gs__l:focus-within .gs__cr i:nth-child(2){transform:translate(4px,-4px)}
.gs__l:hover .gs__cr i:nth-child(3),.gs__l:focus-within .gs__cr i:nth-child(3){transform:translate(-4px,4px)}
.gs__l:hover .gs__cr i:nth-child(4),.gs__l:focus-within .gs__cr i:nth-child(4){transform:translate(4px,4px)}

/* lo schermo. E' un <a> al file, non un bottone: senza JS il
   tocco apre l'immagine nel browser, che e' gia' un
   ingrandimento onesto. Con JS lo script gli cambia l'etichetta
   e apre la lente. */
.gs__sh{position:relative;display:block;width:min(100%,var(--gs-w));border:1px solid var(--line-d);background:var(--coal-2);overflow:hidden}
.gs__sh img{display:block;width:100%;height:auto}
.gs__sh:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* la riga della scansione: la fa correre lo script, a riposo non c'e' */
.gs__sc{position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);opacity:0;pointer-events:none}
.gs__zi{
    position:absolute;left:0;right:0;bottom:0;padding:9px 12px;text-align:center;
    background:rgba(15,15,17,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);
    transform:translateY(100%);transition:transform .45s var(--ease);
}
.gs__sh:hover .gs__zi,.gs__sh:focus-visible .gs__zi{transform:none}
.gs__cap{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);opacity:.62;text-align:center;max-width:32ch}

/* schermata di PC (orizzontale, guide del pannello): la lastra
   prende piu' di meta' riga e lo schermo la riempie. A 272px
   un 1920x944 non si leggeva nemmeno per capire dove cliccare.
   Sotto i 900px (colonna sola) resta a tutta larghezza: la
   regola ha specificita' maggiore di quella del media query. */
.gs--wide{grid-template-columns:minmax(0,8fr) minmax(0,5fr)}
.gs--wide .gs__l{--gs-w:100%}
.gs--wide .gs__cap{max-width:60ch}

/* il corpo: centrato in altezza, perche' accanto c'e' uno
   schermo di telefono alto il doppio del testo che lo spiega */
.gs__b{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(34px,3.6vw,64px) var(--pad)}
.gs__n{
    display:block;font-size:clamp(44px,5vw,78px);line-height:.82;letter-spacing:-.06em;
    font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;
    color:var(--on-dark-2);margin-bottom:clamp(14px,1.6vw,22px);
}
/* il numerone sui due passi steel: --on-dark-2 li' starebbe a
   3,8:1 — sopra la soglia del display type (3:1) ma sotto quella
   del testo. --on-dark a .7 da' 5,0:1 sullo steel. Sull'arancio
   pieno --on-orange a .7 da' 3,7:1, ed e' display type per
   davvero (44-78px, wght 800). */
.blk--steel .gs__n{color:var(--on-dark);opacity:.7}
.blk--orange .gs__n{color:var(--on-orange);opacity:.7}
.gs__t{
    font-size:clamp(22px,2.6vw,34px);line-height:1;letter-spacing:-.04em;
    text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;
    margin-bottom:clamp(14px,1.5vw,20px);max-width:19ch;
}
.gs__d{font-size:15px;line-height:1.62;opacity:.84;max-width:56ch}
.blk--orange .gs__d{opacity:.92}
.gs__d b{font-weight:inherit;font-variation-settings:'wdth' 100,'wght' 650}

/* i valori da scrivere: celle contigue che vanno a capo da
   sole. I bordi si sovrappongono di 1px, cosi' fra due celle
   il filetto resta uno solo anche quando la riga si spezza. */
.gs__f{display:flex;flex-wrap:wrap;padding:1px 0 0 1px;margin-top:clamp(20px,2.2vw,30px)}
.gs__f li{
    display:flex;flex-direction:column;gap:5px;margin:-1px 0 0 -1px;padding:10px 14px 9px;
    border:1px solid rgba(244,242,238,.22);
    font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.02em;
}
.gs__f span{text-transform:uppercase;opacity:.62}
.gs__f b{font-weight:500;overflow-wrap:anywhere}
.blk--coal .gs__f b{color:var(--orange)}
.blk--steel .gs__f li{border-color:rgba(244,242,238,.3)}
/* l'etichetta della cella a .62 sta bene su coal-2, ma sullo
   steel scende sotto soglia: a .75 torna a passare — misurato,
   stessa logica delle altre eccezioni per lo steel in questo foglio. */
.blk--steel .gs__f span{opacity:.75}
.blk--orange .gs__f li{border-color:rgba(35,18,4,.3)}
.blk--orange .gs__f span{opacity:.85}

/* ---------------------------------------------------------
   LA LENTE — lo schermo ingrandito. Gli screenshot in pagina
   stanno a 190-272px: si capisce dove toccare, non si leggono
   le scritte del telefono. Qui si leggono. Senza JS questo
   blocco non esiste (hidden) e il link apre il file.
   --------------------------------------------------------- */
html.is-zoom{overflow:hidden}
.gz{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(15,15,17,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gz[hidden]{display:none}
.gz__t{display:flex;align-items:stretch;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line-d)}
.gz__k{align-self:center;padding-left:var(--pad);font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark)}
.gz__k b{font-weight:500;color:var(--orange)}
.gz__n{display:flex;gap:1px;background:var(--line-d)}
.gz__a,.gz__x{
    display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
    font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
    padding:18px clamp(16px,2vw,26px);
    transition:background .35s var(--ease),color .35s var(--ease);
}
.gz__a{background:var(--coal);color:var(--on-dark)}
.gz__a:hover:not([disabled]){background:var(--coal-3);color:var(--orange)}
.gz__a[disabled]{opacity:.35;cursor:default}
.gz__x{background:var(--orange);color:var(--on-orange);font-weight:700}
.gz__x:hover{background:var(--on-orange);color:var(--orange)}
.gz__a:focus-visible,.gz__x:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.gz__b{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.4vw,32px)}
.gz__b img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid var(--line-d)}


/* il valore tecnico nelle celle — un server non si scrive in
   maiuscolo display: resta mono, com'e' scritto nel telefono. */
.cell__v--m{font-family:var(--mono);font-size:clamp(15px,1.4vw,19px);line-height:1.3;text-transform:none;letter-spacing:0;font-variation-settings:normal;overflow-wrap:anywhere}

/* torna alla guida — stesso trattamento di .blart__up */
.gback{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:11px;letter-spacing:.01em;text-transform:uppercase;
    color:currentColor;opacity:.75;padding-bottom:5px;border-bottom:1px solid currentColor;
    transition:opacity .3s var(--ease),color .3s var(--ease); margin-top: clamp(22px, 3vh, 34px);
}
.gback:hover{opacity:1;color:var(--orange)}

/* ---------------------------------------------------------
   RESPONSIVE
   1180: l'indice va sopra e diventa una griglia di tre, ferma.
    900: la lastra va sopra al testo e lo schermo cresce.
    620: l'indice a due colonne, righe piu' corte.
   --------------------------------------------------------- */
@media (max-width:1180px){
    .gd{grid-template-columns:1fr}
    .gd__stk{position:static}
    .gd__lead{max-width:60ch}
    .gd__l{padding-left:0;border-top:0}
    .gd__ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,44px)}
    .gd__tr,.gd__fl{display:none}

}
@media (max-width:900px){
    .gs{grid-template-columns:1fr}
    .gs__b{order:-1}
    /* in colonna sola lo schermo cresce: e' l'immagine di un telefono
       letta su un telefono, e a 230px le scritte non si distinguevano
       nemmeno per capire dove toccare. */
    .gs__l{--gs-w:clamp(240px,70vw,340px);padding:clamp(34px,6vw,52px) var(--pad)}
    .gs__b{padding:clamp(28px,5vw,44px) var(--pad)}
    .gs__t{max-width:22ch}
}
@media (max-width:620px){
    .gd__ol{grid-template-columns:repeat(2,minmax(0,1fr))}
    .gp{grid-template-columns:26px minmax(0,1fr);gap:9px}
    .gp__t{font-size:13.5px}
    .gz__k{font-size:10px}
    .gz__a,.gz__x{padding:15px 14px}
}
/* il dito al posto del mouse: l'etichetta della lente non si
   scopre al passaggio, perche' il passaggio non c'e'. Resta
   ferma in fondo allo schermo, e il tocco apre. */
@media (hover:none){
    .gs__zi{transform:none}
    .gs__sh:active .gs__cr i{border-color:var(--orange)}
    .gp:active .gp__t,.gp:active .gp__n{color:var(--orange)}
}

/* ---------------------------------------------------------
   GUIDE — L'ELENCO DELLE SOTTOGUIDE (guida con sottoguide,
   es. assistenza/guida-moduli/sitecatalog2021/)
   Le guide come passi: una riga per guida, il numerone pieno
   di .gs__n a sinistra e il filetto verticale dell'indice
   (.gd__tr) che lega un numero al successivo. Sotto il mouse
   il filetto e il numero vanno in arancio e il filetto basso
   cresce da sinistra, come .gp sul passo in cui si trova.
   Sezione .sec--coal.
   --------------------------------------------------------- */
.sgx{
    --sgx-nf:clamp(56px,5.4vw,92px);          /* corpo del numerone */
    --sgx-py:clamp(30px,3.2vw,52px);          /* aria sopra e sotto la riga */
    --sgx-kh:29px;                            /* sigla + il suo margine: allinea la descrizione al titolo */
    border-top:1px solid var(--line-d);
}
.sgx__i{position:relative;border-bottom:1px solid var(--line-d)}

/* il percorso: un tratto sopra il numero (non sulla prima riga)
   e uno sotto (non sull'ultima). Sul bordo fra due righe i due
   tratti si toccano e il filetto sembra uno solo. */
.sgx__i::before,.sgx__i::after{
    content:'';position:absolute;z-index:1;left:calc(var(--pad) + 4px);width:1px;
    background:rgba(244,242,238,.2);pointer-events:none;transition:background .45s var(--ease);
}
.sgx__i::before{top:-1px;height:calc(var(--sgx-py) - 12px)}
.sgx__i::after{top:calc(var(--sgx-py) + var(--sgx-nf) * .82 + 16px);bottom:-1px}
.sgx__i:first-child::before,.sgx__i:last-child::after{display:none}
.sgx__i:hover::before,.sgx__i:hover::after,
.sgx__i:focus-within::before,.sgx__i:focus-within::after{background:var(--orange)}

.sgx__r{
    position:relative;display:grid;
    grid-template-columns:calc(var(--sgx-nf) * 1.3) minmax(0,6fr) minmax(0,5fr) auto;
    grid-template-areas:"n h d m";
    column-gap:clamp(24px,3vw,56px);align-items:start;
    padding:var(--sgx-py) var(--pad);
    transition:background .45s var(--ease);
}
.sgx__r::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
    transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.sgx__r:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.sgx__n{
    grid-area:n;display:block;font-size:var(--sgx-nf);line-height:.82;letter-spacing:-.06em;
    font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;
    color:var(--on-dark-2);transition:color .45s var(--ease);
}

.sgx__h{grid-area:h;display:block;min-width:0}
.sgx__hd{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:15px}
.sgx__ic{width:18px;height:18px;flex:0 0 auto;color:var(--orange)}
.sgx__k{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--orange)}
.sgx__t{
    display:block;font-size:clamp(22px,2.3vw,34px);line-height:1;letter-spacing:-.04em;
    text-transform:uppercase;font-variation-settings:'wdth' 108,'wght' 700;
    max-width:20ch;transition:color .35s var(--ease);
}
.sgx__d{grid-area:d;display:block;font-size:15px;line-height:1.62;opacity:.78;max-width:48ch}
.sgx__h:has(.sgx__hd) + .sgx__d{padding-top:var(--sgx-kh)}

/* a destra: dove si e' nell'elenco, quanto e' lunga, e la freccia */
.sgx__m{grid-area:m;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:16px}
.sgx__id{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap}
.sgx__id b{font-weight:500;color:var(--orange)}
.sgx__p{
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
    color:var(--on-dark);padding:6px 9px 5px;border:1px solid rgba(244,242,238,.22);
}
.sgx__go{display:flex;align-items:center;gap:14px;margin-top:auto}
.sgx__gl{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap;transition:color .35s var(--ease)}
.sgx__ar{
    display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;
    border:1px solid rgba(244,242,238,.22);font-size:17px;line-height:1;color:var(--on-dark);
    transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}

.sgx__r:hover,.sgx__r:focus-visible{background:var(--coal-2)}
.sgx__r:hover::after,.sgx__r:focus-visible::after{transform:scaleX(1)}
.sgx__r:hover .sgx__n,.sgx__r:focus-visible .sgx__n,
.sgx__r:hover .sgx__t,.sgx__r:focus-visible .sgx__t,
.sgx__r:hover .sgx__gl,.sgx__r:focus-visible .sgx__gl{color:var(--orange)}
.sgx__r:hover .sgx__ar,.sgx__r:focus-visible .sgx__ar{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
@media (prefers-reduced-motion:no-preference){
    .sgx__ar{transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
    .sgx__r:hover .sgx__ar,.sgx__r:focus-visible .sgx__ar{transform:translateX(4px)}
}

/* 1180: la descrizione va sotto al titolo */
@media (max-width:1180px){
    .sgx__r{grid-template-columns:calc(var(--sgx-nf) * 1.3) minmax(0,1fr) auto;grid-template-areas:"n h m" "n d m"}
    .sgx__h:has(.sgx__hd) + .sgx__d,.sgx__d{padding-top:12px}
    .sgx__t{max-width:26ch}
}
/* 700: numero piu' piccolo, i dati della guida in una riga in fondo */
@media (max-width:700px){
    .sgx{--sgx-nf:clamp(40px,11vw,54px);--sgx-py:clamp(26px,7vw,36px)}
    .sgx__r{grid-template-columns:calc(var(--sgx-nf) * 1.35) minmax(0,1fr);grid-template-areas:"n h" "n d" "n m";column-gap:14px}
    .sgx__d{font-size:14px}
    .sgx__m{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px 12px;padding-top:20px}
    .sgx__go{margin:0 0 0 auto}
    .sgx__gl{display:none}
    .sgx__ar{width:42px;height:42px}
}
@media (hover:none){
    .sgx__r:active{background:var(--coal-2)}
    .sgx__r:active .sgx__n,.sgx__r:active .sgx__t{color:var(--orange)}
    .sgx__r:active .sgx__ar{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
    .sgx__i:active::before,.sgx__i:active::after{background:var(--orange)}
}

/* =========================================================
   GUIDE — I COMPONENTI EPS (assistenza/guida-moduli/)
   Due livelli: /01 il componente in elenco (.cmx), /02 il dittico
   componente + mappa del pannello (.cm, .mp) e le sue guide (.gq, .gg).
   Il resto sono le classi di sempre. Il JS della mappa sta in coda a main.js.
   CONTRASTO (§11.2), misurato il 2026-09-28: il piu' basso e' 4,60:1
   (codice --orange-ink su bone). MOVIMENTO: niente opacity:0 in attesa
   del JS; frecce, filetti e binario in transform.
   ========================================================= */

/* ---------------------------------------------------------
   /01 — IL COMPONENTE IN ELENCO
   La gabbia di .cell (etichetta, nome, testo, piede tenuto giu'
   da margin-top:auto). La cella con le guide e' un link al suo
   dittico e al passaggio del mouse fa quello che fa la cella di
   un'area in home (.area): passa al coal, il filetto arancio da
   4px entra da sinistra in cima e la freccia del piede scorre.
   (Il detector segnala side-tab su questa pagina: e' .area::after
   di home.css, che la config ignora pagina per pagina e non qui
   — ARCHITECTURE.md §12, punto 7. Non va messo un ignore in piu'.)
   Quella senza guide non e' un link,
   e lo dice il piede tratteggiato, come la riga .gr--soon di
   assistenza. La quarta, arancio, porta all'assistenza.
   --------------------------------------------------------- */
.cmx{min-height:clamp(240px,20vw,300px);transition:background-color .5s var(--ease),color .5s var(--ease)}
.cmx .cell__v{max-width:14ch}
.cmx__n{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:auto;padding-top:24px;
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;
  transition:color .35s var(--ease);
}
.cmx__n b{font-weight:500}
.cmx__n i{font-style:normal;transition:transform .45s var(--ease)}
a.cmx::after{
  content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-2);
}
a.cmx:hover,a.cmx:focus-visible{background:var(--coal-2);color:var(--on-dark)}
a.cmx:hover::after,a.cmx:focus-visible::after{transform:none}
a.cmx:hover .cell__k,a.cmx:focus-visible .cell__k{color:var(--orange);opacity:1}
a.cmx:hover .cmx__n,a.cmx:focus-visible .cmx__n{color:var(--orange)}
a.cmx:hover .cmx__n i,a.cmx:focus-visible .cmx__n i{transform:translateX(7px)}
a.cmx:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* il testo della cella arancio: .cell__d e' a .78, che su
   --on-orange pieno (6,2:1) scende sotto AA. A .92 si legge,
   come .gs__d sull'arancio della guida Android. */
.cmx.blk--orange .cell__d{opacity:.92}
/* senza guide: il nome resta pieno (e' il nome del componente,
   non un testo spento); il codice perde l'arancio e il piede e'
   tratteggiato, come .gr--soon. --on-light-2 sul --bone 5,65:1. */
.cmx--soon .cell__k,.cmx--soon .cmx__n{color:var(--on-light-2)}
.cmx--soon .cmx__n span{border-bottom:1px dashed currentColor;padding-bottom:3px}

/* ---------------------------------------------------------
   /02 — IL COMPONENTE E LE SUE GUIDE
   Un dittico di celle contigue, come il passo della guida
   Android (.gs): a sinistra il componente, fermo mentre si
   scorrono le guide; a destra le guide. 5 a 7: e' la colonna
   delle guide quella da leggere, e il percorso sotto ogni
   titolo vuole spazio in orizzontale.
   --------------------------------------------------------- */
.cm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1px;background:var(--line-d)}
.cm + .cm{border-top:1px solid var(--line-d)}
.cm__l{container-type:inline-size;padding:clamp(34px,3.6vw,60px) var(--pad)}
.cm__stk{position:sticky;top:calc(var(--hdr) + 28px)}
.cm__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:22px}
.cm__k b{font-weight:500;color:var(--orange)}
.cm__t{
  font-size:clamp(34px,4.2vw,64px);line-height:.88;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:'wdth' 112,'wght' 800;
  margin-bottom:clamp(16px,1.8vw,24px);
}
.cm__d{font-size:15px;line-height:1.62;color:var(--on-dark);opacity:.84;max-width:46ch}
.cm__d b{font-weight:inherit;font-variation-settings:'wdth' 100,'wght' 650}
.cm__d a{display:inline-block;margin-top:10px;color:inherit;text-decoration:underline 2px var(--orange);text-underline-offset:.2em}
.cm__r{background:var(--coal);padding:clamp(14px,1.6vw,26px) var(--pad) clamp(34px,3.6vw,60px);min-width:0}

/* ---------------------------------------------------------
   LA MAPPA DEL PANNELLO
   I livelli in cui si scende dentro «Gestione Catalogo», dal
   menu fino alla scheda del prodotto, e su ogni punto il codice
   della guida che ci lavora. E' una tavola, come quelle delle
   aree: celle contigue e un binario, niente immagini. E come le
   tavole e' aria-hidden: quello che dice lo dice gia' a parole
   il testo sopra, e ogni riga di guida ha il suo percorso.
   Quando si passa su una guida (mouse o fuoco: lo stato lo
   scrive lo script in coda, e gira anche con meno movimento) si
   accendono i punti per cui la guida passa (.is-p, filetto
   arancio sotto), quello in cui lavora (.is-t, la cella intera)
   e il binario fino a li'. Ogni livello parte 70ms dopo quello
   sopra, cosi' la strada scende invece di accendersi tutta
   insieme; si spegne tutta insieme, senza ritardi.
   --------------------------------------------------------- */
.mp{
  --mp-g:16px;    /* distanza fra due livelli */
  --mp-in:26px;   /* rientro dei livelli: il binario sta in questo margine */
  --mp-y:8px;     /* centro del punto = meta' della riga dell'etichetta */
  container-type:inline-size;
  margin-top:clamp(26px,2.6vw,36px);border:1px solid var(--line-d);background:var(--coal);
  padding:0 clamp(14px,1.6vw,22px) clamp(18px,1.8vw,24px);
}
.mp__h{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0 11px;margin-bottom:18px;border-bottom:1px solid var(--line-d);
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
}
.mp__s{color:var(--on-dark);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s var(--ease)}
.mp.is-on .mp__s{color:var(--orange)}

.mp__lv{position:relative;padding-left:var(--mp-in);--mp-t:0s}
/* i ritardi solo col movimento: la regola di meno movimento di
   base.css azzera le durate delle transizioni ma non i ritardi,
   e la mappa si accendeva di colpo ma 70-210ms dopo */
@media (prefers-reduced-motion:no-preference){
  .mp__lv:nth-of-type(2){--mp-t:.07s}
  .mp__lv:nth-of-type(3){--mp-t:.14s}
  .mp__lv:nth-of-type(4){--mp-t:.21s}
}
.mp__lv + .mp__lv{margin-top:var(--mp-g)}
/* il binario: la traccia e, sopra, il tratto arancio che scende
   dal punto di questo livello a quello del livello dopo */
.mp__lv::before,.mp__lv::after{
  content:'';position:absolute;left:3px;top:var(--mp-y);width:1px;height:calc(100% + var(--mp-g));
}
.mp__lv::before{background:rgba(244,242,238,.2)}
.mp__lv::after{background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.mp__lv:last-child::before,.mp__lv:last-child::after{content:none}
.mp__lv.is-go::after{transform:none;transition-delay:var(--mp-t)}

.mp__lk{
  position:relative;display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
  transition:color .3s var(--ease);
}
/* il punto sul binario, a filo del bordo sinistro del livello */
.mp__lk::before{
  content:'';position:absolute;left:calc(-1 * var(--mp-in));top:calc(var(--mp-y) - 3.5px);
  box-sizing:border-box;width:8px;height:8px;background:var(--coal);border:1px solid rgba(244,242,238,.5);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.mp__lv.is-on .mp__lk{color:var(--on-dark);transition-delay:var(--mp-t)}
.mp__lv.is-on .mp__lk::before{background:var(--orange);border-color:var(--orange);transition-delay:var(--mp-t)}

/* i punti del livello: celle contigue, il filetto e' il gap */
.mp__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.mp__n{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;
  padding:10px 12px 11px;background:var(--coal-2);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.mp__n b{font-size:13.5px;line-height:1.2;font-weight:inherit;font-variation-settings:'wdth' 100,'wght' 600;overflow-wrap:break-word}
.mp__c{font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.02em;color:var(--orange);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s var(--ease)}
.mp__n::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.mp__lv.is-on .mp__n.is-p::after{transform:none;transition-delay:var(--mp-t)}
/* il punto in cui la guida lavora: la cella arancio. Testo
   --on-orange pieno (6,2:1), il codice a .85 (4,8:1), come la
   copia accesa dell'indice delle aree (.sis__lit). */
.mp__lv.is-on .mp__n.is-t{background:var(--orange);color:var(--on-orange);transition-delay:var(--mp-t)}
.mp__lv.is-on .mp__n.is-t .mp__c{color:var(--on-orange);opacity:.85;transition-delay:var(--mp-t)}

/* la mappa stretta (sotto i 340px di tavola, cioe' il telefono):
   i tre punti della scheda prodotto stanno in 84px l'uno */
@container (max-width:340px){
  .mp__n{padding:9px 8px 10px}
  .mp__n b{font-size:12.5px}
}

/* ---------------------------------------------------------
   LE GUIDE DEL COMPONENTE
   A gruppi, nell'ordine in cui le si usa: prima la struttura
   del catalogo, poi il prodotto. Dentro, la stessa riga di dati
   di .gr in assistenza, piu' ricca: sotto il titolo c'e' il
   PERCORSO — le voci del pannello da toccare, prese dalle
   didascalie della guida — che spesso basta da solo a
   ricordarsi dove si mette mano.
   Colonne fisse per codice e freccia: la decodifica del codice
   (ScrambleText) non deve spostare il titolo.
   --------------------------------------------------------- */
.gq + .gq{margin-top:clamp(14px,1.6vw,24px)}
/* h4: il reset di base.css azzera i margini solo fino a h3 */
.gq__h{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;
  padding:clamp(16px,1.8vw,24px) 0 12px;border-bottom:1px solid var(--line-d);
  font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
}
.gq__h b{font-weight:500;color:var(--on-dark)}

.gg{
  position:relative;display:grid;
  grid-template-columns:52px minmax(0,1fr) auto 16px;
  column-gap:clamp(14px,1.6vw,24px);align-items:baseline;
  padding:clamp(18px,1.7vw,24px) 0 clamp(19px,1.8vw,25px);
  border-bottom:1px solid var(--line-d);color:var(--on-dark);
}
/* la guida sotto il mouse: filetto arancio da 2px che cresce da
   sinistra sul bordo basso, come il passo corrente della guida
   Android (.gp) — transform, non width */
.gg::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.gg__k{grid-column:1;grid-row:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);font-variant-numeric:tabular-nums;white-space:nowrap}
.gg__t{
  grid-column:2;grid-row:1;
  font-size:clamp(17px,1.35vw,20px);line-height:1.3;letter-spacing:-.01em;
  font-variation-settings:'wdth' 104,'wght' 600;transition:color .35s var(--ease);
}
.gg__p{
  grid-column:2 / 4;grid-row:2;margin-top:9px;
  font-family:var(--mono);font-size:11px;line-height:1.8;letter-spacing:.01em;color:var(--on-dark-2);
  transition:color .35s var(--ease);
}
.gg__p span{white-space:nowrap}
.gg__p i{font-style:normal;color:var(--orange)}
.gg__s{grid-column:3;grid-row:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);white-space:nowrap;font-variant-numeric:tabular-nums}
/* l'uscita dal sito: freccia in diagonale disegnata qui, tratto
   su currentColor come la cornetta del footer */
.gg__a{grid-column:4;grid-row:1;align-self:center;width:16px;height:16px;color:var(--on-dark-2);transition:transform .45s var(--ease),color .35s var(--ease)}

.gg:hover .gg__t,.gg:focus-visible .gg__t{color:var(--orange)}
.gg:hover .gg__p,.gg:focus-visible .gg__p{color:var(--on-dark)}
.gg:hover .gg__a,.gg:focus-visible .gg__a{color:var(--orange);transform:translate(3px,-3px)}
.gg:hover::after,.gg:focus-visible::after{transform:none}
.gg:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* sul telefono il :hover non scatta, o resta attaccato: la
   pressione ha il suo stato, che e' lo stesso (§16.2) */
@media (hover:none){
  .gg:active .gg__t{color:var(--orange)}
  .gg:active .gg__p{color:var(--on-dark)}
  .gg:active .gg__a{color:var(--orange);transform:translate(3px,-3px)}
  .gg:active::after{transform:none}
  a.cmx:active{background:var(--coal-2);color:var(--on-dark)}
  a.cmx:active::after{transform:none}
  a.cmx:active .cell__k,a.cmx:active .cmx__n{color:var(--orange);opacity:1}
  a.cmx:active .cmx__n i{transform:translateX(7px)}
}

/* ---------------------------------------------------------
   RESPONSIVE
   1180: il dittico va in colonna; il componente sta sopra, e
         se la sua cella e' abbastanza larga (container query)
         testo e mappa si mettono affiancati.
    620: nella riga di guida i passi scendono sotto il
         percorso, e il titolo si prende la colonna.
   --------------------------------------------------------- */
@media (max-width:1180px){
  .cm{grid-template-columns:1fr}
  .cm__stk{position:static}
  @container (min-width:720px){
    /* tre righe auto per codice, titolo e testo, e una quarta che
       si prende l'avanzo dell'altezza della mappa: con tre righe
       sole la mappa le allungava tutte e tre, e il titolo finiva
       a meta' altezza (misurato a 1024) */
    .cm__stk{
      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto auto 1fr;
      column-gap:clamp(28px,4cqi,56px);align-items:start;
    }
    .cm__stk > .mp{grid-column:2;grid-row:1 / -1;margin-top:0}
  }
}
@media (max-width:620px){
  /* in colonna singola non c'e' piu' una riga di quattro da
     pareggiare: l'altezza minima lasciava un vuoto fra il testo e
     il piede (stessa correzione di .altra in componenti.css) */
  .cmx{min-height:0}
  .gg{grid-template-columns:40px minmax(0,1fr) 16px}
  .gg__a{grid-column:3}
  .gg__p{grid-column:2}
  .gg__s{grid-column:2;grid-row:3;margin-top:6px}
}