/* ═══════════════════════════════════════════════════════════════════════════
   guscio.css — LA COLONNA E LA BARRA, SCRITTE UNA VOLTA SOLA.
   ═══════════════════════════════════════════════════════════════════════════

   ─── PERCHÉ ESISTE ────────────────────────────────────────────────────────

   Simone, 27 agosto 2026, guardando tre pagine affiancate: «tu dici già
   fatte, ma io le vedo una diversa dall'altra. Hai fatto come dicevo io?
   creare un modulo e utilizzare quello? non uno per pagina ma uno unico».

   Aveva ragione, e il mezzo modulo che c'era spiega perché. Le VOCI le
   disegnava già un file solo — `menu-laterale.js` — ma il VESTITO no: stava
   scritto dentro `menu-laterale.js` per le pagine a cui la colonna la
   costruisce lui, e RICOPIATO A MANO dentro ogni pagina che il suo `<nav>`
   se lo dichiara. Due famiglie, due vestiti, e dentro ogni famiglia le copie
   che scivolano una per volta.

   Misurato aprendo tutte e ventuno le pagine in un browser vero, il 27 agosto
   sera, con `controlla-tutte-le-pagine.mjs`:

     · i gruppi dei prodotti: riquadrati su `/home`, nudi su
       `/banco-strategie`. Non perché qualcuno l'abbia deciso: perché
       `banco-strategie.html` ha una riga sua — `nav.menu .gruppo{background:
       none;border:0}` — che VINCE PER SPECIFICITÀ su quella del modulo (due
       classi più un elemento battono due classi) e cancella il riquadro,
       mentre `home.html` quella riga non ce l'ha.
     · la voce: `font-size:13px` con `padding:7px 10px` da una parte,
       `13.5px` con `6px 10px` dall'altra;
     · il marchio: `15px` da una parte, `17px` dall'altra;
     · e la barra in alto partiva da 232 in quindici pagine, da 252 su
       `/index`, e larga 740 invece di 1268 su `/giro-solana`.

   Nessuna di queste è un errore che qualcuno ha commesso: sono copie che
   hanno preso strade diverse. È l'unico difetto che non si corregge
   correggendolo — si corregge togliendo le copie.

   ─── COSA POSSIEDE QUESTO FILE, E COSA NO ─────────────────────────────────

   POSSIEDE: la colonna di sinistra (`nav.menu`) in ogni suo pezzo, la fascia
   in alto (`#barraAlta`) e lo spazio che il corpo della pagina lascia a
   tutt'e due. Da qui in avanti una pagina non scrive più niente di tutto
   questo: lo riceve.

   NON POSSIEDE: cosa c'è scritto dentro. Le voci le decide il catalogo
   (`src/conti/sezioni.ts`) e le disegna `menu-laterale.js`; il marchio e la
   sua riga sotto — l'orologio su `/home`, la descrizione sul banco — restano
   della pagina, perché dicono cose diverse di proposito.

   ─── DUE AVVERTENZE PAGATE ────────────────────────────────────────────────

   ⚠️ TUTTO È RECINTATO SOTTO `nav.menu`, E NON È UNO SCRUPOLO. Il 27 agosto
      `banco-strategie.html` ha dovuto scoprirlo a sue spese: quella pagina ha
      GIÀ un `.menu` suo (i nove fogli), delle `.voce` e quindici `.gruppo`.
      Regole nude — `width:232px`, `position:fixed` — sarebbero cadute addosso
      ai fogli, e il `position:sticky` della pagina addosso alla colonna. Due
      menù rotti, nessun errore, e la colpa che sembra del tema.
      I NOMI DENTRO non si possono cambiare: `.voce`, `.gruppo`, `.tit`,
      `.ico`, `.pallino` li scrive `menu-laterale.js`, uguali ovunque. Quello
      che si sceglie è il RECINTO.

   ⚠️ E LA STESSA TRAPPOLA HA MORSO ME MENTRE COSTRUIVO L'ANTEPRIMA DI QUESTO
      FILE, la sera stessa: avevo chiamato `dentro` sia il contenitore della
      cornice sia quello delle voci figlie. Stesso nome, due significati, e le
      sotto-voci di «Swap Trading MT5» sono finite sopra il marchio. Nessun
      errore in console: solo una colonna sbagliata.

   ─── IL VESTITO DEI GRUPPI: LA «B», SCELTA DA SIMONE ──────────────────────

   Il 27 agosto sera, davanti alle due colonne affiancate a grandezza vera:
   «mi piace… modalità b a riquadri». Quindi i gruppi dei prodotti sono
   riquadri — fondo, bordo, angoli tondi — ed è una SCELTA, scritta qui una
   volta, non più il risultato di quale copia vinceva su quale pagina.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── LA COLONNA ─────────────────────────────────────────────────────────── */

nav.menu{
  width:232px;
  flex:none;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  max-height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  padding:18px 12px 44px;
  border-right:1px solid var(--bordo,rgba(128,128,128,.28));
  border-radius:0;
  display:block;
  background:var(--menu,var(--carta,var(--sfondo,#fff)));
  color:var(--testo,inherit);
  /* ⚠️ LA COLONNA HA IL SUO PASSO, e non quello della pagina che la ospita —
     28 agosto 2026. Fotografate quattro colonne affiancate erano identiche in
     tutto tranne l'altezza delle carte: `home.html` dichiara `line-height:1.55`,
     `banco-strategie` 1.5, `strategie-in-numeri` 1.46, e l'interlinea scendeva
     per eredita' dentro le teste dei gruppi. Due pixel per riga, che su sette
     gruppi diventano quindici — abbastanza perche' l'occhio dica «non sono
     uguali» senza saper dire dove.
     Simone: «voglio una sola, tutte uguali». Una colonna uguale ovunque non
     puo' dipendere da cosa dichiara la pagina attorno.

     ⚠️ E NEMMENO IL CARATTERE — 3 settembre 2026. Simone, davanti a
     Monitoraggio Coppie: «anche qui il menu laterale ha un carattere
     diverso». L'interlinea era stata inchiodata il 28 agosto; la FAMIGLIA no,
     e la colonna la ereditava dal `body` della pagina: `home` dice
     `system-ui`, Monitoraggio `-apple-system, "Segoe UI", Roboto`, e su un
     Mac le due si disegnano diverse. Stesso menu, due facce. Qui si dichiara
     la famiglia, e la pagina attorno non c'entra piu'. */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13.5px;
  line-height:1.3;
  z-index:60;
  scrollbar-width:thin;
  scrollbar-color:var(--bordo,rgba(128,128,128,.4)) transparent;
}

/* Su un portatile la colonna è più alta della finestra e scorre. Su macOS la
   barra di scorrimento è invisibile finché non muovi il dito, e un menù che
   scorre senza dirlo è un menù che sembra tagliato: qui è un'indicazione,
   non un ornamento. */
nav.menu::-webkit-scrollbar{width:9px}
nav.menu::-webkit-scrollbar-track{background:transparent}
nav.menu::-webkit-scrollbar-thumb{
  background:var(--bordo,rgba(128,128,128,.4));
  border-radius:5px;
  border:2px solid transparent;
  background-clip:content-box;
}

nav.menu .marchio{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.3px;
  padding:0 10px 2px;
  margin:0 0 6px;
}
nav.menu .marchio .sotto{
  font-weight:400;
  font-size:12px;
  color:var(--tenue,rgba(128,128,128,.9));
}
/* L'ora, sotto il marchio e sotto l'eventuale insegna della pagina. La scrive
   `menu-laterale.js` su OGNI pagina che ha una colonna, con un battito solo —
   Simone, 28 agosto: «manca l'orario sotto la scritta CryptoBot». Prima ce
   l'avevano due pagine su undici, e non per una scelta. */
nav.menu .marchio .ora{
  font-weight:400;
  font-size:12px;
  color:var(--tenue,rgba(128,128,128,.9));
  font-variant-numeric:tabular-nums;
}

nav.menu .gruppo{
  /* ⚠️ Il margine si scrive PER INTERO, non solo in cima: `banco-strategie` ha
     quindici `.gruppo` suoi con un margine sotto, e quello scendeva dentro la
     colonna allontanando le carte fra loro. Quattro colonne affiancate, e una
     sola con i buchi piu' larghi — Simone: «voglio una sola, tutte uguali». */
  margin:14px 0 0;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}
nav.menu .gruppo .tit{
  color:var(--tenue,rgba(128,128,128,.9));
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:0 10px 4px;
}

/* ⚠️ `white-space:pre-line` serve a UNA etichetta e va lasciato:
   «accensione/spegnimento» usciva tagliata a metà parola nella colonna
   stretta. Simone, 26 agosto: «la parola spegnimento portala a capo e togli
   la /». L'a capo è un `\A` dentro l'etichetta del catalogo, e senza questa
   proprietà il browser lo tratterebbe come uno spazio. Sulle altre non cambia
   niente: `pre-line` conserva gli a capo e collassa gli spazi. */
nav.menu .voce{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:var(--testo,inherit);
  padding:6px 10px;
  border-radius:9px;
  font:inherit;
  font-size:13.5px;
  line-height:1.3;
  white-space:pre-line;
  cursor:pointer;
  text-decoration:none;
}
nav.menu .voce:hover{background:var(--carta2,rgba(128,128,128,.14))}
nav.menu .voce.attiva{
  background:var(--carta2,rgba(128,128,128,.2));
  box-shadow:inset 2px 0 0 var(--blu,#2563eb);
}
nav.menu .voce .ico{width:18px;text-align:center;flex:none}
nav.menu .voce .pallino{margin:0 0 0 auto}

/* ⚠️ `display:flex` VINCE SU `hidden`, E QUESTA RIGA STA QUI E NON NELLE
   PAGINE — 29 agosto 2026.

   `nav.menu .voce` è `display:flex`, e un elemento con `display` esplicito
   ignora l'attributo `hidden`: la voce nascosta si vede lo stesso, sempre, e
   nessun errore lo dice — l'attributo c'è, il foglio di stile lo scavalca in
   silenzio. È il baco del 15 agosto, quando la voce del Simulatore è nata
   nascosta ed era visibile anche col simulatore spento.

   Fino a oggi la difesa esisteva SOLO dentro `trader.html`, scritta come
   `.arbmenu .voce[hidden]`. Portando `trader` nel guscio quella riga sarebbe
   sparita con la classe vecchia — ma soprattutto: le altre diciassette pagine
   nel guscio erano esposte esattamente allo stesso modo, e nessuna aveva la
   riga. Non era un difetto solo di trader: era un difetto del guscio che solo
   trader aveva già pagato. */
nav.menu .voce[hidden]{display:none}

/* Il contatore accanto alla voce — lo scrive `menu-laterale.js` (`.conta`) su
   OGNI pagina, e fino al 29 agosto il vestito ce l'aveva solo `trader.html`:
   sulle altre diciassette usciva senza stile, cioè come testo qualunque in
   mezzo alla voce. Stessa storia della riga qui sopra — una regola che serve a
   tutti, scritta in una pagina sola. */
nav.menu .voce .conta{margin-left:auto;font-size:11px;color:var(--tenue,var(--muted,#8b949e))}

/* E il pallino: il guscio lo metteva a destra ma non lo disegnava, e misura e
   colore stavano in `trader.html`. Stessa regola delle due qui sopra — quello
   che `menu-laterale.js` scrive su ogni pagina lo veste il guscio, se no la
   prima pagina che lo usa se lo scrive addosso e le altre restano nude. */
nav.menu .pallino{width:7px;height:7px;border-radius:50%;background:var(--su,var(--up,#2ea043))}

/* ─── I GRUPPI DEI PRODOTTI — LA «B» ──────────────────────────────────────
   Il riquadro è scritto qui, non preso in prestito. Fino al 23 agosto questi
   gruppi si chiamavano `prodotto` e su `/home` e `/admin` pescavano il
   vestito delle carte dei quattro prodotti — mentre su `/conto`, che quella
   regola non ha, restavano righe nude. Stessa applicazione, due colonne
   diverse, e nessun errore da nessuna parte. */
nav.menu .gruppo.menu-prodotto{
  margin:2px 0 0;
  background:var(--carta,#fff);
  border:1px solid var(--bordo,rgba(128,128,128,.28));
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--ombra,none);
}
/* ⚠️ `.testa` E' UN `<button>`, e un bottone eredita quello che la pagina dice
   ai bottoni: margine, padding, altezza di riga. Misurate quattro colonne, la
   scatola del gruppo era 52px su tre pagine e 68 su `swap-risultati` — sedici
   pixel arrivati da un `button{margin:…}` della pagina. Qui si azzera quello
   che la pagina puo' avere deciso per i suoi bottoni: la colonna e' del
   guscio, non di chi la ospita. */
nav.menu .gruppo.menu-prodotto>.testa{
  margin:0;
  padding:6px 10px;
  line-height:1.3;
  border-radius:9px;
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}
/* La freccina del gruppo non esiste piu' — Simone, 28 agosto: «togliamo anche
   i puntini dopo il titolo». Lo stato aperto/chiuso lo dicono gia' le voci che
   ci sono o non ci sono sotto; `aria-expanded` resta, per chi legge con uno
   screen reader. */
/* ⚠️ `position:static` esplicito: `dentro` è un nome corto e comune, e una
   pagina che lo usa per una cosa sua non deve poter staccare le voci figlie
   dalla loro madre. È successo, e in un browser si vede subito. */
nav.menu .gruppo.menu-prodotto>.dentro{display:block;position:static}
/* ⚠️ E ANCHE LA MISURA SI SCRIVE PER INTERO — 3 settembre 2026. Dieci pagine
   avevano una regola nuda `.dentro{padding:26px 0 60px; width:calc(100% -
   48px); margin-inline:auto}` per il PROPRIO foglio, e le figlie di «Swap
   Trading» nella colonna uscivano piu' larghe, rientrate e spaziate che
   nelle altre pagine. Simone: «la barra laterale deve essere uguale in tutte
   le pagine». Come per `.gruppo` sopra: la colonna dice lei quanto vale ogni
   proprieta' che una pagina potrebbe toccare per sbaglio, e non dipende piu'
   dalla disciplina di chi scrive le pagine. */
nav.menu .gruppo.menu-prodotto>.dentro{padding:0;margin:0;width:auto;max-width:none;min-width:0}
/* Le voci dentro un prodotto sono rientrate: si vede a colpo d'occhio che
   appartengono al titolo sopra, senza bisogno di una seconda cornice. */
nav.menu .gruppo.menu-prodotto>.dentro>.voce{padding-left:22px}
nav.menu .gruppo.menu-prodotto>.dentro>.voce.figlia{padding-left:38px;font-size:12.5px;opacity:.92}
nav.menu .gruppo.menu-prodotto>.dentro>.voce.capo{padding-left:38px}
/* In un blocco che ha figlie, TUTTE le voci stanno nella colonna delle
   figlie (Simone, 2 settembre 2026: «perché le ultime due voci non sono
   allineate?»). La classe la mette menu-laterale.js. */
nav.menu .gruppo.menu-prodotto.con-figlie>.dentro>.voce{padding-left:38px}
nav.menu a.voce{text-decoration:none}

/* ─── LO SPAZIO CHE LA PAGINA LASCIA, E LA FASCIA IN ALTO ─────────────────
   Sotto `html.guscio`, che mette `menu-laterale.js` quando una colonna c'è
   davvero — costruita da lui o dichiarata dalla pagina, non fa differenza.
   Una pagina senza colonna (`/porta`, `/sito`) non la prende e resta com'è.

   ⚠️ `#barraAlta` E NON `.fascia`: la fascia in cima la disegna
   `barra-utente.js`, che le dà `class="bu-barra"` e `id="barraAlta"`. Una
   classe `fascia` su quel nodo non c'è mai stata — e per giorni una regola
   scritta, commentata e MORTA ha lasciato la barra passare sopra i primi 232
   pixel della colonna, coprendo il marchio. Non dava errore, e il pezzo
   coperto era un'insegna e non un pulsante: si leggeva come «questa pagina
   non ha il marchio».

   ⚠️ E la fascia dev'essere a filo del bordo destro e attaccata alla colonna:
   una fascia rientrata di venti pixel per lato si legge come una carta, non
   come una barra. Fino al 28 agosto glielo si diceva con dei margini
   negativi, uno per modo — e non bastava, perché un margine negativo non esce
   da un `max-width` e non attraversa un `div`. Adesso la fascia sta fuori
   dalla scatola della pagina: il come e il perché stanno più sotto, dove la
   regola è scritta. */
/* ─── I TRE MODI, E PERCHÉ SONO TRE ──────────────────────────────────────
   Le pagine di questa casa mettono il contenuto in tre forme diverse, e
   nessuna delle tre è sbagliata:

     · `corpo`     — il rientro sta sul `body`, e il contenuto è quello che
                     c'è dentro. È la forma del banco, quella che Simone ha
                     chiamato «lo standard»: `/banco-strategie`,
                     `/strategie-in-numeri`, `/swap-risultati`,
                     `/swapbot-broker`.
     · `telaio`    — il rientro sta su un `.telaio` che la pagina ha già, con
                     dentro la colonna e un `.invo` che centra il contenuto e
                     ne tiene la larghezza: `/home`, `/admin`, `/conto`.
     · `costruita` — la pagina non sapeva di avere una colonna: gliela
                     costruisce `menu-laterale.js`. Sono le dieci nate prima
                     del menù — `/gara`, `/guardia`, `/sorveglianza`,
                     `/schema-agenti`, `/sfida`, `/index` e le quattro
                     `/giro-*`.

   ⚠️ IL GUSCIO NON SCEGLIE PER LORO, MA LE SERVE TUTT'E TRE. Il modo lo
   dichiara il link stesso — `data-guscio="corpo"`, `"telaio"` o
   `"costruita"` — e `menu-laterale.js` lo copia sulla radice come classe. Un
   link senza attributo prende solo il VESTITO della colonna e niente
   rientri: è il caso di una pagina che si sta ancora trasferendo.

   ─── PERCHÉ `costruita` USA IL MARGINE E NON IL RIEMPIMENTO ──────────────

   ⚠️ E QUI STA LA DIFFERENZA CHE VALE, pagata il 28 agosto in duecentosessanta
      pixel di testo. Il modo `corpo` riscrive il `padding` del `body`, e può
      farlo perché quelle quattro pagine sono state impaginate APPOSTA per
      riceverlo. Queste dieci no: hanno il loro riempimento, scelto quando la
      colonna non c'era, e alcune hanno anche un `max-width`.

      Un `padding-left` sul `body` non si AGGIUNGE a quello che la pagina ha
      già: lo SOSTITUISCE, perché è la stessa proprietà scritta due volte e
      vince l'ultima. Su `/giro-solana`, che dichiara
      `body{padding:32px 28px 64px;max-width:1000px}`, quei 232 pixel si
      mangiavano dentro i mille: restavano 740 pixel di testo, misurati, e
      nessuno aveva mai deciso che quella pagina dovesse leggersi più stretta
      delle altre.

      Il margine sta FUORI dalla scatola: si somma, e non tocca né il
      riempimento della pagina né il suo `max-width`. Misurate dopo:
      `/giro-solana` 260,1000 — i suoi mille interi — e
      `/giro-cammino`, `/giro-notte`, `/giro-vivo` a 252, che è esattamente lo
      stacco delle pagine in modo `corpo`.

   ⚠️ CHI RIMETTE `padding-left` QUI RIFÀ QUEL GUASTO SENZA VEDERLO: nessun
      errore, nessuna pagina rotta, solo il testo più stretto. C'è una prova
      che lo vieta, in `nessuna-pagina-senza-menu.test.ts`.

   ─── E IL RIENTRO DEL CONTENUTO RESTA LA SECONDA METÀ ────────────────────
   Unificare anche il `padding` interno delle pagine in modo `corpo` e
   `telaio` vuol dire riscriverne sette, e il difetto che le faceva vedere
   diverse era il VESTITO della colonna. Quello adesso è uno solo per tutte e
   venti le pagine che una colonna ce l'hanno. */

html.guscio-corpo body{
  padding:20px 20px 60px 252px;
  margin:0;
  box-sizing:border-box;
}

/* Nella forma `costruita` la pagina non sa che la colonna esiste: lo spazio
   glielo prendiamo noi, col MARGINE — vedi sopra il perché. Nella forma
   `telaio` il rientro ce l'ha già la pagina sul suo `.telaio`, e infatti qui
   sotto `telaio` non compare: non gli serve niente. */
html.guscio-costruita body{margin-left:232px}

/* ─── LA FASCIA IN ALTO ESCE DALLA SCATOLA DELLA PAGINA ───────────────────

   Simone, 29 agosto 2026: «sono stufo di ripetere che questa barra
   orizzontale e questa verticale DEVONO essere lo standard, sono tre giorni
   che ci torniamo sopra adesso basta».

   Aveva ragione, e stavolta l'ho MISURATA invece di leggerla. Ventuno pagine
   aperte in un browser vero a 1500 pixel, tutte insieme. La colonna era già
   uguale dappertutto — 232, marchio, ora — perché il guscio la possiede
   davvero. La fascia no, e in cinque pagine:

     giro-cammino, giro-notte, giro-vivo   parte da 252, finisce a 1480
     giro-solana                           parte da 260, finisce a 1260
     index                                 parte da 252, finisce a 1480

   contro il 232→1500 delle altre sedici. Le tre misure sbagliate hanno tre
   cause diverse e nessuna è un errore di scrittura:

     · il `padding` che quelle pagine hanno sul `body` (20 o 28 pixel) rientra
       anche la fascia, perché la fascia sta DENTRO quel riquadro;
     · `giro-solana` ha pure `max-width:1000px`, e una fascia dentro mille
       pixel non può esserne larga 1268;
     · `index` la fascia ce l'ha dentro un `div` suo, e un margine negativo
       sul `body` non la raggiunge nemmeno.

   ⚠️ QUINDI NON SI AGGIUSTANO I MARGINI: SI TOGLIE LA FASCIA DAL RIQUADRO.
      Finché sta dentro la scatola della pagina, la sua geometria è la somma
      di quello che la pagina dichiara — e ogni pagina dichiara una cosa sua.
      Tre correzioni di margine sarebbero state la quarta volta che ci
      torniamo sopra. `position:fixed` la misura sulla FINESTRA e non più sul
      genitore: da qui, `left:232px` e `right:0` valgono uguale sulle
      diciannove pagine, qualunque riempimento, qualunque `max-width`,
      qualunque `div` in mezzo.

   ⚠️ E LO SPAZIO CHE LASCIAVA VA RESTITUITO, se no il contenuto le sale
      sotto. Sta sull'`html` e non sul `body` per due ragioni pagate:
      un `padding-top` sul `body` SOSTITUIREBBE quello che la pagina ha già
      (è lo stesso guasto dei 232 pixel raccontato più su), e un `margin-top`
      sul `body` si fonderebbe con quello della radice e scivolerebbe FUORI
      dalla pagina invece di spingerla giù. L'`html` non ha riempimenti di
      nessuno: è l'unico posto libero.

   ⚠️ L'ALTEZZA È UNA VARIABILE, e non 63 fissi. Su `/guardia` la fascia va a
      capo e diventa 122, su `/sfida` 106: un numero fisso avrebbe nascosto
      sessanta pixel di quelle due pagine. La misura la scrive
      `menu-laterale.js` in `--barra-alta`, e la riscrive quando la fascia
      cambia. Il 63 qui è solo il ripiego per il mezzo secondo prima che il
      browser abbia misurato. */
html.guscio{padding-top:var(--barra-alta,63px)}
html.guscio #barraAlta{
  position:fixed;
  top:0;
  left:232px;
  right:0;
  width:auto;
  margin:0;
  box-sizing:border-box;
}

/* Sotto gli 820px la colonna esce di scena e diventa un cassetto: su un
   telefono 232 pixel sono metà schermo. Il ☰ che la richiama lo mette
   `barra-utente.js`, e si mostra solo qui sotto. La fascia lo segue: senza
   colonna, parte da zero. */
@media (max-width:820px){
  html.guscio-corpo body{padding-left:20px}
  html.guscio-costruita body{margin-left:0}
  html.guscio #barraAlta{left:0}
  nav.menu{transform:translateX(-100%);transition:transform .2s;z-index:80}
  nav.menu.aperta{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL VESTITO — «NOTTURNO», 4 settembre 2026
   ═══════════════════════════════════════════════════════════════════════════

   Simone, il 4 settembre: «il software e' stato creato a pezzi, unifica tutte
   le pagine e fai in modo che il mockup si applichi a tutte in un colpo solo.
   E se domani dobbiamo fare una modifica modifichiamo in un punto solo: il
   vestito deve essere esterno alle pagine e si applica a tutte come un sito
   internet». E poco dopo: «questo deve valere anche per header e barra
   laterale, una sola non 10000».

   ─── COS'ERA PRIMA, MISURATO ──────────────────────────────────────────────

   Aperte tutte e trentuno le pagine e contate le dichiarazioni, il 4 settembre:

     · i colori erano dichiarati 46 volte — `--carta` in 47 punti, `--sfondo`
       in 46 — e con undici nomi diversi per le stesse cose (`--bg`, `--panel`,
       `--fg`, `--ink`, `--line`, `--dim`, `--up`, `--down`...);
     · il carattere del corpo, 32 volte, in quindici forme diverse;
     · `.barra` — la fascia in alto — riscritta in undici pagine, in sette
       forme; `.pbarra` in sette, `.carta` in quattordici (otto forme),
       `.sotto` in quattordici (sette forme), `h1` in venti (undici forme).

   Nessuna di queste era una scelta: erano copie partite uguali e scivolate
   una per volta. E' l'unico difetto che non si corregge correggendolo.

   ─── COSA POSSIEDE QUESTO PEZZO ───────────────────────────────────────────

   POSSIEDE: i caratteri, i colori (in tutt'e due i temi e con TUTTI i nomi
   che le pagine usano), la tipografia, la fascia in alto, le carte, le
   pastiglie, i pulsanti, le tabelle, i numeri su e giu', e il comportamento
   su schermo stretto.

   NON POSSIEDE: cosa c'e' scritto dentro, e la disposizione di ogni singola
   pagina. Una pagina puo' ancora dichiarare una regola sua: sta DOPO questo
   file e vince. Ma se la dichiara, e' una decisione — non piu' una copia.

   ⚠️ CHI RIMETTE UN `:root{--sfondo:...}` IN UNA PAGINA RIFA' IL DIFETTO.
      C'e' una prova che lo vieta: `il-vestito-e-uno-solo.test.ts`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── I CARATTERI, SERVITI DA CASA ───────────────────────────────────────────
   Non da Google: un font chiesto a un server americano a ogni apertura e' una
   dipendenza esterna su ogni pagina e un indirizzo IP del cliente che esce
   dall'Europa. Sei file, 96 KB in tutto, licenza SIL Open Font (le licenze
   stanno accanto ai file). `swap` perche' il testo si legga subito col
   carattere di sistema e cambi quando il nostro e' arrivato: mai una pagina
   bianca in attesa di un font. */
@font-face{font-family:"Archivo";src:url("/caratteri/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/caratteri/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/caratteri/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/caratteri/bodoni-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/caratteri/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/caratteri/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --testo-corpo:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --testo-titolo:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --testo-numeri:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ─── I COLORI ───────────────────────────────────────────────────────────────
   Il giorno e' la partenza: la pagina del cliente nasce chiara, e non e' un
   gusto — sta nel contratto v1 §1, con la chiave `home-tema` che e' sua.

   ⚠️ L'OTTONE E' IL COLORE DEI GESTI, il verde e il rosso sono dei NUMERI.
      Per questo `--blu` — il nome che quarantatre' punti del software usano
      per «la cosa che si clicca» — qui vale ottone. Non si e' rinominato
      niente nelle pagine: si e' cambiato cosa vuol dire quel nome, in un
      posto solo. Se un colore vuol dire due cose non ne vuol dire nessuna, e
      un pulsante verde accanto a un guadagno verde e' esattamente questo. */
:root{
  --sfondo:#F5F1E9;
  --carta:#FCFAF6;
  --carta2:#EBE7DF;
  --bordo:#DDD9CF;
  --bordo-forte:#C7C2B4;
  --testo:#161A1E;
  --tenue:#60656B;
  --ottone:#825B00;
  --su:#007A43;
  --giu:#BA3630;
  --caldo:#A05C00;
  --menu:#FCFAF6;
  --ombra:none;
  --raggio:8px;
  --raggio-piccolo:6px;

  /* Lo dice al browser, non solo a noi: barre di scorrimento, campi e menu
     di sistema seguono il tema invece di restare bianchi in una pagina nera. */
  color-scheme:light;

  /* Gli undici nomi che le pagine si erano date per le stesse cose. Restano
     validi, e da oggi puntano tutti qui: nessuna pagina e' stata riscritta
     per questo, e nessuna smettera' di funzionare. */
  --blu:var(--ottone);
  --bg:var(--sfondo);        --fondo:var(--sfondo);
  --panel:var(--carta);      --panel2:var(--carta2);
  --border:var(--bordo);     --line:var(--bordo);      --linea:var(--bordo);   --linea2:var(--bordo);
  --text:var(--testo);       --fg:var(--testo);        --ink:var(--testo);     --ink2:var(--testo);
  --muted:var(--tenue);      --dim:var(--tenue);       --soft:var(--tenue);
  --accent:var(--ottone);    --accent2:var(--ottone);  --viola:var(--ottone);
  --green:var(--su);         --verde:var(--su);        --up:var(--su);         --ok:var(--su);
  --red:var(--giu);          --rosso:var(--giu);       --down:var(--giu);      --no:var(--giu);
  --yellow:var(--caldo);     --giallo:var(--caldo);
  --blu-l:var(--carta2);
}

/* La notte. Le pagine la chiedono in due modi — `body.notte` e `html.notte` —
   e tutt'e due arrivano qui. */
/* ⚠️ DUE PAGINE HANNO L'INTERRUTTORE AL CONTRARIO — `/index` e `/trader`.
   Sono nate scure, e il loro pulsante AGGIUNGE `light` per schiarirle: e' il
   contrario delle altre diciotto, che aggiungono `notte` per scurirsi. Il
   4 settembre le due strade si sono unite senza toccare il loro JavaScript:
   quelle due pagine nascono con `class="notte"` addosso, e `body.notte.light`
   — piu' specifico di `body.notte` — riporta il giorno quando l'interruttore
   scatta. Il pulsante continua a fare esattamente quello che faceva. */
body.notte, html.notte body, html.notte{
  --sfondo:#090D10;
  --carta:#13181D;
  --carta2:#1B2127;
  --bordo:#2C323A;
  --bordo-forte:#3B434C;
  --testo:#EAE6DD;
  --tenue:#949BA1;
  --ottone:#DDB961;
  --su:#65D994;
  --giu:#F47B74;
  --caldo:#F2AF48;
  --menu:#0C1114;
  --ombra:none;
  color-scheme:dark;
}

/* ─── LA TIPOGRAFIA ──────────────────────────────────────────────────────────
   Tre caratteri e tre mestieri, che non si scambiano mai:
   Bodoni Moda i titoli, Archivo il testo, IBM Plex Mono i numeri. */
body{
  margin:0;
  background:var(--sfondo);
  color:var(--testo);
  font-family:var(--testo-corpo);
  font-size:15px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/* ⚠️ IL SITO PUBBLICO CRESCE COL MONITOR, e il pannello no — voce 17 della
   lista lavori, 3 settembre 2026: «questa pagina va fatta che si adatta allo
   schermo». Sono due mestieri diversi e vanno detti tutti e due:

   · il PANNELLO e' un attrezzo denso, si guarda da vicino e per ore: 15
     punti sono la misura giusta a ogni larghezza, ed e' quella misurata dal
     vestito su quindici pagine il 4 settembre;
   · il SITO PUBBLICO e' una pagina che si LEGGE, spesso da lontano e su un
     monitor grande, ed e' la prima cosa che vede chi non ci conosce. A 2560
     punti quindici sono un testo da telefono in mezzo a un campo bianco.

   ⚠️ E STA QUI, NON DENTRO `sito.html`: il carattere lo possiede il vestito
      (`il-vestito-e-uno-solo`), e una pagina che se lo ridichiara riapre la
      strada da cui sono nate trentadue dichiarazioni in quindici forme. Qui
      il vestito dice una cosa in piu' su una famiglia di pagine, che e'
      un'altra cosa dal lasciarsele decidere da sole.

   ⚠️ E LA RIGA DI TESTO NON SI ALLUNGA: `--misura` sta in `ch`, quindi cresce
      col carattere e resta di 68 caratteri. Un testo piu' grande su una riga
      piu' lunga non si leggerebbe meglio. */
html.pagina-sito body{font-size:clamp(15px, 0.32vw + 11px, 19px)}

h1,h2,h3{font-family:var(--testo-titolo);font-weight:400;letter-spacing:-.01em}
h1{font-size:30px;line-height:1.12;margin:0 0 6px}
h2{font-size:20px;line-height:1.2;margin:26px 0 10px}
h3{font-size:17px;margin:20px 0 8px}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:underline}
.mono,code,kbd,samp{font-family:var(--testo-numeri);font-variant-numeric:tabular-nums;font-size:12.5px}
.grande{font-family:var(--testo-titolo);font-size:32px;font-weight:400;letter-spacing:-.01em;margin:2px 0}
.sotto{color:var(--tenue);font-size:13.5px}
.nota{color:var(--tenue);font-size:12px;line-height:1.6;margin-top:10px}
.etichetta{color:var(--tenue);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:500}
.su{color:var(--su)}
.giu{color:var(--giu)}

/* ─── LE CARTE ───────────────────────────────────────────────────────────────
   Erano quattordici dichiarazioni in otto forme, con tre raggi diversi (8, 14,
   16) che nessuno aveva scelto. Uno solo, e niente ombra: il Notturno tiene
   insieme con i filetti, non con le ombre. */
.carta{
  background:var(--carta);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:18px 20px;
  margin-bottom:16px;
  box-shadow:var(--ombra);
}
.pill{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:12px;
  background:var(--carta2);
  color:var(--tenue);
}
.pallino{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--tenue);vertical-align:middle}
.avviso{
  border-left:2px solid var(--caldo);
  background:var(--carta2);
  padding:12px 15px;
  font-size:13px;
  line-height:1.55;
  margin:14px 0;
}

/* La riga «etichetta a sinistra, valore a destra»: c'era in tre pagine con
   tre larghezze diverse dell'etichetta. Su schermo stretto va a capo invece
   di spingere il valore fuori dallo schermo — a 390 px sporgeva di 60. */
.rigaDato{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--bordo);font-size:14px}
.rigaDato:last-of-type{border-bottom:0}
.rigaDato .che{color:var(--tenue);min-width:190px;flex:none}
.rigaDato .val{font-weight:600}

/* ─── I PULSANTI ─────────────────────────────────────────────────────────────
   `.pieno` e' il gesto principale, ed e' ottone: il colore del prodotto. Il
   pulsante normale resta di carta con un filetto. */
button,.bottone{
  font-family:inherit;
  font-size:13px;
  background:var(--carta2);
  color:var(--testo);
  border:1px solid var(--bordo);
  border-radius:var(--raggio-piccolo);
  padding:8px 14px;
  cursor:pointer;
}
button:hover,.bottone:hover{border-color:var(--bordo-forte)}
button:disabled,.bottone:disabled{opacity:.5;cursor:default}
button.pieno,.bottone.pieno,button.primario{background:var(--ottone);border-color:var(--ottone);color:var(--sfondo);font-weight:500}
body.notte button.pieno,body.notte .bottone.pieno,body.notte button.primario{color:#0B0F14}

/* ─── LE TABELLE ─────────────────────────────────────────────────────────────
   Diciannove dichiarazioni di `th` in quattordici forme: allineamento,
   dimensione e maiuscolo cambiavano di pagina in pagina. Qui la testata e'
   sempre la stessa, e i numeri sono incolonnati perche' sono numeri. */
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;
  font-family:var(--testo-corpo);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--tenue);
  padding:8px 10px;
  border-bottom:1px solid var(--bordo);
}
td{padding:10px;border-bottom:1px solid var(--bordo);vertical-align:top}
td.num,th.num{text-align:right;font-family:var(--testo-numeri);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

/* ─── LA FASCIA IN ALTO ──────────────────────────────────────────────────────
   Simone, 4 settembre: «header e barra laterale, una sola non 10000». La
   colonna era gia' di questo file da agosto; la fascia no — `.barra` stava
   scritta in undici pagine, in sette forme, e `.pbarra` in sette.

   ⚠️ QUESTA E' LA `.barra` DICHIARATA DALLE PAGINE. La fascia che disegna
      `barra-utente.js` si chiama `#barraAlta` e la sua GEOMETRIA sta piu'
      sopra: sono due nodi diversi e non vanno confusi (un giorno intero, in
      agosto, e' andato in una regola scritta su una classe che non esisteva). */
.barra{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background:var(--carta);
  border-bottom:1px solid var(--bordo);
  padding:10px 18px;
}
.barra .marca{font-family:var(--testo-titolo);font-size:19px;letter-spacing:-.01em}
.barra .spazio{flex:1}
.pbarra{
  position:relative;
  background:transparent;
  border:1px solid var(--bordo);
  border-radius:var(--raggio-piccolo);
  padding:5px 10px;
  font-size:12px;
  line-height:1.4;
  cursor:pointer;
  color:var(--testo);
}
.pbarra:hover{border-color:var(--ottone)}
.pbarra .conta{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--giu);color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.pbarra .conta.giallo{background:var(--caldo)}
.tendina{
  position:absolute;right:0;top:calc(100% + 8px);width:min(400px,92vw);max-height:60vh;overflow:auto;
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:0 14px 40px rgba(9,13,16,.18);z-index:70;padding:10px;
}
.menuvoce{
  display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--testo);
  padding:8px 10px;border-radius:var(--raggio-piccolo);font-size:13px;cursor:pointer;
}
.menuvoce:hover{background:var(--carta2)}

/* ─── LO SCHERMO STRETTO ─────────────────────────────────────────────────────
   Regola di casa: sotto un certo punto si TOGLIE qualcosa, non si fa scorrere
   di lato. Una pagina che scorre in orizzontale su un telefono e' una pagina
   in cui meta' dei numeri non si sa che ci sono.

   ⚠️ NIENTE `overflow-x` QUI: un antenato che scorre cattura le testate
      `sticky` e le fa sparire. E' gia' costato una giornata a giugno.

   `.solo-largo` e `.solo-stretto` sono i due attrezzi con cui una tabella
   lascia indietro le colonne che non servono su un telefono. */
.solo-stretto{display:none}
@media (max-width:760px){
  body{font-size:15px}
  h1{font-size:25px}
  h2{font-size:18px}
  .carta{padding:14px 15px;border-radius:var(--raggio-piccolo)}
  table{font-size:12.5px}
  th{padding:7px 8px;font-size:10px;letter-spacing:.06em}
  td{padding:9px 8px}
  .solo-largo{display:none!important}
  .solo-stretto{display:revert}
  .barra{padding:9px 12px;gap:8px}
  /* Le griglie che le pagine dichiarano a piu' colonne tornano a una sola:
     `auto-fit` lo fa gia' da solo dove c'e', questa e' la rete per le altre. */
  .griglia,.g2,.g3,.g4{grid-template-columns:1fr!important}
}
@media (max-width:420px){
  .carta{padding:12px 13px}
  h1{font-size:22px}
}


/* ─── L'INTERRUTTORE AL CONTRARIO DI /index E /trader ─────────────────────── */
body.light, body.notte.light{
  --sfondo:#F5F1E9; --carta:#FCFAF6; --carta2:#EBE7DF; --bordo:#DDD9CF;
  --bordo-forte:#C7C2B4; --testo:#161A1E; --tenue:#60656B;
  --ottone:#825B00; --su:#007A43; --giu:#BA3630; --caldo:#A05C00;
  --menu:#FCFAF6; --ombra:none;
}

/* ─── LA TABELLA PIU' LARGA DELLA SUA CARTA ──────────────────────────────────
   Simone, 4 settembre 2026: «e' l'unica pagina nello swap che non si adatta
   allo schermo, sistemiamola».

   ⚠️ IL DIFETTO NON ERA LO SFONDAMENTO: ERA IL TAGLIO. `.carta` ha
      `overflow:hidden` per tenersi gli angoli tondi. Una tabella piu' larga
      della carta quindi NON esce e NON fa scorrere la pagina: viene TAGLIATA,
      e le colonne di destra spariscono senza lasciare traccia. Non c'e' una
      barra, non c'e' un bordo sfumato, non c'e' niente — chi guarda non sa di
      avere altre colonne. Misurato su /swapbot-broker con dati veri: da 1000
      pixel in giu' spariva una colonna, da 900 in giu' due.

   ⚠️ E SOTTO I 620 NON SERVE: li' comanda il blocco qui sotto, la tabella si
      scompone in riquadri e NON si scorre niente. Questa regola vive nella
      fascia di mezzo — la finestra stretta su uno schermo largo, il portatile
      affiancato a un altro programma — che e' precisamente dove nessuno guarda
      mai e dove la meta' dei numeri se ne stava andando.

   ⚠️ NON VA MESSA SU UN ANTENATO DELLA FASCIA: un contenitore che scorre
      cattura il `position:sticky` di `.barra`. Va sull'involucro immediato
      della tabella, e la fascia resta fuori. */
.tabellaScorre{overflow-x:auto}


/* ─── LE TABELLE SU UN TELEFONO ──────────────────────────────────────────────
   Regola di casa: sotto un certo punto si toglie, non si scorre. Una tabella
   di sette colonne su 390 pixel non si stringe: o esce dallo schermo, o
   scorre di lato — e una colonna che scorre fuori e' una colonna che il
   cliente non sa di avere.

   Sotto i 620 px ogni riga diventa un riquadro, e ogni cella si porta dietro
   il nome della sua colonna. Il nome lo scrive `tabelle-strette.js` in
   `data-eti`, leggendolo dalla testata: cosi' vale anche per le tabelle che
   nascono da JavaScript, e nessuna pagina deve dichiarare niente.

   Misurato il 4 settembre a 390 px: sporgevano `/admin` (490), `/guardia`
   (507), `/marketing` (519), `/strategie-in-numeri` (613), `/giro-solana`
   (690) e `/monitoraggio-coppie` (1105). Dopo, nessuna. */
@media (max-width:620px){
  table, tbody, tr, td{display:block;width:auto}
  thead{display:none}
  /* ⚠️ TRE TABELLE DI QUESTA CASA NON HANNO UN `<thead>`: la loro prima riga
     e' fatta di `<th>` dentro il corpo (`/giro-solana`, `/marketing`,
     `/strategie-in-numeri`). `thead{display:none}` non le raggiunge, e a 390
     pixel sporgevano di 45, 39 e 75. Qui un `th` che non sta in una testata
     si comporta come una cella qualunque. */
  tbody th, table > tr > th{display:flex;gap:12px;justify-content:space-between;
    text-align:left;padding:7px 11px;border-bottom:1px solid var(--carta2)}
  /* Le etichette che si erano date una larghezza minima per stare in colonna:
     in un riquadro alto e stretto quella larghezza e' solo un traboccamento. */
  .che{min-width:0}
  .rigaDato{flex-wrap:wrap;gap:2px 12px}
  .rigaDato .che{min-width:0}
  tr{
    border:1px solid var(--bordo);
    border-radius:var(--raggio-piccolo);
    padding:4px 2px;
    margin-bottom:10px;
    background:var(--carta);
  }
  td{
    display:flex;
    gap:12px;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:1px solid var(--carta2);
    padding:7px 11px;
    text-align:left;
  }
  tr td:last-child{border-bottom:0}
  td[data-eti]::before{
    content:attr(data-eti);
    flex:none;
    max-width:45%;
    color:var(--tenue);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.09em;
  }
  td:empty{display:none}
}


/* ─── LA FASCIA CHE DISEGNA `barra-utente.js` ────────────────────────────────
   Il 4 settembre i colori di quella fascia sono usciti dal JavaScript e sono
   diventati variabili: qui resta solo la tipografia, che e' roba del vestito.
   (Per un'ora ci sono state qui otto righe con `!important` che riportavano
   nel tema i colori scritti a mano dentro il file. Sono state tolte quando il
   file e' stato sistemato davvero: un `!important` che sovrascrive un colore
   e' una toppa, e una toppa che resta diventa la spiegazione sbagliata di
   perche' quel colore e' quello.) */
.bu-barra{font-family:var(--testo-corpo)}
.bu-marca{font-family:var(--testo-titolo);font-weight:400}

/* Il marchio nella colonna e' un marchio: si scrive col carattere dei titoli.
   (La regola sta qui e non piu' su per rispettare l'ordine del file: questa
   riga vince perche' arriva dopo, ed e' l'unico posto dove il vestito parla
   dei caratteri.) */
nav.menu .marchio{font-family:var(--testo-titolo);font-weight:400;letter-spacing:-.01em;font-size:19px}

/* ═══════════════════════════════════════════════════════════════════════════
   LA COLONNA COM'È NEL DISEGNO — 4 settembre 2026, sera
   ═══════════════════════════════════════════════════════════════════════════

   Simone, davanti alla pagina vera accanto al Figma: «ma la grafica non è come
   su figma… la voglio così».

   Aveva ragione, e le differenze erano quattro, tutte nella colonna:

     · UN BORDO BLU attorno alla voce aperta. Non era nostro e non era un
       colore della casa: era l'anello di messa a fuoco del browser, che
       Chrome disegna col SUO azzurro finché qualcuno non dice altrimenti.
       Si vedeva solo dopo un clic, ed e' il motivo per cui nelle prove non
       era mai comparso.
     · I RIQUADRI attorno ai gruppi dei prodotti. Erano una scelta vera —
       «mi piace… modalità b a riquadri», 27 agosto — ma il disegno nuovo
       tiene insieme la colonna coi filetti e con lo spazio, non con le
       cornici. La scelta di agosto viene sostituita da questa, che e' piu'
       recente ed e' stata fatta guardando le due cose affiancate.
     · LE EMOJI davanti alle voci. Vengono dal catalogo (`sezioni.ts`), non
       dal vestito, e una tavolozza di trenta emoji colorate dentro una casa
       di ottone e avorio e' l'unica cosa che grida. Qui si nascondono: il
       catalogo resta com'e', e il giorno che qualcuno vuole delle icone vere
       le disegna una volta sola.
     · IL MARCHIO ERA SOLO SCRITTO. Adesso porta il suo rombo, lo stesso del
       disegno: mezzo pieno e mezzo vuoto, con la riga della parita' in mezzo.

   ⚠️ IL ROMBO È UNA MASCHERA, NON UN'IMMAGINE COLORATA. Dentro un `data:` non
      si puo' scrivere `var(--ottone)`: il colore lo mette il fondo e la
      maschera ritaglia la forma. Cosi' il segno segue il tema — ottone scuro
      di giorno, ottone chiaro di notte — senza due copie del file. */

/* Niente piu' azzurro di sistema: l'anello di messa a fuoco e' ottone come
   ogni altro gesto. Resta ben visibile — chi naviga da tastiera deve vedere
   dov'e' — ma parla la lingua della casa. */
:focus-visible{outline:2px solid var(--ottone);outline-offset:2px}

nav.menu .gruppo.menu-prodotto{background:none;border:0;border-radius:0;padding:0}
nav.menu .gruppo.menu-prodotto>.testa{border-radius:0;padding:7px 10px}
nav.menu .gruppo.menu-prodotto>.dentro{background:none;border:0}

nav.menu .voce{border-radius:0;padding:7px 10px}
nav.menu .voce.attiva{
  background:var(--carta2);
  box-shadow:inset 2px 0 0 var(--ottone);
  font-weight:500;
}
nav.menu .voce .ico{display:none}
nav.menu .gruppo>.testa .ico{display:none}

nav.menu .gruppo .tit{letter-spacing:.16em;font-size:10px;padding:0 10px 6px}

nav.menu .marchio{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:21px;
  padding:0 10px 4px;
  margin:0 0 10px;
}
nav.menu .marchio::before{
  content:"";
  width:24px;
  height:24px;
  flex:none;
  background:var(--ottone);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 4 32 32 60z' fill='black'/><path d='M32 4 60 32 32 60 4 32z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/><path d='M32 32h28' stroke='black' stroke-width='5'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 4 32 32 60z' fill='black'/><path d='M32 4 60 32 32 60 4 32z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/><path d='M32 32h28' stroke='black' stroke-width='5'/></svg>") center/contain no-repeat;
}
/* L'ora sotto il marchio resta un'informazione della pagina, non un ornamento:
   va a capo tutta intera invece di stringersi accanto al nome. */
nav.menu .marchio .ora{flex-basis:100%;margin-left:34px}

/* ─── IL NASTRO DEL MERCATO, SOTTO LA FASCIA ─────────────────────────────────
   Simone, 4 settembre 2026: «la barra scorrevole coi valori come quella della
   borsa, subito sotto la riga che c'è ora». Lo costruisce `barra-utente.js`,
   che è il proprietario dell'header; qui c'è come è vestito.

   ⚠️ `flex-wrap:wrap` SULLA FASCIA È QUELLO CHE LO MANDA A CAPO. Il nastro è
      largo il 100% e in un contenitore flex che non va a capo si sarebbe
      schiacciato accanto agli altri fino a sparire. La fascia andava già a
      capo sotto gli 820 px: adesso lo fa sempre, e sopra quella soglia non
      cambia niente perché gli altri figli ci stanno comodi.

   ⚠️ L'ALTEZZA NON SI SCRIVE DA NESSUNA PARTE. Il rientro del contenuto viene
      da `--barra-alta`, che `menu-laterale.js` misura sulla fascia vera con un
      `ResizeObserver`: quando il nastro compare la fascia diventa più alta e
      il contenuto scende da solo. Scrivere un numero qui avrebbe voluto dire
      tenerlo allineato a mano per sempre — ed è lo stesso guasto dei 232 pixel
      raccontato più su in questo file. */
.bu-barra{flex-wrap:wrap}
.bu-nastro{
  width:100%;
  order:99;
  overflow:hidden;
  border-top:1px solid var(--bordo);
  margin:8px -18px -10px;
  padding:0 18px;
  background:var(--carta2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.bu-nastro-pista{
  display:flex;
  width:max-content;
  gap:0;
  animation:bu-scorre 60s linear infinite;
}
/* Ci si ferma col dito sopra: un valore che scappa mentre lo leggi è un
   valore che va riletto al giro dopo. */
.bu-nastro:hover .bu-nastro-pista,
.bu-nastro:focus-within .bu-nastro-pista{animation-play-state:paused}
.bu-moneta{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:7px 18px;
  font-size:12px;
  white-space:nowrap;
  color:var(--tenue);
}
/* Il rombo del marchio, in piccolo, fra una moneta e l'altra: separa senza
   aggiungere un segno nuovo alla casa. */
.bu-moneta + .bu-moneta::before{
  content:"";
  width:5px;height:5px;
  align-self:center;
  margin-left:-18px;
  margin-right:10px;
  background:var(--ottone);
  transform:rotate(45deg);
  opacity:.55;
}
.bu-moneta b{font-weight:600;color:var(--testo);letter-spacing:.02em}
.bu-moneta .bu-prezzo{font-family:var(--testo-numeri);color:var(--testo)}
.bu-moneta .bu-var{font-family:var(--testo-numeri)}
.bu-moneta .bu-var.su{color:var(--su)}
.bu-moneta .bu-var.giu{color:var(--giu)}
/* ⚠️ IL PASSO NON E' PIU' META' DELLA PISTA — 4 settembre 2026, Simone:
   «quando finiscono devono ricominciare, in pratica un nastro continuo».
   Con due copie e un salto del 50% il giro e' continuo SOLO se una copia e'
   larga almeno quanto la finestra. Cinque monete fanno seicento pixel; su una
   fascia da millecinquecento, dopo l'ultima moneta restava il vuoto fino al
   ritorno. Adesso il salto e' la larghezza di UNA copia, in pixel, e
   `barra-utente.js` mette abbastanza copie da coprire la finestra piu' il
   salto. Il 50% resta come valore di ripiego: se il pixel non arriva, il
   nastro si comporta come prima invece di stare fermo. */
@keyframes bu-scorre{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--bu-passo, 50%)))}}
/* Chi ha chiesto meno movimento non se lo trova addosso in cima a ogni
   pagina: il nastro resta fermo su quello che ci sta. */
@media (prefers-reduced-motion:reduce){
  .bu-nastro-pista{animation:none}
}
@media (max-width:620px){
  .bu-nastro{margin:8px -12px -10px;padding:0 12px}
  .bu-moneta{padding:6px 13px;font-size:11.5px}
  .bu-moneta + .bu-moneta::before{margin-left:-13px;margin-right:7px}
}

/* ─── SU UN TELEFONO IL CASSETTO STA SOPRA A TUTTO ───────────────────────────
   Simone, 4 settembre 2026, con lo screenshot dal telefono: «da mobile le
   strisce che scorrono coprono il menu».

   Erano due difetti nello stesso punto, tutti e due di ORDINE fra gli strati:

     · la fascia in alto sta a `z-index:900` (glielo scrive `barra-utente.js`)
       e il cassetto del menù stava a 80. Su uno schermo largo non si vedeva,
       perché lì la colonna non è un cassetto e non passa mai sotto la fascia;
       su un telefono il cassetto si apriva SOTTO la fascia e sotto il nastro,
       ed era esattamente il pezzo che serviva leggere.
     · lo striscione di Telegram nasce con `left:232px`, che è la larghezza
       della colonna. Ma sotto gli 820 px la colonna non c'è — è un cassetto —
       e quei 232 pixel spingevano lo striscione fuori dallo schermo a
       sinistra: nello screenshot la frase comincia con «am: serve per la tua
       sicurezza», perché «Telegram» era già uscito dal bordo.

   ⚠️ I SELETTORI SONO PREFISSATI CON `html.guscio` DI PROPOSITO. Le regole
      dello striscione e della fascia le inietta il loro JavaScript in un
      `<style>` che arriva DOPO questo foglio: a parità di specificità
      vincerebbero loro. Un nome di classe in più fa pendere la bilancia dalla
      parte giusta senza un solo `!important`. */
@media (max-width:820px){
  html.guscio nav.menu.aperta{z-index:1000}
  html.guscio .st-striscione{left:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL COLPO D'OCCHIO — dal 4 settembre 2026 sta qui, e non in admin.html
   ═══════════════════════════════════════════════════════════════════════════

   È nato in `admin.html`: il capitale in gestione, la cifra più grande della
   pagina, in cima. Dal 4 settembre lo usa anche la home del cliente, con
   dentro un altro numero — quello che ha lui — e la regola di questa casa è
   che quello che si disegna su più di una pagina ha UN posto solo.

   ⚠️ Copiarlo nella seconda pagina sarebbe stata la strada breve, e sarebbe
      durata fino al primo ritocco: due cifre grandi che si scostano di due
      pixel sono due prodotti diversi nella stessa schermata.

   La cifra si stringe da sola con `clamp`, senza una seconda regola da tenere
   allineata a mano nel punto in cui la pagina smette di starci. */
.colpoDocchio{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--bordo)}
.colpoDocchio .cifrona{
  font-family:var(--testo-titolo);
  font-size:clamp(40px,6.4vw,72px);
  line-height:1;
  letter-spacing:-.01em;
  margin:6px 0 2px;
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
}
.colpoDocchio > .sotto{font-size:13px}
.colpoDocchio .sottoDati{display:flex;gap:36px;flex-wrap:wrap;margin-top:18px}
.colpoDocchio .sottoDati .val{font-family:var(--testo-numeri);font-size:21px;margin-top:2px}
.colpoDocchio .sottoDati .sotto{font-size:12.5px}
.colpoDocchio .nota{margin-top:16px;max-width:none}

/* La percentuale sta sulla RIGA DI BASE della cifra — `align-items:baseline`
   qui sopra — perché centrata in verticale su un numero da settanta pixel
   galleggia in mezzo al vuoto e sembra staccata da lui. */
.colpoDocchio .cifrona .pastiglia{
  font-family:var(--testo-numeri);
  font-size:16px;
  padding:4px 10px;
  border:1px solid var(--bordo);
  background:var(--carta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IL REGISTRO DELLE NOTTI — la proposta A, 4 settembre 2026
   ═══════════════════════════════════════════════════════════════════════════

   Una tacca per notte, alta quanto ha reso. Non è un grafico: è un REGISTRO —
   si legge da sinistra a destra come una riga di scrittura, e la cosa che
   dice non è «quanto» ma «quante»: quante notti di fila hanno pagato.

   ⚠️ LE TACCHE SI STRINGONO, NON SI TAGLIANO. Una tacca ha `flex:1 1 0`: con
      trenta notti sono larghe, con quattrocento sono capelli. Tagliare le
      vecchie vorrebbe dire che il registro di chi lavora da un anno racconta
      un mese — e la riga sotto direbbe una data che non è quella in cui ha
      cominciato.

   ⚠️ IL DISTACCO FRA LE TACCHE LO DECIDE CHI DISEGNA, con `fitte` e
      `fittissime`: due pixel di distacco fra quattrocento tacche sono
      ottocento pixel di vuoto, cioè più larghi dello schermo, e le tacche
      diventerebbero invisibili per far posto ai buchi fra loro.

   ⚠️ E UNA NOTTE STORTA NON È UNA TACCA CORTA. Il colore lo mette chi
      disegna, che sa se quella notte ha reso o è costata: qui una tacca è
      solo una forma, e l'altezza è sempre positiva — una tacca alta zero
      sparirebbe, e una notte in perdita è la notte che più va vista. */
.registroNotti{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--bordo)}
.registroNotti .capo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.registroNotti .capo h2{margin:0;font-size:24px}
.registroNotti .tacche{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:86px;
  border-bottom:1px solid var(--bordo);
  padding-bottom:1px;
}
.registroNotti .tacche.fitte{gap:1px}
.registroNotti .tacche.fittissime{gap:0}
.registroNotti .tacche i{flex:1 1 0;min-width:1px;max-width:9px;display:block}
.registroNotti .sottoRegistro{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:11.5px;
  color:var(--tenue);
  margin-top:9px;
}
.registroNotti .sottoRegistro .conto{font-family:var(--testo-numeri);color:var(--ottone)}

/* ═══════════════════════════════════════════════════════════════════════════
   I PRODOTTI A COLONNE — filetto fra l'uno e l'altro, non una scatola per uno
   ═══════════════════════════════════════════════════════════════════════════

   Quattro carte con quattro bordi e quattro angoli tondi sono quattro oggetti
   che galleggiano; quattro colonne separate da un filetto sono UNA tabella, e
   una tabella si confronta con l'occhio invece che con la memoria.

   Il filetto è il fondo della griglia che si vede attraverso un distacco di
   un pixel: così è sempre uno solo fra due colonne, e non due bordi
   appoggiati che su certi schermi diventano spessi due pixel e su altri uno.

   ⚠️ `auto-fit` E NON `repeat(4,1fr)`. Dal 29 agosto il quadro mostra solo i
      prodotti con la licenza attiva: chi ne ha due, con quattro colonne fisse,
      si sarebbe trovato due colonne piene e mezzo schermo di filetto. */
.prodottiAColonne{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;
  background:var(--bordo);
  border-top:1px solid var(--bordo);
  border-bottom:1px solid var(--bordo);
}
/* ⚠️ LE COLONNE SI ALLINEANO IN FONDO, non in cima. Un prodotto che ha una
   riga di spiegazione in più — lo Swap Trading ne ha una — spingeva il suo
   «Capitale» dodici pixel più in basso degli altri tre, e quattro righe che
   dicono la stessa cosa a quattro altezze diverse non si confrontano più con
   l'occhio, che è tutto il motivo per cui sono colonne. A spingerlo in fondo è
   `.spinge`, un vuoto elastico con un minimo: senza il minimo, la colonna più
   alta si ritroverebbe il filetto appiccicato al testo. */
.prodottiAColonne .pezzo{
  background:var(--sfondo);
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
}
.prodottiAColonne .pezzo .spinge{flex:1 1 auto;min-height:16px}
.prodottiAColonne .pezzo .nome{font-size:13.5px;color:var(--testo)}
/* «in pausa» è uno STATO, non un pezzo del nome: senza un contorno intorno si
   legge «Trading atomico in pausa», che sembra il nome di un prodotto. */
.prodottiAColonne .pezzo .nome .mini{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--caldo);
  border:1px solid var(--bordo-forte);
  padding:1px 7px;
  margin-left:8px;
  white-space:nowrap;
}
.prodottiAColonne .pezzo .val{
  font-family:var(--testo-titolo);
  font-size:40px;
  line-height:1.1;
  margin-top:8px;
  letter-spacing:-.01em;
}
.prodottiAColonne .pezzo .sotto{font-size:12.5px}
.prodottiAColonne .pezzo .capitale{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:11px;
  border-top:1px solid var(--bordo);
  font-size:12.5px;
  color:var(--tenue);
}
.prodottiAColonne .pezzo .capitale b{font-family:var(--testo-numeri);font-weight:400;color:var(--testo)}
.prodottiAColonne .pezzo .apri{
  align-self:flex-start;
  margin-top:12px;
  font-size:13px;
  color:var(--ottone);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.prodottiAColonne .pezzo .apri:hover{text-decoration:underline}
/* Un prodotto fermo si vede che è fermo dal fondo, non da una scritta sola:
   la scritta si legge, il fondo si nota. */
.prodottiAColonne .pezzo.fermo{background:var(--carta2)}

@media (max-width:760px){
  /* ⚠️ Il registro si accorcia, non si taglia: le notti restano tutte, sono
     le tacche a farsi più basse. Su un telefono ottantasei pixel di altezza
     sono un terzo dello schermo, e il registro è la seconda cosa, non la
     prima. */
  .registroNotti .tacche{height:58px}
  .registroNotti .capo h2{font-size:20px}
  .colpoDocchio .sottoDati{gap:22px}
  .prodottiAColonne .pezzo{padding:16px 16px 14px}
  .prodottiAColonne .pezzo .val{font-size:32px}
}
