/* ============================================================
   Riepilogo — la vista cliente, dal prototipo Riepilogo.dc.html
   ============================================================
   Sedici blocchi: testata con l'intreccio, nota di perimetro, le tre letture,
   perche' la spesa e' cambiata, spesa mensile, trimestri, semestri, classifica
   strutture, e il dettaglio per materia (schede, trimestri, semestri,
   andamento, per anno, per struttura, composizione F1/F2/F3, heatmap), piu' i
   punti di fornitura.

   Il patto sulle animazioni e' quello delle altre sezioni: gli INGRESSI li
   assegna riepilogo.js leggendo data-dmr-anim, i CICLI CONTINUI stanno qui.
   Nessun ingresso ha fill-mode: un blocco che parte da opacita' zero e non
   riceve mai la sua animazione — stampa, scheda in secondo piano, export PDF —
   resterebbe invisibile, e un numero sbagliato e' meglio di nessun numero solo
   quando non e' nessuno dei due.

   Le griglie stanno qui e non in style="": una griglia inline batte qualunque
   media query, e a 400px la pagina resterebbe a dodici colonne.
   ============================================================ */

.riv {
  --riv-ink: var(--dm-heading, #0f2244);
  --riv-txt: var(--dm-text, #3c4760);
  --riv-mut: var(--dm-text-muted, #66708a);
  --riv-line: var(--dm-border, #e6e9f0);
  --riv-soft: var(--dm-surface-3, #f4f2ec);
  --riv-card: 0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
  --riv-card-hi: 0 3px 6px rgba(15,34,68,.06), 0 18px 40px -12px rgba(15,34,68,.18);
  --riv-acc: #c3ec2e;
  --riv-e: #0f2244;   /* energia */
  --riv-g: #2f6db8;   /* gas */
  --riv-a: #7db8e8;   /* acqua */
  --riv-f: #c3ec2e;   /* fotovoltaico */
  display: flex; flex-direction: column; gap: 22px;
  overflow-x: clip;
}

/* ============================================================
   Vocabolario comune
   ============================================================ */

.riv-sect { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.riv-sect > i { width: 3px; height: 15px; border-radius: 2px; background: var(--riv-acc); }
.riv-sect > span { font-size: 11px; font-weight: 700; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--riv-ink); }
.riv-sect > b { flex: 1; height: 1px; background: var(--riv-line); }

.riv-perim { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
             border-radius: 10px; background: var(--riv-soft); font-size: 12.5px;
             font-weight: 500; color: var(--riv-mut); line-height: 1.5; }
.riv-perim svg { flex-shrink: 0; }
.riv-perim b { color: var(--riv-ink); font-weight: 700; }

.riv-panel { border-radius: 12px; background: #ffffff; box-shadow: var(--riv-card);
             padding: 24px 28px 20px; }
.riv-panel--card { transition: box-shadow .22s ease, transform .22s ease; }
.riv-panel--card:hover { box-shadow: var(--riv-card-hi); transform: translateY(-2px); }
.riv-h { display: flex; align-items: flex-start; justify-content: space-between;
         gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.riv-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
           color: var(--riv-mut); }
.riv-sub { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--riv-mut);
           max-width: 660px; text-wrap: pretty; }
.riv-read { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--riv-mut);
            font-variant-numeric: tabular-nums; }
.riv-read b { color: var(--riv-ink); font-weight: 700; }
.riv-hr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.riv-leg { display: flex; align-items: center; gap: 15px; font-size: 12px; font-weight: 600;
           color: var(--riv-mut); flex-wrap: wrap; }
.riv-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.riv-leg i { width: 8px; height: 8px; border-radius: 2px; }
.riv-leg i.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #8fa0bf; }
.riv-leg [data-dmr-legend] { cursor: pointer; }

.riv-tog { padding: 7px 13px; border: 0; border-radius: 8px; background: var(--riv-soft);
           color: var(--riv-ink); font: inherit; font-size: 12px; font-weight: 700;
           cursor: pointer; white-space: nowrap; transition: background .2s ease; }
.riv-tog:hover { background: #e8e5db; }
.riv-tog--s { padding: 6px 12px; font-size: 11.5px; }

.riv-tblwrap { overflow-x: auto; }
.riv-tbl { display: grid; align-items: center; }
.riv-tbl > span { padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--riv-txt);
                  border-bottom: 1px solid #f0f2f6; font-variant-numeric: tabular-nums;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riv-tbl > span.h { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--riv-mut);
                    border-bottom: 1px solid var(--riv-line); }
.riv-tbl > span.r { text-align: right; }
.riv-tbl > span.m { color: var(--riv-mut); font-weight: 500; }
.riv-tbl > span.t { font-weight: 700; color: var(--riv-ink); background: var(--riv-soft);
                    border-bottom: 0; }

/* Il riquadro che segue il puntatore: uno solo, condiviso da tutti i blocchi.
   La tinta scura e' la stessa dei pannelli d'aiuto, cosi' si legge come "voce
   del sistema" e non come parte del grafico. */
.riv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
           margin-bottom: 8px; padding: 8px 11px; border-radius: 9px; background: var(--riv-ink);
           color: #ffffff; font-size: 11.5px; font-weight: 500; line-height: 1.5;
           width: max-content; max-width: min(240px, 72vw); z-index: 6; opacity: 0;
           pointer-events: none; transition: opacity .16s ease;
           font-variant-numeric: tabular-nums; }

/* ============================================================
   1 · Testata con l'intreccio
   ============================================================ */

.riv-hero { position: relative; overflow: hidden; border-radius: 16px; background: #0b1a35;
            box-shadow: 0 1px 2px rgba(11,26,53,.2), 0 26px 60px -20px rgba(11,26,53,.55); }
.riv-bg { position: absolute; inset: 0; pointer-events: none;
          background: radial-gradient(118% 128% at 50% 14%, #16345d 0%, #0e2a4e 44%, #0b1a35 100%); }
.riv-core { position: absolute; left: 32%; top: -14%; width: 40%; height: 122%; pointer-events: none;
            background: radial-gradient(closest-side, rgba(195,236,46,.13) 0%,
                        rgba(47,109,184,.14) 46%, rgba(11,26,53,0) 100%); }
.riv-glow  { position: absolute; left: 6%; top: -24%; width: 34%; height: 94%; pointer-events: none;
             background: radial-gradient(closest-side, rgba(195,236,46,.11) 0%, rgba(195,236,46,0) 100%);
             animation: rivGlow 17s ease-in-out infinite; }
.riv-glow2 { position: absolute; right: 4%; bottom: -20%; width: 38%; height: 90%; pointer-events: none;
             background: radial-gradient(closest-side, rgba(47,109,184,.22) 0%, rgba(47,109,184,0) 100%);
             animation: rivGlow 23s ease-in-out infinite reverse; }
@keyframes rivGlow { 0%,100% { opacity: .7; transform: none }
                     50% { opacity: 1; transform: translate3d(2%,-4%,0) scale(1.1) } }

/* Come nelle sezioni a materia: la testata e' una copertina, non una barra.
   L'altezza minima le impedisce di schiacciarsi quando il racconto e' corto,
   ed e' quella che da' all'intreccio lo spazio per essere grande. */
.riv-pad { position: relative; padding: 32px 34px 34px; min-height: 700px;
           display: flex; flex-direction: column; justify-content: center; }
.riv-pad > .riv-top { flex: 0 0 auto; }
.riv-pad > .riv-main { flex: 1 1 auto; align-content: center; }
.riv-top { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 18px 26px; flex-wrap: wrap; }
.riv-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.riv-id-ico { flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 12px rgba(195,236,46,.4)); }
.riv-id-lab { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: #ffffff; }
.riv-id-sub { margin-top: 5px; font-size: 13px; font-weight: 600; color: #9fb4d4; }

.riv-ctrl { display: flex; align-items: center; justify-content: flex-end;
            gap: 10px 14px; flex-wrap: wrap; }
.riv-ctrl-g { display: flex; align-items: center; gap: 10px; }
.riv-kic { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
           color: #7d93b5; white-space: nowrap; }
.riv-pill { position: relative; display: flex; height: 36px; padding: 3px; border-radius: 10px;
            background: rgba(255,255,255,.07); }
.riv-pill > i { position: absolute; top: 3px; bottom: 3px; border-radius: 8px;
                background: var(--riv-acc); transition: left .4s cubic-bezier(.16,1,.3,1); }
.riv-pill a { position: relative; z-index: 1; display: inline-flex; align-items: center;
              padding: 0 15px; font-size: 12.5px; font-weight: 700; text-decoration: none;
              transition: color .2s ease; }
.riv-ctrl-sep { width: 1px; align-self: stretch; min-height: 26px;
                background: rgba(255,255,255,.16); }

/* .dmr-cta e' navy pieno con testo bianco: su una testata navy sparisce nel
   fondo. Qui e' di vetro, col bordo a fare il lavoro del riempimento. Fuori
   dalla testata la regola non esiste e riepilogo.css resta quello che e'. */
.riv-ctrl-a { display: flex; align-items: center; gap: 9px; }
.riv-ctrl-a .dmr-cta {
  background: rgba(255,255,255,.1); color: #ffffff; padding: 9px 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 12.5px; border-radius: 9px;
}
.riv-ctrl-a .dmr-cta:hover { background: rgba(255,255,255,.18); color: #ffffff; }
.riv-ctrl-a .dmr-cta.is-locked { opacity: .5; }

/* L'intreccio e' il centro della pagina e deve leggersi come tale: la colonna
   di mezzo si prende meta' della riga, e dentro di essa il simbolo la parte
   piu' grande. Prima era 250px in una riga da 1900: un francobollo. */
/* v5.146.0 — Le due colonne esterne sono identiche, minimo e quota.
   Erano .92fr/260px a sinistra e .82fr/230px a destra: cinquantaquattro pixel
   di differenza, meta' dei quali finivano per spostare il centro di ventisette
   pixel a destra. Un centro si ottiene rendendo uguali i due lati, non
   correggendo il mezzo con un margine: col margine torna storto appena cambia
   la larghezza della finestra. */
.riv-main { display: grid; gap: 26px 28px; margin-top: 22px;
            grid-template-columns: minmax(245px,.87fr) minmax(460px,1.72fr) minmax(245px,.87fr);
            align-items: center; }
.riv-narr { min-width: 0; }
.riv-narr h1 { margin: 0; font-size: clamp(28px,3vw,42px); line-height: 1.03; font-weight: 700;
               letter-spacing: -.034em; color: #ffffff; }
.riv-lead { margin-top: 14px; font-size: clamp(16px,1.4vw,20px); line-height: 1.28;
            font-weight: 700; letter-spacing: -.018em; color: #ffffff; text-wrap: pretty; }
.riv-narr p { margin: 10px 0 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6;
              font-weight: 500; color: #a8bcd8; text-wrap: pretty; }
.riv-nota { display: flex; gap: 11px; margin-top: 20px; padding: 13px 15px; border-radius: 11px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
            font-size: 12px; font-weight: 500; line-height: 1.55; color: #a8bcd8;
            text-wrap: pretty; }
.riv-nota svg { flex-shrink: 0; margin-top: 1px; }

/* L'intreccio e i quattro blocchi intorno: due colonne, il simbolo al centro
   su tutta l'altezza. */
.riv-vis { min-width: 0; }
.riv-x { display: grid; grid-template-columns: minmax(0,.72fr) minmax(240px,1.3fr) minmax(0,.72fr);
         grid-template-rows: auto auto; gap: 30px 18px; align-items: center; }
.riv-logo { position: relative; grid-column: 2; grid-row: 1 / 3; min-width: 0;
            display: flex; align-items: center; justify-content: center;
            padding: 6px 0; }
.riv-aura { position: absolute; left: 8%; top: 2%; width: 84%; height: 96%; pointer-events: none;
            background: radial-gradient(closest-side, rgba(195,236,46,.16) 0%,
                        rgba(47,109,184,.14) 46%, rgba(11,26,53,0) 100%); }
.riv-logo svg { position: relative; width: 100%; height: auto; display: block; overflow: visible; }
.riv-kb { min-width: 0; cursor: pointer; text-decoration: none; display: block;
          transition: opacity .25s ease; }
.riv-kb[data-pos="tl"] { grid-column: 1; grid-row: 1; }
.riv-kb[data-pos="tr"] { grid-column: 3; grid-row: 1; }
.riv-kb[data-pos="bl"] { grid-column: 1; grid-row: 2; }
.riv-kb[data-pos="br"] { grid-column: 3; grid-row: 2; }
/* I due blocchi di sinistra sono allineati a destra, cosi' tutti e quattro
   stanno alla stessa distanza dagli anelli. Allineandoli tutti a sinistra, il
   vuoto a sinistra del simbolo era dieci volte quello a destra e il simbolo
   sembrava spostato — e non lo era: sono i numeri a essere lontani. */
.riv-kb[data-pos="tl"], .riv-kb[data-pos="bl"] { text-align: right; }
.riv-kb[data-pos="tl"] .riv-kb-h, .riv-kb[data-pos="bl"] .riv-kb-h,
.riv-kb[data-pos="tl"] .riv-kb-v, .riv-kb[data-pos="bl"] .riv-kb-v,
.riv-kb[data-pos="tl"] .riv-kb-d, .riv-kb[data-pos="bl"] .riv-kb-d {
  justify-content: flex-end;
}
.riv-kb-h { display: flex; align-items: center; gap: 8px; }
.riv-kb-i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            width: 24px; height: 24px; border-radius: 7px; }
.riv-kb-l { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
            color: #7d93b5; }
.riv-kb-v { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; }
.riv-kb-v > span { font-size: 24px; line-height: 1.05; font-weight: 700; letter-spacing: -.028em;
                   font-variant-numeric: tabular-nums; color: #ffffff; }
.riv-kb-v > b { font-size: 13px; font-weight: 600; color: #9fb4d4; }
.riv-kb-d { display: flex; margin-top: 7px; }
.riv-chip { padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.riv-kb-off { margin-top: 9px; font-size: 14px; font-weight: 700; color: #8fa6c6; }
.riv-kb-off + div { margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.45;
                    color: #7d93b5; text-wrap: pretty; }

/* L'impulso che corre sugli anelli: ciclo continuo, quindi CSS. Se restasse al
   JS, in stampa gli anelli sarebbero tratteggi fermi in un punto qualsiasi. */
.riv-rail { animation: rivRail 4.4s linear infinite; }
@keyframes rivRail { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -1000 } }
.riv-lobe { cursor: pointer; transition: stroke .3s ease; }

.riv-tot { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
           text-align: center; }
.riv-tot-l { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
             color: #7d93b5; }
.riv-tot-v { display: flex; align-items: baseline; justify-content: center; gap: 9px;
             margin-top: 8px; flex-wrap: wrap; }
.riv-tot-v > span:first-child { font-size: clamp(30px,3vw,40px); line-height: 1.02;
                                font-weight: 700; letter-spacing: -.035em;
                                font-variant-numeric: tabular-nums; color: #ffffff; }
.riv-tot-v > b { font-size: 17px; font-weight: 600; color: #9fb4d4; }
.riv-tot-v > em { font-style: normal; font-size: 12.5px; font-weight: 500; color: #9fb4d4; }

.riv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.riv-card { border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: #102a4e;
            padding: 15px 16px; }
.riv-card-t { font-size: 12.5px; font-weight: 700; color: #ffffff; }
.riv-ringrow { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.riv-ringbox { position: relative; display: inline-flex; align-items: center;
               justify-content: center; flex-shrink: 0; width: 64px; height: 64px; }
.riv-ringbox svg { position: absolute; inset: 0; }
.riv-ringbox svg circle { transition: stroke-dasharray .7s cubic-bezier(.22,1,.3,1); }
.riv-ringbox > span { position: relative; font-size: 13px; font-weight: 700; color: #ffffff;
                      font-variant-numeric: tabular-nums; }
.riv-card-lab { font-size: 13px; font-weight: 700; color: #ffffff; }
.riv-card-sub { margin-top: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.5;
                color: #9fb4d4; text-wrap: pretty; }

.riv-qs { display: flex; flex-direction: column; gap: 2px; margin-top: 11px; }
.riv-qs > div { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
                border-radius: 9px; transition: background .2s ease; }
.riv-qs > div:hover { background: rgba(255,255,255,.06); }
.riv-qs-i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.08); }
.riv-qs-v { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.riv-qs-v > span { font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
                   font-variant-numeric: tabular-nums; color: #ffffff; }
.riv-qs-v > b { font-size: 11.5px; font-weight: 600; color: #9fb4d4; }
.riv-qs-l { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #8fa6c6;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   3 · Le tre letture
   ============================================================ */

.riv-letture { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.riv-lett-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.riv-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
           padding: 2px 5px; border-radius: 5px; background: var(--riv-acc); font-size: 11px;
           font-weight: 700; font-variant-numeric: tabular-nums; color: var(--riv-ink); }
.riv-lett-h > em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--riv-mut); }
.riv-lett-h > b { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--riv-ink);
                  font-variant-numeric: tabular-nums; }
.riv-mrow { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px;
            row-gap: 4px; align-items: baseline; }
.riv-mrow + .riv-mrow { margin-top: 13px; }
.riv-mrow > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--riv-ink);
                               min-width: 0; overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; }
.riv-mrow > span:first-child em { font-style: normal; font-weight: 500; color: var(--riv-mut); }
.riv-mrow > b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
                white-space: nowrap; }
.riv-mtrack { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--riv-soft);
              overflow: hidden; margin-top: 2px; }
.riv-mtrack > i { display: block; height: 5px; border-radius: 3px; transform-origin: left; }
.riv-voci { display: flex; flex-direction: column; gap: 13px; }
.riv-anom { display: flex; flex-direction: column; gap: 11px; }
.riv-anom > div { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px;
                  line-height: 1.45; }
.riv-anom i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px;
              transform: translateY(-1px); }
.riv-anom b { font-weight: 700; color: var(--riv-ink); }
.riv-anom span span { font-weight: 500; color: var(--riv-mut); }

/* ============================================================
   4 · Perché la spesa è cambiata — il ponte orizzontale
   ============================================================ */

.riv-help-b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0;
              border-radius: 8px; background: var(--riv-soft); color: var(--riv-ink);
              font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
              white-space: nowrap; transition: background .2s ease; }
.riv-help-b:hover { background: #e8e5db; }
.riv-helpwrap { position: relative; display: flex; align-items: center; gap: 15px;
                flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--riv-mut); }
.riv-help { position: absolute; top: calc(100% + 10px); right: 0; width: min(420px,92vw);
            padding: 20px 22px; border-radius: 12px; background: var(--riv-ink); color: #d7e0f0;
            font-size: 12.5px; font-weight: 500; line-height: 1.6; z-index: 30;
            box-shadow: 0 20px 50px -16px rgba(15,34,68,.55); }
.riv-help[hidden] { display: none; }
.riv-help-t { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 14px; margin-bottom: 12px; }
.riv-help-t > span { font-size: 13.5px; font-weight: 700; color: #ffffff; }
.riv-help-x { flex-shrink: 0; display: inline-flex; padding: 3px; border: 0; border-radius: 6px;
              background: rgba(255,255,255,.1); color: #ffffff; cursor: pointer; }
.riv-help p { margin: 0 0 12px; }
.riv-help p:last-child { margin: 0; color: #a9b7d0; }
.riv-help-r { display: flex; gap: 10px; margin-bottom: 9px; }
.riv-help-r > i { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; }
.riv-help b { color: #ffffff; }
.riv-help-sep { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }

.riv-fromto { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px;
              padding: 16px 20px; border-radius: 10px; background: var(--riv-soft); }
.riv-fromto-l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                color: var(--riv-mut); }
.riv-fromto-v { margin-top: 5px; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
                font-variant-numeric: tabular-nums; }
.riv-fromto .now { color: var(--riv-ink); }
.riv-fromto .prev { color: var(--riv-mut); }
.riv-fromto .riv-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
                        padding: 7px 13px; border-radius: 8px; font-size: 13px; }

.riv-wf { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.riv-wfrow { position: relative; display: grid; grid-template-columns: 200px minmax(0,1fr) 124px;
             gap: 18px; align-items: center; }
.riv-wfrow.sep { border-top: 1px solid var(--riv-line); padding-top: 14px; }
.riv-wf-l { display: block; font-size: 13px; font-weight: 700; color: var(--riv-ink); }
.riv-wf-s { display: block; margin-top: 2px; font-size: 11px; font-weight: 500;
            color: var(--riv-mut); line-height: 1.35; }
.riv-wf-track { position: relative; display: block; height: 28px; border-radius: 5px;
                background: #fbfbf9; }
.riv-wf-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: #cfd6e4; }
.riv-wf-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; }
.riv-wf-v { text-align: right; font-size: 15px; font-weight: 700;
            font-variant-numeric: tabular-nums; }
.riv-wfrow:hover .riv-tip { opacity: 1; }

.riv-pv { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px;
          margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--riv-line); }
.riv-pvcard { padding: 14px 16px; border-radius: 10px; background: #fbfbf9;
              transition: opacity .2s ease; }
.riv-pvcard-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
                color: var(--riv-ink); }
.riv-pvcard-t i { width: 7px; height: 7px; border-radius: 2px; }
.riv-pvrow { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
             font-size: 12.5px; font-weight: 500; color: var(--riv-mut); }
.riv-pvrow + .riv-pvrow { margin-top: 5px; }
.riv-pvrow b { font-weight: 700; font-variant-numeric: tabular-nums; }
.riv-pvrow.tot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--riv-line);
                 font-weight: 700; color: var(--riv-ink); }
.riv-pvrow.tot b { color: var(--riv-ink); }

/* ============================================================
   5 · Spesa mensile · 12 · andamento materia
   ============================================================ */

.riv-plotbox { position: relative; }
.riv-gl { position: absolute; left: 0; right: 52px; height: 1px; }
.riv-ax { position: absolute; right: 0; font-size: 11px; font-weight: 600; color: var(--riv-mut);
          font-variant-numeric: tabular-nums; }
.riv-plot { position: absolute; left: 0; right: 52px; top: 0; bottom: 0; cursor: crosshair; }
.riv-bars { position: absolute; inset: 0; display: grid;
            grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; align-items: end; }
.riv-slot { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
            height: 100%; transition: opacity .2s ease; }
/* Le porzioni della pila crescono dal loro appoggio, non dal centro: con
   l'origine al centro la pila si scompone durante l'ingresso. */
.riv-seg { transform-origin: bottom; transition: opacity .2s ease; }
.riv-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
           overflow: visible; }
.riv-cross { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.riv-cross::before { content: ""; position: absolute; left: -.5px; top: 0; bottom: 0; width: 1px;
                     background: var(--riv-ink); opacity: .2; }
.riv-cross[hidden] { display: none; }
.riv-mesi { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px;
            padding-right: 52px; padding-top: 9px; }
.riv-mesi > div { text-align: center; font-size: 11px; font-weight: 600; color: var(--riv-mut); }
.riv-mesi > div.on { font-weight: 700; color: var(--riv-ink); }
.riv-slot:hover .riv-tip { opacity: 1; }

/* ============================================================
   6-7 · Trimestri e semestri
   ============================================================ */

.riv-duo { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 22px;
           align-items: start; }
.riv-duo--pari { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

.riv-q { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
         gap: 26px; margin-top: 18px; }
.riv-q::after { content: ""; position: absolute; left: 0; right: 0; bottom: 62px; height: 1px;
                background: #cfd6e4; }
.riv-qcol { position: relative; display: flex; flex-direction: column; }
.riv-qbars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 6px;
             min-height: 0; }
.riv-qbars > i { width: 38%; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.riv-qfoot { height: 62px; padding-top: 11px; text-align: center; }
.riv-qfoot > b { display: block; font-size: 12.5px; font-weight: 700; color: var(--riv-ink); }
.riv-qfoot > span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700;
                    font-variant-numeric: tabular-nums; }
.riv-qfoot > em { display: block; margin-top: 4px; font-style: normal; font-size: 9.5px;
                  font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
.riv-qcol:hover .riv-tip { opacity: 1; }
.riv-q .riv-tip { bottom: 70px; }

.riv-sems { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.riv-sem { padding: 16px 18px; border-radius: 10px; background: #fbfbf9; }
.riv-sem-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.riv-sem-t > span:first-child { font-size: 13px; font-weight: 700; color: var(--riv-ink); }
.riv-sem-v { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
             margin-top: 12px; }
.riv-sem-v em { display: block; font-style: normal; font-size: 11px; font-weight: 600;
                color: var(--riv-mut); }
.riv-sem-v b { display: block; margin-top: 3px; font-size: 19px; font-weight: 700;
               letter-spacing: -.02em; color: var(--riv-ink); font-variant-numeric: tabular-nums; }
.riv-sem-v > div:last-child { text-align: right; }
.riv-sem-v > div:last-child b { color: var(--riv-mut); }
.riv-sem-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.riv-sem-bars > span { display: block; height: 6px; border-radius: 3px; background: #eef1f8; }
.riv-sem-bars > span > i { display: block; height: 6px; border-radius: 3px;
                           transform-origin: left; }
.riv-part { margin-top: 10px; font-size: 11px; font-weight: 600; color: #b45309; }
.riv-part--s { font-size: 10.5px; }

/* ============================================================
   8 · Classifica strutture
   ============================================================ */

.riv-sortpill { position: relative; display: flex; padding: 3px; border-radius: 9px;
                background: var(--riv-soft); }
.riv-sortpill button { position: relative; z-index: 1; padding: 6px 13px; border: 0;
                       background: transparent; font: inherit; font-size: 12px; font-weight: 700;
                       cursor: pointer; color: var(--riv-mut); border-radius: 7px;
                       transition: background .2s ease, color .2s ease; }
.riv-sortpill button.on { background: var(--riv-ink); color: #ffffff; }

.riv-rank { min-width: 760px; }
.riv-rank-h, .riv-row, .riv-rank-t {
  display: grid; grid-template-columns: minmax(0,1.6fr) 108px minmax(0,1fr) 52px 84px 20px;
  gap: 14px; align-items: center;
}
.riv-rank-h { padding: 0 12px 9px; border-bottom: 1px solid var(--riv-line); }
.riv-rank-h > span { font-size: 11px; font-weight: 700; letter-spacing: .1em;
                     text-transform: uppercase; color: var(--riv-mut); }
.riv-rank-h > span.r { text-align: right; }
.riv-row { position: relative; padding: 13px 12px; border-radius: 8px; text-decoration: none;
           transition: background .2s ease; }
.riv-row:hover { background: #f1f4fa; }
.riv-row > i.ind { position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px;
                   border-radius: 2px; background: var(--riv-acc); opacity: 0;
                   transform: scaleY(.4); transition: opacity .22s ease, transform .22s ease; }
.riv-row:hover > i.ind { opacity: 1; transform: scaleY(1); }
.riv-rank-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.riv-pos { flex-shrink: 0; width: 20px; font-style: normal; font-size: 11px; font-weight: 700;
           color: var(--riv-mut); font-variant-numeric: tabular-nums; }
.riv-rank-n > b { font-size: 14px; font-weight: 600; color: var(--riv-ink); line-height: 1.3;
                  text-wrap: pretty; }
.riv-num { font-variant-numeric: tabular-nums; }
.riv-row .r, .riv-rank-t .r { text-align: right; }
.riv-mix { display: flex; gap: 2px; height: 7px; }
.riv-mix > i { height: 7px; border-radius: 2px; transition: opacity .2s ease; }
.riv-chev { color: var(--riv-mut); transition: transform .2s ease; }
.riv-row:hover .riv-chev { transform: translateX(2px); }
.riv-rank-t { padding: 16px 12px 4px; margin-top: 6px; border-top: 1px solid var(--riv-line); }

/* ============================================================
   9 · Dettaglio per materia
   ============================================================ */

.riv-tabs { display: flex; padding: 5px; border-radius: 11px; background: var(--riv-soft);
            align-self: flex-start; gap: 4px; }
.riv-tabs button { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px;
                   border: 0; border-radius: 8px; font: inherit; font-size: 13.5px;
                   font-weight: 700; cursor: pointer; background: transparent;
                   color: var(--riv-mut); transition: background .25s ease, color .25s ease; }
.riv-tabs button.on { background: #ffffff; color: var(--riv-ink);
                      box-shadow: 0 1px 2px rgba(15,34,68,.08); }
.riv-pane { display: flex; flex-direction: column; gap: 22px; }
.riv-pane[hidden] { display: none; }

.riv-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 18px; }
.riv-kpi { position: relative; overflow: hidden; padding: 20px 20px 18px; border-radius: 12px;
           background: #ffffff; box-shadow: 0 1px 2px rgba(15,34,68,.05),
           0 10px 26px -10px rgba(15,34,68,.12); transition: box-shadow .22s ease, transform .22s ease; }
.riv-kpi:hover { box-shadow: var(--riv-card-hi); transform: translateY(-2px); }
.riv-kpi-v { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.riv-kpi-v > span { font-size: 27px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
                    color: var(--riv-ink); font-variant-numeric: tabular-nums; }
.riv-kpi-v > b { font-size: 13px; font-weight: 600; color: var(--riv-mut); }
.riv-kpi-s { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--riv-mut);
             font-variant-numeric: tabular-nums; }

.riv-semgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.riv-semmini { padding: 14px 16px; border-radius: 10px; background: #fbfbf9; }
.riv-semmini-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.riv-semmini-t > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--riv-ink); }
.riv-semmini-v { margin-top: 11px; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
                 color: var(--riv-ink); font-variant-numeric: tabular-nums; }
.riv-semmini-p { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--riv-mut);
                 font-variant-numeric: tabular-nums; }
.riv-qmini { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--riv-line);
             display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.riv-qmini > div { padding: 9px 6px; border-radius: 8px; background: var(--riv-soft);
                   text-align: center; }
.riv-qmini b { display: block; font-size: 11px; font-weight: 700; color: var(--riv-ink); }
.riv-qmini span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
                  color: var(--riv-txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.riv-qmini em { display: block; margin-top: 2px; font-style: normal; font-size: 10px;
                font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.riv-ycols { position: relative; display: grid; gap: 18px; margin-top: 16px; }
.riv-ycols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 36px; height: 1px;
                    background: #cfd6e4; }
.riv-ycol { position: relative; display: flex; flex-direction: column; }
.riv-ybars { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.riv-ybars > i { width: 100%; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.riv-yfoot { height: 36px; padding-top: 9px; text-align: center; font-size: 12px;
             font-weight: 600; color: var(--riv-mut); }
.riv-yfoot.on { font-weight: 700; color: var(--riv-ink); }
.riv-ycol:hover .riv-tip { opacity: 1; }
.riv-ycols .riv-tip { bottom: 44px; }

.riv-sts { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.riv-st { position: relative; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) 74px;
          gap: 12px; align-items: center; }
.riv-st > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--riv-txt);
                             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riv-st-b { display: flex; flex-direction: column; gap: 3px; }
.riv-st-b > i { height: 8px; border-radius: 2px; transform-origin: left; }
.riv-st > span:last-child { font-size: 12px; font-weight: 700; text-align: right;
                            font-variant-numeric: tabular-nums; }
.riv-st:hover .riv-tip { opacity: 1; }

.riv-fbars { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px;
             height: 150px; margin-top: 18px; }
.riv-fcol { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
            height: 150px; }
.riv-fcol:hover .riv-tip { opacity: 1; }
.riv-fmesi { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px;
             padding-top: 9px; }
.riv-fmesi > div { text-align: center; font-size: 11px; font-weight: 600; color: var(--riv-mut); }

.riv-hm { display: grid; grid-template-columns: 44px repeat(12,minmax(0,1fr)); gap: 4px;
          align-items: center; }
.riv-hm-h { text-align: center; font-size: 10px; font-weight: 700; color: var(--riv-mut); }
.riv-hm-h.on { color: var(--riv-ink); }
.riv-hm-y { font-size: 11px; font-weight: 700; color: var(--riv-mut);
            font-variant-numeric: tabular-nums; }
.riv-hm-c { position: relative; display: block; height: 30px; border-radius: 4px; cursor: default; }
.riv-hm-c:hover .riv-tip { opacity: 1; }
.riv-hmleg { display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
             font-weight: 600; color: var(--riv-mut); font-variant-numeric: tabular-nums; }
.riv-hmleg > span.sc { display: flex; gap: 2px; }
.riv-hmleg i { width: 16px; height: 8px; border-radius: 2px; }

/* ============================================================
   10 · Per punto di fornitura
   ============================================================ */

.riv-pod { min-width: 800px; }
.riv-pod-h, .riv-podrow {
  display: grid; grid-template-columns: minmax(150px,1.5fr) 54px 104px 148px 100px 144px;
  gap: 12px; align-items: center;
}
.riv-pod-h { align-items: end; padding: 0 12px 9px; border-bottom: 1px solid var(--riv-line); }
.riv-pod-h > span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--riv-mut); }
.riv-pod-h > span.r { text-align: right; }
.riv-pod-h > span.k { color: var(--riv-ink); }
.riv-podrow { position: relative; padding: 11px 12px; border-radius: 8px;
              transition: background .2s ease; }
.riv-podrow:hover { background: #f1f4fa; }
.riv-podrow > i.ind { position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px;
                      border-radius: 2px; background: var(--riv-acc); opacity: 0;
                      transform: scaleY(.4); transition: opacity .22s ease, transform .22s ease; }
.riv-podrow:hover > i.ind { opacity: 1; transform: scaleY(1); }
.riv-pod-n { min-width: 0; }
.riv-pod-n > b { display: block; font-size: 13px; font-weight: 600; color: var(--riv-ink);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riv-pod-n > em { display: block; margin-top: 2px; font-style: normal; font-size: 11px;
                  font-weight: 500; color: var(--riv-mut); font-variant-numeric: tabular-nums;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riv-tag { font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 5px;
           justify-self: start; }
.riv-podrow .v { font-size: 13px; font-weight: 700; color: var(--riv-ink); text-align: right;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.riv-podrow .v em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--riv-mut); }
.riv-podrow .d { font-size: 12.5px; font-weight: 700; text-align: right;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   Isolamento materia dalla legenda
   ============================================================
   riepilogo.js scrive data-dmr-focus sul root: qui si spegne tutto quello che
   non e' la materia puntata. E' una regola sola perche' l'attributo e' uno
   solo — se ogni blocco se la scrivesse per conto suo, dimenticarne uno
   passerebbe inosservato. */

.dmr[data-dmr-focus] [data-dmr-mat] { opacity: .25; }
.dmr[data-dmr-focus="energia"] [data-dmr-mat="energia"],
.dmr[data-dmr-focus="gas"] [data-dmr-mat="gas"],
.dmr[data-dmr-focus="acqua"] [data-dmr-mat="acqua"] { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */

/* v5.146.0 — Sotto i 1320 il vecchio assetto metteva racconto e intreccio
   affiancati: l'anello finiva nella colonna di destra e si leggeva spostato,
   che e' esattamente la sensazione segnalata chiudendo il menu laterale. A
   questa larghezza il simbolo prende una riga sua e torna al centro della
   testata per costruzione, non per un margine azzeccato. */
@media (max-width: 1320px) {
  .riv-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .riv-narr { grid-column: 1 / -1; }
  .riv-vis { grid-column: 1 / -1; width: 100%; max-width: 720px; margin: 0 auto; }
  .riv-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .riv-side > * { flex: 1 1 260px; }
}
@media (max-width: 1160px) {
  .riv-duo, .riv-duo--pari { grid-template-columns: minmax(0,1fr); }
  .riv-letture { grid-template-columns: minmax(0,1fr); gap: 22px; }
}
@media (max-width: 1060px) {
  .riv-main { grid-template-columns: minmax(0,1fr); }
  .riv-ctrl { width: 100%; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .riv-pad { padding: 22px 18px 24px; }
  .riv-panel { padding-left: 18px; padding-right: 18px; }
  /* Dodici colonne e un'asse a destra non stanno in 900px: l'asse se ne va e
     le colonne si stringono, perche' la forma dell'anno si legge lo stesso. */
  .riv-mesi { padding-right: 34px; }
  .riv-gl, .riv-plot { right: 34px; }
  .riv-bars, .riv-mesi, .riv-fbars, .riv-fmesi { gap: 4px; }
  .riv-wfrow { grid-template-columns: minmax(0,1fr) 110px; }
  .riv-wf-track { grid-column: 1 / -1; }
  .riv-x { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .riv-logo { grid-column: 1 / -1; grid-row: 1; max-width: 300px; margin: 0 auto; }
  .riv-kb[data-pos="tl"] { grid-column: 1; grid-row: 2; }
  .riv-kb[data-pos="tr"] { grid-column: 2; grid-row: 2; }
  .riv-kb[data-pos="bl"] { grid-column: 1; grid-row: 3; }
  .riv-kb[data-pos="br"] { grid-column: 2; grid-row: 3; }
  .riv-q { gap: 12px; }
  .riv-semgrid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .riv-tabs { width: 100%; }
  .riv-tabs button { flex: 1; justify-content: center; padding: 10px 8px; }
}

@media print {
  .riv-hero, .riv-panel, .riv-kpi { box-shadow: none; border: 1px solid var(--riv-line); }
  .riv-ctrl, .riv-tog, .riv-help-b, .riv-help, .riv-sortpill, .riv-tabs { display: none; }
  .riv-glow, .riv-glow2, .riv-tip, .riv-chev { display: none; }
  /* In stampa il pannello per materia si apre tutto: le schede sono un modo di
     risparmiare spazio a schermo, sulla carta lo spazio c'e'. */
  .riv-pane[hidden] { display: flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .riv *, .riv *::before, .riv *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Tocco — v5.149.0
   ============================================================
   Le stesse ragioni scritte in fondo a materia-vista.css, con i numeri di
   questa sezione: misurata a 390 px, undici toggle grafico/tabella a 29 px,
   sette pillole dell'anno a 30, i due ordinamenti della classifica a 30, il
   pulsante "come si legge" a 32. La soglia comoda sta sui 44.

   La condizione guarda come si tocca, non quanto e' largo lo schermo: un
   tablet grande ha un dito come un telefono. */

@media (hover: none) and (pointer: coarse) {

  /* I contenitori salgono di quanto serve perche' l'elemento DENTRO arrivi a
     44: e' lui che si tocca, la scatola intorno e' imbottitura. */
  .riv-pill { height: 50px; }
  .riv-pill a { align-self: stretch; padding: 0 16px; }

  .riv-tog, .riv-tog--s, .riv-help-b {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-top: 0; padding-bottom: 0;
  }
  .riv-sortpill button { min-height: 44px; padding: 0 15px; }
  .riv-tabs button { min-height: 46px; }
  .dmr-cta { min-height: 44px; padding-top: 0; padding-bottom: 0;
             display: inline-flex; align-items: center; }

  /* I quattro blocchi intorno all'intreccio sono link: l'area sensibile era
     il testo, adesso e' il riquadro. */
  .riv-kb { padding: 6px; margin: -6px; border-radius: 10px; }

  /* Senza passaggio del mouse lo spegnimento delle altre materie non arriva
     mai: resta una regola che non si attiva, e i blocchi restano tutti pieni.
     Meglio che sia cosi' per costruzione che per caso. */
  .dmr[data-dmr-focus] [data-dmr-mat] { opacity: 1; }
  .riv-rows:hover .riv-row { opacity: 1; }

  .riv-tog:active, .riv-help-b:active, .riv-tabs button:active,
  .riv-sortpill button:active, .riv-pill a:active, .dmr-cta:active,
  .riv-kb:active { transform: scale(.97); }
  .riv-tog, .riv-help-b, .riv-tabs button, .riv-sortpill button,
  .riv-pill a, .dmr-cta, .riv-kb { transition: transform .12s ease; }
  .riv a, .riv button, .riv select,
  .dmr a, .dmr button, .dmr select { -webkit-tap-highlight-color: transparent; }
}

/* Le etichette maiuscole a 9,5 px e le intestazioni delle tabelle a 10 sono
   il testo piu' piccolo del prodotto. Su schermo stretto salgono: 262 elementi
   sotto gli 11 px in una pagina sola erano troppi. */
@media (max-width: 640px) {
  .riv-kic, .riv-kb-l, .riv-tot-l, .riv-hm-h { font-size: 11px; letter-spacing: .1em; }
  .riv-tag { font-size: 11.5px; }
  /* Le intestazioni delle tabelle sono cento venticinque celle a 10,5 px: il
     testo piu' ripetuto della pagina, e il piu' piccolo. Il selettore e'
     > span.h e non .h perche' sono figli diretti della griglia. */
  .riv-tbl > span.h, .riv-pod-h > span { font-size: 11.5px; letter-spacing: .07em; }
  .riv-part, .riv-qfoot em, .riv-anno-d span { font-size: 11.5px; }
  .riv-semmini em, .riv-tbl em, .riv-qmini em { font-size: 11.5px; }
  .riv-part--s { font-size: 11.5px; }
}

/* ============================================================
   Telefono — il totale prima del simbolo
   ============================================================
   Misurata a 390 px: la testata era alta 1.609 px, e il numero piu' importante
   di tutta la pagina — la spesa del periodo — arrivava a 1.100 px di scorrimento,
   dopo il simbolo e dopo i quattro blocchi.

   Su un computer il simbolo grande al centro e' il fuoco della composizione e i
   numeri gli stanno intorno: si legge tutto insieme. Su una colonna larga 390
   non c'e' un "intorno", c'e' un prima e un dopo, e mettere il marchio prima
   della risposta vuol dire far scorrere trecento pixel di logo a chi ha aperto
   la pagina per sapere quanto ha speso.

   Qui l'ordine e': quanto hai speso, come si divide fra le quattro materie, e
   poi il simbolo — piu' piccolo, come firma in chiusura invece che come
   copertina. */
@media (max-width: 640px) {
  .riv-vis { display: flex; flex-direction: column; }
  .riv-tot { order: 1; margin-top: 0; margin-bottom: 20px;
             padding-top: 0; border-top: 0; }
  .riv-x { order: 2; }

  /* I quattro blocchi salgono alle prime due righe, il simbolo scende alla
     terza. Le posizioni sono nominate, non contate: sono le stesse etichette
     tl/tr/bl/br che il PHP scrive da sempre. */
  .riv-kb[data-pos="tl"] { grid-column: 1; grid-row: 1; }
  .riv-kb[data-pos="tr"] { grid-column: 2; grid-row: 1; }
  .riv-kb[data-pos="bl"] { grid-column: 1; grid-row: 2; }
  .riv-kb[data-pos="br"] { grid-column: 2; grid-row: 2; }
  .riv-logo { grid-column: 1 / -1; grid-row: 3; max-width: 180px; margin: 4px auto 0; }
  .riv-x { gap: 20px 16px; }

  /* Dentro i blocchi l'allineamento a destra della coppia di sinistra serviva a
     farli guardare verso il simbolo al centro. Senza un centro fra loro, due
     colonne allineate ai lati opposti sono solo storte. */
  .riv-kb[data-pos="tl"], .riv-kb[data-pos="bl"] { text-align: left; }
  .riv-kb[data-pos="tl"] .riv-kb-h, .riv-kb[data-pos="bl"] .riv-kb-h,
  .riv-kb[data-pos="tl"] .riv-kb-v, .riv-kb[data-pos="bl"] .riv-kb-v,
  .riv-kb[data-pos="tl"] .riv-kb-d, .riv-kb[data-pos="bl"] .riv-kb-d {
    flex-direction: row; justify-content: flex-start;
  }

  /* Le due schede stanno una sotto l'altra: affiancate a meta' colonna il
     testo della copertura andava a capo ogni tre parole. */
  .riv-side { flex-direction: column; }
  .riv-side > * { flex: 0 0 auto; width: 100%; }

  /* "Un anello per materia. CLIC per aprire la sezione." Su un telefono non si
     clicca, e soprattutto quella riga arrivava PRIMA dei quattro blocchi che
     doveva spiegare, mettendosi fra chi legge e il totale. I quattro blocchi
     hanno un nome, un numero e la forma di una scheda: che si tocchino si
     capisce toccandoli. */
  .riv-nota { display: none; }
}