/* ===========================================================================
   GNOSPHERA · AREA RISERVATA — token e primitive
   ---------------------------------------------------------------------------
   Sostituisce le parti in conflitto di css/account.css e css/account-dashboard.css.
   Includere PRIMA di ogni altro foglio in /account.

   Oggi i due file definiscono due neri (#0a0e1a / #07070a), due gialli
   (#fbbf24 / #ffc11e) e due tipografie. Qui ce n'è una sola.

   Tema chiaro: <html data-tema="chiaro"> (o body). Nient'altro cambia:
   spaziature, altezze e allineamenti sono identici nei due temi.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  /* ── superfici ── */
  --bg:#0a0c11;          /* area di contenuto */
  --panel:#0d1016;       /* sidebar, contenitori */
  --line:#1b202a;        /* filetto: l'unico separatore ammesso */
  --line-2:#262c38;      /* bordo dei controlli */

  /* ── testo: tre livelli, mai un quarto ── */
  --tx:#eaedf3;
  --tx-2:#8f97a6;
  --tx-3:#7c8494;        /* limite minimo: sotto i 12px serve 4.5:1 */

  /* ── accento e gravità ──
     Il colore indica SEMPRE la gravità, mai la categoria.
     --am sta fuori dalla scala: se coincidesse con --med non si
     distinguerebbe «filtro attivo» da «gravità media». */
  --am:#ffc11e;          /* accento, stato attivo, link */
  --am-h:#ffd45c;        /* hover */
  --am-ink:#1a1206;      /* testo sopra l'accento */
  --ok:#3cba57;
  --med:#c9a227;
  --high:#f0832a;
  --crit:#e05545;
  /* ── fuori dalla scala, come --am ──
     Il TOTALE non e' una gravita': «10 crisi attive» non e' ne' piu' ne' meno
     grave di «6 rosse», e' l'insieme che le contiene. Se prendesse un colore
     della scala direbbe una gravita' che non ha. Percio' un colore che nella
     scala non c'e'. Richiesta del titolare, 13/09. */
  --fu:#e879f9;          /* fucsia: totali e insiemi */

  /* ── tipografia ── */
  --f:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,monospace;
  --fd:"Space Grotesk",var(--f);

  /* ── spaziatura: nove valori, nessun altro ──
     Se un margine non è in questa lista, è sbagliato. */
  --s1:4px;   /* etichetta → valore */
  --s2:6px;   /* etichetta di campo → campo; fra bottoni affiancati */
  --s3:9px;   /* pallino → testo; intestazione → prima riga */
  --s4:14px;  /* fra celle; fra filtri */
  --s5:18px;  /* fra elementi di una riga; fra box verticali */
  --s6:22px;  /* titolo di blocco → contenuto */
  --s7:28px;  /* padding verticale di sezione */
  --s8:34px;  /* margine di pagina — asse verticale unico */
  --s9:46px;  /* fra due colonne */

  /* ── altezze fisse ── */
  --h-top:60px;      /* topbar */
  --h-ni:32px;       /* voce di navigazione */
  --h-sni:29px;      /* sotto-voce */
  --h-bt:34px;       /* bottone — stessa altezza del campo */
  --h-bt-sm:28px;
  --h-inp:34px;
  --h-chip:29px;
  --h-pg:28px;       /* paginazione, quadrata */
  --h-tabs:56px;     /* tab bar mobile */

  /* ── larghezze ── */
  --w-side:214px;    /* sidebar, fissa */
  --w-rail:350px;    /* colonna di moduli */
  --w-inp:320px;     /* campo, massimo */
  --w-tip:300px;     /* tooltip */
  --w-mk:420px;      /* scheda di dettaglio */
  --m-text:64em;     /* misura del testo corrente */
  --m-hero:25em;     /* giudizio di apertura */

  /* ── raggi: otto valori. Il contenuto non si arrotonda ── */
  --r1:2px; --r2:4px; --r3:5px; --r4:6px; --r5:7px; --r6:8px; --r7:10px; --rp:99px;

  /* ── ombre: solo due, per ciò che sta SOPRA la pagina ── */
  --sh-tip:0 14px 38px rgba(0,0,0,.45);
  --sh-mk:0 20px 50px rgba(0,0,0,.5);
}

/* ===========================================================================
   TEMA CHIARO — solo colori. Le misure non si toccano.
   Su bianco l'ambra va scurita (#ffc11e come testo dà 1.8:1) e gli stati
   attivi non possono essere velature di bianco.
   =========================================================================== */
[data-tema="chiaro"]{
  --bg:#ffffff;
  --panel:#f7f8fa;
  --line:#e6e8ec;
  --line-2:#d3d7de;
  --tx:#1a1d23;
  --tx-2:#5b6270;
  --tx-3:#63697a;
  --am:#8d5f00;      /* 5.56:1 su bianco */
  --am-h:#6f4a00;
  --am-ink:#ffffff;  /* su #8d5f00 il bianco batte il nero */
  --ok:#24763a;
  --med:#8a6a12;
  --high:#ad4b0c;
  --crit:#c0392b;
  --fu:#a21caf;      /* 7.4:1 su bianco: il fucsia acceso dello scuro qui sparisce */
  --sh-tip:0 12px 34px rgba(18,24,36,.14);
  --sh-mk:0 18px 44px rgba(18,24,36,.16);
  --st-on:#ecedf1;   /* stato attivo: grigio pieno, non velatura */
}
:root{ --st-on:rgba(255,255,255,.05); }

/* ===========================================================================
   BASE
   =========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f)}
a{color:var(--am);text-decoration:none}
a:hover{color:var(--am-h)}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ── guscio ── */
.gn-shell{display:flex;min-height:100vh}
.gn-side{width:var(--w-side);flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:var(--s6) 10px var(--s5)}
.gn-main{flex:1;display:flex;flex-direction:column;min-width:0}
.gn-top{height:var(--h-top);flex:none;display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s8);border-bottom:1px solid var(--line)}
.gn-wrap{padding:0 var(--s8)}
.gn-foot{display:flex;align-items:center;gap:26px;padding:20px var(--s8);border-top:1px solid var(--line)}
.gn-hr{height:1px;background:var(--line)}

/* ── navigazione ── */
.gn-brand{display:flex;align-items:center;gap:11px;padding:0 10px var(--s7)}
.gn-brand img{width:20px;height:20px;display:block;flex:none}
.gn-brand span{font:600 12px var(--fd);letter-spacing:.2em;color:var(--tx)}
.gn-gl{font:500 9px var(--f);letter-spacing:.18em;color:var(--tx-3);padding:var(--s5) 10px 7px}
.gn-ni{display:block;padding:7px 10px;border-radius:var(--r5);color:var(--tx-2);font-size:13px;position:relative}
.gn-ni.on{color:var(--tx);background:var(--st-on)}
.gn-ni.on::before{content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);width:2px;border-radius:var(--r1);background:var(--am)}
.gn-ni .n{position:absolute;right:10px;top:8px;font:500 10px var(--fm);color:var(--crit)}
/* sotto-sezioni: UN SOLO modello di navigazione, mai sidebar + tab */
.gn-sub{padding:2px 0 var(--s2) 12px;margin-left:10px;border-left:1px solid var(--line)}
.gn-sni{display:block;padding:6px 10px;border-radius:var(--r4);color:var(--tx-2);font-size:12.5px;position:relative}
.gn-sni.on{color:var(--tx);background:var(--st-on);font-weight:500}

/* ── apertura di pagina ── */
.gn-eyebrow{font:500 10px var(--f);letter-spacing:.18em;color:var(--tx-3);text-transform:uppercase}
.gn-lv{display:inline-flex;align-items:center;gap:11px;margin:20px 0 16px}
.gn-lv i{width:9px;height:9px;border-radius:50%;display:block}
.gn-lv span{font:500 11px var(--f);letter-spacing:.2em}
/* Nella vetrina pallino E parola prendono il colore del livello, ma il foglio non
   lo dichiarava: ogni pagina se lo riscriveva in locale. Stessi nomi di `.gn-d`. */
.gn-lv.crit span{color:var(--crit)}
.gn-lv.high span{color:var(--high)}
.gn-lv.med span{color:var(--med)}
.gn-lv.ok span{color:var(--ok)}
/* ⚠ E il PALLINO, non solo la parola. Il foglio colorava `span` e lasciava `i`
   trasparente, cosi' ogni pagina si riscriveva la regola in locale (la
   dashboard ha le sue `.lv-*`). Un pallino senza colore accanto a una parola
   colorata non e' «pallino piu' parola» (regola 3): e' una parola e un buco. */
.gn-lv.crit i{background:var(--crit)}
.gn-lv.high i{background:var(--high)}
.gn-lv.med  i{background:var(--med)}
.gn-lv.ok   i{background:var(--ok)}
/* Variante: la frase in maiuscolo. ⚠ Sta QUI e non in una regola locale della
   pagina, perche una variante che il foglio non copre si aggiunge al foglio.
   ⚠ E non si applica a .gn-lv in generale: su dashboard e report la frase e
     una frase di senso compiuto («Quello che conta di ieri, senza il rumore»),
     e in maiuscolo si leggerebbe come un allarme. Maiuscolo dove la frase e
     un ETICHETTA, non dove e un giudizio. */
.gn-lv.maiuscolo span{text-transform:uppercase}
.gn-hero{padding:26px 0 40px}
.gn-hero h1{font:400 31px/1.36 var(--fd);letter-spacing:-.015em;color:var(--tx);margin:0;max-width:var(--m-hero)}
.gn-hero h1 b{font-weight:600}
.gn-hero .meta{font:400 11.5px var(--fm);color:var(--tx-3);margin-top:var(--s6)}

/* ── sezione ── */
.gn-sec{padding:var(--s7) 0}
.gn-sh{display:flex;align-items:baseline;gap:12px;margin-bottom:3px}
.gn-sh h2{font:500 12px var(--f);letter-spacing:.16em;color:var(--tx-3);margin:0;text-transform:uppercase}
.gn-sh .cnt{font:400 10.5px var(--fm);color:var(--tx-3)}
.gn-sh a{margin-left:auto;font-size:12.5px}
/* Ritmo fra intestazione e contenuto. Nella vetrina questo spazio è uno `style`
   in linea sulle tabelle (`margin-top:12px`): è il ponteggio della demo, e senza
   la regola qui ogni pagina se lo riscrive. La seconda riga separa due blocchi
   intestazione+tabella affiancati nella stessa sezione, che altrimenti si
   leggono come un'unica tabella con le colonne della prima. */
.gn-sh + .gn-tb,.gn-sh + .gn-vbs,.gn-sh + .gn-kv{margin-top:var(--s4)}
.gn-tb + .gn-sh,.gn-vbs + .gn-sh,.gn-kv + .gn-sh{margin-top:var(--s7)}
.gn-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.gn-grid-rail{display:grid;grid-template-columns:minmax(0,1fr) var(--w-rail);gap:24px;align-items:start}

/* ── numeri ── */
.gn-nums{display:flex;gap:54px;padding:var(--s6) 0}
.gn-nums .v{font:500 25px var(--fd);line-height:1.1}
.gn-nums .v s{text-decoration:none;font:400 12px var(--fm);color:var(--tx-3);margin-left:5px}
.gn-nums .k{font:500 10px var(--f);letter-spacing:.14em;color:var(--tx-3);margin-top:var(--s2);text-transform:uppercase}

/* ── tabella: filetti, nessun bordo esterno, baseline ── */
.gn-tb{width:100%;border-collapse:collapse;font-size:13.5px}
.gn-tb th{font:500 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);
  text-align:left;padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:500}
.gn-tb th.r,.gn-tb td.r{text-align:right;padding-right:0}
.gn-tb td{padding:13px var(--s4) 13px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.gn-tb tr:last-child td{border-bottom:none}
.gn-tb .who{color:var(--tx);font-weight:500}
.gn-tb .sub{display:block;font-size:11.5px;color:var(--tx-3);margin-top:3px;font-weight:400}
.gn-tb .mn{font:400 12px var(--fm);color:var(--tx-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.gn-tb .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:var(--s3);vertical-align:middle}
/* Il display:none di [hidden] vive nel foglio del BROWSER e perde contro
   qualunque regola d-autore che imposti display: .crx-stats, .it-stats, .gn-lv e
   .riga-8 lo fanno, e quegli elementi restavano VISIBILI pur avendo scritto
   hidden nel markup. Misurato il 13/09 su 31 pagine: 11 casi.
   Chi accende un elemento deve usare el.hidden = false, non style.display. */
[hidden]{display:none !important}
.gn-tablewrap{overflow-x:auto}   /* oltre 6 colonne: scorre, non nasconde */
/* Celle secondarie. Negli HTML di riferimento .dim esiste solo nel foglio della
   vetrina: senza, ogni pagina se lo riscrive in locale ed e' cosi' che le misure
   ricominciano a divergere (README, «Regola di processo»). */
.gn-tb .dim{color:var(--tx-2)}
/* Prima colonna NUMERICA (una magnitudo, un punteggio): e' l'identita' della riga,
   quindi ha il peso di `.who`, ma incolonnata. `.mn` qui non basta: e' pensata per
   un dato di contorno e riporta peso e colore a quelli secondari. */
.gn-tb .num{font:500 15px var(--fd);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Riga che apre un dettaglio: il segno e' il titolo, non un bordo o una campitura. */
.gn-tb tbody tr.cl{cursor:pointer}
.gn-tb tbody tr.cl:hover .who{color:var(--am)}

/* ── pallino di gravita': la stessa scala dentro e fuori dalla tabella ──
   Serve perche' `.gn-tb .dot` da' la geometria ma NON il colore, e la vetrina lo
   passa con uno `style` in linea — proprio cio' che la regola 15 vieta.
   Una classe per livello, mai un colore scritto nel markup. */
.gn-d{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;vertical-align:middle}
.gn-d.crit{background:var(--crit)}
.gn-d.high{background:var(--high)}
.gn-d.med{background:var(--med)}
.gn-d.ok{background:var(--ok)}
.gn-d.nd{background:var(--tx-3)}   /* non determinato: grigio, non assente */

/* ── barra di avanzamento ──
   ⚠ La larghezza arriva da una VARIABILE, non da `style="width:74%"`: è l'unico
     stile in linea che il pacchetto ammette, e lo ammette proprio così
     (README, «Regola di processo»). Un `width` scritto nel markup è una misura
     che vive fuori dal foglio; `--v` è un dato che il foglio sa come usare.
   Verde perché misura ciò che è GIÀ propagato: stessa semantica dei pallini. */
.gn-bar{height:6px;border-radius:var(--r2);background:var(--line);overflow:hidden}
.gn-bar i{display:block;height:100%;width:var(--v,0);background:var(--ok);border-radius:var(--r2)}

/* ── avanzamento di una catena: uno stadio, un pallino ──
   ⚠ Sembra la «pillola colorata multipla» che la regola 3 vieta, e non lo è:
     quella regola vieta più indicatori DIVERSI sulla stessa riga. Qui c'è un
     indicatore SOLO — quanto lontano si è propagata — reso come sequenza, come
     una barra di avanzamento fatta di passi discreti. La parola accanto resta.
   ⚠ La semantica dei colori è quella già dichiarata in /account/scenari, e non
     va reinventata: verde = propagato, ambra = atteso in finestra,
     rosso = non è arrivato (catena interrotta), grigio = non osservabile.
     Ambra qui è uno STATO, non un livello: per questo sta fuori dalla scala. */
.gn-steps{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.gn-steps i{width:8px;height:8px;border-radius:50%;flex:none;box-sizing:border-box;display:block}
.gn-steps i.ok{background:var(--ok)}
.gn-steps i.att{border:1.5px solid var(--am)}
.gn-steps i.ko{background:var(--crit)}
.gn-steps i.na{border:1.5px solid var(--line-2)}
/* confermato ma FUORI SEQUENZA: pieno, perché è successo davvero — ma non verde,
   perché non è un effetto propagato dalla crisi. La differenza è il punto. */
.gn-steps i.iso{background:var(--tx-2)}
/* fonte che NON sta misurando: tratteggio, cioè «qui c'è qualcosa e non lo
   leggiamo». Deliberatamente diverso sia da .att (ambra vuoto = atteso, la
   finestra scorre) sia da .na (grigio vuoto = fonte mai collegata): il pallino
   ambra prometterebbe un'attesa che non esiste. */
.gn-steps i.cieco{border:1.5px solid var(--tx-2);
  background:repeating-linear-gradient(45deg,var(--tx-2) 0 1px,transparent 1px 3px)}

/* ── prosa prodotta dai dati (analisi, sintesi) ──
   Non e' una spiegazione di metodo (quella sta nel tooltip, regola 5): e' un dato
   testuale. Corpo 13.5/1.6 come le celle, misura del testo corrente. */
.gn-pz{font:400 13.5px/1.6 var(--f);color:var(--tx-2);margin:0;max-width:var(--m-text);white-space:pre-line}
/* ⚠ Dentro una griglia con rail la misura la da' GIA' la colonna: tenere anche
   `--m-text` significa fermare il testo a 864px e lasciare 370px di vuoto fra la
   fine delle righe e il bordo della colonna. Una misura sola, non due. */
.gn-grid-rail .gn-pz,.gn-cols .gn-pz{max-width:none}
.gn-fl .sp{flex:1}   /* separa due gruppi di filtri sulla stessa riga */

/* ── righe ── */
.gn-row{display:flex;gap:var(--s5);align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
.gn-row:last-child{border-bottom:none}
.gn-row .d{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;align-self:flex-start}
.gn-row .c{flex:1;min-width:0}
.gn-row .t{font:500 15px var(--f);color:var(--tx)}
.gn-row .p{font-size:13px;line-height:1.6;color:var(--tx-2);margin-top:5px}
.gn-row .when{font:400 11px var(--fm);color:var(--tx-3);white-space:nowrap;flex:none}
/* riga di area: colonne FISSE, così le righe si incolonnano fra loro */
.gn-ar{display:flex;align-items:center;gap:var(--s5);padding:15px 0;border-bottom:1px solid var(--line)}
.gn-ar:last-child{border-bottom:none}
.gn-ar .nm{width:170px;flex:none;font:500 14.5px var(--f);color:var(--tx)}
.gn-ar .st{width:92px;flex:none;font:500 11px var(--f);letter-spacing:.12em}
.gn-ar .num{width:60px;flex:none;font:500 17px var(--fd);text-align:right}
.gn-ar .ex{flex:1;font-size:12.5px;color:var(--tx-2)}
/* blocco personale: l'UNICA campitura ammessa nel contenuto */
.gn-you{border-left:2px solid var(--crit);padding:2px 0 2px 20px}
[data-tema="chiaro"] .gn-you{background:#fdf4f2;padding:10px 18px 10px 20px}

/* ── classifica ── */
.gn-rk{display:grid;grid-template-columns:130px 1fr 44px;gap:var(--s4);align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.gn-rk:last-child{border-bottom:none}
.gn-rk .gn2{color:var(--tx);font-size:13.5px;font-weight:500}
.gn-rk .gb{height:5px;background:#161a22;border-radius:3px;overflow:hidden}
[data-tema="chiaro"] .gn-rk .gb{background:#e9ebef}
.gn-rk .gb i{display:block;height:100%;background:var(--high);border-radius:3px}
.gn-rk .gq{font:500 12.5px var(--fm);color:var(--tx-2);text-align:right;font-variant-numeric:tabular-nums}

/* ── bottoni: un solo primario per pagina ── */
.gn-bt{display:inline-flex;align-items:center;gap:7px;height:var(--h-bt);padding:0 16px;
  border-radius:var(--r5);border:1px solid transparent;font:500 13px var(--f);cursor:pointer;text-decoration:none}
.gn-bt-p{background:var(--am);color:var(--am-ink);font-weight:600}
.gn-bt-p:hover{background:var(--am-h)}
.gn-bt-s{background:transparent;color:var(--tx);border-color:var(--line-2)}
.gn-bt-s:hover{border-color:var(--tx-3)}
.gn-bt-g{background:transparent;color:var(--tx-2);padding:0 10px}
.gn-bt-g:hover{color:var(--tx);background:var(--st-on)}
.gn-bt-d{background:transparent;color:var(--crit);border-color:color-mix(in srgb,var(--crit) 38%,transparent)}
.gn-bt-sm{height:var(--h-bt-sm);padding:0 11px;font-size:12px}
.gn-bt[disabled]{opacity:.4;pointer-events:none}

/* ── form: etichetta sempre sopra ── */
.gn-fg{display:flex;flex-direction:column;gap:var(--s2);max-width:var(--w-inp)}
.gn-fg label{font:500 10px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.gn-inp{height:var(--h-inp);padding:0 12px;border-radius:var(--r5);border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:400 13px var(--f);width:100%}
.gn-inp:focus{outline:none;border-color:var(--am)}
.gn-inp::placeholder{color:var(--tx-3)}
.gn-fg .hint{font-size:11.5px;color:var(--tx-3);line-height:1.5}
.gn-addrow{display:flex;gap:var(--s2) 8px;align-items:center;max-width:420px}
.gn-addrow .gn-inp{flex:1}
.gn-cbx{display:flex;align-items:center;gap:var(--s3);font-size:13px;color:var(--tx)}
.gn-cbx i{width:16px;height:16px;border-radius:var(--r2);border:1px solid var(--line-2);
  display:grid;place-items:center;font-style:normal;font-size:10px;color:transparent;flex:none}
.gn-cbx.on i{border-color:var(--am);background:var(--am);color:var(--am-ink)}
.gn-sw{width:32px;height:18px;border-radius:var(--rp);background:#1b202a;border:1px solid var(--line-2);position:relative;flex:none}
[data-tema="chiaro"] .gn-sw{background:#e6e8ec}
.gn-sw::after{content:"";position:absolute;left:2px;top:1.5px;width:13px;height:13px;border-radius:50%;background:var(--tx-3);transition:.14s}
.gn-sw.on{background:var(--am);border-color:var(--am)}
.gn-sw.on::after{left:15px;background:var(--am-ink)}

/* ── filtri ── */
.gn-fl{display:flex;align-items:center;gap:8px;padding:16px 0 4px;flex-wrap:wrap}
.gn-ch{padding:6px 13px;border-radius:var(--rp);border:1px solid var(--line-2);color:var(--tx-2);font-size:12.5px;white-space:nowrap;cursor:pointer}
.gn-ch.on{border-color:var(--am);color:var(--am)}
.gn-sel{padding:6px 13px;border-radius:var(--r5);border:1px solid var(--line-2);color:var(--tx-2);font-size:12.5px}
.gn-pn{display:flex;gap:5px}
.gn-pn span{min-width:var(--h-pg);height:var(--h-pg);display:grid;place-items:center;
  border-radius:var(--r4);border:1px solid var(--line);font:400 12px var(--fm);color:var(--tx-2)}
.gn-pn span.on{border-color:var(--am);color:var(--am)}

/* ── elenco gestibile ── */
.gn-mi{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.gn-mi:last-child{border-bottom:none}
.gn-mi .nm{flex:1;font:500 13.5px var(--f);color:var(--tx)}
.gn-mi .ct{font:400 11px var(--fm);color:var(--tx-3)}
.gn-mi .rm{width:24px;height:24px;border-radius:var(--r4);display:grid;place-items:center;
  color:var(--tx-3);font-size:13px;cursor:pointer;border:1px solid transparent}
.gn-mi .rm:hover{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 38%,transparent)}

/* ── stati: il vuoto si dichiara ── */
.gn-empty{padding:26px 0;font-size:13px;color:var(--tx-3);text-align:center;border:1px dashed var(--line-2);border-radius:var(--r6)}
.gn-msg{display:flex;align-items:flex-start;gap:10px;padding:11px var(--s4);font-size:12.5px;line-height:1.55;color:var(--tx)}
.gn-msg-ok{background:color-mix(in srgb,var(--ok) 9%,transparent);border-left:2px solid var(--ok)}
.gn-msg-wr{background:color-mix(in srgb,var(--am) 9%,transparent);border-left:2px solid var(--am)}
.gn-msg-er{background:color-mix(in srgb,var(--crit) 9%,transparent);border-left:2px solid var(--crit)}

/* ── icone: sprite SVG, tratto unico, colore da currentColor ──
   Sostituisce emoji e glifi tipografici. Includere gnosphera-icone.svg una volta
   in account-top.asp, poi: <svg class="gn-ic"><use href="#ic-cerca"/></svg>
   Il tratto NON si riscala con la misura: 1.7 a 16, 18 e 20px. */
.gn-ic{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px}
.gn-ic-18{width:18px;height:18px}
.gn-ic-20{width:20px;height:20px}

/* ── etichette ── */
.gn-tag{display:inline-block;padding:3px 9px;border-radius:var(--r3);border:1px solid var(--line-2);
  font:500 10.5px var(--f);letter-spacing:.06em;color:var(--tx-2)}
.gn-tag.ris{border-color:color-mix(in srgb,var(--crit) 42%,transparent);color:var(--crit);font-family:var(--fm);letter-spacing:.1em}
.gn-back{display:inline-block;font-size:13px;color:var(--am)}

/* ── tooltip: le spiegazioni NON stanno in pagina come testo ── */
.gn-ti{display:inline-flex;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);
  color:var(--tx-3);font:500 9px var(--f);align-items:center;justify-content:center;cursor:help;
  position:relative;flex:none;vertical-align:1px;user-select:none}
.gn-ti:hover{color:var(--am);border-color:var(--am)}
.gn-ti .tip{position:absolute;left:50%;bottom:calc(100% + var(--s3));transform:translateX(-50%);
  width:var(--w-tip);padding:13px 15px;border-radius:var(--r6);background:var(--bg);
  border:1px solid var(--line-2);box-shadow:var(--sh-tip);font:400 12px/1.65 var(--f);color:var(--tx-2);
  text-align:left;letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;transition:.13s;z-index:70}
/* Il tap e' un requisito su mobile (README, «Deciso»): su touch l'hover non esiste
   e :focus-visible spesso non scatta, quindi il tooltip si apre anche su :focus. */
.gn-ti:hover .tip,.gn-ti:focus-visible .tip,.gn-ti:focus .tip{opacity:1;visibility:visible}
.gn-ti .tip b{color:var(--tx);font-weight:500}
/* cosa non sappiamo: sempre in coda, dopo un filetto */
.gn-ti .tip em{font-style:normal;display:block;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);color:var(--tx-3);font-size:11.5px}

/* ── box verticale: UNICO contenitore con bordo, solo per contenuti editoriali ── */
.gn-vbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
/* Dentro una colonna stretta (il rail da 350px) l'auto-fill da 232px da' UNA
   colonna sola, e una fila di miniature diventa una colonna lunghissima.
   `due` le mette a due, che su 350px sono ~165px l'una: per una miniatura basta. */
.gn-vbs.due{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gn-vb{border:1px solid var(--line);border-radius:var(--r6);background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.gn-vb .im{aspect-ratio:16/9;background:#151a23;border-bottom:1px solid var(--line)}
[data-tema="chiaro"] .gn-vb .im{background:#eef0f3}
.gn-vb .bd{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.gn-vb .mt{display:flex;align-items:center;gap:var(--s3);margin-bottom:8px}
.gn-vb .dt{font:400 10.5px var(--fm);color:var(--tx-3);letter-spacing:.04em}
.gn-vb h4{font:500 15px/1.45 var(--f);color:var(--tx);margin:0 0 var(--s3)}
.gn-vb p{font-size:12.5px;line-height:1.6;color:var(--tx-2);margin:0 0 var(--s4)}
.gn-vb .lk{margin-top:auto;font-size:12.5px;color:var(--am)}  /* si incolla al fondo: box pari */

/* ── PATTERN D a pagina intera: le stesse coppie chiave-valore di `.gn-mk`, ma
   senza la scatola. `.gn-mk` e' la scheda che si apre SOPRA una riga di tabella;
   quando il dettaglio e' una pagina sua il contenuto sta sul fondo (regola 1) e
   la geometria resta questa. Prima colonna a 170px come `.gn-ar`: si incolonna. */
.gn-kv{display:flex;align-items:baseline;gap:var(--s4);padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.gn-kv:last-child{border-bottom:none}
.gn-kv .k{width:170px;flex:none;color:var(--tx-3);font-size:12px}
.gn-kv .v{flex:1;color:var(--tx);min-width:0}
@media (max-width:760px){.gn-kv{flex-wrap:wrap;gap:var(--s2)}.gn-kv .k{width:100%}}

/* ── box verticale: cosa ci va DENTRO ──
   Nella vetrina `.im` e' un rettangolo vuoto, quindi il foglio non dice mai come
   si comporta un'immagine o un video dentro il box. Senza queste due righe ogni
   pagina se le riscrive in locale. */
.gn-vb .im img,.gn-vb .im iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.gn-vb .im{position:relative;overflow:hidden}
.gn-vb .im .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx-3)}
/* box che apre qualcosa al clic: il segno e' il bordo, che il box ha gia'. */
.gn-vb.cl{cursor:pointer}
.gn-vb.cl:hover{border-color:var(--am)}
/* pastiglia sopra l'immagine: sta su un fotogramma, non su un fondo del tema —
   percio' e' l'unico posto dove il testo bianco su rosso e' la risposta giusta. */
.gn-vb .im .live{position:absolute;top:8px;left:8px;z-index:1;
  font:600 9px var(--fm);letter-spacing:.1em;background:var(--crit);color:#fff;
  border-radius:var(--r2);padding:3px 6px}

/* ── mappa: l'altra eccezione al «niente contenitori» ──
   Una mappa e' un riquadro di immagine: senza bordo galleggia sul fondo. */
.gn-mapbox{height:300px;border:1px solid var(--line);border-radius:var(--r6);
  overflow:hidden;background:var(--panel)}

/* ── scheda di dettaglio: coppie chiave-valore, non paragrafi. Non si annida ── */
.gn-mk{border:1px solid var(--line-2);border-radius:var(--r7);background:var(--panel);box-shadow:var(--sh-mk);max-width:var(--w-mk)}
.gn-mk .mh{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line)}
.gn-mk .mh h4{flex:1;font:500 15px var(--fd);color:var(--tx);margin:0}
.gn-mk .mb{padding:var(--s2) 17px 15px}
.gn-mk .sr{display:flex;align-items:baseline;gap:var(--s4);padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.gn-mk .sr:last-child{border-bottom:none}
.gn-mk .sr .k{width:120px;flex:none;color:var(--tx-3);font-size:12px}
.gn-mk .sr .v{flex:1;color:var(--tx)}

/* ── nota di metodo: in pagina resta solo la riga delle fonti ── */
.gn-note{padding:24px 0 34px;font-size:12px;line-height:1.75;color:var(--tx-3);max-width:78em}

/* ===========================================================================
   ATTESE — con ~20 chiamate per pagina il caricamento parziale è la norma.
   Regole:
   • lo scheletro ha la FORMA del contenuto che arriva, non uno spinner al centro;
   • ogni sezione carica per conto suo: nessun velo a tutta pagina;
   • se il dato arriva entro 200ms lo scheletro non si mostra affatto
     (classe .gn-wait applicata solo dopo il ritardo, altrimenti lampeggia);
   • dopo 4s si dichiara il ritardo, non si resta a girare;
   • se il dato non arriva si mostra l'ULTIMO DATO BUONO con la sua ora.
   =========================================================================== */

/* ── scheletro ── */
.gn-sk{height:13px;border-radius:var(--r2);background:linear-gradient(90deg,#151a23,#1d2430,#151a23);
  background-size:200% 100%;animation:gnSk 1.3s linear infinite}
[data-tema="chiaro"] .gn-sk{background:linear-gradient(90deg,#eceef2,#e0e3e9,#eceef2);background-size:200% 100%}
@keyframes gnSk{to{background-position:-200% 0}}
.gn-sk-tit{height:19px}                     /* titolo */
.gn-sk-num{height:26px;width:88px}          /* numero chiave */
.gn-sk-dot{height:7px;width:7px;border-radius:50%;flex:none}
.gn-sk-im{height:auto;aspect-ratio:16/9;border-radius:0}

/* riga: stessa geometria di .gn-tb e .gn-row */
.gn-sk-row{display:flex;align-items:center;gap:var(--s3);padding:13px 0;border-bottom:1px solid var(--line)}
.gn-sk-row:last-child{border-bottom:none}
.gn-sk-row .c{flex:1;display:flex;flex-direction:column;gap:var(--s2)}
.gn-sk-row .r{flex:none}
/* le righe non partono in fase: sembrerebbe un blocco unico */
.gn-sk-row:nth-child(2) .gn-sk{animation-delay:.12s}
.gn-sk-row:nth-child(3) .gn-sk{animation-delay:.24s}
.gn-sk-row:nth-child(4) .gn-sk{animation-delay:.36s}
.gn-sk-row:nth-child(5) .gn-sk{animation-delay:.48s}

/* ── barra indeterminata: solo per un'attesa che riguarda TUTTA la pagina ── */
.gn-prog{position:fixed;left:0;right:0;top:0;height:2px;background:transparent;overflow:hidden;z-index:90}
.gn-prog i{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--am);animation:gnProg 1.1s ease-in-out infinite}
@keyframes gnProg{0%{left:-34%}100%{left:100%}}

/* ── rotellina: solo dentro un bottone o accanto a un'etichetta, mai al centro ── */
.gn-spin{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;
  border-right-color:transparent;animation:gnSpin .7s linear infinite;display:inline-block;flex:none;opacity:.85}
@keyframes gnSpin{to{transform:rotate(360deg)}}
.gn-bt .gn-spin{margin-right:-1px}

/* ── stato di sezione ── */
.gn-loading{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;
  font:400 12.5px var(--f);color:var(--tx-3)}
/* ritardo dichiarato, oltre i 4s */
.gn-slow{display:flex;align-items:center;gap:12px;padding:12px var(--s4);
  background:color-mix(in srgb,var(--am) 8%,transparent);border-left:2px solid var(--am);
  font-size:12.5px;color:var(--tx)}
.gn-slow .gn-bt{margin-left:auto}
/* dato non aggiornato: si mostra l'ultimo buono, non il vuoto */
.gn-stale{display:inline-flex;align-items:center;gap:var(--s2);font:400 10.5px var(--fm);
  letter-spacing:.04em;color:var(--tx-3)}
.gn-stale i{width:6px;height:6px;border-radius:50%;background:var(--tx-3);flex:none}
.gn-is-stale{opacity:.62}   /* sui valori vecchi, insieme a .gn-stale nell'intestazione */

/* ── chi non vuole animazioni non le riceve: tinta ferma, non nulla ── */
@media (prefers-reduced-motion: reduce){
  .gn-sk{animation:none;background:#1d2430}
  [data-tema="chiaro"] .gn-sk{animation:none;background:#e6e9ee}
  .gn-prog i{animation:none;width:100%;opacity:.5}
  .gn-spin{animation:none;border-right-color:currentColor;opacity:.5}
}

/* ===========================================================================
   MOBILE — cambiano solo due misure. Area toccabile minima 44px.
   =========================================================================== */
@media (max-width:1100px){
  .gn-side{display:none}
  .gn-top,.gn-wrap,.gn-foot{padding-left:var(--s5);padding-right:var(--s5)}
}
@media (max-width:760px){
  .gn-sec{padding:var(--s5) 0}
  .gn-cols,.gn-grid-rail{grid-template-columns:1fr;gap:var(--s7)}
  .gn-nums{gap:30px}
  .gn-hero h1{font-size:23px}
  .gn-ar{flex-wrap:wrap}
  .gn-ar .nm{width:auto;flex:1}
  .gn-tabs{position:fixed;left:0;right:0;bottom:0;height:var(--h-tabs);display:flex;
    border-top:1px solid var(--line);background:var(--panel);z-index:50}
  .gn-tabs a{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;color:var(--tx-3);font:500 9px var(--f)}
  .gn-tabs a.on{color:var(--am)}
  .gn-bt,.gn-mi .rm{min-height:44px}
}