/* mtc_ticker.css — IL LISTINO IN CIMA (14-09-2026, richiesta utente: «questo mi piace,
   mettilo in tutte le versioni»). Va caricato DOPO styles.css e PRIMA del tema, così ogni
   tema può ritoccarlo. Tutto è scritto con le variabili: cambia pelle da sé.
   Sta FUORI da #root (non è un componente React): resta la stessa barra su ogni pagina del
   sito e scorre via quando la barra di navigazione si incolla in cima. */
.mtc-tick{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
/* L'etichetta sta NEL FLUSSO, non sovrapposta: sovrapposta richiedeva un riempimento
   calcolato sulla sua larghezza, e quando il testo cambiava («Mercati» → «non disponibile»)
   il numero restava quello di prima e le prime voci finivano sotto la targhetta. */
.mtc-tick-lbl{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:0 14px 0 clamp(14px,3vw,28px);background:var(--bg-2);border-right:1px solid var(--line);font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.mtc-tick-lbl i{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:mtcTickPulse 2s infinite}
.mtc-tick-lbl.off i{background:var(--text-3);animation:none}
@keyframes mtcTickPulse{0%,100%{opacity:1}50%{opacity:.25}}
.mtc-tick-vp{flex:1;min-width:0;overflow:hidden;padding:7px 0}
.mtc-tick-in{display:inline-flex;align-items:center;gap:26px;white-space:nowrap;padding-left:24px;will-change:transform;animation:mtcTickRoll 64s linear infinite}
.mtc-tick:hover .mtc-tick-in{animation-play-state:paused}
@keyframes mtcTickRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mtc-tick-it{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
.mtc-tick-it s{text-decoration:none;color:var(--text-3);letter-spacing:.14em;font-size:10px;text-transform:uppercase}
.mtc-tick-it b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.mtc-tick-it em{font-style:normal;font-variant-numeric:tabular-nums}
.mtc-tick-it em.up{color:var(--green)}
.mtc-tick-it em.dn{color:var(--red)}
.mtc-tick-it em.nd{color:var(--text-3)}
/* la fila parte dal bordo del contenitore: l'etichetta è un fratello, non una sovrapposizione */
@media (max-width:760px){.mtc-tick-lbl{display:none}.mtc-tick-vp{padding-left:0}.mtc-tick-it{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){.mtc-tick-in{animation:none}.mtc-tick-vp{overflow-x:auto}}
@media print{.mtc-tick{display:none}}

/* ---------- PANNELLO «TRADER.SCAN · IN DIRETTA» ----------
   Sta A FIANCO dell'apertura della home (richiesta utente): la sezione del Club diventa a due
   colonne — testo a sinistra, pannello a destra — e sotto i 980px torna una colonna sola, con
   il pannello che scende sotto il titolo. Due colonne o una: mai una colonna orfana. */
.mtc-hero-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(14px,2.2vw,30px);align-items:center;padding:38px clamp(16px,3vw,44px) 38px}
/* Il riquadro non deve toccare la fascia di copertine sopra: circa 1 cm d'aria (38px) in cima
   alla sezione. Il `.wrap` ha gia' il suo respiro inline, quindi gli si toglie il doppio. */
.mtc-hero-split > .wrap{padding-left:0;padding-right:0;max-width:none;padding-top:18px !important;padding-bottom:18px !important}
.mtc-hero-split > .mtc-live{padding:0;border-bottom:0;background:transparent;width:100%;max-width:460px;justify-self:center}
.mtc-hero-split > .mtc-live .mtc-live-w{margin-top:0;max-width:none}
/* LA SOGLIA È 760px E NON 980px, ed è una misura, non un gusto: `styles.css` porta
   `body{zoom:.9}`, quindi la larghezza di impaginazione dentro il body vale viewport/0.9 —
   in un riquadro da 924px sono 1027px di spazio vero. Con la soglia a 980 le due colonne non
   comparivano mai nell'anteprima, cioe' proprio dove il lavoro si guarda. */
@media (max-width:760px){
  .mtc-hero-split{grid-template-columns:minmax(0,1fr);padding:30px 0 30px;gap:0}
  .mtc-hero-split > .wrap{padding-left:24px;padding-right:24px;padding-top:12px !important;padding-bottom:12px !important}
  .mtc-hero-split > .mtc-live{max-width:none;padding:0 clamp(18px,3vw,24px) clamp(22px,3vw,30px)}
}
.mtc-live{padding:0 0 clamp(22px,3vw,34px);background:var(--bg);border-bottom:1px solid var(--line)}
.mtc-live-w{max-width:var(--maxw);margin:0 auto;padding:clamp(18px,2.4vw,26px) clamp(18px,3vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:clamp(22px,3vw,34px)}
.mtc-live-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mtc-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:mtcTickPulse 2s infinite;flex-shrink:0}
.mtc-live-t{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.mtc-live-src{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.mtc-live-src.off{color:var(--red)}
/* LE SETTE PASTIGLIE STANNO SU UNA RIGA SOLA (richiesta utente): nessun ritorno a capo, e se
   la larghezza non basta davvero la fila scorre invece di spezzarsi. */
.mtc-live-tabs{display:flex;gap:4px;flex-wrap:nowrap;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:12px 0 14px}
.mtc-live-tabs::-webkit-scrollbar{display:none;height:0}
.mtc-live-tab{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:var(--radius);color:var(--text-2);font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 8px;min-height:30px;white-space:nowrap}
.mtc-live-tab:hover{border-color:var(--text-3);color:var(--text)}
.mtc-live-tab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#000)}
.mtc-live-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,2.4vw,30px);align-items:center}
.mtc-live-left{min-width:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.mtc-live-pr{display:flex;align-items:baseline;gap:10px;justify-content:center;flex-wrap:wrap}
.mtc-live-pr b{font-family:var(--font-mono);font-size:clamp(26px,3.2vw,38px);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.mtc-live-pr em{font-style:normal;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.mtc-live-pr em.up{color:var(--green)}.mtc-live-pr em.dn{color:var(--red)}.mtc-live-pr em.nd{color:var(--text-3)}
.mtc-live-pair{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.mtc-live-facts{display:flex;gap:0;flex-direction:column;width:100%;max-width:320px;margin-top:4px}
.mtc-live-fact{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px}
.mtc-live-fact s{text-decoration:none;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.mtc-live-fact b{margin-left:auto;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums}
.mtc-live-cta{margin-top:8px}
.mtc-live-chart{display:block;width:100%;height:clamp(130px,15vw,168px)}
/* Senza dati il grafico sarebbe un buco bianco accanto a un prezzo «—»: una colonna sola. */
.mtc-live.nodata .mtc-live-body{grid-template-columns:minmax(0,1fr)}
.mtc-live.nodata .mtc-live-chart{display:none}
.mtc-live-note{font-family:var(--font-mono);font-size:10px;line-height:1.6;color:var(--text-3);margin:14px auto 0;max-width:82ch;text-align:center}
/* Dentro l'apertura il pannello è stretto: prezzo sopra, grafico sotto, sempre una colonna. */
.mtc-hero-split .mtc-live-body{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.mtc-live-body{grid-template-columns:minmax(0,1fr)}.mtc-live-src{margin-left:0;width:100%}}
/* Sono controlli cliccabili: sotto gli 880px seguono la stessa regola di .btn-sm in styles.css */
@media (max-width:880px){.mtc-live-tab{min-height:42px;padding:10px 9px}}
@media print{.mtc-live{display:none}}

/* ---------- LA FILA DELLE DISCIPLINE (TRADING · LIFECOACHING · MEDITAZIONE · FITNESS) ----------
   Richiesta utente: scritte piu' grandi, sempre centrate. I quattro pulsanti portano corpo e
   spaziatura scritti INLINE in home.jsx, quindi serve `!important`: e' l'unico modo di
   ingrandirli senza toccare un file dell'applicazione. La centratura e' gia' inline
   (justify-content:center) e non viene sfiorata. Sotto i 520px il riempimento torna stretto,
   altrimenti quattro pulsanti piu' larghi non entrerebbero nella riga.
   `main` NELLA CATENA E' OBBLIGATORIO: la barra di navigazione in cima e' anch'essa un
   `nav > .wrap`, e senza quel passaggio la regola gonfiava anche il tasto d'ingresso e il
   pulsante del menu — sei pulsanti invece di quattro. Con `main` sono esattamente i quattro. */
#root main nav > .wrap > button{font-size:14px !important;letter-spacing:.11em !important;padding:14px 17px !important}
@media (max-width:520px){#root main nav > .wrap > button{font-size:12.5px !important;padding:12px 11px !important}}

/* TITOLO DI PAGINA nell'accento del tema e in stampatello (richiesta utente: come la voce
   attiva nella barra in cima). Il segno non e' la classe — le pagine usano sia `h1.h1` sia
   `h1.h2` — ma la POSIZIONE: un h1 figlio diretto del `.wrap` dell'apertura. Cosi' restano
   fuori i titoli degli ARTICOLI del blog, che sono titoli da giornale e in maiuscolo con le
   grazie urlerebbero.
   L'apertura della HOME e' l'unica preceduta dalla fascia delle copertine: la si riconosce
   dal fratello `img` e si riporta all'inchiostro, perche' ha gia' una parola in accento. */
#root main section.grid-bg.scanlines > .wrap > h1{color:var(--accent)}
#root main img[src*="home_collage"] + section.grid-bg.scanlines > .wrap > h1{color:var(--text)}
/* L'occhiello dell'apertura va nell'INCHIOSTRO (richiesta utente): sopra un titolo in accento
   un'etichetta pure in accento sarebbe due volte la stessa voce. Piccolo e scuro sopra,
   grande e in accento sotto. */
#root main section.grid-bg.scanlines > .wrap > .eyebrow{color:var(--text)}
/* TUTTI gli occhielli nell'inchiostro, non solo quelli dell'apertura (richiesta utente su
   «I MONDI DEL CLUB»): l'occhiello è un'etichetta, e sopra un titolo in accento un'etichetta
   pure in accento è due volte la stessa voce. */
#root main .eyebrow{color:var(--text)}
/* L'occhiello della home e dell'offerta porta `color:var(--accent)` scritto INLINE: senza
   questa riga la regola qui sopra non vinceva, e il risultato era ottone sulla home e
   inchiostro sulle altre pagine — due registri diversi fra le pagine dello stesso sito. */
#root main .eyebrow[style*="var(--accent)"]{color:var(--text) !important}
/* ---------- IL PREZZO E LA SUA UNITA' SU UNA RIGA ----------
   «€1999 /una tantum» andava a capo: l'unita' non si spezza mai, e il numero può rimpicciolirsi
   quel tanto che serve a farle stare insieme nella scheda piu' strette (quattro per riga).
   Il corpo del prezzo e' scritto inline, quindi qui serve `!important`. */
#root main .stat-num + .mono{white-space:nowrap;font-size:12px}
#root main .levels-grid .stat-num{font-size:clamp(27px,2.5vw,36px) !important}
/* Stessa scelta sui titoli delle SCHEDE (richiesta utente sulle schede degli strumenti): e'
   una regola di sistema, quindi vale su tutte le schede del sito — dove il codice assegna un
   colore suo (i livelli dei corsi, per esempio) quello vince, perche' e' scritto inline. */
/* «E COSI' PER TUTTI I TITOLI» (richiesta utente): UN registro unico — accento + stampatello
   — su titolo di pagina, titoli di sezione e titoli delle schede. Restano fuori tre cose, e
   sono scelte, non dimenticanze: l'apertura della HOME (ha già una parola in accento), la
   PROSA di articoli e lezioni (i sottotitoli dentro un testo sono testo, non interfaccia) e
   il titolo dell'ARTICOLO aperto, che è un titolo da giornale. */
#root main .card h2,#root main .card h3,#root main .card h4,#root main .card .h3,
#root main h2.h2,#root main div.h2{color:var(--accent)}
#root main section.grid-bg.scanlines > .wrap > h1,
#root main h2.h2,#root main div.h2,
#root main .card h2,#root main .card h3,#root main .card h4,#root main .card .h3{text-transform:uppercase;letter-spacing:.03em}
/* STAMPATELLO (Claudio), ma SOLO sui titoli di INTERFACCIA: titolo di pagina e titoli di
   sezione, che portano la classe della scala tipografica. NON sui titoli delle schede: nel
   blog sono titoli da giornale, frasi intere — in maiuscolo con le grazie urlano. E non
   sulla prosa: i sottotitoli dentro un articolo o una lezione sono testo, non interfaccia.
   In maiuscolo serve un filo di spaziatura in piu', altrimenti le lettere si impastano. */
#root main section.grid-bg.scanlines > .wrap > h1,
#root main h2.h2,#root main div.h2{text-transform:uppercase;letter-spacing:.03em}
#root main img[src*="home_collage"] + section.grid-bg.scanlines > .wrap > h1{text-transform:none;letter-spacing:.01em}
#root main .prose h2,#root main .prose h3,#root main .prose h4,
#root main .lesson-embed h2,#root main .lesson-embed h3,#root main .lesson-embed h4{text-transform:none;letter-spacing:normal}
#root main .prose h2,#root main .lesson-embed h2{color:var(--text)}

/* 14-09-2026 — I TITOLI ANNIDATI NELL'APERTURA. La regola di sopra guarda la POSIZIONE (un h1
   figlio DIRETTO del `.wrap`): sulla pagina TRADER.SCAN il titolo sta due livelli piu' dentro
   (`.wrap > div > div > h1`), quindi restava fuori e nero. Qui si prende proprio quel caso —
   un h1 dentro un div dell'apertura — e la HOME non viene toccata perche' il suo titolo e'
   figlio diretto: la differenza di struttura fa da filtro, senza dover nominare le pagine.
   E via la spia «LIVE · 44 MERCATI» da quell'apertura (richiesta utente): il numero dei
   mercati e' gia' scritto nel testo sotto il titolo, e una spia che ripete il testo accanto a
   se stesso e' rumore. Resta accesa dove serve, nella barra dello scanner. */
#root main section.grid-bg.scanlines > .wrap > div h1.h1{color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
#root main section.grid-bg.scanlines .live-indicator{display:none}
/* E la riga dell'apertura torna CENTRATA (richiesta utente). Era a due colonne — testo a
   sinistra, spia a destra — e togliendo la spia il testo restava appoggiato a sinistra con
   mezza pagina vuota accanto: peggio di prima. Una colonna sola, centrata, come tutto il
   resto del sito. Vale per griglia e per flex: la riga porta lo stile scritto in pagina e non
   so quale dei due usa — due proprieta' invece di una lettura sbagliata. */
#root main section.grid-bg.scanlines > .wrap > div{grid-template-columns:minmax(0,1fr) !important;justify-items:center !important;justify-content:center !important;text-align:center}
/* SECONDO GIRO, e la prima correzione non bastava: portare la griglia a una colonna non
   toglie la SECONDA COLONNA se la riga la dichiara altrove — il testo restava dentro la sua
   colonna di sinistra e appariva spostato di trecento pixel, centrato rispetto a se stesso e
   non alla pagina. Qui la riga smette di essere una griglia: `display:block`. Senza colonne
   non c'e' nessuna colonna da cui restare prigionieri, e il blocco si centra da se'.
   La regola vale solo per l'apertura di questa pagina, non per le altre. */
#root main section.grid-bg.scanlines > .wrap > div{display:block !important}
#root main section.grid-bg.scanlines > .wrap > div > div{width:100% !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;text-align:center !important}

/* ---------- IL COLORE SCURO NELLE SCRITTE (richiesta utente, corretta dopo un mio errore) ----------
   AVEVO CAPITO AL CONTRARIO: l'utente aveva indicato una riga nell'INCHIOSTRO scuro e chiedeva
   quel colore nelle altre scritte del sito; io ci ho messo l'ocra dell'accento, cioe' ho fatto
   l'opposto — e su un'intera pagina si vede. Adesso le scritte piccole e le etichette
   passano dal grigio all'INCHIOSTRO del tema: piu' contrasto, nessun ocra.
   Restano in accento soltanto i TITOLI (richiesta precedente) e i COLLEGAMENTI dentro la
   prosa, che devono restare distinguibili dal testo intorno: un link dello stesso colore del
   testo non si vede. */
#root main .term-head,#root main .field-label{color:var(--text)}
#root main div.mono,#root main span.mono{color:var(--text)}
#root main .prose strong,#root main .prose b,
#root main .lesson-embed strong,#root main .lesson-embed b{color:var(--text)}
#root main .prose a,#root main .lesson-embed a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
/* Escluse per nome: prosa, lezioni, registro e avvertenza — lì il colore lo decide il
   contenuto (leggere, o avvertire), non l'uniformità. */
#root main .prose .mono,#root main .lesson-embed .mono,
#root main .journal-table .mono,#root main .journal-table div.mono,#root main .journal-table span.mono,
#root main .disclaimer,#root main .disclaimer div.mono,#root main .disclaimer span.mono{color:var(--text-2)}

/* ---------- IL TESTO DELLE SCHEDE SI LEGGE DI PIU' (richiesta utente: «prova con entrambe») ----------
   Il colore era gia' l'inchiostro pieno: quello che mancava era il PESO OTTICO. Un testo a
   14px su carta avorio sembra piu' tenue di un titolo dello stesso colore, quindi si alzano
   corpo (15px), interlinea e peso (500) — non il colore, che non ha piu' margine.
   `!important` perche' corpo e interlinea sono scritti inline nelle pagine. Fuori: le note
   legali e le diciture in monospaziato (devono restare piccole) e la prosa degli articoli,
   che ha la sua scala. */
#root main .card p:not(.mono):not(.disclaimer){font-size:15px !important;line-height:1.6 !important;font-weight:500}
#root main .prose p,#root main .lesson-embed p{font-weight:400}

/* ---------- TESTI STRETTI DAVVERO CENTRATI ----------
   Difetto trovato dall'utente: la riga «Senza registro non sai se il metodo funziona» ha
   `text-align:center` ma anche un `max-width` scritto inline SENZA margini automatici —
   quindi il blocco resta appoggiato a sinistra della colonna e il testo centrato dentro un
   blocco spostato sembra storto. Qui i margini orizzontali diventano automatici: solo quelli,
   cosi' i margini verticali scritti nelle pagine restano intatti.
   È la regola permanente del progetto (tutto centrato) applicata anche a questi casi. */
#root main div[style*="max-width"],#root main p[style*="max-width"],#root main span[style*="max-width"]{margin-left:auto !important;margin-right:auto !important}

/* ---------- RICHARD NEI COLORI DEL TEMA ----------
   Buona notizia, verificata leggendo il suo foglio: Richard e' gia' scritto con le variabili
   (`var(--surface)`, `var(--line)`, `var(--accent)`), quindi pannello, bordi e testi seguono
   il tema da se'. Restavano fuori QUATTRO cose con l'ambra vecchia scritta a mano — l'alone
   dell'avatar, la nuvoletta di chi scrive, il nero sul pulsante d'azione e gli angoli vivi.
   Qui si allineano. Selettori con `#mtc-richard` davanti: il suo foglio viene iniettato a
   pagina viva, quindi arriva DOPO questo — a parita' di peso vincerebbe lui, con l'id no. */
#mtc-richard .rc-fab:hover .rc-av-img{filter:drop-shadow(0 0 15px color-mix(in oklab,var(--accent) 55%,transparent))}
#mtc-richard .rc-u{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 42%,transparent);color:var(--text)}
#mtc-richard .rc-go:hover{background:var(--accent);color:var(--on-accent,#000)}
#mtc-richard button{border-radius:var(--radius-sm)}
/* I pulsanti dentro Richard: il suo foglio dichiara `#mtc-richard button{border-radius:0}` con
   lo stesso peso del mio e arriva DOPO (viene iniettato a pagina viva), quindi restavano
   squadrati dentro un pannello arrotondato. Con le classi il peso e' maggiore e vincono. */
#mtc-richard .rc-chip,#mtc-richard .rc-go,#mtc-richard .rc-x,#mtc-richard .rc-send,#mtc-richard .rc-mini,#mtc-richard .rc-ai button{border-radius:var(--radius-sm)}
#mtc-richard .rc-panel,#mtc-richard .rc-hi{border-radius:var(--radius)}
#mtc-richard .rc-panel{box-shadow:var(--shadow)}
/* L'AURA SI COLORA AL CLIC, non sempre (richiesta utente: «come prima»). L'alone fisso che
   avevo messo un giro fa era sempre acceso: tolto. Resta il bagliore del disegno, ora nel
   colore del tema invece dell'ambra scritta a mano, e l'alone pieno compare al passaggio e
   al clic. Il DISEGNO invece e' ritinto nel file: una regola non può ricolorare un PNG. */
#mtc-richard .rc-fab-av{background:none}
#mtc-richard .rc-av-img{filter:none}
#mtc-richard .rc-fab:hover .rc-av-img,#mtc-richard .rc-fab:active .rc-av-img,#mtc-richard .rc-fab:focus-visible .rc-av-img{filter:drop-shadow(0 0 16px color-mix(in oklab,var(--accent) 58%,transparent))}
#mtc-richard .rc-av-glow{background:radial-gradient(circle,color-mix(in oklab,var(--accent) 62%,transparent) 0%,color-mix(in oklab,var(--accent) 22%,transparent) 45%,transparent 70%)}
#mtc-richard .rc-fab{border-radius:var(--radius-sm)}

/* ---------- LE IMMAGINI NELLA TAVOLOZZA DEL TEMA ----------
   Richiesta utente: «aggiorna tutte le immagini con i nuovi colori». Una fotografia non si
   «ricolora» davvero — quello che si fa in editoria è portarla su DUE toni, i tuoi: qui ogni
   tema dichiara il suo viraggio in `--img-tint` e tutte le immagini del sito lo prendono,
   senza toccare un file. Al passaggio del mouse tornano ai colori veri: chi vuole vedere la
   fotografia com'è la vede.
   TRE ESCLUSIONI: il logo e il marchio (sono il marchio, non decorazione), l'avatar di
   Richard (è già ritinto nel file) e le schermate di TRADER.SCAN — quelle mostrano DATI, e
   virare un grafico vuol dire falsare i colori che dicono su e giù. */
#root main img,#root main figure img{filter:var(--img-tint,none);transition:filter .3s ease}
#root main img:hover{filter:none}
#root main .logo-mark-img,#root main .logo-full-img,#root main img[src*="scan_"],#root main img[src*="logo"],#mtc-richard img{filter:none}

/* ---------- L'INTERRUTTORE DEI POPUP (mtc_popup.js) ---------- */
.mtc-pop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 16px;text-align:center}
.mtc-pop-note{font-family:var(--font-mono);font-size:11px;line-height:1.55;color:var(--text-2);max-width:70ch}

/* IL TITOLO DI PAGINA IN AMBRA ANCHE CON LA CLASSE .h3 (richiesta utente sulla pagina Avvisi:
   quel titolo e' un h1 che porta .h3 per stare piu' piccolo, quindi le regole sulla scala non
   lo prendevano). Escluso chi porta un carattere scritto inline: e' il titolo dell'ARTICOLO
   del blog, che e' un titolo da giornale e in stampatello ambra urlerebbe. */
#root main .wrap > div > h1.h1:not([style*="font-family"]),
#root main .wrap > div > h1.h3:not([style*="font-family"]),
#root main .wrap > h1.h3:not([style*="font-family"]){color:var(--accent);text-transform:uppercase;letter-spacing:.03em}