/* ═══════════════════════════════════════════════════════════════════════
   LA NUOVA VESTE DELLA DASHBOARD
   ═══════════════════════════════════════════════════════════════════════

   COS'È. Una cornice nuova attorno alle sezioni che già esistono: una
   colonna a sinistra che le nomina e le mostra UNA ALLA VOLTA, invece di
   impilarle tutte in una pagina da 3.000 pixel. Le sezioni sono le stesse
   (stesso DOM, stessi id, stesse funzioni di disegno): la veste le sposta
   dentro le sue pagine, non le riscrive. È il motivo per cui questo giro
   non può rompere le logiche: non le tocca.

   QUANDO SI ACCENDE. Solo con `body.veste-on`, che il JS mette soltanto
   all'account admin e solo se non l'ha spenta a mano. Senza quella classe
   ogni regola qui dentro è inerte: nessun selettore parte da solo.

   COLORE. Nessun colore nuovo: solo i token di :root e color-mix ancorato
   a essi, quindi il tema scuro viene da sè e non servono override in
   doppia forma (REGOLA CSS-2 non si applica dove non c'è un override).

   SPAZIO. Una scala dichiarata, sette passi da 4. La densità compatta è
   la stessa pagina con la scala ristretta, non un secondo foglio.
   ═══════════════════════════════════════════════════════════════════════ */

body.veste-on {
  --vs1: 4px; --vs2: 8px; --vs3: 12px; --vs4: 16px; --vs5: 20px; --vs6: 24px; --vs7: 32px;
  /* la rampa a una tinta sola per i punteggi: luminanza che scende in modo
     monotono, verificata (0.70 -> 0.46 -> 0.28 -> 0.14). Una misura, una
     tinta: non ci sono coppie da distinguere, quindi niente può collassare */
  --v-sc1: color-mix(in srgb, var(--success) 26%, var(--surface));
  --v-sc2: color-mix(in srgb, var(--success) 52%, var(--surface));
  --v-sc3: color-mix(in srgb, var(--success) 78%, var(--surface));
  --v-sc4: var(--success);
  --v-pista: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
body.veste-on[data-densita="compatta"] {
  --vs2: 6px; --vs3: 9px; --vs4: 12px; --vs5: 14px; --vs6: 16px; --vs7: 22px;
}

/* la vecchia barra a schede e le pieghe non servono più: la colonna fa
   quel lavoro, e due sistemi di navigazione insieme sono la ragione per cui
   nessuno trovava le funzioni */
body.veste-on #dashNav { display: none; }
/* E la barra in fondo del telefono, che il prodotto accende da JS
   (`mbn.hidden = false`). Con la veste accesa se ne vedevano DUE, una sopra
   l'altra: la sua da 56px e quella della veste da 80. Su uno schermo da 844px
   sono 136px di navigazione, cioe' un sesto della pagina, per dire due volte
   le stesse cose. Misurato il 19/08 a 390px. */
body.veste-on #mobileBottomNav { display: none !important; }
/* E la bolla generica dell'aiuto. Il prodotto ne ha una con quattro argomenti
   uguali in ogni schermata; la veste ne ha una che sa in che sezione sei. Due
   bolle nello stesso angolo sarebbero due, e nessuna delle due sarebbe quella
   giusta. */
body.veste-on #floatingHelpBtn { display: none !important; }

/* L'intestazione vecchia ("Ciao Riccardo / Il tuo sito è aggiornato") dice la
   stessa cosa del verdetto e del nome in fondo alla colonna: tre volte lo
   stesso saluto. Nella veste resta uno solo. */
body.veste-on #dashboardPanel .dashboard-head { display: none; }

/* ─────────── LA CORNICE ─────────── */
body.veste-on .veste { display: flex; align-items: flex-start; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; min-height: 620px; }
body.veste-on .veste-rail { width: 250px; flex: 0 0 250px; background: var(--cream-soft);
  border-right: 1px solid var(--border); padding: var(--vs4) var(--vs3);
  display: flex; flex-direction: column; gap: var(--vs3); align-self: stretch; }
body.veste-on .veste-main { flex: 1; min-width: 0; background: var(--cream);
  display: flex; flex-direction: column; align-self: stretch; }

/* ─────────── LA COLONNA ─────────── */
.veste-marchio { display: flex; align-items: center; gap: var(--vs2); padding: 0 6px; }
.veste-marchio svg { width: 22px; height: 22px; flex: 0 0 22px; }
.veste-marchio b { font-family: var(--font-head); font-size: 16px; font-weight: 900;
  letter-spacing: -.01em; white-space: nowrap; }

.veste-gruppo { display: flex; flex-direction: column; gap: 1px; }
.veste-gruppo + .veste-gruppo { border-top: 1px solid var(--border); padding-top: var(--vs2); }
.veste-gruppo-nome { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); padding: 7px 8px 4px; }

.veste-voce { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border-radius: 8px; border: none; border-left: 2px solid transparent;
  background: none; font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); text-align: left; cursor: pointer; min-height: 36px;
  transition: background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease); }
.veste-voce svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .75;
  transition: opacity .14s var(--ease), color .14s var(--ease); }
.veste-voce:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.veste-voce:hover svg { opacity: 1; }
.veste-voce.attiva { background: var(--surface); color: var(--ink); font-weight: 700;
  border-left-color: var(--terracotta); box-shadow: var(--shadow-sm); }
.veste-voce.attiva svg { opacity: 1; color: var(--terracotta); }
.veste-voce .conta { margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--cream-deep); color: var(--ink-soft); border-radius: 99px; padding: 1px 7px;
  font-variant-numeric: tabular-nums; }

.veste-fondo { margin-top: auto; border-top: 1px solid var(--border); padding-top: var(--vs3);
  display: flex; align-items: center; gap: 9px; width: 100%; background: none; border-left: none;
  border-right: none; border-bottom: none; cursor: pointer; font-family: var(--font-body);
  text-align: left; min-height: 48px; border-radius: 8px;
  transition: background .14s var(--ease); }
.veste-fondo:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.veste-avat { width: 28px; height: 28px; border-radius: 99px; background: var(--terracotta);
  color: var(--on-terracotta, #fff); font-size: 12px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex: 0 0 28px; }
.veste-chi { font-size: 13px; font-weight: 600; line-height: 1.2; display: block;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veste-piano { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }

/* ─────────── IL SELETTORE COME AMBITO ───────────
   Scegliere un sito non apre una pagina: restringe le funzioni a quel sito.
   È un filtro, non una modalità. */
.veste-sel { position: relative; width: 100%; }
.veste-chip { display: flex; align-items: center; gap: var(--vs2); width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; min-height: 44px;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.veste-chip:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--border));
  box-shadow: var(--shadow-sm); }
.veste-chip .pallino { width: 7px; height: 7px; border-radius: 99px; background: var(--success);
  flex: 0 0 7px; }
.veste-chip .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; }
.veste-chip .freccia { color: var(--ink-muted); font-size: 10px; }
.veste-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; gap: 1px;
  max-height: 320px; overflow-y: auto; }
.veste-menu[hidden] { display: none !important; }
.veste-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px;
  border-radius: 8px; border: none; background: none; font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-align: left;
  min-height: 44px; transition: background .14s var(--ease); }
.veste-menu button:hover { background: var(--cream-soft); }
.veste-menu button.attiva { background: var(--cream-deep); color: var(--ink); font-weight: 700; }
.veste-menu .spunta { width: 14px; height: 14px; flex: 0 0 14px; opacity: 0; }
.veste-menu button.attiva .spunta { opacity: 1; color: var(--terracotta); }
/* IL DOMINIO LUNGO NON DEVE SPINGERE FUORI IL PUNTEGGIO.
   `nutritionlongevityfestival.com` usciva dal riquadro e si portava via il
   numero: un elemento flex non si restringe sotto il suo contenuto se non
   glielo si dice (`min-width: 0`), e senza `overflow` non c'è nessun punto
   in cui tagliare. Il punteggio non si restringe mai: è il motivo per cui
   quella riga ha un numero accanto. */
.veste-menu button > .nome { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.veste-menu .p { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 700;
  color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ─────────── LA BARRA IN ALTO ─────────── */
.veste-barra { display: flex; align-items: center; gap: var(--vs3); padding: var(--vs3) var(--vs6);
  border-bottom: 1px solid var(--border); background: var(--surface); min-height: 58px;
  position: sticky; top: 0; z-index: 12; }
.veste-titolo { font-family: var(--font-head); font-size: 16px; font-weight: 700;
  font-variation-settings: "opsz" 18; margin: 0; white-space: nowrap; }
.veste-barra-destra { margin-left: auto; display: flex; align-items: center; gap: var(--vs2); }

.veste-ambito { display: none; align-items: center; gap: 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--terracotta) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--terracotta) 32%, var(--border));
  padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  min-height: 34px; white-space: nowrap; }
body.veste-on[data-ambito]:not([data-ambito=""]) .veste-ambito { display: inline-flex; }
.veste-ambito .x { width: 24px; height: 24px; border-radius: 99px; border: none; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: 15px; line-height: 1;
  transition: background .14s var(--ease), color .14s var(--ease); }
.veste-ambito .x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }

.veste-densita { display: inline-flex; background: var(--cream-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; gap: 2px; }
.veste-densita button { border: none; background: none; border-radius: 6px; padding: 0 9px;
  min-height: 30px; cursor: pointer; font-family: var(--font-body); font-size: 11.5px;
  font-weight: 600; color: var(--ink-muted); white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease); }
.veste-densita button:hover { color: var(--ink); }
.veste-densita button.attiva { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.veste-k { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-soft);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 12px;
  font-weight: 600; color: var(--ink-muted); cursor: pointer; font-family: var(--font-body);
  min-height: 34px; transition: border-color .14s var(--ease), color .14s var(--ease); }
.veste-k:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--border)); color: var(--ink); }
.veste-k kbd { font-family: var(--font-body); font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
  color: var(--ink-soft); }

/* ─────────── LE PAGINE ─────────── */
.veste-corpo { padding: var(--vs5) var(--vs6); display: flex; flex-direction: column;
  gap: var(--vs4); flex: 1; min-height: 0; max-width: 1120px; width: 100%; margin: 0 auto; }
/* OBBLIGATORIO: senza, `flex:1` lascia restringere i blocchi sotto la loro
   altezza e overflow:hidden taglia il contenuto in silenzio. Chi scorre è
   la pagina, non chi sta dentro. */
.veste-corpo > * { flex-shrink: 0; }
.veste-pagina[hidden] { display: none !important; }
/* `hidden` perde contro `display:flex`: senza queste righe il grafico e il
   selettore restano a schermo anche quando il codice li nasconde. È la
   trappola che il progetto ha già pagato (README, Fase 2.5.5). */
.veste-gr[hidden] { display: none !important; }
.veste-sel[hidden] { display: none !important; }
.veste-sotto[hidden] { display: none !important; }
.veste-ambito[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .veste-pagina:not([hidden]) { animation: vesteEntra .16s var(--ease) both; }
  @keyframes vesteEntra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

/* Sugli schermi larghi il contenuto NON si allarga: resta al tetto di 1120px
   e si centra. Misurato a 2400px senza tetto, fra il titolo di una riga e il
   suo comando c'erano 1571px, cioè un metro e mezzo di monitor fra la cosa e
   il bottone.

   Qui c'era una seconda colonna da 360px sopra i 1600px, e va detto perché è
   sbagliata invece di toglierla in silenzio: riempiva quella colonna solo con
   `[data-colonna="destra"]`, un attributo che in `index.html` non compare
   NEMMENO UNA VOLTA. Quindi la colonna era vuota su ogni pagina per
   costruzione, e la prima si restringeva a 452px su una finestra da 1920.
   Una regola che dispone elementi che nessuno produce non è una regola a
   metà: è spazio morto che sposta tutto il resto. */

/* ─────────── IL VERDETTO ─────────── */
.veste-verdetto { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--vs5) var(--vs6); display: flex; align-items: center;
  gap: var(--vs7); }
.veste-punteggio { padding: var(--vs4) var(--vs5); border-radius: var(--r); background: var(--v-sc1);
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 2px; }
.veste-verdetto[data-banda="2"] .veste-punteggio { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.veste-verdetto[data-banda="3"] .veste-punteggio { background: color-mix(in srgb, var(--success) 20%, var(--surface)); }
.veste-verdetto[data-banda="4"] .veste-punteggio { background: color-mix(in srgb, var(--success) 26%, var(--surface)); }
.veste-punteggio .su { display: flex; align-items: baseline; gap: 5px; }
.veste-punteggio b { font-family: var(--font-head); font-size: 68px; font-weight: 900;
  line-height: .9; letter-spacing: -.03em; font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums; color: var(--ink); }
/* `--ink-muted` andava bene sul bianco e NON sul campo tinto: in tema scuro
   il fondo si schiarisce e il "/100" scendeva a 3.75 */
.veste-punteggio i { font-style: normal; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.veste-verdetto-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid var(--border); padding-left: var(--vs6); }
.veste-verdetto-testo h3 { font-family: var(--font-head); font-size: 24px; font-weight: 700;
  font-variation-settings: "opsz" 40; line-height: 1.2; margin: 0; }
.veste-verdetto-testo p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

.veste-meter { height: 6px; border-radius: 99px; background: var(--v-pista); overflow: hidden;
  width: 104px; }
.veste-meter i { display: block; height: 100%; border-radius: 99px; background: var(--v-sc3);
  transition: width .5s var(--ease); }
.veste-meter[data-banda="1"] i { background: var(--v-sc1); }
.veste-meter[data-banda="2"] i { background: var(--v-sc2); }
.veste-meter[data-banda="3"] i { background: var(--v-sc3); }
.veste-meter[data-banda="4"] i { background: var(--v-sc4); }

/* ─────────── IL GRAFICO INTERATTIVO ─────────── */
.veste-gr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--vs4) var(--vs5) var(--vs3); display: flex; flex-direction: column; gap: var(--vs3); }
.veste-gr-testa { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.veste-gr-testa h4 { font-family: var(--font-head); font-size: 16.5px; font-weight: 700;
  font-variation-settings: "opsz" 18; margin: 0; }
.veste-gr-testa .sotto { font-size: 12.5px; color: var(--ink-muted); }
.veste-gr-testa .delta { margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--success-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.veste-gr-tela { position: relative; }
.veste-gr svg { display: block; width: 100%; height: auto; }
.veste-gr .punto { cursor: pointer; transition: r .14s var(--ease); }
.veste-gr .punto:hover, .veste-gr .punto.mirato { r: 6.5; }
.veste-gr .mirino { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.veste-gr .mirino.viva { opacity: 1; }
.veste-fumetto { position: absolute; pointer-events: none; background: var(--ink); color: var(--cream);
  border-radius: 9px; padding: 7px 11px; font-size: 12.5px; line-height: 1.35; white-space: nowrap;
  box-shadow: var(--shadow); transform: translate(-50%, -100%); opacity: 0;
  transition: opacity .12s var(--ease); z-index: 3; }
.veste-fumetto.viva { opacity: 1; }
.veste-fumetto b { font-variant-numeric: tabular-nums; }
.veste-gr-valori { display: none; gap: var(--vs4); flex-wrap: wrap; font-size: 12.5px;
  color: var(--ink-muted); }
.veste-gr-valori b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─────────── LA PALETTE ─────────── */
.veste-palette { position: fixed; inset: 0; z-index: 3000; display: none;
  background: color-mix(in srgb, var(--ink) 44%, transparent);
  justify-content: center; align-items: flex-start; padding-top: 10vh; }
body.veste-palette-aperta .veste-palette { display: flex; }
.veste-pal-box { width: min(560px, 92%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  overflow: hidden; max-height: 74vh; }
.veste-pal-cerca { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); }
.veste-pal-cerca svg { width: 17px; height: 17px; color: var(--ink-muted); flex: 0 0 17px; }
.veste-pal-cerca input { flex: 1; border: none; outline: none; background: none;
  font-family: var(--font-body); font-size: 16px; color: var(--ink); min-width: 0; }
.veste-pal-lista { overflow-y: auto; padding: 6px; }
.veste-pal-gruppo { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); padding: 10px 12px 5px; }
.veste-pal-voce { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
  border-radius: 9px; border: none; background: none; font-family: var(--font-body); font-size: 14px;
  color: var(--ink); cursor: pointer; text-align: left; min-height: 44px;
  transition: background .12s var(--ease); }
.veste-pal-voce svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--ink-muted); }
.veste-pal-voce .dove { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.veste-pal-voce:hover, .veste-pal-voce.mirata { background: var(--cream-deep); }
.veste-pal-voce.mirata svg { color: var(--terracotta); }
.veste-pal-vuoto { padding: 22px 14px; text-align: center; font-size: 13.5px; color: var(--ink-muted); }
.veste-pal-piede { display: flex; align-items: center; gap: 14px; padding: 9px 16px;
  border-top: 1px solid var(--border); background: var(--cream-soft); font-size: 11.5px;
  color: var(--ink-muted); flex-wrap: wrap; }
.veste-pal-piede kbd { font-family: var(--font-body); font-weight: 700; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--ink-soft); }

/* ─────────── L'INTERRUTTORE PER TORNARE INDIETRO ───────────
   Una veste nuova senza il modo di spegnerla è una trappola: se qualcosa
   non va, chi la prova deve poter tornare al prodotto che funziona. */
.veste-spegni { display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 11.5px;
  font-weight: 600; color: var(--ink-muted); cursor: pointer; font-family: var(--font-body);
  min-height: 34px; transition: color .14s var(--ease), border-color .14s var(--ease); }
.veste-spegni:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--border)); }

/* ─────────── TABLET: la colonna diventa icone, con l'estensione ─────────── */
@media (max-width: 1099px) {
  body.veste-on .veste-rail { width: 64px; flex: 0 0 64px; padding: var(--vs3) var(--vs2);
    align-items: center; gap: 9px; }
  body.veste-on .veste-marchio b,
  body.veste-on .veste-chip .nome,
  body.veste-on .veste-chip .freccia,
  body.veste-on .veste-gruppo-nome,
  body.veste-on .veste-voce .eti,
  body.veste-on .veste-voce .conta,
  body.veste-on .veste-fondo .chi-blocco,
  body.veste-on .veste-estendi .eti { display: none; }
  body.veste-on .veste-marchio { justify-content: center; padding: 0; }
  body.veste-on .veste-chip { width: 44px; height: 44px; padding: 8px; justify-content: center; }
  body.veste-on .veste-voce { width: 44px; min-height: 44px; justify-content: center; padding: 9px 0;
    border-left: none; border-radius: 9px; position: relative; gap: 0; }
  body.veste-on .veste-voce svg { width: 17px; height: 17px; }
  body.veste-on .veste-voce.attiva { border-left: none; box-shadow: none; background: var(--cream-deep); }
  body.veste-on .veste-gruppo { align-items: center; width: 100%; }
  body.veste-on .veste-fondo { justify-content: center; }
  body.veste-on .veste-corpo { padding: var(--vs4); }
  body.veste-on .veste-verdetto { padding: var(--vs4) var(--vs5); gap: var(--vs5); }
  body.veste-on .veste-punteggio b { font-size: 54px; }
  body.veste-on .veste-verdetto-testo { padding-left: var(--vs5); }
  body.veste-on .veste-verdetto-testo h3 { font-size: 20px; }
  /* da qui in giù si tocca col dito, iPad compreso: 44px su TUTTO quello
     che si preme. La densità e il tasto dei comandi erano a 30 e 34px:
     misurati, non stimati. Sul telefono spariscono del tutto, perchè col
     dito il compatto non ha senso e la tastiera non c'è. */
  body.veste-on .veste-menu button, body.veste-on .veste-pal-voce { min-height: 44px; }
  body.veste-on .veste-densita button { min-height: 44px; padding: 0 12px; }
  body.veste-on .veste-k { min-height: 44px; }
  body.veste-on .veste-spegni { min-height: 44px; }
  body.veste-on .veste-ambito { min-height: 44px; }
  body.veste-on .veste-ambito .x { width: 30px; height: 30px; }
  /* il disegno si stringe e si porta dietro le sue scritte: a 390px un testo
     da 12 ne rende 4. I valori tornano come testo vero, che non rimpicciolisce */
  body.veste-on .veste-gr svg text { display: none; }
  body.veste-on .veste-gr-valori { display: flex; }
}
.veste-estendi { display: none; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  min-height: 44px; width: 100%; cursor: pointer; color: var(--ink-soft);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  transition: border-color .14s var(--ease); }
.veste-estendi:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--border)); }
.veste-estendi svg { width: 15px; height: 15px; }
@media (max-width: 1099px) { body.veste-on .veste-estendi { display: flex; width: 44px; padding: 0; } }

/* la colonna estesa a mano: rimette i nomi sopra la regola di densità */
@media (max-width: 1099px) {
  body.veste-on.veste-rail-aperta .veste-rail { width: 250px; flex: 0 0 250px;
    padding: var(--vs4) var(--vs3); align-items: stretch; }
  body.veste-on.veste-rail-aperta .veste-marchio b,
  body.veste-on.veste-rail-aperta .veste-chip .nome,
  body.veste-on.veste-rail-aperta .veste-chip .freccia,
  body.veste-on.veste-rail-aperta .veste-gruppo-nome,
  body.veste-on.veste-rail-aperta .veste-voce .eti,
  body.veste-on.veste-rail-aperta .veste-voce .conta,
  body.veste-on.veste-rail-aperta .veste-fondo .chi-blocco,
  body.veste-on.veste-rail-aperta .veste-estendi .eti { display: revert; }
  body.veste-on.veste-rail-aperta .veste-marchio { justify-content: flex-start; padding: 0 6px; }
  body.veste-on.veste-rail-aperta .veste-chip { width: 100%; height: auto; padding: 9px 11px;
    justify-content: flex-start; }
  body.veste-on.veste-rail-aperta .veste-voce { width: 100%; justify-content: flex-start;
    padding: 8px; gap: 9px; border-left: 2px solid transparent; }
  body.veste-on.veste-rail-aperta .veste-voce.attiva { border-left-color: var(--terracotta);
    background: var(--surface); box-shadow: var(--shadow-sm); }
  body.veste-on.veste-rail-aperta .veste-gruppo { align-items: stretch; }
  body.veste-on.veste-rail-aperta .veste-estendi { width: 100%; }
  body.veste-on.veste-rail-aperta .veste-fondo { justify-content: flex-start; }
}

/* ─────────── TELEFONO: niente colonna, barra in basso ─────────── */
@media (max-width: 719px) {
  body.veste-on .veste { flex-direction: column; border-radius: var(--r); min-height: 0; }
  body.veste-on .veste-rail { display: none; }
  body.veste-on .veste-main { width: 100%; }
  body.veste-on .veste-corpo { padding: var(--vs3); gap: var(--vs3); padding-bottom: 76px; }
  body.veste-on .veste-barra { padding: 10px var(--vs3); min-height: 54px; }
  body.veste-on .veste-densita, body.veste-on .veste-k { display: none; }
  /* IL TITOLO DELLA PAGINA, DA TELEFONO, RIPETE LA STRISCIA QUI SOTTO.
     Provate 12 pagine su 12: il testo del titolo è identico, parola per
     parola, alla pastiglia nera della sotto-navigazione che gli sta subito
     sotto. Su uno schermo da 844px una riga di ripetizione costa il 5%, e
     prima di questo giro il primo contenuto vero cominciava a 262px, cioè
     al 31% dell'altezza.
     Sparisce agli occhi, non all'albero: resta un h2 per chi naviga con la
     voce o per tabulazione. Stesse proprietà che app.css usa già per i
     suggerimenti dei lettori di schermo, per non inventare un secondo modo. */
  body.veste-on .veste-titolo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  body.veste-on .veste-verdetto { flex-direction: column; align-items: stretch; gap: var(--vs3);
    padding: var(--vs4); }
  body.veste-on .veste-punteggio { align-self: flex-start; }
  body.veste-on .veste-punteggio b { font-size: 60px; }
  body.veste-on .veste-verdetto-testo { border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: var(--vs3); }
  body.veste-on .veste-verdetto-testo h3 { font-size: 20px; }
  /* LE TABELLE DIVENTANO ELENCHI.
     Cinque colonne in 322px facevano 715px di tabella dentro una finestra che
     scorre di lato: i dati c'erano tutti, ma del cliente si vedeva il nome e
     non il punteggio, che è il criterio con cui la lista è ordinata. E niente
     diceva che si scorre.
     Qui ogni riga diventa un blocco: la prima cella fa da titolo, le altre
     mostrano l'etichetta della loro colonna a sinistra e il valore a destra.
     L'etichetta viene dal <th>, scritta nel DOM da etichettaCelle(). */
  body.veste-on .vs-scorre { overflow-x: visible; }
  body.veste-on .vs-tab, body.veste-on .vs-tab tbody,
  body.veste-on .vs-tab tr, body.veste-on .vs-tab td { display: block; width: auto; }
  body.veste-on .vs-tab thead { display: none; }
  body.veste-on .vs-tab tr { padding: var(--vs3) 0; border-bottom: 1px solid var(--border); }
  body.veste-on .vs-tab tr:last-child { border-bottom: 0; }
  /* `tbody td` e non `td`: la regola base più in basso nel foglio ha la
     STESSA specificità di questa, e a parita' vince chi viene dopo. Con
     `border: 0` scritto qui, il `border-top` della riga 1313 restava e ogni
     cella si portava dietro una linea: i blocchi dal secondo in giù avevano
     una riga fra un dato e l'altro, il primo no. Si vedeva solo a schermo. */
  body.veste-on .vs-tab tbody td { display: flex; align-items: baseline;
    justify-content: space-between; gap: var(--vs3); padding: 3px var(--vs5);
    border: 0; white-space: normal; text-align: left; }
  body.veste-on .vs-tab tbody td::before { content: attr(data-eti); flex: 0 0 auto;
    font-size: 12px; font-weight: 600; color: var(--ink-muted); }
  /* La prima cella è l'identità della riga, non un dato fra gli altri: niente
     etichetta e un filo di peso in più, come farebbe un titolo. */
  body.veste-on .vs-tab tbody td:first-child { display: block; font-weight: 600; padding-bottom: var(--vs2); }
  body.veste-on .vs-tab tbody td:first-child::before { content: none; }
  /* Una cella senza niente dentro non merita una riga con la sua etichetta. */
  body.veste-on .vs-tab tbody td:empty { display: none; }
  /* La striscia delle pastiglie non c'è più: mostrava metà delle pagine e
     l'altra metà stava fuori schermo, dietro uno scorrimento laterale che
     niente annunciava. Adesso tutto sta nel foglio del menu, in colonna.
     Sono 65px di schermo che tornano al contenuto. */
  body.veste-on .veste-sotto { display: none; }
  body.veste-on .veste-fondobarra { display: flex; }
}

/* la sotto-navigazione a pastiglie, solo da telefono: un tocco per la pagina
   principale del gruppo, due per le altre */
.veste-sotto { display: none; gap: 7px; padding: 10px var(--vs3); background: var(--surface);
  border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 54px; z-index: 11; }
.veste-sotto button { flex: 0 0 auto; background: var(--cream-soft); border: 1px solid var(--border);
  border-radius: 99px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  font-family: var(--font-body); min-height: 44px; cursor: pointer; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease); }
.veste-sotto button.attiva { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ─────────── IL FOGLIO DEL MENU, SOLO DA TELEFONO ───────────
   Tutte le pagine in una colonna sola: nessuno scorrimento laterale, niente
   da scoprire. Sale dal basso perché il pollice sta lì, e il vetro dietro
   dice che è una cosa sopra la pagina e non un'altra pagina. */
.veste-foglio { position: fixed; inset: 0; z-index: 2100; display: flex;
  flex-direction: column; justify-content: flex-end; }
.veste-foglio[hidden] { display: none !important; }
.veste-foglio-vetro { position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent); }
.veste-foglio-corpo { position: relative; background: var(--surface);
  border-radius: var(--r) var(--r) 0 0; border-top: 1px solid var(--border);
  max-height: 78vh; display: flex; flex-direction: column;
  animation: vsFoglioSale .22s var(--ease) both; }
@keyframes vsFoglioSale { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .veste-foglio-corpo { animation: none; } }
.veste-foglio-testa { display: flex; align-items: center; justify-content: space-between;
  padding: var(--vs4) var(--vs5) var(--vs3); border-bottom: 1px solid var(--border); }
.veste-foglio-testa b { font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.veste-foglio-x { width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-muted); border-radius: 99px; }
.veste-foglio-x:hover { background: var(--cream-soft); color: var(--ink); }
.veste-foglio-voci { overflow-y: auto; padding: var(--vs3) var(--vs3) var(--vs5);
  -webkit-overflow-scrolling: touch; }
.veste-foglio-gruppo { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); padding: var(--vs4) var(--vs3) var(--vs2); }
.veste-foglio-voci button { display: flex; align-items: center; gap: var(--vs3); width: 100%;
  min-height: 48px; padding: 0 var(--vs3); border: 0; background: none; border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; text-align: left; }
.veste-foglio-voci button svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--ink-muted); }
.veste-foglio-voci button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veste-foglio-voci button:hover { background: var(--cream-soft); }
.veste-foglio-voci button.attiva { background: var(--cream-deep); color: var(--ink); font-weight: 700; }
.veste-foglio-voci button.attiva svg { color: var(--terracotta); }
/* Con il foglio aperto la pagina sotto non si scorre: due scorrimenti
   sovrapposti sono il modo più veloce di perdere il posto dov'eri. */
body.veste-foglio-aperto { overflow: hidden; }

.veste-fondobarra { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px 8px;
  justify-content: space-around; }
.veste-fondobarra button { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink-muted);
  flex: 1; min-height: 48px; border-radius: 9px; padding: 4px 2px; background: none; border: none;
  font-family: var(--font-body); cursor: pointer; position: relative;
  transition: color .14s var(--ease); }
.veste-fondobarra button svg { width: 19px; height: 19px; }
.veste-fondobarra button.attiva { color: var(--terracotta); }

/* ─────────── BERSAGLI DA DITO, DENTRO LA VESTE ───────────
   Le sezioni che la veste ospita vengono dal prodotto e hanno comandi sotto i
   44px: la chiusura di un banner a 32, i bottoni della frequenza a 35, il
   richiamo delle schede guida a 21. Sono preesistenti e li vede anche la
   vecchia dashboard; qui li alzo SOLO dentro `.veste-on`, perchè un rilascio
   riservato a un account non è il posto per cambiare l'interfaccia a tutti.
   Misurati sulla pagina viva a 390px, non stimati. */
@media (max-width: 1099px) {
  body.veste-on .veste .guide-card-cta,
  body.veste-on .veste .scanfreq-btn,
  body.veste-on .veste .gsc-connect-btn,
  body.veste-on .veste .onboarding-banner-close,
  body.veste-on .veste .onboarding-checklist-close,
  body.veste-on .veste .wp-site-switcher-label { min-height: 44px; }
  /* l'etichetta del selettore sito è un <label>: senza display non prende
     l'altezza minima, e resterebbe a 19px */
  body.veste-on .veste .wp-site-switcher-label { display: inline-flex; align-items: center; }
  body.veste-on .veste .guide-card-cta,
  body.veste-on .veste .scanfreq-btn { padding-top: 10px; padding-bottom: 10px; }
  body.veste-on .veste .onboarding-banner-close,
  body.veste-on .veste .onboarding-checklist-close { min-width: 44px; }
  /* i tre BOTTONI del blocco scansione erano a 42, 33 e 42px: sono comandi
     veri, non link dentro una frase, quindi la regola dei 44 li riguarda.
     Misurati sulla pagina viva a 390 e 834px. */
  body.veste-on .veste .dashboard-scan-btn,
  body.veste-on .veste .dashboard-scan-picker-chip,
  body.veste-on .veste .sites-manage-add-btn,
  /* 43,6px: il mio controllo arrotondava a 44 e li dichiarava a norma. Mezzo
     pixel non si vede, ma un controllo che arrotonda verso la soglia non serve
     a niente: adesso stampa un decimale e questi sono saliti. */
  body.veste-on .veste .agency-action-btn,
  body.veste-on .veste .agency-client-add,
  body.veste-on .veste .agency-row-btn { min-height: 44px; min-width: 44px; }
  /* il <select> era a 43,6px: è lui il bersaglio, la sua <label> è testo */
  /* comandi della sezione «Elementi da migliorare», che nella veste finiscono
     su una pagina loro: erano 42.4px e 21.8px, cioè sotto la soglia del dito */
  body.veste-on .veste .improve-ai-btn,
  body.veste-on .veste .improve-open-link { min-height: 44px; }
  body.veste-on .veste .improve-open-link { display: inline-flex; align-items: center; }
  body.veste-on .veste .right-slot-select,
  body.veste-on .veste .an-site-select,
  body.veste-on .veste .agency-cell-vertical,
  body.veste-on .veste .agency-cell-vertical-wrap { min-height: 44px; }
}

/* ─────────── LA STRADA DEL RITORNO ───────────
   L'UNICA regola di questo foglio che NON sta sotto `body.veste-on`, e deve
   essere così: il bottone compare nella vecchia dashboard, cioè proprio quando
   la veste è spenta. Scoparla sotto `.veste-on` la renderebbe invisibile
   esattamente nel caso per cui esiste. */
.veste-rientra {
  align-self: start; margin-left: auto; flex-shrink: 0;
  min-height: 44px; padding: 10px 16px;
  font: 600 13px/1.2 var(--font-body); color: var(--ink-soft);
  background: var(--cream-soft); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
  transition: background var(--ease, .18s ease), border-color var(--ease, .18s ease);
}
.veste-rientra:hover { background: var(--cream-deep); border-color: var(--ink-muted); }
.veste-rientra:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 640px) { .veste-rientra { margin-left: 0; width: 100%; } }

/* ═════════ I BLOCCHI DELLA BARRA COMPLETA (17/08) ═════════ */

/* l'occhiello sotto il titolo: dice cosa si fa in questa pagina */
body.veste-on .veste-occhiello { margin: 0 0 var(--vs4); color: var(--ink-muted);
  font: 400 14px/1.5 var(--font-body); max-width: 64ch; }

/* il contatore accanto alla voce. Non compare mai a zero: lo dice il codice,
   e qui la forma segue quella scelta (nessuno stato "vuoto" da disegnare). */
body.veste-on .veste-conta { margin-left: auto; flex-shrink: 0;
  min-width: 20px; padding: 1px 6px; border-radius: 99px;
  background: var(--cream-deep); color: var(--ink-soft);
  font: 600 11px/1.5 var(--font-body); text-align: center; }
body.veste-on .veste-voce.attiva .veste-conta { background: var(--surface); }

/* il distintivo di piano: è un'etichetta, non un comando, quindi non ha
   nessuno stato di passaggio del mouse */
body.veste-on .veste-piano { margin-left: auto; flex-shrink: 0;
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
  color: var(--ink-muted); font: 700 9px/1.6 var(--font-body); letter-spacing: .04em; }

/* le pagine che sono un'AZIONE */
body.veste-on .veste-azione { display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--vs3); }
body.veste-on .veste-azione-btn { min-height: 44px; padding: 11px 20px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--terracotta); color: var(--cream);
  font: 600 14px/1.2 var(--font-body);
  transition: transform var(--ease, .18s ease), filter var(--ease, .18s ease); }
body.veste-on .veste-azione-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
body.veste-on .veste-azione-btn:disabled { background: var(--cream-deep); color: var(--ink-muted); cursor: not-allowed; }
body.veste-on .veste-azione-nota { margin: 0; color: var(--ink-muted); font: 400 13px/1.5 var(--font-body); }
body.veste-on .veste-azione-nota:empty { display: none; }

/* lo stato vuoto. Esiste perché una schermata senza dati deve DIRE perché,
   non restare bianca: bianco si legge come "rotto". */
body.veste-on .veste-vuoto { padding: var(--vs7) var(--vs6); border-radius: var(--r);
  border: 1px dashed var(--border); background: var(--surface); }
/* lo stato vuoto con l'azione dentro: il bottone sta sotto la frase, non
   accanto, perché la frase spiega e il bottone rimedia */
body.veste-on .veste-vuoto:has(button) { display: flex; flex-direction: column;
  align-items: center; gap: var(--vs4); }
body.veste-on .veste-vuoto p { margin: 0; color: var(--ink-muted);
  font: 400 14px/1.6 var(--font-body); text-align: center; }

/* l'elenco delle pagine analizzate */
body.veste-on .veste-tabella { border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); overflow: hidden; }
body.veste-on .veste-riga { display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 44px 44px;
  align-items: center; gap: var(--vs4); padding: 11px var(--vs5);
  transition: background var(--ease, .18s ease); }
body.veste-on .veste-riga + .veste-riga { border-top: 1px solid var(--border); }
body.veste-on .veste-riga:hover { background: var(--cream-soft); }
body.veste-on .veste-riga-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font: 500 13px/1.4 var(--font-body); }
body.veste-on .veste-riga-barra { height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; }
body.veste-on .veste-riga-barra i { display: block; height: 100%; border-radius: 99px; background: var(--v-sc2); }
body.veste-on .veste-riga-barra[data-banda="1"] i { background: var(--v-sc1); }
body.veste-on .veste-riga-barra[data-banda="3"] i { background: var(--v-sc3); }
body.veste-on .veste-riga-barra[data-banda="4"] i { background: var(--v-sc4); }
body.veste-on .veste-riga-p { text-align: right; color: var(--ink);
  font: 700 14px/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
body.veste-on .veste-riga-n { text-align: right; color: var(--ink-muted);
  font: 500 12px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  body.veste-on .veste-riga { grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "url p" "bar n"; gap: 4px var(--vs4); }
  body.veste-on .veste-riga-url { grid-area: url; }
  body.veste-on .veste-riga-p { grid-area: p; }
  body.veste-on .veste-riga-barra { grid-area: bar; }
  body.veste-on .veste-riga-n { grid-area: n; }
}

/* i segnali della ricerca locale */
body.veste-on .veste-segnali { display: grid; gap: var(--vs3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.veste-on .veste-segnale { display: flex; align-items: center; justify-content: space-between;
  gap: var(--vs3); padding: var(--vs4) var(--vs5);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
body.veste-on .veste-segnale-nome { color: var(--ink); font: 500 13px/1.4 var(--font-body); }
body.veste-on .veste-segnale-esito { flex-shrink: 0; padding: 2px 9px; border-radius: 99px;
  font: 600 11px/1.6 var(--font-body); }
/* Le due regole su `[data-ok]` sono state tolte il 18/08: servivano alla
   vecchia «Ricerca locale», che disegnava schede on/off. Adesso la pagina usa
   le righe di riscontro come tutte le altre, e nessun elemento porta più
   quell'attributo. L'ha detto testCssNonDisponeElementiInesistenti, che è
   esattamente il caso per cui l'avevo scritta. */

/* il profilo in fondo alla colonna */
body.veste-on .veste-profilo { margin-top: auto; display: flex; align-items: center;
  gap: var(--vs3); padding: var(--vs4) var(--vs4) var(--vs3);
  border-top: 1px solid var(--border); }
body.veste-on .veste-profilo[hidden] { display: none !important; }
body.veste-on .veste-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 99px;
  display: grid; place-items: center; background: var(--primary); color: var(--cream);
  font: 700 12px/1 var(--font-body); }
body.veste-on .veste-profilo-testo { display: flex; flex-direction: column; min-width: 0; }
body.veste-on .veste-profilo-testo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font: 600 13px/1.4 var(--font-body); }
body.veste-on .veste-profilo-testo i { color: var(--ink-muted);
  font: 400 11px/1.4 var(--font-body); font-style: normal; }
body.veste-on .veste-profilo-testo i[hidden] { display: none !important; }
/* con la colonna ridotta resta il solo tondo, centrato */
body.veste-on:not(.veste-rail-aperta) .veste-rail.stretta .veste-profilo-testo { display: none; }

/* ═════════ I COMPONENTI DEL MOCKUP (18/08) ═════════
   Ricopiati dal mockup approvato, non reinventati: stesse misure, stessi
   rapporti, con i token di casa al posto di quelli del prototipo
   (--vs* per gli spazi, --v-sc* per la rampa del punteggio).

   Prima le pagine erano sezioni vecchie adottate dentro una cornice nuova, e
   nove su quattordici restavano sotto i 200px: un occhiello e un bottone
   nudo. Un blocco che non c'è non è "layout leggero", è una pagina rotta. */

/* ─── la sezione: il contenitore di tutto ─── */
body.veste-on .vs-sezione { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; }
body.veste-on .vs-sezione-testa { display: flex; align-items: center; gap: var(--vs3);
  padding: var(--vs4) var(--vs5) var(--vs3); flex-wrap: wrap; }
body.veste-on .vs-sezione-testa h4 { margin: 0; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
body.veste-on .vs-sezione-testa .vs-sotto { font: 400 12.5px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-sezione-testa .vs-destra { margin-left: auto; }
@media (max-width: 720px) {
  body.veste-on .vs-sezione-testa { padding: 14px 16px 10px; }
  body.veste-on .vs-sezione-testa .vs-destra { margin-left: 0; }
}

/* ─── la riga: gravità, testo, azione ─── */
body.veste-on .vs-riga { display: flex; align-items: center; gap: var(--vs4);
  padding: var(--vs3) var(--vs5); border: 0; border-top: 1px solid var(--border);
  width: 100%; background: none; text-align: left; cursor: pointer;
  transition: background var(--ease, .12s ease); }
body.veste-on .vs-riga:hover { background: var(--cream-soft); }
body.veste-on .vs-riga:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.veste-on .vs-riga.s-alta { box-shadow: inset 2px 0 0 var(--warning); }
body.veste-on .vs-riga.s-media { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink) 22%, transparent); }
body.veste-on .vs-riga-testo { flex: 1; min-width: 0; }
body.veste-on .vs-riga-testo b { display: block; font: 600 14.5px/1.35 var(--font-body); color: var(--ink); }
/* FIGLIO DIRETTO, non «qualunque span dentro». Questa regola era nata per il
   sottotitolo, che è figlio diretto; scritta larga prendeva anche lo span
   dell'icona dentro il titolo e lo faceva diventare un blocco, cioe' mandava
   l'icona a capo. È lo stesso inganno della lineetta del grafico: una regola
   più specifica di quella che scrivi dopo, e la colpa sembra altrove. */
body.veste-on .vs-riga-testo > span { display: block; font: 400 12.5px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-riga .vs-btn { flex: 0 0 auto; }
@media (max-width: 720px) {
  body.veste-on .vs-riga { flex-wrap: wrap; gap: 9px; padding: 13px 16px; }
  body.veste-on .vs-riga-testo { flex: 1 1 100%; order: 2; }
  body.veste-on .vs-riga .vs-grav { order: 1; }
  body.veste-on .vs-riga .vs-btn { order: 3; flex: 1 1 100%; }
}

/* ─── la gravità: inchiostro warning più la PAROLA, mai il colore da solo.
   --danger è lo stesso valore di --terracotta e sta a deltaE 11.1 da
   --warning: due gravità distinte solo dal colore sarebbero indistinguibili,
   e il terracotta è delle azioni. ─── */
body.veste-on .vs-grav { flex: 0 0 auto; padding: 3px 8px; border-radius: 99px;
  font: 700 10px/1.6 var(--font-body); letter-spacing: .07em; }
body.veste-on .vs-grav-alta { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); color: var(--warning-ink); }
body.veste-on .vs-grav-media { background: var(--cream-deep); color: var(--ink-soft); }
body.veste-on .vs-grav-bassa { background: var(--cream-soft); color: var(--ink-muted); }

/* ─── i bottoni ─── */
body.veste-on .vs-btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px;
  font: 600 13.5px/1.2 var(--font-body); cursor: pointer;
  transition: filter var(--ease, .12s ease), background var(--ease, .12s ease); }
body.veste-on .vs-btn:hover { filter: brightness(.97); }
body.veste-on .vs-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
body.veste-on .vs-btn-terra { background: var(--terracotta); color: var(--cream); }
body.veste-on .vs-btn-vuoto { background: var(--surface); color: var(--ink); border-color: var(--border); }
body.veste-on .vs-btn-p { padding: 10px 12px; font-size: 12.5px; }
body.veste-on .vs-btn:disabled { background: var(--cream-deep); color: var(--ink-muted);
  border-color: transparent; cursor: not-allowed; filter: none; }

/* ─── le strisce in fondo alla Panoramica ─── */
body.veste-on .vs-strisce { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vs3); }
body.veste-on .vs-striscia { display: flex; align-items: center; gap: 12px; min-height: 50px;
  padding: 13px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
body.veste-on .vs-striscia .k { font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); white-space: nowrap; }
body.veste-on .vs-striscia .v { margin-left: auto; text-align: right;
  font: 600 13.5px/1.4 var(--font-body); color: var(--ink); }
body.veste-on .vs-striscia .v em { font-style: normal; font-weight: 500; color: var(--ink-muted); }
@media (max-width: 720px) { body.veste-on .vs-strisce { grid-template-columns: 1fr; gap: 9px; } }

/* ─── la pagina di un'azione: una scheda, non un bottone nudo ─── */
body.veste-on .vs-scheda { display: flex; flex-direction: column; gap: var(--vs4);
  padding: var(--vs6); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); }
body.veste-on .vs-scheda-ico { width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--cream-deep); color: var(--primary); }
body.veste-on .vs-scheda-ico svg { width: 20px; height: 20px; }
body.veste-on .vs-scheda h4 { margin: 0; font: 700 18px/1.3 var(--font-head); color: var(--ink); }
body.veste-on .vs-scheda p { margin: 0; max-width: 62ch;
  font: 400 14px/1.6 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-scheda-azioni { display: flex; flex-wrap: wrap; gap: var(--vs3); align-items: center; }

/* ─── il registro delle spiegazioni: Semplice o Tecnico ───
   Era sparito passando alla veste. Non è un dettaglio: ogni problema
   dell'audit porta due scritture (`title` in gergo SEO, `simpleTitle` in
   italiano semplice) e senza il comando ne resta leggibile una sola. */
body.veste-on .veste-registro { display: inline-flex; padding: 2px; gap: 2px;
  background: var(--cream-deep); border-radius: 9px; }
body.veste-on .veste-registro button { min-height: 30px; padding: 5px 11px; border: 0;
  border-radius: 7px; background: none; cursor: pointer; color: var(--ink-muted);
  font: 600 12px/1.3 var(--font-body);
  transition: background var(--ease, .14s ease), color var(--ease, .14s ease); }
body.veste-on .veste-registro button.attiva { background: var(--surface); color: var(--ink); }
body.veste-on .veste-registro button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (max-width: 1099px) { body.veste-on .veste-registro button { min-height: 44px; } }

/* ═════════ LA CONSOLE DELL'AGENZIA (18/08) ═════════ */

/* la fascia dei numeri d'insieme */
/* `auto-fit` e non un numero fisso: le fasce hanno tre numeri o quattro a
   seconda della pagina, e con `repeat(3,...)` la quarta andava a capo da sola
   in una riga vuota per tre quarti. */
body.veste-on .vs-kpi-riga { display: grid; gap: var(--vs3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
body.veste-on .vs-kpi { display: flex; flex-direction: column; gap: 2px;
  padding: var(--vs4) var(--vs5); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); }
body.veste-on .vs-kpi .k { font: 400 12.5px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-kpi .v { font: 900 30px/1.05 var(--font-head); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
body.veste-on .vs-kpi .d { font: 500 12px/1.4 var(--font-body); color: var(--ink-muted); }
/* Sotto i 640px NON si scende a una colonna sola: tre righe alte fanno
   scomparire la terza sotto la piega. Due colonne tengono la fascia leggibile
   e la terza va a capo da sola. */
@media (max-width: 900px) { body.veste-on .vs-kpi-riga { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { body.veste-on .vs-kpi .v { font-size: 26px; } }

/* le barre della salute per cliente */

body.veste-on .vs-barre { padding: 0 var(--vs5) var(--vs4); display: flex; flex-direction: column; }
body.veste-on .vs-barra-riga { display: grid; grid-template-columns: minmax(0, 1fr) 90px 32px;
  align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
body.veste-on .vs-barra-riga:first-child { border-top: 0; }
body.veste-on .vs-barra-riga .et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/1.4 var(--font-body); color: var(--ink); }
body.veste-on .vs-barra-riga .val { text-align: right; font: 700 13px/1.2 var(--font-head);
  color: var(--ink); font-variant-numeric: tabular-nums; }
body.veste-on .vs-barre-vuoto { margin: 0; padding: 0 var(--vs5) var(--vs5);
  font: 400 13px/1.5 var(--font-body); color: var(--ink-muted); }

/* la barra del punteggio, riusata ovunque */
body.veste-on .vs-meter { height: 6px; border-radius: 99px; background: var(--cream-deep); overflow: hidden; }
body.veste-on .vs-meter i { display: block; height: 100%; border-radius: 99px; background: var(--v-sc2); }
body.veste-on .vs-meter[data-banda="1"] i { background: var(--v-sc1); }
body.veste-on .vs-meter[data-banda="3"] i { background: var(--v-sc3); }
body.veste-on .vs-meter[data-banda="4"] i { background: var(--v-sc4); }
body.veste-on .vs-meter-corto { width: 90px; flex: 0 0 auto; }

/* l'intestazione di cliente dentro la coda */
/* `width: 100%` non è pleonastico: queste righe sono <button>, e un bottone
   in flex NON si allarga da solo come farebbe un div. Metà erano larghe
   1070px e metà 340, e a schermo si vedeva il bordo che si fermava a metà
   pagina. È la stessa trappola già chiusa su `.vs-riga`. */
body.veste-on .vs-coda-cliente { display: flex; align-items: center; gap: var(--vs3);
  padding: var(--vs3) var(--vs5); background: var(--cream-soft); width: 100%;
  border: 0; border-top: 1px solid var(--border); text-align: left;
  color: inherit; font: inherit; cursor: pointer; }
body.veste-on div.vs-coda-cliente { cursor: default; }
body.veste-on .vs-coda-cliente:hover { background: var(--cream-deep); }
body.veste-on div.vs-coda-cliente:hover { background: var(--cream-soft); }
body.veste-on .vs-coda-cliente b { font: 700 13px/1.3 var(--font-body); color: var(--ink); }
body.veste-on .vs-coda-cliente .vs-quanti { margin-left: auto; text-align: right;
  font: 400 12px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-avat { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: var(--primary); color: var(--cream);
  font: 700 10px/1 var(--font-body); letter-spacing: .02em; }
body.veste-on .vs-riga-cliente { cursor: default; }
@media (max-width: 720px) {
  body.veste-on .vs-coda-cliente .vs-quanti { flex: 1 1 100%; margin-left: 0; text-align: left; }
}

/* ─── LA SECONDA COLONNA ───
   Si accende SOLO sulle pagine che hanno un blocco marcato per lei (la classe
   `con-destra`, messa dal codice quando quel blocco esiste davvero). La
   versione del 17/08 la accendeva sempre e non la riempiva mai: 360px di
   vuoto che stringevano la prima colonna a 452px su una finestra da 1920.

   Il tetto resta 1120px dove la colonna non c'è: sopra, allargare le righe
   non fa leggere meglio, allontana solo le cose fra loro. */
@media (min-width: 1500px) {
  body.veste-on .veste-pagina.con-destra { display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 380px; gap: var(--vs4) var(--vs5); }
  body.veste-on .veste-corpo:has(.veste-pagina.con-destra:not([hidden])) { max-width: 1560px; }
  /* Il contenitore del disegno sparisce dalla griglia e ci lascia i suoi
     figli: `grid-column` vale solo sui FIGLI DIRETTI, e senza questa riga il
     rail resta un nipote, la colonna 2 non riceve niente e torna il vuoto da
     380px che ho già tolto una volta. */
  body.veste-on .veste-pagina.con-destra > .veste-disegno { display: contents; }
  body.veste-on .veste-pagina.con-destra > *,
  body.veste-on .veste-pagina.con-destra > .veste-disegno > * { grid-column: 1; }
  body.veste-on .veste-pagina.con-destra > [data-colonna="destra"],
  body.veste-on .veste-pagina.con-destra > .veste-disegno > [data-colonna="destra"] {
    grid-column: 2; grid-row: 1 / span 30; }
}

/* ─── IL TETTO DEL CONTENITORE ───
   La veste vive dentro `#dashboardPanel > .container`, che ha
   `max-width: 1180px`: un tetto giusto per una pagina di testo, sbagliato per
   una cornice di applicazione. Finché resta, la seconda colonna esiste ma non
   ha spazio: misurato a 1920, la cornice era 1132px e il corpo 880, quindi le
   due colonne uscivano 432 e 380 dentro un monitor largo il doppio.

   Si alza SOLO con la veste accesa, quindi la vecchia dashboard non si muove
   di un pixel. Il contenuto NON si allarga fino al bordo: il tetto vero resta
   quello di `.veste-corpo` (1120px, o 1560 dove c'è la colonna destra). */
body.veste-on #dashboardPanel > .container { max-width: 1760px; }

/* ═════════ LA SCHEDA DI UN CLIENTE E I REPORT (18/08) ═════════ */

body.veste-on .vs-cliente-testa { display: flex; align-items: center; gap: var(--vs4); }
body.veste-on .vs-avat-grande { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
body.veste-on .vs-cliente-nome { margin: 0; font: 700 22px/1.2 var(--font-head); color: var(--ink); }
body.veste-on .vs-cliente-mail { margin: 2px 0 0; font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-cliente-testa .vs-destra { margin-left: auto; }
@media (max-width: 640px) {
  body.veste-on .vs-cliente-testa { flex-wrap: wrap; }
  body.veste-on .vs-cliente-testa .vs-destra { margin-left: 0; flex: 1 1 100%; }
}

/* una scheda per sito. `auto-fill` con un minimo di 268px: sotto quella
   misura il dominio va a capo e il punteggio finisce da solo su una riga. */
body.veste-on .vs-siti-griglia { display: grid; gap: var(--vs3);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
body.veste-on .vs-sito-card { display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color var(--ease, .14s ease), transform var(--ease, .14s ease),
    opacity .2s var(--ease, ease); }
body.veste-on .vs-sito-card:hover { border-color: var(--ink-muted); transform: translateY(-1px); }
/* la parte che si legge è anche il bersaglio per aprire */
body.veste-on .vs-sito-vai { display: flex; flex-direction: column; gap: 10px;
  padding: var(--vs5); text-align: left; cursor: pointer; width: 100%;
  background: none; border: 0; font: inherit; color: inherit; }
body.veste-on .vs-sito-vai:focus-visible { outline: 2px solid var(--primary);
  outline-offset: -2px; border-radius: var(--r); }
/* le azioni: sempre visibili. Al passaggio del mouse vorrebbe dire invisibili
   sul telefono, e invisibili finché non ci finisci sopra per caso altrove. */
body.veste-on .vs-sito-azioni { display: flex; gap: 2px; padding: 4px;
  border-top: 1px solid var(--border); }
/* 44px di altezza, non 28: col dito un bersaglio da 28 si sbaglia, e qui
   accanto a «Riscansiona» c'è «Rimuovi». La batteria lo diceva su tablet e
   telefono; lo tengo uguale ovunque perché due misure diverse per lo stesso
   bottone sono due cose da ricordare. */
body.veste-on .vs-sito-az { flex: 1 1 0; min-width: 0; display: inline-flex;
  align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; min-height: 44px;
  font: 500 11.5px/1 var(--font-body); color: var(--ink-muted); white-space: nowrap;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  transition: background var(--ease, .14s ease), color var(--ease, .14s ease); }
body.veste-on .vs-sito-az span { overflow: hidden; text-overflow: ellipsis; }
body.veste-on .vs-sito-az svg { width: 14px; height: 14px; flex: 0 0 auto; }
body.veste-on .vs-sito-az:hover { background: var(--cream-soft); color: var(--ink); }
body.veste-on .vs-sito-az:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.veste-on .vs-sito-az-via:hover { background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); }
body.veste-on .vs-sito-azioni.e-scelta { background: var(--cream-soft); }
body.veste-on .vs-sito-attesa { flex: 1; display: grid; place-items: center;
  min-height: 44px; padding: 7px 4px;
  font: 500 11.5px/1 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-sito-card[data-lavoro] { border-color: var(--primary); }
body.veste-on .vs-sito-card[data-esce] { opacity: 0; transform: translateY(-4px); }
body.veste-on .vs-sito-testa { display: flex; align-items: flex-start; gap: var(--vs3); }
body.veste-on .vs-sito-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.veste-on .vs-sito-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 14px/1.35 var(--font-body); color: var(--ink); }
body.veste-on .vs-sito-nome span { font: 400 12px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-sito-p { flex: 0 0 auto; font: 900 24px/1 var(--font-head);
  color: var(--ink); font-variant-numeric: tabular-nums; }
body.veste-on .vs-sito-fondo { font: 500 12.5px/1.4 var(--font-body); color: var(--ink-muted); }

/* la tabella dei report */
body.veste-on .vs-riga-report { cursor: default; flex-wrap: wrap; }
body.veste-on .vs-cadenza { flex: 0 0 auto; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 500 13px/1.2 var(--font-body); }
body.veste-on .vs-cadenza:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
body.veste-on .vs-grav-ok { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--success-ink); }
body.veste-on .vs-nota { margin: 0; max-width: 66ch;
  font: 400 13px/1.6 var(--font-body); color: var(--ink-muted); }
@media (max-width: 720px) {
  body.veste-on .vs-riga-report .vs-cadenza,
  body.veste-on .vs-riga-report .vs-segna { flex: 1 1 calc(50% - 5px); }
}

/* ─── QUELLO CHE DEVE STARE DENTRO LA CORNICE ───
   Il banner dell'onboarding e la checklist vivevano PRIMA della veste, quindi
   uscivano a tutta larghezza sopra il telaio: una fascia colorata sospesa che
   faceva sembrare la cornice incollata sotto. Adesso il banner è adottato
   dalla Panoramica come tutto il resto; questa regola toglie il margine che
   aveva quando stava da solo in cima alla pagina. */
body.veste-on .veste #onboardingBanner,
body.veste-on .veste #onboardingChecklist { margin: 0; width: auto; }

/* Il pulsante "?" fisso in basso a destra copre l'ultimo comando della pagina
   quando la lista arriva in fondo: gli lascio lo spazio suo. */
body.veste-on .veste-corpo { padding-bottom: 96px; }

/* ═════════ RITMO E GERARCHIA (18/08) ═════════
   Riccardo: «i blocchi sono tutti uno attaccato all'altro, il resto è molto
   pieno e strutturato male». Misurato: fra un blocco e l'altro c'erano 16px, e
   ogni blocco aveva lo stesso bordo e lo stesso fondo del vicino. Una distanza
   sola fra elementi di peso uguale non è una gerarchia: è un elenco.

   Due correzioni, nessun colore nuovo.

   UNO: tre distanze invece di una. Dentro un gruppo si sta stretti (le righe di
   una lista sono la stessa cosa, e separarle le spezzerebbe), fra blocchi si
   respira, e la pagina finisce prima di toccare il fondo. 28px fra blocchi non
   è un numero a caso: è la misura sotto la quale due bordi si leggono come un
   bordo doppio, provata a schermo.

   DUE: due pesi invece di uno. Il verdetto e le liste sono la cosa per cui si
   apre la pagina, e tengono superficie e bordo. Gli avvisi del prodotto
   (l'onboarding, la checklist) sono aiuti temporanei: restano, ma senza bordo e
   su un fondo appena tinto, così non competono col punteggio. Un avviso che
   pesa quanto il dato principale sposta l'occhio dove non serve. */
body.veste-on .veste-corpo { gap: 28px; padding-top: var(--vs6); }
body.veste-on[data-densita="compatta"] .veste-corpo { gap: 18px; }

/* il verdetto è l'unico blocco che può permettersi di essere grande */
body.veste-on .veste-verdetto { padding: var(--vs6) var(--vs7); }

/* dentro una sezione le righe restano vicine: sono la stessa cosa */
body.veste-on .vs-sezione-testa { padding: var(--vs5) var(--vs6) var(--vs4); }
body.veste-on .vs-riga { padding: var(--vs4) var(--vs6); gap: var(--vs5); }

/* gli avvisi del prodotto, adottati dalla veste: presenti, non protagonisti */
body.veste-on .veste .onboarding-banner,
body.veste-on .veste #onboardingBanner,
body.veste-on .veste #onboardingChecklist {
  border: 0; border-radius: var(--r);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
body.veste-on .veste #onboardingBanner h3,
body.veste-on .veste #onboardingChecklist h3,
body.veste-on .veste #onboardingChecklist h4 { font-size: 16px; }

/* l'occhiello sta attaccato al suo titolo, non a metà strada fra i due */
body.veste-on .veste-occhiello { margin: -10px 0 0; }

/* e la pagina non finisce sul bordo dello schermo */
body.veste-on .veste-pagina { display: flex; flex-direction: column; gap: 28px; }
body.veste-on[data-densita="compatta"] .veste-pagina { gap: 18px; }

/* Il blocco Andamento sparisce finché non c'è una seconda scansione: con una
   sola non disegna niente e la card diventa una promessa da 130px. Il segnale
   arriva dal prodotto (`#dashAndamentoVuoto`), non da un secondo conteggio mio. */
body.veste-on .veste .veste-senza-storico { display: none !important; }

/* ═════════ I COMPONENTI DELLE CINQUE PAGINE RIFATTE (18/08) ═════════ */

/* il grafico: testa, disegno, e il delta a destra */
body.veste-on .vs-grafico { display: flex; flex-direction: column; gap: 10px;
  padding: var(--vs5) var(--vs6) var(--vs4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
body.veste-on .vs-grafico-testa { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
body.veste-on .vs-grafico-testa h4 { margin: 0; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
/* Le lineette dei tre grafici piccoli si escludono QUI, alla sorgente: il
   foglio viene servito col prefisso `body.veste-on`, quindi questa regola
   vale (0,3,1) e vince su qualunque cosa scrivessi più in basso con due sole
   classi. Sono disegnate alla larghezza misurata del blocco: stirarle al
   100% le deformerebbe. */
body.veste-on .vs-grafico svg:not(.vs-pm-linea) { display: block; width: 100%; height: auto; }

/* il delta: verde se sale, warning se scende. Mai il terracotta, che è delle
   azioni: un dato non deve vestirsi come un comando. */
body.veste-on .vs-delta { margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font: 600 12.5px/1.4 var(--font-body); }
/* le classi si chiamano vs-piu/vs-meno e non su/giu: una classe che è anche
   una parola del dizionario viene contata come traduzione dimenticata, e da
   fuori le due cose sono indistinguibili. */
body.veste-on .vs-delta.vs-piu { color: var(--success-ink); }
body.veste-on .vs-delta.vs-meno { color: var(--warning-ink); }
body.veste-on .vs-sito-fondo .vs-delta { margin-left: 8px; }

/* il blocco di una funzione che il piano non comprende. Non è un muro: dice
   cosa cambierebbe, con tre righe concrete, e poi propone. */
body.veste-on .vs-bloccato { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--vs4); padding: var(--vs7) var(--vs6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
body.veste-on .vs-bloccato h4 { margin: 0; max-width: 24ch;
  font: 700 21px/1.25 var(--font-head); color: var(--ink); text-wrap: balance; }
body.veste-on .vs-bloccato p { margin: 0; max-width: 62ch;
  font: 400 14px/1.6 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-bloccato ul { margin: 0; padding-left: 18px; display: flex;
  flex-direction: column; gap: 6px; }
body.veste-on .vs-bloccato li { max-width: 62ch; font: 400 13.5px/1.5 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-tag-piano { padding: 3px 9px; border-radius: 99px;
  background: var(--cream-deep); color: var(--ink-soft);
  font: 700 10px/1.6 var(--font-body); letter-spacing: .07em; }

/* la scheda di testo che chiude una pagina: spiega, non comanda */
body.veste-on .vs-scheda-piatta { gap: var(--vs3); padding: var(--vs5) var(--vs6); }
body.veste-on .vs-scheda-piatta h4 { font-size: 15px; }
body.veste-on .vs-scheda-piatta p { font-size: 13.5px; }

/* ═════════ DENTRO IL PANNELLO RESTA SOLO LA CORNICE ═════════
   Costruendo le pagine nuove ho smesso di adottare sette sezioni del prodotto.
   Non adottare NON nasconde: quelle sezioni sono rimaste dov'erano, e con la
   veste accesa si vedevano tutte insieme sopra e sotto il telaio, venti
   blocchi per 2600px. Sullo schermo sembrava che la veste fosse sparita.

   La regola è una e generale, non un elenco: dentro il contenitore del
   pannello resta visibile solo `.veste`. Un elenco di id andrebbe aggiornato
   ogni volta che il prodotto ne aggiunge uno, e invecchierebbe in silenzio,
   che è esattamente il difetto appena successo.

   Quello che la veste ADOTTA finisce dentro `.veste`, quindi resta visibile
   per costruzione. Quello che le serve solo per essere cliccato (le carte di
   `dashboardAiGrid`) resta nel DOM e nascosto: `.click()` funziona lo stesso. */
body.veste-on #dashboardPanel > .container > *:not(.veste) { display: none !important; }

/* la barra per lanciare una scansione: nuova nella forma, sopra il motore del
   prodotto. È il comando principale della dashboard, quindi sta in cima e ha
   la larghezza piena. */
body.veste-on .vs-scansione { display: flex; flex-wrap: wrap; gap: var(--vs3);
  align-items: center; padding: var(--vs5) var(--vs6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
body.veste-on .vs-scansione-campo { flex: 1 1 260px; min-width: 0; min-height: 44px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--cream-soft); color: var(--ink);
  font: 400 14px/1.3 var(--font-body); }
body.veste-on .vs-scansione-campo::placeholder { color: var(--ink-muted); }
body.veste-on .vs-scansione-campo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
body.veste-on .vs-scansione-vai { flex: 0 0 auto; }
body.veste-on .vs-scansione-nota { flex: 1 1 100%; margin: 0;
  font: 400 12.5px/1.5 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-scansione-nota:empty { display: none; }

/* ═════════ IL VERDETTO COL SUO ANDAMENTO (18/08) ═════════
   Nel disegno il verdetto ha tre parti: il punteggio, il testo, e a destra una
   sparkline con quanto sei salito. La terza mancava, ed è quella che risponde
   alla domanda che uno si fa subito dopo il numero: «sto migliorando?». */
body.veste-on .vs-spark { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px; }
body.veste-on .vs-spark:empty { display: none; }
body.veste-on .vs-spark span { white-space: nowrap;
  font: 600 11.5px/1.4 var(--font-body); color: var(--success-ink); }
body.veste-on .vs-spark span.vs-meno { color: var(--warning-ink); }
@media (max-width: 720px) {
  body.veste-on .vs-spark { flex-direction: row; align-items: center; gap: 9px; align-self: flex-start; }
}

/* i valori sotto il grafico: una linea senza numeri si guarda, non si legge */
body.veste-on .vs-grafico-valori { display: flex; flex-wrap: wrap; gap: 14px;
  font: 400 12.5px/1.5 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-grafico-valori b { color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-grafico-box[hidden] { display: none !important; }

/* Il ritorno alla veste, fissato: sta nel documento e non dentro una sezione
   che può non esserci. La regola resta fuori da `body.veste-on` apposta,
   perché questo bottone vive quando la veste è SPENTA. */
.veste-rientra-fissa { position: fixed; z-index: 60; top: 88px; right: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10); }
@media (max-width: 900px) {
  .veste-rientra-fissa { top: auto; bottom: 84px; right: 16px; }
}

/* La diagnosi a schermo quando la veste non parte. Fuori da `body.veste-on`
   apposta: esiste solo quando la veste NON c'è. */
.veste-motivo { position: fixed; z-index: 61; top: 140px; right: 20px;
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px;
  border-radius: 99px; border: 1px solid var(--border);
  background: var(--cream-deep); color: var(--ink-soft);
  font: 600 12px/1.3 var(--font-body); text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.veste-motivo:hover { color: var(--ink); }
@media (max-width: 900px) { .veste-motivo { top: auto; bottom: 140px; right: 16px; } }

/* ═════════ COSA SISTEMARE: ELENCO E DETTAGLIO (18/08) ═════════ */

/* la fascia dei conteggi: quante ce ne sono, e di che gravità */
body.veste-on .vs-conteggi { display: flex; flex-wrap: wrap; gap: var(--vs4); align-items: center; }
body.veste-on .vs-conteggio { display: inline-flex; align-items: center; gap: 7px; }
body.veste-on .vs-conteggio b { font: 900 22px/1 var(--font-head); color: var(--ink);
  font-variant-numeric: tabular-nums; }

body.veste-on .vs-due { display: grid; grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--surface); align-items: stretch; }
body.veste-on .vs-elenco { border-right: 1px solid var(--border); background: var(--cream-soft);
  max-height: 640px; overflow-y: auto; }
body.veste-on .vs-el-voce { display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 11px 16px; border: 0; border-bottom: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer;
  transition: background var(--ease, .12s ease); }
body.veste-on .vs-el-voce:last-child { border-bottom: 0; }
body.veste-on .vs-el-voce:hover { background: var(--cream-deep); }
body.veste-on .vs-el-voce b { font: 600 13.5px/1.3 var(--font-body); color: var(--ink); }
body.veste-on .vs-el-voce span { font: 400 11.5px/1.4 var(--font-body); color: var(--ink-muted); }
/* la voce aperta: il filo terracotta è l'unico posto in cui il colore delle
   azioni segna una posizione, e qui va bene perché è dove SEI, non un dato */
body.veste-on .vs-el-voce.attiva { background: var(--surface);
  box-shadow: inset 2px 0 0 var(--terracotta); }
body.veste-on .vs-el-voce:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

body.veste-on .vs-dettaglio-col { display: flex; flex-direction: column; min-width: 0; }
body.veste-on .vs-dettaglio { display: flex; flex-direction: column; gap: var(--vs4);
  padding: var(--vs6); min-width: 0; }
body.veste-on .vs-dett-testa { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
body.veste-on .vs-dett-testa h4 { margin: 0; max-width: 34ch;
  font: 700 20px/1.22 var(--font-head); color: var(--ink); text-wrap: balance; }
body.veste-on .vs-dett-fix { display: flex; flex-direction: column; gap: 4px;
  padding: var(--vs4) var(--vs5); border-radius: 12px; background: var(--cream-soft); }
body.veste-on .vs-dett-fix .k { font: 700 11px/1.6 var(--font-body); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); }
body.veste-on .vs-dett-fix p { margin: 0; max-width: 62ch;
  font: 400 14px/1.6 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-dett-azioni { display: flex; flex-wrap: wrap; gap: var(--vs3); }
/* il «torna» serve solo dove le due colonne diventano una */
body.veste-on .vs-torna { display: none; }

@media (max-width: 900px) {
  /* Due colonne da 160px sono peggio di una schermata alla volta: sotto i
     900px si vede l'elenco, e toccando una voce si passa al dettaglio. */
  body.veste-on .vs-due { grid-template-columns: minmax(0, 1fr); }
  body.veste-on .vs-elenco { border-right: 0; max-height: none; }
  body.veste-on .vs-dettaglio-col { display: none; }
  body.veste-on.vs-dettaglio-aperto .vs-elenco { display: none; }
  body.veste-on.vs-dettaglio-aperto .vs-dettaglio-col { display: flex; }
  body.veste-on .vs-torna { display: flex; align-items: center; min-height: 44px;
    padding: 11px 16px; border: 0; border-bottom: 1px solid var(--border);
    background: none; color: var(--ink-soft); cursor: pointer;
    font: 600 13px/1.3 var(--font-body); text-align: left; }
}

/* ═════════ L'ANTEPRIMA DEL RISULTATO, IL METRO, LE MINIATURE ═════════
   Tre pezzi nati dalla stessa osservazione: "il titolo e 71 caratteri" e un
   numero che chiede di immaginare qualcosa. La forma del risultato, la fascia
   buona disegnata e la foto vera tolgono il passaggio di immaginazione.
   I colori restano i nostri: l'anteprima imita la FORMA di un risultato di
   ricerca, non la tavolozza di Google, che sarebbe inventare colori nuovi. */
body.veste-on .vs-serp { display: flex; flex-direction: column; gap: var(--vs4); }
body.veste-on .vs-serp-eti { font: 600 11.5px/1 var(--font-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); }
body.veste-on .vs-serp-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--vs5) var(--vs6); display: flex;
  flex-direction: column; gap: 5px; max-width: 68ch; }
body.veste-on .vs-serp-url { font: 400 12.5px/1.4 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-serp-tit { font: 400 20px/1.3 var(--font-head); color: var(--primary); }
body.veste-on .vs-serp-desc { font: 400 13.5px/1.55 var(--font-body); color: var(--ink-soft); }
/* il testo oltre il taglio resta a schermo, spento: sparire dice meno che
   essere mostrato tagliato, e la domanda della pagina è proprio "quanto
   perdo?" */
body.veste-on .vs-tagliato { font-style: normal; color: var(--ink-muted); opacity: .5;
  text-decoration: line-through; text-decoration-thickness: 1px; }
body.veste-on .vs-serp-tit.e-vuoto,
body.veste-on .vs-serp-desc.e-vuoto { color: var(--ink-muted); font-style: italic; }

body.veste-on .vs-serp-misure { display: flex; flex-wrap: wrap; gap: var(--vs6);
  margin-top: var(--vs3); padding-top: var(--vs4); border-top: 1px solid var(--border); }
body.veste-on .vs-mis { display: flex; align-items: center; gap: var(--vs3); }
body.veste-on .vs-mis b { font: 600 12px/1 var(--font-body); color: var(--ink-soft);
  letter-spacing: .04em; }
body.veste-on .vs-mis i { font-style: normal; font: 500 12px/1 var(--font-body);
  color: var(--ink-muted); font-variant-numeric: tabular-nums; }

body.veste-on .vs-metro { position: relative; display: block; width: 132px; height: 8px;
  border-radius: 99px; background: var(--v-pista); overflow: hidden; }
body.veste-on .vs-metro-zona { position: absolute; top: 0; bottom: 0; display: block;
  background: color-mix(in srgb, var(--success) 26%, transparent); }
body.veste-on .vs-metro-ora { position: absolute; left: 0; top: 0; bottom: 0; display: block;
  border-radius: 99px; background: var(--ink-soft); }
body.veste-on .vs-metro[data-stato="m-giusto"] .vs-metro-ora { background: var(--success); }
body.veste-on .vs-metro[data-stato="m-lungo"] .vs-metro-ora { background: var(--warning); }
body.veste-on .vs-metro[data-stato="m-nulla"] .vs-metro-ora { background: transparent; }

/* la miniatura dell'immagine senza ALT: un elenco di nomi di file chiede di
   ricordarsi quale foto sia `IMG_2841.jpg` */
body.veste-on .vs-mini { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover; background: var(--cream-deep); border: 1px solid var(--border); }

body.veste-on .vs-codice { margin: 0; padding: var(--vs4) var(--vs5); border-radius: 12px;
  background: var(--cream-deep); border: 1px solid var(--border); overflow-x: auto;
  font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft); white-space: pre; }

/* il grafico dello storico: scala, campo, punti, date */
body.veste-on .vs-graf { display: block; width: 100%; height: auto; }
body.veste-on .vs-graf-riga { stroke: var(--border); stroke-width: 1; }
body.veste-on .vs-graf-scala,
body.veste-on .vs-graf-data { fill: var(--ink-muted); font: 500 11px/1 var(--font-body);
  font-variant-numeric: tabular-nums; }
/* il campo pieno non c'è più: pesava più della linea, e il mockup
   approvato non ce l'ha. */
/* il colore e lo spessore li porta la serie: qui resta solo la forma */
body.veste-on .vs-graf-linea { fill: none; stroke-linejoin: round; stroke-linecap: round; }
body.veste-on .vs-graf-punto { stroke-width: 2.5; }

/* ── la legenda, che è anche il comando ── */
body.veste-on .vs-graf-legenda { display: flex; flex-wrap: wrap; gap: var(--vs3);
  padding-bottom: var(--vs4); }
/* 44px, non 34: è un comando e si preme col dito. Il collaudo l'ha visto
   su tablet e telefono, dove il bersaglio conta davvero. */
body.veste-on .vs-graf-voce { display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 5px 13px; border-radius: 99px; cursor: pointer;
  background: var(--cream-soft); border: 1px solid var(--border);
  font: 500 12.5px/1 var(--font-body); color: var(--ink-soft);
  transition: background .14s var(--ease), opacity .14s var(--ease); }
body.veste-on .vs-graf-voce:hover { background: var(--cream-deep); }
body.veste-on .vs-graf-voce:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* spenta: non sparisce, si spegne. Sparendo si perderebbe il modo di riaccenderla */
body.veste-on .vs-graf-voce.spenta { opacity: .45; }
body.veste-on .vs-graf-voce.spenta .vs-graf-pallino { background: var(--ink-muted) !important; }
body.veste-on .vs-graf-voce b { font: 700 13px/1 var(--font-body); color: var(--ink);
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-graf-pallino { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; }
body.veste-on .vs-bolla-data { display: block; font: 500 11.5px/1.4 var(--font-body);
  color: var(--ink-muted); margin-bottom: 4px; }
body.veste-on .vs-bolla-riga { display: flex; align-items: center; gap: 6px; }
body.veste-on .vs-bolla-nome { font: 400 12px/1.5 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-bolla-riga b { margin-left: auto; font: 700 13px/1.5 var(--font-body);
  color: var(--ink); font-variant-numeric: tabular-nums; }
/* la pastiglia che tiene il posto senza parlare: la prima scansione non ha
   una variazione, e scriverne una qualunque sarebbe inventare un dato */
body.veste-on .vs-grav-muta { visibility: hidden; }

/* ═════════ LA TABELLA ═════════
   Il mockup usa una tabella dove le colonne sono confrontabili fra righe:
   punteggio, variazione, stato. Una lista di card non si confronta, e per
   sapere a chi mandare il report bisognava aprirle una per una.
   Scorre da sola in orizzontale: una tabella a cinque colonne su un telefono
   non si stringe, e senza contenitore che scorre la PAGINA va di lato. */
body.veste-on .vs-scorre { overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--r); }
/* REGOLA CSS-3, bordo doppio. Dentro una sezione la cornice ce l'ha già la
   sezione: il contenitore che scorre ne aggiungeva una seconda a due pixel di
   distanza, e sulla pagina «Pagine del sito» si vedevano due righe parallele
   lungo tutta la tabella. Una sola tecnica di separazione per pila verticale. */
body.veste-on .vs-sezione > .vs-scorre { border: 0; border-radius: 0; }
body.veste-on .vs-sezione > .vs-scorre .vs-tab th { border-top: 1px solid var(--border); }
body.veste-on .vs-tab { width: 100%; border-collapse: collapse; font: 400 13.5px/1.4 var(--font-body); }
body.veste-on .vs-tab th { text-align: left; padding: 11px var(--vs5); white-space: nowrap;
  font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--cream-soft);
  border-bottom: 1px solid var(--border); }
body.veste-on .vs-tab td { padding: 12px var(--vs5); border-top: 1px solid var(--border);
  color: var(--ink); vertical-align: middle; }
body.veste-on .vs-tab tbody tr:first-child td { border-top: 0; }
body.veste-on .vs-tab tbody tr[data-cliente-apri] { cursor: pointer; }
body.veste-on .vs-tab tbody tr[data-cliente-apri]:hover td { background: var(--cream-soft); }
body.veste-on .vs-tab .n { text-align: right; font-variant-numeric: tabular-nums; }
body.veste-on .vs-chi { display: flex; align-items: center; gap: var(--vs3); }
body.veste-on .vs-chi-testo { min-width: 0; }
body.veste-on .vs-chi-testo b { display: block; font: 600 14px/1.35 var(--font-body); color: var(--ink); }
body.veste-on .vs-chi-testo span { display: block; font: 400 12px/1.4 var(--font-body);
  color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 30ch; }
body.veste-on .vs-con-meter { display: flex; align-items: center; gap: var(--vs3); }
body.veste-on .vs-con-meter b { font: 700 14px/1 var(--font-body); color: var(--ink);
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-spento { color: var(--ink-muted); font-size: 12.5px; }

/* il corpo di un cliente nella coda: esiste perché le righe si ACCODANO.
   Prima entravano tutte subito sotto l'intestazione, quindi l'ultima arrivata
   si leggeva per prima e la gravita' usciva al contrario. */
body.veste-on .vs-coda-corpo { display: block; }
body.veste-on .vs-riga-altro { justify-content: flex-start;
  font: 500 12.5px/1.4 var(--font-body); color: var(--ink-muted); }

/* la spiegazione diventa il testo forte della scheda-azione, visto che il
   titolo l'abbiamo tolto: era scritto quattro volte nella stessa schermata */
body.veste-on .vs-scheda-lead { font: 400 16px/1.6 var(--font-body); color: var(--ink);
  max-width: 62ch; }

/* ═════════ 19/08: L'INTESTAZIONE E IL CORPO SULLO STESSO ASSE ═════════
   `.veste-corpo` ha `max-width: 1120px; margin: 0 auto` e viene dal mockup
   approvato. Nel mockup però la cornice era larga 1180px: sottratta la
   colonna di sinistra restavano 930px, il tetto non entrava MAI in gioco e il
   contenuto riempiva la colonna. Nell'app vera, su un monitor da 2000px,
   l'area centrale è 1450px: il tetto scatta, il corpo si centra e
   l'intestazione no. Misurato: titolo a x=418, primo blocco a x=589. Su
   diciotto pagine su diciannove.

   Non si toglie il tetto (è la misura di lettura decisa): si da' alla barra
   lo stesso rientro, calcolato dalla stessa misura. Così titolo, comandi e
   contenuto hanno lo stesso bordo sinistro e lo stesso destro, mentre la
   riga sotto la barra resta a tutta larghezza, che è quello che deve fare
   una barra. */
body.veste-on .veste-barra {
  padding-inline: calc(max(0px, (100% - 1120px) / 2) + var(--vs6));
}
/* Dove c'è la colonna destra il tetto è 1560: la barra segue quella. */
@media (min-width: 1500px) {
  body.veste-on .veste-main:has(.veste-pagina.con-destra:not([hidden])) .veste-barra {
    padding-inline: calc(max(0px, (100% - 1560px) / 2) + var(--vs6));
  }
}
@media (max-width: 900px) {
  body.veste-on .veste-barra { padding-inline: var(--vs3); }
}

/* La colonna della gravità ha una misura sua: senza, una pastiglia da 21px
   («5») e una da 56 («VUOTO») nella stessa lista fanno partire il testo a due
   x diverse, e la lista si legge storta. Il minimo tiene la colonna ferma;
   il testo resta centrato dentro la pastiglia. */
body.veste-on .vs-grav { min-width: 96px; text-align: center; }
/* le pastiglie che portano un numero restano della loro misura */
/* 34px tiene ferma la colonna fra «0», «+4» e «+12»: con la misura al
   contenuto le date della cronologia partivano a due x diverse. */
body.veste-on .vs-grav-num { min-width: 34px; }
body.veste-on .vs-conteggio .vs-grav { min-width: 0; }
@media (max-width: 720px) {
  body.veste-on .vs-grav { min-width: 0; }
}

/* ═════════ L'ANTEPRIMA È UNA SCHEDA, non un'etichetta appoggiata sul fondo
   L'occhiello «COME ESCI NEI RISULTATI» stava fuori da qualunque contenitore,
   e la scheda sotto finiva 400px prima dell'elenco: due blocchi impilati con
   il margine destro diverso, cioè un bordo a scaletta. Adesso è una sezione
   come le altre, e il risultato di ricerca sta dentro alla sua misura di
   lettura senza tirarsi dietro il bordo della scheda. */
body.veste-on .vs-serp { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--vs5) var(--vs6); gap: var(--vs4); }
body.veste-on .vs-serp-card { border: 0; padding: 0; background: none; }
body.veste-on .vs-serp-misure { border-top: 1px solid var(--border);
  margin-top: var(--vs4); padding-top: var(--vs4); }

/* La fascia dei conteggi stava appoggiata sul fondo della pagina, senza
   contenitore: l'unico blocco della veste vestito così, e si leggeva come un
   pezzo rimasto fuori. Diventa la testa del blocco che introduce, attaccata
   all'elenco che conta. */
body.veste-on .vs-conteggi { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--vs4) var(--vs5); }
/* NON si attacca all'elenco col bordo: `.veste-pagina` mette 28px di `gap`
   fra i blocchi, e due mezze schede separate da 28px di vuoto sono peggio di
   due schede intere. Una scheda, come tutti gli altri blocchi della veste. */

/* l'elenco di cosa ottieni, sulle pagine che presentano un'azione */
body.veste-on .vs-scheda-punti { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px; max-width: 62ch; }
body.veste-on .vs-scheda-punti li { position: relative; padding-left: 24px;
  font: 400 14px/1.5 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-scheda-punti li::before { content: ""; position: absolute;
  left: 6px; top: 8px; width: 6px; height: 6px; border-radius: 99px;
  background: var(--terracotta); }

/* ═════════ LA FASCIA DEI NUMERI NON È UNA FILA DI SCHEDE ═════════
   Su «I tuoi siti» quattro riquadri con bordo e fondo stavano sopra sei
   schede di sito con bordo e fondo: stesso vestito, nessuno stacco, e due
   griglie diverse (4 colonne sopra, 3 sotto) che si leggevano come una sola
   con le colonne storte. La fascia è un riepilogo, non una lista di cose su
   cui si clicca: perde il bordo, prende un fondo più quieto e un separatore
   verticale, e sotto ci va aria vera. */
body.veste-on .vs-kpi-riga { gap: 0; background: var(--cream-soft);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
body.veste-on .vs-kpi { background: none; border: 0; border-left: 1px solid var(--border);
  border-radius: 0; padding: var(--vs4) var(--vs5); }
body.veste-on .vs-kpi:first-child { border-left: 0; }
body.veste-on .vs-kpi .v { font-size: 26px; }
@media (max-width: 900px) {
  body.veste-on .vs-kpi:nth-child(odd) { border-left: 0; }
  body.veste-on .vs-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* IL RITMO DENTRO IL DISEGNO. `.veste-pagina` mette 28px fra i blocchi, ma i
   blocchi disegnati stanno dentro `.veste-disegno`, che non aveva nessun
   `gap`: sulla pagina dei siti la fascia dei numeri e la griglia delle schede
   erano a 8px l'una dall'altra, mentre tutto il resto della veste respira a
   28. Il ritmo di una pagina si legge anche senza saperlo misurare, e uno
   scarto di venti pixel su due blocchi vicini si vede. */
body.veste-on .veste-disegno { display: flex; flex-direction: column; gap: 28px; }
body.veste-on[data-densita="compatta"] .veste-disegno { gap: 18px; }

/* il totale in testa alla fascia dei conteggi */
body.veste-on .vs-conteggio-tot { padding-right: var(--vs5); margin-right: var(--vs2);
  border-right: 1px solid var(--border); }
body.veste-on .vs-tot-eti { font: 400 12.5px/1.4 var(--font-body); color: var(--ink-muted); }

/* Sopra i 1600px l'elenco di «Cosa sistemare» si allarga: a 280px i titoli
   andavano a capo quasi tutti, e una lista che si legge a due righe per voce
   è meno scorribile di una che si legge a una. */
@media (min-width: 1600px) {
  body.veste-on .vs-due { grid-template-columns: 340px minmax(0, 1fr); }
}

/* Sul telefono «Vecchia dashboard» andava a capo dentro la sua pastiglia e si
   leggeva tagliata. NON si accorcia col CSS (`content:` mette testo dentro il
   foglio, e quel testo non passa da `t()`: resterebbe italiano in francese):
   si stringe la pastiglia e le si vieta di andare a capo. */
@media (max-width: 640px) {
  /* A 390px il gruppo di destra misura 276px e il titolo 94: insieme non ci
     stanno, e forzarli su una riga sola faceva uscire l'ultima pastiglia dallo
     schermo. Va a capo: due righe in cima a un telefono sono normali, una
     scritta tagliata no. */
  body.veste-on .veste-barra { flex-wrap: wrap; row-gap: 8px; }
  body.veste-on .veste-barra-destra { margin-left: 0; flex: 1 1 100%;
    justify-content: flex-start; }
  body.veste-on .veste-spegni { white-space: nowrap; font-size: 11px;
    padding-inline: 8px; }
}

/* l'avatar vero arriva come SVG dal prodotto: la pastiglia gli fa da cornice
   e smette di disegnare l'iniziale per conto suo */
/* Con l'SVG dentro, la pastiglia non deve più dichiarare NÉ fondo NÉ'
   inchiostro: il disco e la lettera se li porta l'SVG. Lasciando
   `color: var(--cream)` la dichiarazione restava viva ma inutilizzata, e in
   tema chiaro risultava crema su crema: 1.08 su 57 viste. Il testo si vedeva
   lo stesso, ma una dichiarazione morta che la misura legge come viva è un
   difetto per il prossimo che tocca questa riga. Con `inherit`, se un giorno
   l'SVG non arriva, la lettera di ripiego resta leggibile. */
body.veste-on .veste-avat.con-immagine { background: none; padding: 0; overflow: hidden;
  color: inherit; }
body.veste-on .veste-avat.con-immagine svg,
body.veste-on .veste-avat.con-immagine img { width: 100%; height: 100%; display: block; border-radius: inherit; }

/* ═════════ IL PANNELLO DEL PRODOTTO DENTRO LA VESTE ═════════
   `#panel-ai` e `#panel-chat` nascono dentro il report e li' hanno la loro
   cornice: portati qui vanno rivestiti come tutti gli altri blocchi, o si
   leggono come un pezzo incollato da un'altra applicazione. */
body.veste-on .vs-pannello { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--vs5) var(--vs6); }
body.veste-on .vs-pannello > .tab-panel { display: block; }
body.veste-on .vs-pannello-testa { display: flex; align-items: baseline; gap: 8px;
  padding-bottom: var(--vs2); }
body.veste-on .vs-pannello-eti { font: 600 11.5px/1 var(--font-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); }
body.veste-on .vs-pannello-testa b { font: 700 14px/1.3 var(--font-body); color: var(--ink); }
/* LA CHAT DENTRO LA VESTE HA UNA SUA ALTEZZA, E UNA SUA BARRA.
   Nel report l'altezza la dava il pannello, e il riquadro dei messaggi
   cresceva con il contenuto: li' è giusto, la conversazione È la pagina e
   scorre la pagina (scelta della Fase 2.14, vedi app.css). Qui la chat è una
   scheda dentro una schermata con la barra a sinistra e l'intestazione sopra:
   far saltare tutta la dashboard per mettere in cima una bolla di chat è
   un'altra cosa. Con un'altezza fissa e `overflow-y: auto` scorre il
   riquadro, e `renderChat` se ne accorge da solo (controlla se il box ha una
   barra sua) senza cambiare niente per il report. */
body.veste-on .vs-pannello .chat-wrap { height: min(72vh, 620px); min-height: 420px; }
body.veste-on .vs-pannello .chat-messages { overflow-y: auto; min-height: 0; }

/* ═════════ IL GRAFICO INTERATTIVO ═════════ */
body.veste-on .vs-graf-cassa { position: relative; }
body.veste-on .vs-graf-guscio { width: 100%; }
/* niente `width: 100%` sull'SVG: la larghezza gliela da' il codice in
   pixel veri, e una regola qui la rimetterebbe a scalare. */
body.veste-on .vs-graf { display: block; cursor: crosshair; touch-action: pan-y; }
body.veste-on .vs-graf:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px;
  border-radius: 10px; }
body.veste-on .vs-graf-filo { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3;
  transition: opacity .12s var(--ease); }
body.veste-on .vs-graf-attivo { fill: var(--success); stroke: var(--surface); stroke-width: 2.5;
  transition: opacity .12s var(--ease); }
/* il fumetto non intercetta il puntatore: se lo facesse, comparendo sotto il
   dito farebbe uscire il puntatore dal grafico e sparirebbe da solo */
body.veste-on .vs-graf-bolla { position: absolute; pointer-events: none; z-index: 2;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px 11px; display: flex; flex-direction: column;
  gap: 3px; white-space: nowrap; min-width: 132px; }
body.veste-on .vs-graf-bolla[hidden] { display: none !important; }
body.veste-on .vs-graf-bolla b { font: 900 17px/1 var(--font-head); color: var(--ink);
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-graf-bolla span { font: 400 12px/1 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-graf-bolla i { font-style: normal; font: 700 12px/1 var(--font-body); }
body.veste-on .vs-graf-bolla i.vs-piu { color: var(--success-ink); }
body.veste-on .vs-graf-bolla i.vs-meno { color: var(--warning-ink); }
@media (prefers-reduced-motion: reduce) {
  body.veste-on .vs-graf-filo, body.veste-on .vs-graf-attivo { transition: none; }
}

/* l'esempio di traccia accanto a «Nuova pagina» */
body.veste-on .vs-traccia { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; }
body.veste-on .vs-traccia li { display: flex; align-items: baseline; gap: 9px;
  font: 400 13.5px/1.45 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-traccia-tag { flex: 0 0 auto; min-width: 34px; text-align: center;
  padding: 2px 7px; border-radius: 6px; background: var(--cream-deep);
  font: 700 10.5px/1.5 var(--font-body); letter-spacing: .06em; color: var(--ink-muted); }
body.veste-on .vs-traccia-nota { margin: 0; font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-muted); }

/* ═════════ LE CHIAVI ═════════ */
body.veste-on .vs-chiave-riga { display: flex; align-items: center; gap: var(--vs5);
  padding: var(--vs3) var(--vs5) var(--vs5); flex-wrap: wrap; }
body.veste-on .vs-chiave-nota { margin: 0; flex: 1; min-width: 260px; max-width: 62ch;
  font: 400 13.5px/1.55 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-chiave-esito { padding: 0 var(--vs5) var(--vs5); }
body.veste-on .vs-chiave-esito[hidden] { display: none !important; }
body.veste-on .vs-chiave-eti { display: block; margin-bottom: 7px;
  font: 600 11.5px/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase;
  color: var(--warning-ink); }
body.veste-on .vs-chiave-valore { display: flex; align-items: center; gap: var(--vs3);
  background: var(--cream-deep); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; flex-wrap: wrap; }
body.veste-on .vs-chiave-valore code { flex: 1; min-width: 220px; word-break: break-all;
  font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
body.veste-on .vs-chiave-errore { margin: 0; font: 400 13.5px/1.5 var(--font-body);
  color: var(--warning-ink); }
body.veste-on .vs-chiavi-corpo .veste-vuoto { border: 0; }

/* il campo per il nome della chiave: sta nella pagina, non in una finestra
   di sistema, e si annulla come tutto il resto */
body.veste-on .vs-nuova-chiave { display: flex; gap: var(--vs3); align-items: center;
  padding: 0 var(--vs5) var(--vs4); flex-wrap: wrap; }
body.veste-on .vs-campo { flex: 1; min-width: 220px; min-height: 44px;
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  font: 400 14px/1.4 var(--font-body); }
body.veste-on .vs-campo:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ═════════ IL «COME SI FA» CHE SEGUE LA SEZIONE ═════════ */
body.veste-on .vs-bolla-aiuto { position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px 0 13px; border-radius: 99px; cursor: pointer;
  background: var(--primary); color: var(--cream); border: 0;
  box-shadow: var(--shadow-lg); font: 600 13px/1 var(--font-body);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
body.veste-on .vs-bolla-aiuto:hover { transform: translateY(-2px); }
body.veste-on .vs-bolla-aiuto:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
body.veste-on .vs-bolla-aiuto[hidden] { display: none !important; }
body.veste-on .vs-bolla-aiuto svg { width: 19px; height: 19px; flex: 0 0 auto; }
@media (max-width: 900px) {
  /* sul telefono la barra in basso è alta 80px: la bolla le sta sopra, e
     perde l'etichetta per non coprire il contenuto */
  body.veste-on .vs-bolla-aiuto { bottom: 96px; right: 14px; padding: 0 13px; }
  body.veste-on .vs-bolla-testo { display: none; }
}

body.veste-on .vs-aiuto-fondo { position: fixed; inset: 0; z-index: 70;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  animation: vsAiutoFondo .22s var(--ease) both; }
@keyframes vsAiutoFondo { from { opacity: 0 } to { opacity: 1 } }
body.veste-on .vs-aiuto-fondo.e-esce { animation: vsAiutoFondoVia .2s var(--ease) both; }
@keyframes vsAiutoFondoVia { from { opacity: 1 } to { opacity: 0 } }

/* Entra da DESTRA e non copre la pagina: l'aiuto serve mentre guardi la cosa
   di cui parla, e un modale al centro toglie proprio quella.

   SCORRE COME UN CASSETTO, in tutti e due i sensi. Entrava di 28 pixel (un
   sussulto, non un movimento) e in chiusura non c'era niente: il pannello
   spariva di colpo insieme al fondo, e il salto si sentiva. Adesso parte da
   fuori schermo e ci torna, con il bordo e l'ombra che vanno via insieme a
   lui. In uscita è un filo più veloce che in entrata: aprire è un invito a
   leggere, chiudere è una cosa già decisa. */
body.veste-on .vs-aiuto { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(420px, 92vw); background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow-y: auto;
  animation: vsAiutoEntra .3s var(--ease) both; }
@keyframes vsAiutoEntra {
  from { transform: translateX(100%); opacity: .4 }
  to { transform: none; opacity: 1 }
}
body.veste-on .vs-aiuto.e-esce { animation: vsAiutoVia .24s var(--ease) both; }
@keyframes vsAiutoVia {
  from { transform: none; opacity: 1 }
  to { transform: translateX(100%); opacity: .4 }
}
body.veste-on .vs-aiuto-testa { display: flex; align-items: flex-start; gap: var(--vs4);
  padding: var(--vs6) var(--vs6) var(--vs4); border-bottom: 1px solid var(--border); }
body.veste-on .vs-aiuto-tit { flex: 1; min-width: 0; }
body.veste-on .vs-aiuto-eti { display: block; font: 600 11.5px/1 var(--font-body);
  letter-spacing: .09em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 6px; }
body.veste-on .vs-aiuto-tit b { font: 700 21px/1.25 var(--font-head); color: var(--ink); }
body.veste-on .vs-aiuto-x { flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -8px 0 0;
  border: 0; background: none; color: var(--ink-muted); cursor: pointer;
  font-size: 26px; line-height: 1; border-radius: 10px; }
body.veste-on .vs-aiuto-x:hover { background: var(--cream-soft); color: var(--ink); }
body.veste-on .vs-aiuto-x:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* I PASSI, COME SEZIONI SEPARATE. Tre paragrafi incolonnati si leggono come
   un blocco solo: non si vede dove finisce il primo e comincia il secondo, e
   il colpo d'occhio che serve a un aiuto («sono tre cose, non un discorso»)
   non arriva. Adesso ogni passo è un riquadro, il numero sta in un bollo
   pieno, e un filo li lega nell'intervallo: sono passi in ordine, e l'ordine
   è l'informazione. L'entrata è scaglionata e viene da destra, come il
   pannello: due direzioni diverse nella stessa apertura si accavallano. */
body.veste-on .vs-aiuto-passi { margin: 0; padding: var(--vs6); list-style: none;
  display: flex; flex-direction: column; gap: var(--vs5); }
body.veste-on .vs-aiuto-passi li { position: relative; display: flex; gap: var(--vs4);
  padding: var(--vs5); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  animation: vsPassoEntra .44s var(--ease) both; animation-delay: calc(var(--n) * 95ms + 90ms); }
@keyframes vsPassoEntra {
  from { transform: translateX(18px); opacity: 0 }
  to { transform: none; opacity: 1 }
}
/* il filo fra un passo e l'altro: sta nell'intervallo, incolonnato sui bolli */
body.veste-on .vs-aiuto-passi li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--vs5) + 13px); top: 100%;
  height: var(--vs5); width: 2px; background: var(--border);
  animation: vsFiloEntra .3s var(--ease) both; animation-delay: calc(var(--n) * 95ms + 330ms);
  transform-origin: top; }
@keyframes vsFiloEntra { from { transform: scaleY(0); opacity: 0 } to { transform: none; opacity: 1 } }
body.veste-on .vs-passo-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 99px;
  display: grid; place-items: center; background: var(--primary); color: var(--cream-soft);
  font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
  animation: vsBolloEntra .36s var(--ease) both; animation-delay: calc(var(--n) * 95ms + 210ms); }
@keyframes vsBolloEntra { from { transform: scale(.5); opacity: 0 } to { transform: none; opacity: 1 } }
body.veste-on .vs-passo-corpo { min-width: 0; }
body.veste-on .vs-aiuto-passi b { display: block; font: 700 15px/1.35 var(--font-body);
  color: var(--ink); margin-bottom: 4px; }
body.veste-on .vs-aiuto-passi .vs-passo-corpo span { display: block;
  font: 400 14px/1.6 var(--font-body); color: var(--ink-soft); }
body.veste-on .vs-aiuto-pie { margin-top: auto; display: flex; gap: var(--vs3);
  padding: var(--vs5) var(--vs6); border-top: 1px solid var(--border); flex-wrap: wrap; }

body.veste-on .vs-guida-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--cream-deep); color: var(--ink-soft); }
body.veste-on .vs-guida-ico svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  body.veste-on .vs-aiuto, body.veste-on .vs-aiuto-fondo,
  body.veste-on .vs-aiuto-passi li, body.veste-on .vs-passo-n,
  body.veste-on .vs-aiuto-passi li::after,
  body.veste-on .vs-aiuto.e-esce, body.veste-on .vs-aiuto-fondo.e-esce { animation: none; }
  body.veste-on .vs-bolla-aiuto { transition: none; }
}

/* ═════════ IL GRAFICO, COME NEL MOCKUP APPROVATO ═════════
   I numeri stanno SUI PUNTI, quindi la scala a sinistra sparisce: ripeteva
   quello che c'è già scritto. Niente campo pieno: pesava più della linea. */
body.veste-on .vs-graf-valore { font: 700 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-graf-valore.e-ultimo { font-size: 15px; }

/* ═════════ DUE O TRE SCANSIONI: prima e adesso ═════════ */
@media (max-width: 640px) {
}

/* La lineetta di contorno ha una misura sua: senza, `.veste-gr svg` la
   gonfiava a tutta la scheda, alta trecento pixel, e da «contorno» era
   diventata la cosa più grande della pagina. */

/* ═════════ LA BOLLA E IL TORNA-SU NON SI SOVRAPPONGONO ═════════
   `.scroll-top-btn` sta a `right: 88px; bottom: 24px`, calcolato sulla bolla
   VECCHIA del prodotto (52px). La mia porta un'etichetta, quindi è larga 122:
   i due si accavallavano, e dentro il pannello il torna-su finiva sopra
   «Chiedi al consulente». Con la veste accesa il torna-su si mette SOPRA la
   bolla, incolonnato: due comandi nello stesso angolo si impilano, non si
   contendono i pixel. */
body.veste-on .scroll-top-btn { right: 22px; bottom: 78px; }
@media (max-width: 900px) {
  body.veste-on .scroll-top-btn { right: 14px; bottom: 152px; }
}
/* e col pannello aperto sparisce: lì sopra non serve, e copriva un bottone */
body:has(.vs-aiuto) .scroll-top-btn,
body:has(.vs-aiuto) .vs-bolla-aiuto { display: none !important; }
/* Nella chat la bolla copriva «Invia»: misurato a 1440x900, si sovrapponevano
   di 39 pixel. La casella del consulente è ancorata in basso a destra dentro
   la sua scheda, quindi qualunque cosa fissa in quell'angolo ci finisce sopra:
   spostare la bolla più in su sposterebbe solo il punto dove si scontrano.
   Nell'unica schermata dove l'aiuto lo puoi chiedere scrivendolo, la bolla
   non serve. */
body.veste-on[data-pagina="ai-chat"] .vs-bolla-aiuto { display: none; }

/* ═════════ TRE GRAFICI PICCOLI: totale, SEO, GEO ═════════
   Non si sovrappongono mai, quindi non serve nessuna legenda da accendere e
   spegnere. Sotto i 760px vanno a capo invece di stringersi: tre colonne da
   110px su un telefono non sono tre grafici, sono tre francobolli. */
body.veste-on .vs-pm-fila { display: flex; gap: var(--vs4); flex-wrap: wrap; }
body.veste-on .vs-pm { flex: 1 1 210px; min-width: 0; padding: 14px 16px 12px;
  background: var(--cream-soft); border-radius: 11px; }
body.veste-on .vs-pm-eti { font: 600 11.5px/1 var(--font-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted); }
body.veste-on .vs-pm-num { display: flex; align-items: baseline; gap: 8px; margin: 7px 0 2px; }
body.veste-on .vs-pm-num b { font: 700 30px/1 var(--font-head); color: var(--ink);
  font-variant-numeric: tabular-nums; }
body.veste-on .vs-pm-delta { font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; }
body.veste-on .vs-pm-g { min-height: 46px; }
body.veste-on .vs-pm-linea { display: block; }
body.veste-on .vs-pm-quando { font: 500 11.5px/1.3 var(--font-body); color: var(--ink-muted);
  margin-top: 5px; }
/* Sul telefono i tre blocchi si incolonnano, e tre schede alte 142 sono 426
   pixel di grafico su uno schermo da 844: più della metà per una cosa che
   si legge in un secondo. Qui il numero sta a sinistra e la lineetta a
   destra, con la stessa struttura HTML: nessun secondo albero da tenere
   allineato al primo. */
@media (max-width: 760px) {
  body.veste-on .vs-pm { display: grid; align-items: center; padding: 12px 14px;
    column-gap: 16px; grid-template-columns: minmax(0, auto) minmax(96px, 1fr);
    grid-template-areas: "eti linea" "num linea" "quando linea"; }
  body.veste-on .vs-pm-eti { grid-area: eti; }
  body.veste-on .vs-pm-num { grid-area: num; margin: 3px 0 1px; }
  body.veste-on .vs-pm-num b { font-size: 27px; }
  body.veste-on .vs-pm-g { grid-area: linea; }
  body.veste-on .vs-pm-quando { grid-area: quando; margin-top: 1px; }
}

/* Il nome del cliente è il bottone che lo apre: prima la riga rispondeva al
   mouse e basta, quindi da tastiera la pagina dei clienti non si usava. Il
   bottone non deve sembrare un bottone (la riga resta una riga), ma deve
   comportarsi da bottone: fuoco visibile, area intera, Invio. */
body.veste-on .vs-chi-apri { display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 8px; }
body.veste-on .vs-chi-apri:focus-visible { outline: 2px solid var(--primary);
  outline-offset: 3px; }
body.veste-on .vs-chi-apri:hover b { text-decoration: underline; }

/* aggiungere un cliente: il bottone in cima, il campo solo quando serve */
body.veste-on .vs-nuovo-cliente { display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--vs3); margin-bottom: var(--vs4); }
body.veste-on .vs-nuovo-cliente-forma { display: flex; gap: var(--vs3);
  align-items: center; flex-wrap: wrap; width: 100%; }
body.veste-on .vs-nuovo-cliente-forma .vs-scansione-campo { flex: 1 1 260px; min-width: 0; }
body.veste-on .vs-nuovo-cliente-nota { flex-basis: 100%; margin: 0;
  font: 500 12.5px/1.5 var(--font-body); color: var(--danger); }

/* ═════════ LE ICONE: UNA MISURA SOLA, UN COLORE SOLO ═════════
   Stanno accanto al testo, non al posto suo: colore smorzato, allineate alla
   riga di base della parola che accompagnano. Un'icona che grida più del
   titolo che precede è un'icona che ha cambiato mestiere. */
body.veste-on .vs-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-muted); }
body.veste-on .vs-sezione-ico { display: inline-flex; align-items: center;
  color: var(--terracotta); margin-right: 2px; }
body.veste-on .vs-sezione-ico .vs-ico { width: 17px; height: 17px; color: inherit; }
body.veste-on .vs-riga-ico { display: inline-flex; align-items: center; vertical-align: -3px;
  margin-right: 7px; color: var(--ink-muted); }
body.veste-on .vs-riga-ico .vs-ico { width: 15px; height: 15px; color: inherit; }
/* dentro una riga già risolta l'icona si spegne insieme al resto */
body.veste-on .vs-riga.s-ok .vs-riga-ico { opacity: .55; }

/* ═════════ SCRIVERE I SEGNALI LOCALI ═════════
   L'azione sta sopra l'elenco, e la nota accanto dice due cose che devono
   stare insieme al bottone e non in fondo alla pagina: quanto costa, e cosa
   NON facciamo (telefono e indirizzo non li inventiamo). */
body.veste-on .vs-segnali-azione { display: flex; align-items: center; gap: var(--vs4);
  flex-wrap: wrap; margin-bottom: var(--vs4); }
body.veste-on .vs-segnali-nota { font: 500 12.5px/1.5 var(--font-body); color: var(--ink-muted); }
body.veste-on .vs-segnali-esito { margin-top: var(--vs4); }

/* un pezzo di testo pronto da incollare: l'etichetta dice cos'è, il testo si
   può selezionare, il bottone lo copia. Il monospazio solo per il JSON, dove
   l'allineamento è informazione. */
body.veste-on .vs-copia { position: relative; padding: var(--vs4) var(--vs5);
  border-top: 1px solid var(--border); }
body.veste-on .vs-copia:first-of-type { border-top: 0; }
body.veste-on .vs-copia-eti { display: block; font: 600 11.5px/1 var(--font-body);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 7px; }
body.veste-on .vs-copia-testo { margin: 0 88px 0 0; font: 400 14px/1.6 var(--font-body);
  color: var(--ink); white-space: pre-wrap; word-break: break-word; }
body.veste-on .vs-copia-mono .vs-copia-testo { font: 400 12.5px/1.55 ui-monospace, SFMono-Regular,
  Menlo, monospace; background: var(--cream-soft); border-radius: 9px; padding: var(--vs3) var(--vs4);
  max-height: 260px; overflow: auto; }
body.veste-on .vs-copia-vai { position: absolute; top: var(--vs4); right: var(--vs5); }
@media (max-width: 700px) {
  body.veste-on .vs-copia-testo { margin-right: 0; }
  body.veste-on .vs-copia-vai { position: static; margin-top: var(--vs3); }
}

/* ═════════ TABELLA DI NUMERI ═════════
   Colonne allineate a destra e cifre della stessa larghezza: due righe si
   confrontano guardandole, non leggendole. La prima colonna (la ricerca, o
   l'indirizzo della pagina) prende quello che avanza e va a capo senza
   spingere le altre. Sotto i 700px le colonne numeriche restano, ma piccole:
   toglierle vorrebbe dire togliere il motivo per cui si apre la pagina. */
body.veste-on .vs-tab { display: flex; flex-direction: column; }
body.veste-on .vs-tab-riga { display: grid; align-items: baseline; gap: var(--vs4);
  grid-template-columns: minmax(0, 1fr) repeat(var(--n, 3), minmax(56px, max-content));
  padding: 11px var(--vs5); border-top: 1px solid var(--border); }
body.veste-on .vs-tab-riga:first-child { border-top: 0; }
body.veste-on .vs-tab-testa { padding-top: 4px; padding-bottom: 8px; border-top: 0; }
body.veste-on .vs-tab-testa .vs-tab-c { font: 600 11px/1 var(--font-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted); }
body.veste-on .vs-tab-c { font: 500 13.5px/1.45 var(--font-body); color: var(--ink);
  overflow-wrap: anywhere; }
body.veste-on .vs-tab-c.n { text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); white-space: nowrap; }
body.veste-on .vs-tab-riga:not(.vs-tab-testa):hover { background: var(--cream-soft); }
@media (max-width: 700px) {
  body.veste-on .vs-tab-riga { gap: var(--vs3); padding-left: var(--vs4); padding-right: var(--vs4); }
  body.veste-on .vs-tab-c { font-size: 13px; }
  body.veste-on .vs-tab-c.n { font-size: 12.5px; }
}

/* ─────────── «STAI GUARDANDO», quando il sito non l'hai scelto tu ───────────
   Sta in cima alla pagina, prima di tutto, perché è la premessa di quello che
   c'è sotto: senza, trenta righe di «Pagine del sito» non si sa di chi siano.
   Non urla: è una riga sottile, non una scheda. E il nome del sito è un
   selettore vero, non un'etichetta, perché chi si chiede quale sia spesso
   vuole cambiarlo. */
body.veste-on .vs-quale { display: flex; align-items: center; gap: var(--vs2);
  padding: 9px var(--vs4); margin: 0 0 var(--vs4);
  background: color-mix(in srgb, var(--terracotta) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--terracotta) 22%, var(--border));
  border-radius: 99px; font-size: 13px; color: var(--ink-soft); }
body.veste-on .vs-quale-ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--terracotta); }
body.veste-on .vs-quale-eti { flex: 0 0 auto; }
body.veste-on .vs-quale-sel { min-width: 0; max-width: 100%; border: 0; background: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; padding: 4px 2px; border-radius: 6px; min-height: 32px; }
body.veste-on .vs-quale-sel:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
body.veste-on .vs-quale-nota { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--ink-muted); }
@media (max-width: 719px) {
  body.veste-on .vs-quale { flex-wrap: wrap; border-radius: var(--r); }
  body.veste-on .vs-quale-nota { margin-left: 0; flex-basis: 100%; }
}

/* ─────────── «PAGINE DEL SITO»: L'ELENCO CHE SI PUÒ GUARDARE ───────────
   Prima era una tabella nuda di trenta righe, tutte con lo stesso punteggio e
   lo stesso numero di problemi: guardarla non diceva da dove cominciare, e
   niente reagiva al passaggio del mouse o del dito.
   Qui ogni riga è un blocco che risponde, con lo stato a sinistra prima di
   tutto: il colore dell'icona si vede prima di leggere il numero. */
body.veste-on .vs-pag-comandi { display: flex; flex-wrap: wrap; gap: var(--vs3);
  padding: var(--vs3) var(--vs5); border-bottom: 1px solid var(--border); }
body.veste-on .vs-pag-gruppo { display: inline-flex; gap: 2px; padding: 2px;
  background: var(--cream-soft); border: 1px solid var(--border); border-radius: 99px; }
body.veste-on .vs-pag-ordine { margin-left: auto; }
body.veste-on .vs-pag-p { display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 0 11px; border: 0; background: none; border-radius: 99px; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease); }
body.veste-on .vs-pag-p:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
body.veste-on .vs-pag-p.attiva { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
body.veste-on .vs-pag-ico { width: 14px; height: 14px; flex: 0 0 14px; }

body.veste-on .vs-pag-lista { display: flex; flex-direction: column; }
body.veste-on .vs-pag-riga { display: grid; align-items: center; gap: var(--vs3);
  grid-template-columns: 22px minmax(0, 1fr) 116px 108px auto;
  padding: var(--vs3) var(--vs5); border-bottom: 1px solid var(--border);
  transition: background .16s var(--ease); }
body.veste-on .vs-pag-lista .vs-pag-riga:last-child { border-bottom: 0; }
/* Il fondo si accende e basta: niente spostamenti. Una riga che si alza in un
   elenco di trenta fa ballare tutto quello che le sta sotto. */
body.veste-on .vs-pag-riga:hover { background: var(--cream-soft); }
body.veste-on .vs-pag-stato { display: flex; }
body.veste-on .vs-pag-stato-ico { width: 18px; height: 18px; color: var(--warning); }
body.veste-on .vs-pag-riga.apposto .vs-pag-stato-ico { color: var(--success); }
body.veste-on .vs-pag-chi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.veste-on .vs-pag-chi b { font-size: 13.5px; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere; }
body.veste-on .vs-pag-chi span { font-size: 12px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.veste-on .vs-pag-punteggio { display: flex; align-items: center; gap: var(--vs2); }
body.veste-on .vs-pag-punteggio b { font-variant-numeric: tabular-nums; font-size: 15px; }
body.veste-on .vs-pag-problemi { display: flex; }
body.veste-on .vs-pag-azioni { display: flex; gap: var(--vs2); justify-content: flex-end; }
/* I bottoni compaiono col passaggio del mouse su chi ha un mouse; col dito
   restano sempre lì, perché su un telefono «passare sopra» non esiste. */
@media (hover: hover) {
  body.veste-on .vs-pag-azioni { opacity: 0; transition: opacity .16s var(--ease); }
  body.veste-on .vs-pag-riga:hover .vs-pag-azioni,
  body.veste-on .vs-pag-riga:focus-within .vs-pag-azioni { opacity: 1; }
}
@media (max-width: 719px) {
  body.veste-on .vs-pag-riga { grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: "stato chi" ". punteggio" ". problemi" ". azioni"; }
  body.veste-on .vs-pag-stato { grid-area: stato; }
  body.veste-on .vs-pag-chi { grid-area: chi; }
  body.veste-on .vs-pag-punteggio { grid-area: punteggio; }
  body.veste-on .vs-pag-problemi { grid-area: problemi; }
  body.veste-on .vs-pag-azioni { grid-area: azioni; justify-content: flex-start; }
  body.veste-on .vs-pag-ordine { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.veste-on .vs-pag-riga, body.veste-on .vs-pag-p, body.veste-on .vs-pag-azioni { transition: none; }
}