/* AI Market Observatory — blog
   Foglio condiviso da tutte le pagine di /blog.
   Eccezione documentata al vincolo single-file della landing (§6 di 'prompt blog.md'):
   qui le pagine sono centinaia e la cache del browser conta piu' dell'autonomia del file.
   Variabili di palette identiche a index.html: se cambia un colore, si cambia in un posto solo. */

:root{
  --bg:#05060d;
  --bg2:#0a0e1c;
  --panel:rgba(18,24,44,.55);
  --panel-brd:rgba(120,160,255,.14);
  --ink:#e8edff;
  --muted:#93a0c8;
  --cyan:#22d3ee;
  --blue:#4f7cff;
  --green:#22e59a;
  --amber:#ffb020;
  --orange:#ff7a2f;
  --red:#ff3b5c;
  --violet:#a855f7;
  --radius:20px;
  --maxw:820px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding-top: la barra in alto e' sticky (53px su desktop, ~52 su telefono).
   Senza questa riga ogni salto a un'ancora — cioe' ogni pillola dell'indice — fa
   atterrare il titolo NASCOSTO sotto la barra, e il lettore si ritrova a meta' del
   primo paragrafo senza vedere dove e' arrivato. Vale anche per i link in arrivo
   dall'esterno, che puntano alle stesse ancore. */
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(79,124,255,.16), transparent 62%),
    radial-gradient(880px 520px at 6% 4%, rgba(168,85,247,.12), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.68;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:#03040a}

/* Focus da tastiera. Non c'era nessuna regola: chi naviga col tasto Tab vedeva solo
   il contorno predefinito del browser, che su fondo quasi nero e' praticamente
   invisibile. `:focus-visible` e non `:focus`, cosi' il contorno compare a chi usa la
   tastiera e non a ogni clic del mouse. */
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;
}

/* Chi ha chiesto al sistema meno animazioni non deve subire lo scorrimento morbido
   ne' la barra di avanzamento: per alcuni non e' una preferenza estetica ma una
   difesa da nausea e vertigini. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------- avanzamento di lettura
   Le pagine arrivano a ~17 schermate su telefono. Senza JavaScript: e' un'animazione
   legata allo scorrimento del documento. Dove non e' supportata la barra resta a zero
   e non si vede — degrado silenzioso e innocuo, non un pezzo di pagina rotto. */
.avanzamento{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:30;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
}
@supports (animation-timeline:scroll()){
  .avanzamento{animation:avanza linear;animation-timeline:scroll(root block)}
  @keyframes avanza{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------------------------------------------------------------- torna su
   Un'ancora, non un bottone con JavaScript. 44x44px, il minimo tattile.

   Due lezioni dal collaudo, tutte e due invisibili leggendo il codice.

   Il nome: si chiama `.torna-su` e non `.su` perche' `.su` in questo foglio significa
   gia' tutt'altro — "in salita", il verso di una variazione (`.voce .n.su`,
   `.voce .d.su`). Col nome corto la variazione delle probabilita' nella scheda dati
   finiva incollata in fondo a destra dello schermo, tonda e col contorno: un bottone
   finto al posto di un dato.

   La comparsa: c'era una dissolvenza legata allo scorrimento, per non tenere il
   bottone in mezzo ai piedi nella prima schermata. `animation-timeline` risulta
   supportato, ma l'opacita' restava a zero a ogni altezza di pagina — cioe' il
   bottone non compariva MAI, e senza dare segno di niente. Meglio sempre visibile e
   discreto che elegante e morto: un dettaglio in meno, una funzione in piu'. */
.torna-su{
  position:fixed;right:18px;bottom:18px;z-index:25;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,14,28,.82);border:1px solid var(--panel-brd);
  backdrop-filter:blur(10px);color:var(--muted);font-size:18px;line-height:1;
}
.torna-su:hover{color:var(--ink);border-color:rgba(120,160,255,.4)}
@media print{.avanzamento,.torna-su{display:none}}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 26px;
  background:rgba(5,6,13,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-brd);
}
.nav .brand{font-weight:800;letter-spacing:.11em;font-size:13.5px;white-space:nowrap}
.nav .brand span{color:var(--muted);font-weight:600}
.nav nav{display:flex;flex-wrap:wrap;gap:20px;font-size:14px;color:var(--muted)}
.nav nav a{white-space:nowrap}
.nav nav a:hover{color:var(--ink)}
.nav nav a.attivo{color:var(--ink);font-weight:700}

.contenitore{max-width:var(--maxw);margin:0 auto;padding:44px 22px 80px}
.contenitore.largo{max-width:1040px}

/* ---------------------------------------------------------------- semaforo */
.pallino{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.re-normal{background:var(--green)}
.re-caution{background:var(--amber)}
.re-alert{background:var(--orange)}
.re-critical{background:var(--red)}
.fa-verde{background:var(--green)}
.fa-ambra{background:var(--amber)}
.fa-arancio{background:var(--orange)}
.fa-rosso{background:var(--red)}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 15px;border-radius:999px;
  background:rgba(18,24,44,.7);border:1px solid var(--panel-brd);
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}

/* ---------------------------------------------------------------- testata del post */
.eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  color:var(--muted);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:18px;
}
h1{
  font-size:clamp(30px,5.2vw,45px);line-height:1.14;letter-spacing:-.02em;
  font-weight:800;margin-bottom:16px;
}
.sommario{font-size:19.5px;color:var(--muted);line-height:1.6;margin-bottom:30px}
.eyebrow .tempo{color:var(--muted)}
.eyebrow .tempo::before{content:"· "}

/* ---------------------------------------------------------------- indice
   Pagine da 1.300-2.400 parole e nove sezioni: senza indice lo scroll e' cieco. */
.indice{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 34px;padding:16px 18px;border-radius:16px;
  background:rgba(18,24,44,.4);border:1px solid var(--panel-brd);
}
.indice .k{
  width:100%;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:2px;
}
.indice a{
  padding:6px 13px;border-radius:999px;font-size:13.5px;line-height:1.3;
  background:rgba(120,160,255,.07);border:1px solid var(--panel-brd);color:var(--muted);
}
.indice a:hover{color:var(--ink);border-color:rgba(120,160,255,.4)}

/* ---------------------------------------------------------------- orientamento
   Blocco invariante (chi siamo + colori). Volutamente riconoscibile e uguale su
   ogni pagina: il lettore abituale lo salta a colpo d'occhio, il nuovo lo trova. */
.orientamento{
  margin:34px 0;padding:20px 22px;border-radius:16px;
  background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.2);
  border-left:3px solid var(--cyan);
  font-size:15px;line-height:1.6;color:var(--muted);
}
.orientamento p{margin:0 0 12px}
.orientamento p:last-child{margin-bottom:0}
.orientamento b{color:var(--ink);font-weight:700}
.orientamento a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.orientamento .colori{display:flex;flex-wrap:wrap;gap:8px 18px}
.orientamento .colori span{display:inline-flex;align-items:center;gap:7px}

/* La regola .cover e' stata rimossa il 28/07/2026 (metodologia v5.11): la pagina
   del post non mostra piu' l'immagine del giorno. La cover continua a esistere e a
   generarsi a ogni run, ma vive solo come og:image e come enclosure RSS — cioe'
   fuori dal sito. In pagina ripeteva la scheda qui sotto riga per riga. */

/* ---------------------------------------------------------------- scheda dati */
.scheda{
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 40px;
}
.scheda h2{
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:16px;
}
.griglia{display:grid;gap:18px 22px;grid-template-columns:repeat(3,1fr)}
.griglia.quattro{grid-template-columns:repeat(4,1fr);margin-top:20px;padding-top:20px;border-top:1px solid var(--panel-brd)}
.voce .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.voce .v{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:800;line-height:1.15}
.voce .n{font-size:13px;color:var(--muted);margin-top:3px}
.voce .n.giu{color:var(--red)}
.voce .n.su{color:var(--green)}

/* Variazione rispetto al run precedente: il valore del progetto e' la serie,
   non il singolo giorno, quindi il confronto deve vedersi senza leggere la prosa. */
.voce .d{
  font-size:12px;color:var(--muted);margin-top:6px;
  padding-top:6px;border-top:1px solid rgba(120,160,255,.1);
}
.voce .d.su{color:var(--orange)}
.voce .d.giu{color:var(--green)}
.voce .d.su::before{content:"▲ "}
.voce .d.giu::before{content:"▼ "}
.legenda{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.6}
.legenda b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- corpo */
/* Titoli di sezione. Erano 22px contro 17px di testo: un salto di 1,29x, troppo poco
   perche' su nove sezioni il titolo "stacchi" mentre si scorre veloce. Portati a 27px
   (1,59x), che e' il rapporto in cui l'occhio riconosce un titolo senza leggerlo. */
.corpo h2{
  font-size:27px;font-weight:800;letter-spacing:-.015em;line-height:1.22;
  margin:44px 0 14px;
  padding-top:24px;border-top:1px solid var(--panel-brd);
  scroll-margin-top:96px;                /* la barra in alto e' sticky: non coprire il titolo */
}
.corpo h2:first-child{border-top:0;padding-top:0;margin-top:0}
/* Terzo livello (v5.10): dentro le sezioni lunghe i sottopunti erano grassetti in
   mezzo al paragrafo — invisibili all'indice, alla tastiera e ai lettori di schermo. */
.corpo h3{
  font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  margin:28px 0 8px;color:var(--ink);scroll-margin-top:96px;
}
.corpo p{margin:0 0 18px}
/* Misura di riga. Il contenitore e' largo 820px perche' cover, scheda e tabella ne
   hanno bisogno; il testo continuato no: a piena larghezza faceva 94 caratteri per
   riga, contro i 60-75 in cui l'occhio ritrova da solo l'inizio della riga dopo.
   Si limita quindi la prosa, non il contenitore. */
.corpo p,.corpo li{max-width:66ch}   /* misurato: ~75 caratteri per riga, contro i 94 di prima */
.corpo ul{margin:0 0 20px;padding-left:22px}
.corpo li{margin-bottom:10px}
.corpo strong{color:#fff;font-weight:700}
.corpo a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;word-break:break-word}

/* ---------------------------------------------------------------- tabelle
   Usate soprattutto dalla scheda dei segnali. Su schermo largo restano
   tabelle; sotto i 720px diventano schede impilate (vedi in fondo al file),
   perche' tre colonne di testo lungo su telefono sono illeggibili. */
.tabella{margin:0 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.corpo table{
  width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:14px;
  overflow:hidden;
}
.corpo thead th{
  text-align:left;vertical-align:bottom;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  padding:14px 16px;border-bottom:1px solid var(--panel-brd);
  background:#0b1020;white-space:nowrap;
  /* La scheda dei segnali e' alta dieci righe: a meta' tabella, senza intestazione
     visibile, non si sa piu' quale colonna si sta leggendo. Resta sotto la barra
     sticky del sito (53px), non sopra. */
  position:sticky;top:53px;z-index:1;
}

/* Stato del segnale: pallino PIU' parola. Il colore da solo non basta — quattro
   cerchi identici che differiscono solo per tinta non sono leggibili da chi ha una
   discromatopsia (WCAG 1.4.1), ne' in stampa in bianco e nero. La parola la mette il
   generatore leggendo il pallino scritto nel sorgente: l'autore continua a scrivere
   "🟠", come chiede la metodologia §10-bis.7, e non deve ricordarsi di nulla. */
.stato{
  display:inline-flex;align-items:center;gap:7px;
  margin-right:9px;padding:2px 10px 2px 8px;border-radius:999px;
  background:rgba(120,160,255,.08);border:1px solid var(--panel-brd);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;vertical-align:2px;
}
.corpo tbody td{
  padding:14px 16px;vertical-align:top;
  border-top:1px solid rgba(120,160,255,.09);
}
.corpo tbody tr:first-child td{border-top:0}
.corpo tbody tr:hover{background:rgba(120,160,255,.045)}
.corpo td:first-child{color:var(--muted);font-size:13.5px;white-space:nowrap}
.corpo table .centro{text-align:center}
.corpo table .destra{text-align:right;font-variant-numeric:tabular-nums}

.disclaimer{
  margin-top:44px;padding:18px 20px;border-radius:14px;
  background:rgba(18,24,44,.45);border:1px solid var(--panel-brd);
  font-size:14px;color:var(--muted);line-height:1.6;
}

/* ---------------------------------------------------------------- chi sono / cosa non e'
   Blocco di identita' del progetto (metodologia v5.17 §1-bis.4). Eredita l'aspetto
   sobrio del vecchio disclaimer — non deve competere con l'articolo — ma il terzo
   movimento, le negazioni, e' staccato da una riga e reso leggermente piu' acceso:
   e' la parte che non puo' passare inosservata. */
.chi-sono{
  margin-top:44px;padding:20px 22px;border-radius:14px;
  background:rgba(18,24,44,.45);border:1px solid var(--panel-brd);
  font-size:14px;color:var(--muted);line-height:1.65;
}
.chi-sono p{margin-bottom:12px}
.chi-sono p:last-child{margin-bottom:0}
.chi-sono strong{color:var(--ink)}
.chi-sono .non-sono{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--panel-brd);
}
.chi-sono .non-sono strong{color:var(--amber,#f5b445)}

/* ---------------------------------------------------------------- navigazione fra post */
.fra-post{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.fra-post a{
  flex:1 1 240px;padding:16px 18px;border-radius:16px;
  background:var(--panel);border:1px solid var(--panel-brd);
}
.fra-post a:hover{border-color:rgba(120,160,255,.4)}
.fra-post .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fra-post .t{font-weight:700;line-height:1.35}

/* ---------------------------------------------------------------- fine della lettura
   Chi arriva in fondo ha letto 2.400 parole: e' il lettore piu' interessato che
   avremo oggi, e fino al 28/7/2026 lo lasciavamo davanti a un solo link. */
.fine-lettura{
  margin-top:32px;padding:20px 22px;border-radius:16px;
  background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.2);
  border-left:3px solid var(--cyan);
}
.fine-lettura .k{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:6px;
}
.fine-lettura p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:14px}
.fine-lettura .vie{display:flex;flex-wrap:wrap;gap:9px}
.fine-lettura .vie a{
  padding:9px 15px;border-radius:999px;font-size:13.5px;line-height:1.3;
  background:rgba(120,160,255,.07);border:1px solid var(--panel-brd);color:var(--ink);
}
.fine-lettura .vie a:hover{border-color:rgba(120,160,255,.45)}

/* ---------------------------------------------------------------- elenco */
.intro{margin-bottom:38px}
.intro h1{margin-bottom:12px}
.intro p{color:var(--muted);font-size:18px;max-width:62ch}

.scheda-post{
  display:block;padding:24px;margin-bottom:16px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--panel-brd);
  transition:border-color .2s,transform .2s;
}
.scheda-post:hover{border-color:rgba(120,160,255,.42);transform:translateY(-2px)}
.scheda-post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.scheda-post h2{font-size:23px;font-weight:800;line-height:1.25;margin-bottom:8px;letter-spacing:-.01em}
.scheda-post p{color:var(--muted);font-size:15.5px;line-height:1.6}
.scheda-post .cifre{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:13px;color:var(--muted)}
.scheda-post .cifre b{color:var(--ink);font-weight:700}
.scheda-post.primo{border-color:rgba(120,160,255,.34)}
.scheda-post.primo h2{font-size:29px}

.paginazione{display:flex;justify-content:space-between;gap:14px;margin-top:34px;font-size:14.5px}
.paginazione a{padding:10px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-brd)}
.paginazione a:hover{border-color:rgba(120,160,255,.4)}

/* ---------------------------------------------------------------- archivio */
.mese{margin-bottom:34px}
.mese h2{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.riga{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(120,160,255,.08)}
.riga .d{font-size:13px;color:var(--muted);white-space:nowrap;min-width:74px;font-variant-numeric:tabular-nums}
.riga .t{font-weight:600}
.riga:hover .t{color:var(--cyan)}

/* ---------------------------------------------------------------- piede */
.piede{
  border-top:1px solid var(--panel-brd);
  padding:30px 22px 44px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.8;
}
.piede a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.piede a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- schermi stretti */
@media (max-width:720px){
  /* 16,5px era sotto lo standard editoriale per la lettura prolungata su telefono. */
  body{font-size:17.5px;line-height:1.7}

  /* L'header restava sticky e alto 115px: logo su una riga, sei link che andavano a
     capo su due, con "About" da solo sulla terza. Su un telefono da 844px e' il 14%
     dello schermo occupato per sempre, e con la barra del browser si sfiora il 20%.
     Torna quindi su UNA riga sola, con i link che scorrono di lato: ~52px, meno della
     meta'. La sfumatura sul bordo destro dice che c'e' altro oltre il taglio — senza
     di essa i link nascosti sarebbero invisibili. */
  .nav{padding:9px 16px;flex-direction:row;align-items:center;gap:14px}
  .nav .brand{font-size:11.5px;letter-spacing:.05em}
  .nav .brand span{display:none}
  .nav nav{
    flex-wrap:nowrap;overflow-x:auto;gap:18px;font-size:13.5px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav nav::-webkit-scrollbar{display:none}
  /* Bersagli tattili: 22px di altezza contro i 44px minimi. Il riempimento allarga
     l'area toccabile senza cambiare di una virgola l'aspetto del testo.
     `flex:0 0 auto` non e' un dettaglio: senza, i link restano elementi flex
     comprimibili e in 390px si stringono fino a mandare a capo il testo — "Live Risk
     Data" su tre righe, header di nuovo a 110px. Con `nowrap` da solo non basta:
     e' il restringimento a dover essere vietato, non il ritorno a capo. */
  .nav nav a{display:inline-block;flex:0 0 auto;padding:11px 0}

  .griglia,.griglia.quattro{grid-template-columns:repeat(2,1fr)}
  .contenitore{padding:30px 18px 64px}
  .scheda{padding:18px}
  .scheda-post.primo h2{font-size:24px}
  .voce .v{font-size:21px}
  .indice{padding:14px 16px;gap:7px}
  .indice a{font-size:12.5px;padding:8px 12px}
  .orientamento{padding:16px 18px;font-size:14.5px}
  .orientamento .colori{flex-direction:column;gap:6px}
  .corpo h2{font-size:23px;margin-top:38px;padding-top:20px}
  .corpo h3{font-size:17.5px}
  .fine-lettura .vie a{padding:11px 15px}
  .torna-su{right:12px;bottom:12px}

  /* Il riordino con flex/order serviva a far scendere la cover sotto la scheda
     dati: su telefono era un PNG da 1200px mostrato a 335, con numeri sotto i 6px
     effettivi e per giunta gli stessi della scheda. Dal 28/07/2026 la cover non e'
     piu' in pagina (metodologia v5.11), quindi l'ordine del sorgente e' gia'
     quello giusto e il blocco e' stato tolto: un `order` che non ordina piu'
     niente e' solo una trappola per chi domani aggiunge un elemento. */

  /* Tabelle come schede impilate: l'intestazione di colonna, replicata in
     data-k dal generatore, diventa l'etichetta di ogni valore. */
  .tabella{overflow-x:visible}
  .corpo table{border:0;background:none;border-radius:0}
  /* L'intestazione resta ASSOLUTA, non "statica e piccola": tolta dal flusso non
     partecipa al calcolo delle colonne. Lasciandola nel flusso larga 1px, le righe
     rese a blocco si stringevano a 162px su 335 disponibili e la tabella cresceva
     del 60% in altezza. E' la sticky dei `th` — che serve solo su schermo largo —
     a dover essere annullata qui, non la posizione del `thead`. */
  .corpo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .corpo thead th{position:static}
  .corpo tbody tr{
    display:block;margin-bottom:14px;padding:16px 18px;border-radius:16px;
    background:var(--panel);border:1px solid var(--panel-brd);
  }
  .corpo tbody tr:hover{background:var(--panel)}
  .corpo tbody td{display:block;padding:0;border-top:0}
  .corpo tbody td + td{margin-top:10px}
  .corpo td:first-child{white-space:normal}
  .corpo tbody td::before{
    content:attr(data-k);display:block;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-bottom:3px;
  }
  /* La prima colonna e' la chiave di raggruppamento e si autodescrive gia' ("A ·
     Price trend"): l'etichetta "FAMILY" sopra non aggiunge nulla e, moltiplicata per
     nove schede, sono nove righe di intestazione a vuoto. Diventa un occhiello. */
  .corpo tbody td:first-child::before{display:none}
  .corpo tbody td:first-child{
    font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);font-weight:700;
  }
  .corpo table .centro,.corpo table .destra{text-align:left}
  /* La riga di stato va a capo da sola: in una colonna da ~300px la pillola e il
     testo che la segue si intrecciavano. */
  .stato{display:flex;width:max-content;margin:0 0 7px}
}

@media print{
  body{background:#fff;color:#000}
  .nav,.fra-post,.paginazione{display:none}
}