/* podcast.css — la veste editoriale di Breaking News gamma97.
   Palette di casa: blu #002652 + oro #D9AA47. Base CHIARA e stampabile
   (la trappola «stampa bianco su bianco» nasce dai default scuri).
   Font Montserrat self-hosted (da newsletter-engine). Niente CDN. */

@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --blu: #002652; --oro: #D9AA47; --carta: #faf8f4; --inchiostro: #1c2430;
  --grigio: #5c6a7a; --velo: rgba(0, 38, 82, .08); --si: #2e7d4f;
  --no: #b3452e; --forse: #8a6d1f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font: 400 17px/1.65 Georgia, "Times New Roman", serif;
}
body.numero main { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }

/* testata */
.testata {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 3px solid var(--blu);
  background: var(--carta); position: sticky; top: 0; z-index: 5;
}
.testata .marchio {
  font: 700 20px/1 Montserrat, sans-serif; color: var(--blu);
  text-decoration: none; letter-spacing: .02em;
}
.testata .marchio::after { content: "."; color: var(--oro); }
.testata .lingua {
  font: 600 13px/1 Montserrat, sans-serif; color: var(--blu);
  text-decoration: none; border: 1px solid var(--blu); border-radius: 999px;
  padding: 8px 14px; min-height: 32px; display: inline-flex; align-items: center;
}
.testata .lingua:hover { background: var(--blu); color: #fff; }

/* articolo */
article h1 {
  font: 700 clamp(28px, 5vw, 40px)/1.15 Montserrat, sans-serif;
  color: var(--blu); margin: 34px 0 8px;
}
.sotto { font-size: 20px; color: var(--grigio); margin: 0 0 6px; }
.spunto { font-size: 14px; color: var(--grigio); border-left: 3px solid var(--oro); padding-left: 10px; }
.spunto a { color: var(--blu); }
article h2 {
  font: 700 24px/1.25 Montserrat, sans-serif; color: var(--blu);
  margin: 38px 0 10px;
}
article a { color: var(--blu); }
a.rif { text-decoration: none; color: var(--oro); font-weight: 700; }

section[data-tipo] { margin: 0 0 8px; }
section[data-tipo="opinione"] {
  background: var(--velo); border-radius: 10px; padding: 14px 18px; margin: 18px 0;
}
.disclaimer {
  font: 600 13px/1.4 Montserrat, sans-serif; color: var(--forse);
  border-top: 1px dashed var(--forse); padding-top: 8px; margin-bottom: 0;
}

/* stile WSJ: il termine spiegato lì dove compare */
.spiega dfn { font-style: normal; font-weight: 700; border-bottom: 2px dotted var(--oro);
  cursor: pointer; }
.spiega dfn::after { content: " \25B8"; color: var(--oro); font-size: 12px; }
.spiega dfn[aria-expanded="true"]::after { content: " \25BE"; }
@media print { .spiega-testo[hidden] { display: block !important; } }
/* [hidden] perde contro qualunque display dichiarato: la regola esplicita
   è l'unica che chiude DAVVERO il riquadro (trappola pagata 16/08/2026 —
   e verificata male: guardato l'attributo, non la resa). */
.spiega .spiega-testo[hidden] { display: none !important; }
.spiega .spiega-testo {
  display: block; font: 400 14px/1.5 Montserrat, sans-serif;
  color: var(--grigio); background: #fff; border: 1px solid var(--velo);
  border-left: 3px solid var(--oro); border-radius: 8px;
  padding: 8px 12px; margin: 6px 0 10px;
}

/* verdetti */
.verdetti .verdetto {
  border: 1px solid var(--velo); border-radius: 10px; padding: 12px 16px;
  margin: 10px 0; background: #fff;
}
.v-eti {
  font: 700 12px/1 Montserrat, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; border-radius: 999px; padding: 4px 10px; color: #fff;
  display: inline-block; margin-bottom: 6px;
}
.v-confermata .v-eti { background: var(--si); }
.v-smentita .v-eti { background: var(--no); }
.v-incerta .v-eti { background: var(--forse); }

/* polarità: DUE colonne, mai orfani (griglia 2, su mobile 1) */
.polarita { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.pol-col { background: #fff; border: 1px solid var(--velo); border-radius: 10px; padding: 6px 16px 12px; }
.pol-col h3 { font: 700 15px/1.3 Montserrat, sans-serif; color: var(--blu); }
.pol-col ul { margin: 0; padding-left: 18px; font-size: 15px; }
.pol-col li { margin: 8px 0; }
@media (max-width: 700px) { .polarita { grid-template-columns: 1fr; } }

/* figure e viz */
figure { margin: 26px 0; position: relative; background: #fff; border: 1px solid var(--velo); border-radius: 12px; padding: 14px 16px 10px; }
figure h3 { font: 600 16px/1.3 Montserrat, sans-serif; color: var(--blu); margin: 0 0 8px; }
figure figcaption { font: 400 12px/1.4 Montserrat, sans-serif; color: var(--grigio); margin-top: 6px; }
figure .asse { font: 11px Montserrat, sans-serif; color: var(--grigio); }
.viz-qui { position: relative; min-height: 40px; }
.viz-tip {
  position: absolute; pointer-events: none; background: var(--blu); color: #fff;
  font: 600 12px/1 Montserrat, sans-serif; padding: 6px 9px; border-radius: 6px;
  white-space: nowrap; z-index: 3;
}
.filigrana {
  position: absolute; right: 14px; top: 12px; color: var(--oro); opacity: .22;
  font: 700 18px/1 Montserrat, sans-serif; letter-spacing: .06em;
  pointer-events: none; user-select: none;
}
figure.tab .scorri { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font: 400 14px/1.5 Montserrat, sans-serif; }
th { text-align: left; color: var(--blu); border-bottom: 2px solid var(--blu); padding: 6px 10px; }
td { border-bottom: 1px solid var(--velo); padding: 6px 10px; }
pre.mermaid { overflow-x: auto; font-size: 13px; }

/* linea del tempo e kpi */
.linea-tempo { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--oro); }
.linea-tempo li { padding: 6px 0 6px 16px; position: relative; font-size: 15px; }
.linea-tempo li::before {
  content: ""; position: absolute; left: -7px; top: 13px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--blu); border: 2px solid var(--carta);
}
.lt-q { font: 700 13px/1.4 Montserrat, sans-serif; color: var(--blu); display: block; }
.kpi-fila { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi-fila:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.kpi-fila:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.kpi { text-align: center; padding: 10px 6px; }
.kpi-v { font: 700 30px/1.1 Montserrat, sans-serif; color: var(--blu); display: block; }
.kpi-n { font: 600 12px/1.3 Montserrat, sans-serif; color: var(--grigio); }

/* riferimenti, licenza */
.riferimenti-sez { margin-top: 40px; }
.riferimenti { font-size: 13px; color: var(--grigio); padding-left: 20px; }
.riferimenti li { margin: 6px 0; overflow-wrap: anywhere; }
footer { border-top: 3px solid var(--blu); margin-top: 30px; }
.licenza {
  max-width: 760px; margin: 0 auto; padding: 18px 20px;
  font: 400 12px/1.5 Montserrat, sans-serif; color: var(--grigio);
}

/* podcast (il pezzo porta il suo CSS scuro: gli diamo un fondale) */
.sez-podcast:not(:empty) {
  background: #0a1628; border-radius: 14px; padding: 18px 20px; margin: 22px 0;
}
/* il titolo del riquadro era blu su blu notte: si legge in carta (16/08 sera) */
.sez-podcast h2, .sez-podcast h3 { color: #f5f0e8; }

@media print {
  .testata, .sez-podcast, .lingua { display: none; }
  body { background: #fff; color: #000; }
  figure, .pol-col, .verdetti .verdetto { border-color: #999; }
}

.disclaimer-numero {
  max-width: 760px; margin: 0 auto; padding: 16px 20px 0;
  font: 600 13px/1.5 Montserrat, sans-serif; color: var(--forse);
}

/* avviso di consenso della misura (beacon.js) — MINIMO LEGALE (16/08/2026):
   schedina compatta, testo piccolo, ma i due bottoni di PARI peso —
   un «rifiuta» sminuito rende il consenso non valido. */
.avviso-misura {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  max-width: 300px; margin: 0 auto; background: #fff;
  border: 1px solid var(--velo); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 38, 82, .16); padding: 10px 12px;
  font: 400 11px/1.4 Montserrat, sans-serif; color: var(--grigio);
}
@media (min-width: 700px) { .avviso-misura { left: auto; right: 18px; bottom: 18px; } }
.avviso-misura .am-testo strong {
  font-size: 12px; color: var(--blu); display: block; margin-bottom: 3px;
}
.avviso-misura .am-testo p { margin: 0 0 10px; }
.avviso-misura .am-scelte { display: flex; gap: 8px; }
.avviso-misura .am-scelte button {
  flex: 1 1 0; font: 600 12px/1 Montserrat, sans-serif; cursor: pointer;
  border: 1px solid var(--blu); border-radius: 999px; padding: 8px 6px;
  min-height: 34px; background: #fff; color: var(--blu);
}
.avviso-misura .am-scelte button:hover { background: var(--velo); }
.avviso-misura .am-piu {
  display: inline-block; margin-top: 6px; color: var(--grigio);
  font-size: 10px;
}
.avviso-misura.uscita { opacity: 0; transition: opacity .4s; }

.consenso.facolt { color: var(--grigio); }

/* copertina del numero (s6b): originale nostra, 16:9 */
.copertina { padding: 0; border: none; background: none; margin: 18px 0 6px; }
.copertina img { width: 100%; height: auto; border-radius: 14px; display: block; }

/* diagrammi mermaid ANIMATI (16/08/2026, rifatti): l'animazione riguarda la
   VISIONE, non la creazione — i rami scorrono di continuo e i nodi PULSANO.
   ⛔ mai `transform` sui nodi: sovrascrive le trasformazioni SVG di Mermaid
   e il diagramma si taglia (successo, stesso giorno). */
.mermaid svg { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .mermaid .node rect, .mermaid .node polygon, .mermaid .node circle {
    animation: brk-pulsa 2.6s ease-in-out infinite;
  }
  .mermaid .node:nth-of-type(2n) rect, .mermaid .node:nth-of-type(2n) polygon {
    animation-delay: 1.3s;
  }
}
@keyframes brk-viaggia { to { stroke-dashoffset: var(--brk-corsa, -240); } }
@keyframes brk-pulsa {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14) saturate(1.25); }
}



/* la nota di metodo: la centralità dichiarata, IN TESTA a ogni numero
   (direttiva 16/08/2026 sera: è ciò che ci distingue, si dichiara subito —
   valorizzata ma compatta, mai un ostacolo alla lettura) */
.metodo-nota {
  background: var(--velo); border-left: 4px solid var(--oro);
  border-radius: 10px; padding: 6px 18px 12px; margin: 34px 0 8px;
}
.metodo-nota h2 { font-size: 18px; margin-top: 14px; }
.metodo-nota p { font-size: 14px; margin: 6px 0 0; }
.metodo-nota a { font-weight: 700; }
.metodo-testa, .metodo-coda { margin: 20px 0 28px; padding: 12px 20px 14px; }
.metodo-testa h2, .metodo-coda h2 {
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blu); margin: 8px 0 0;
}
.metodo-testa h2::before, .metodo-coda h2::before { content: "✓ "; color: var(--oro); }
.metodo-testa p, .metodo-coda p { font-size: 14.5px; line-height: 1.55; color: var(--grigio); }
.metodo-testa a, .metodo-coda a { color: var(--blu); }

/* ═══════════════ IL VESTITO «VENTO» INTEGRALE (16/08/2026 sera) ═══════════════
   Direttiva del proprietario: lo stile si applica NELLA SUA INTEREZZA — tipografia
   Fraunces/Archivo/Archivo Narrow, header, apertura col campo di filamenti,
   schede, reveal, nastro — su TUTTE le pagine. Adattamenti dichiarati:
   palette portata sul brand gamma97 (notte blu + oro, non prato verde);
   apertura RIDOTTA sulle pagine dei numeri (il campo accompagna il testo,
   non gli ruba la scena — regola propria dello stile); corpo articolo su carta
   chiara e stampabile. Font self-hosted (CSP font-src self). */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("/assets/fonts/archivo-narrow-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --serif: "Fraunces", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
  --narrow: "Archivo Narrow", "Arial Narrow", sans-serif;
  --notte: #001830;            /* il --deep di Vento, sul blu di casa */
  --hi: #e8c476; --mid: #8a6f2f;  /* i filamenti: oro chiaro e oro cupo */
  --gutter: clamp(20px, 4vw, 64px);
}

/* ── tipografia: il corpo parla Archivo, i titoli Fraunces leggero ── */
body { font-family: var(--sans); }
h1, h2, h3, .arch-titolo, .iscriviti h2, .num-carta h3,
.regia-carta h2, .voce-carta h3 {
  font-family: var(--serif); font-weight: 340; letter-spacing: -.015em;
}
h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; text-wrap: balance; }
h2, .arch-titolo { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.06; }
strong, b { font-weight: 640; }

/* le etichette parlano Archivo Narrow, maiuscolo spaziato */
.occhiello, .kicker, .badge, .quando, .num-carta .lingue, .voce-carta .tipo,
.metodo-testa h2, .metodo-coda h2, .bott, .iscriviti button, .apertura .giu, .esito {
  font-family: var(--narrow) !important; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ── header: la firma di testata in stile Vento ── */
header.testata {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--velo);
}
header.testata .marchio {
  font: 700 13px/1.25 var(--narrow); letter-spacing: .18em;
  text-transform: uppercase; color: var(--blu); text-decoration: none;
}
header.testata .lingua {
  font: 700 12.5px/1 var(--narrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--blu); text-decoration: none;
  border: 1px solid var(--velo); border-radius: 999px; padding: 10px 18px;
}
header.testata .lingua:hover { border-color: var(--oro); }

/* ── l'apertura, proporzioni Vento: testo in basso a sinistra ── */
.apertura {
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: stretch;
}
.apertura-testo {
  text-align: left; align-self: flex-start; max-width: 900px;
  padding: 60px var(--gutter) clamp(36px, 6vh, 72px);
}
.apertura .occhiello { letter-spacing: .34em; color: var(--hi); }
.apertura h1 {
  font-family: var(--serif); font-weight: 320;
  font-size: clamp(46px, 8.6vw, 118px); line-height: .98;
}
/* ⚠️ Il nome della testata e' lungo tre volte «Podcast»: allo stesso corpo
   prenderebbe tutta la riga e schiaccerebbe la colonna di destra. Qui scende,
   e resta comunque la cosa piu' grande della pagina. */
.apertura-testo:has(.ap-colonne) h1 {
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; max-width: 11ch;
}
.apertura h1 em { font-style: italic; color: var(--hi); }
.apertura .lede { font-family: var(--sans); max-width: 560px; margin-left: 0; }

/* apertura RIDOTTA sulle pagine dei numeri: accompagna, non domina */
.apertura-numero { min-height: min(52vh, 540px); background: var(--notte); }
.apertura-numero h1 { font-size: clamp(30px, 4.6vw, 62px); line-height: 1.04; color: #faf8f4; }
.apertura-numero .lede { color: #cfe0f5; font-size: clamp(15px, 1.4vw, 18px); }

/* ── la striscia dati sotto l'apertura (hero-strip di Vento) ── */
.apertura-strip {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(232, 196, 118, .25); background: var(--notte);
}
.apertura-strip div {
  padding: 16px var(--gutter); font: 700 11.5px/1.4 var(--narrow);
  letter-spacing: .22em; text-transform: uppercase; color: rgba(250, 248, 244, .66);
  border-right: 1px solid rgba(232, 196, 118, .25);
}
.apertura-strip div:last-child { border-right: none; }
.apertura-strip b { color: var(--hi); }
@media (max-width: 700px) { .apertura-strip { grid-template-columns: 1fr; }
  .apertura-strip div { border-right: none; border-bottom: 1px solid rgba(232,196,118,.18); } }

/* ── il nastro (marquee di Vento) ── */
.nastro { overflow: hidden; background: var(--blu); color: #faf8f4; }
.nastro-scorri { display: flex; width: max-content; animation: nastro 28s linear infinite; }
.nastro span {
  font: 700 clamp(13px, 1.4vw, 17px)/1 var(--narrow); letter-spacing: .3em;
  text-transform: uppercase; white-space: nowrap; padding: 14px 26px;
}
.nastro span::after { content: "◆"; color: var(--oro); margin-left: 48px; font-size: 10px; }
@keyframes nastro { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nastro-scorri { animation: none; } }

/* ── le schede numero in stile Vento: filo alto, serif, scatto al passaggio ── */
a.num-carta {
  border: none; border-top: 1px solid var(--blu); border-radius: 0;
  background: transparent; padding: 18px 4px 22px;
  transition: transform .3s ease;
}
a.num-carta:hover { transform: translateY(-4px); }
a.num-carta:hover h3 { color: var(--oro); }
.num-carta h3 { transition: color .3s ease; }
.num-carta img { border-radius: 0 !important; }
/* 02/09/2026, giro 6 — LE COPERTINE STANNO IN <picture> (per il WebP), e
   <picture> e' un elemento IN LINEA per difetto: senza queste due righe la
   copertina della home prende lo spazio bianco della riga di testo, e quella
   dell'indice perde l'altezza (`.scheda-cop img { height: 100% }` si
   misurerebbe su un <picture> alto quanto niente). Il ritaglio 16/9 e
   l'ingrandimento al passaggio del mouse restano dove sono: i selettori sono
   discendenti (`.scheda-cop img`), non figli diretti. */
.num-carta picture { display: block; }
.scheda-cop picture { display: block; width: 100%; height: 100%; }

/* ── il reveal di Vento ── */
[data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.25,.1,.25,1), transform .9s cubic-bezier(.25,.1,.25,1);
  transition-delay: calc(var(--stagger, 0) * 120ms); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }


/* ── il nastro dei KPI (17/08/2026): secondo nastro sopra il primo, passo
   piu' lento — la parallasse fra i due e' l'animazione. I numeri sono
   GENERATI da archivio.py fra i marcatori KPI-GENERATI: mai a mano. ── */
.nastro-kpi { border-bottom: 1px solid rgba(217, 170, 71, .35); }
.nastro-kpi .nastro-scorri { animation-duration: 46s; }
.nastro-kpi b {
  font-family: var(--serif, Fraunces, Georgia, serif);
  color: var(--oro); font-size: 1.25em; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-right: .35em;
}

/* ── bottoni e piede ── */
.bott, .iscriviti button { border-radius: 0; letter-spacing: .18em; }
footer { border-top: 1px solid var(--blu); }
footer .licenza { font-family: var(--narrow); letter-spacing: .08em; }

/* ── in stampa l'apertura si fa sobria: carta bianca, inchiostro ── */
@media print {
  .apertura, .apertura-numero { min-height: 0; background: #fff; }
  .apertura canvas, .nastro, .nastro-kpi, .apertura-strip { display: none; }
  .apertura h1, .apertura-numero h1 { color: #000; }
  .apertura .lede, .apertura-numero .lede { color: #333; }
}

/* ═══ I DISEGNI DELLA FORMA (16/08/2026 sera) — confronto · prove · binario ═══ */
.viz-confronto { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.viz-confronto th { font: 700 11.5px/1.3 var(--narrow); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blu); padding: 10px 8px;
  border-bottom: 2px solid var(--blu); text-align: center; }
.viz-confronto tbody th { text-align: left; font-size: 12.5px; letter-spacing: .06em;
  border-bottom: 1px solid var(--velo); text-transform: none; color: var(--inchiostro); }
.viz-confronto tbody th .u { color: var(--grigio); font-weight: 400; }
.viz-confronto td.cella { text-align: center; padding: 10px 8px;
  border-bottom: 1px solid var(--velo); border-left: 1px solid var(--velo); }
.viz-confronto td .v { display: block; font: 700 17px/1.2 var(--sans); }
.viz-confronto td .n { display: block; font-size: 11.5px; color: var(--grigio); margin-top: 3px; }
.viz-confronto td.esito-si { background: rgba(46,125,79,.10); }
.viz-confronto td.esito-si .v { color: var(--si); }
.viz-confronto td.esito-no { background: rgba(179,69,46,.10); }
.viz-confronto td.esito-no .v { color: var(--no); }
.viz-confronto td.esito-forse { background: rgba(138,109,31,.10); }
.viz-confronto td.esito-forse .v { color: var(--forse); }
.viz-legenda { font: 400 11.5px/1.5 var(--sans); color: var(--grigio); margin: 10px 0 0; }
.viz-legenda .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.viz-legenda .si { background: var(--si); } .viz-legenda .no { background: var(--no); }
.viz-legenda .forse { background: var(--forse); }
.sc-esito { font: 600 13px/1.2 var(--sans); fill: var(--blu); }
.sc-chi { font: 400 11px/1.2 var(--sans); fill: var(--grigio); }
.viz-binario { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .viz-binario { grid-template-columns: 1fr; } }
.viz-binario h4 { font: 700 11.5px/1 var(--narrow); letter-spacing: .2em;
  text-transform: uppercase; color: var(--oro); margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--velo); }
.viz-binario ul { list-style: none; margin: 0; padding: 0; }
.viz-binario li { padding: 8px 0 8px 14px; border-left: 2px solid var(--velo); }
.viz-binario li:hover { border-left-color: var(--oro); }
.viz-binario .q { display: block; font: 700 11px/1.4 var(--narrow);
  letter-spacing: .12em; color: var(--grigio); }
.viz-binario .c { display: block; font-size: 14px; line-height: 1.45; }
@media print { .viz-confronto td.cella, .viz-confronto th { border-color: #999; } }

/* ═══ NIENTE DISEGNI TAGLIATI (16/08/2026 sera) ═══════════════════════════
   Il diagramma usciva dai margini e si vedeva solo spostando il cursore:
   mermaid emette un <svg> con width in PIXEL e un max-width proprio, più
   largo della colonna. Qui l'SVG si adatta SEMPRE al posto che ha; se il
   disegno è davvero largo, scorre dentro il suo riquadro invece di sporgere.
   Misurato da prove/tagli.py — uno scatto d'insieme non lo mostrava. */
figure svg, pre.mermaid svg, .mermaid svg {
  max-width: 100% !important; height: auto; display: block;
}
pre.mermaid, .mermaid { max-width: 100%; overflow-x: auto; }
figure .viz-qui { overflow-x: auto; }
figure, figure * { max-width: 100%; }
/* le tabelle larghe scorrono dentro il riquadro, mai fuori dalla pagina */
figure .viz-confronto { min-width: 520px; }

/* ═══ FOTO DI REPERTORIO LIBERE (16/08/2026 sera) ═════════════════════════
   Immagini con licenza libera verificata, scaricate e servite da noi, con
   autore e licenza sotto: è ciò che la licenza chiede in cambio. */
figure.foto-libera { padding: 0; overflow: hidden; border-radius: 12px; }
figure.foto-libera img {
  display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0;
}
figure.foto-libera figcaption {
  padding: 10px 16px 12px; margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--grigio); background: #fff;
}
figure.foto-libera figcaption a { color: var(--blu); }
/* 02/09/2026, giro 7 — ANCHE LE IMMAGINI DEGLI ARTICOLI STANNO IN <picture>
   (per il WebP), e <picture> è un elemento IN LINEA per difetto: senza queste
   due righe l'immagine si porterebbe dietro lo spazio della riga di testo e il
   ritaglio del riquadro. È la stessa riparazione già fatta al giro 6 per le
   copertine della home (.num-carta picture): stesso difetto, altro selettore. */
figure.foto-libera picture, figure.copertina picture { display: block; }
@media print { figure.foto-libera { break-inside: avoid; } }

/* il disegno CAD: quote e nomi come in un disegno di officina */
.quota-cad { font: 600 11px/1 "Archivo Narrow", var(--sans); fill: var(--blu); letter-spacing: .04em; }
.nome-cad { font: 400 12px/1.3 var(--sans); fill: var(--inchiostro); }

/* La culla della tabella di confronto (17/08/2026, misurato a 390px).
   Una tabella comparativa si legge per colonne e non si può stringere senza
   spezzare il paragone: scorre lei, e la pagina resta ferma. L'ombra a destra
   dice al lettore che oltre il bordo c'è dell'altro. */
.viz-culla { overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; }
.viz-culla > .viz-confronto { min-width: 460px; }
@media (max-width: 700px) {
  .viz-culla { background:
      linear-gradient(to right, var(--carta, #fff) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--carta, #fff) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,38,82,.14), rgba(0,38,82,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,38,82,.14), rgba(0,38,82,0)) 100% 0;
    background-repeat: no-repeat; background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll; }
  .viz-confronto th, .viz-confronto td.cella { padding-left: 6px; padding-right: 6px; }
}

/* Il dato che non c'è si dichiara, non si lascia un buco (17/08/2026) */
.viz-mancante { margin: 0; padding: 18px 20px; font: 400 13.5px/1.6 var(--sans);
  color: var(--grigio); background: rgba(0,38,82,.035);
  border-left: 3px solid var(--velo); border-radius: 3px; }


/* ── la sintesi d'apertura (18/08/2026): il numero in un fiato ── */
.sintesi-apertura { max-width: 720px; margin: 26px auto 6px; padding: 0 24px; }
.sintesi-apertura p {
  font-size: 1.16rem; line-height: 1.72; color: #1c2b3a;
  border-top: 3px solid #D9AA47; padding-top: 18px;
}
.sintesi-apertura p::first-letter { color: #002652; font-weight: 700; }


/* ── l'indice completo (18/08/2026) ── */
.indice-pagina { background: #faf7f0; color: #1c2b3a; }
.testata-riga { display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 5vw; }
.testata-riga .marchio { color: #002652; font-weight: 700; letter-spacing: .14em;
  text-decoration: none; font-size: .95rem; }
.indice-conta { color: #8a6d1f; font-size: .85rem; letter-spacing: .08em; }
.indice { max-width: 1100px; margin: 0 auto; padding: 10px 5vw 70px; }
.indice h1 { color: #002652; font-size: 2.6rem; margin: 20px 0 6px; }
.indice-nota { color: #5c6a7a; margin-bottom: 34px; max-width: 640px; }
.indice-riga { border-top: 1px solid #d9d2c2; padding: 26px 0 30px; }
.indice-riga:first-of-type { border-top: 3px solid #D9AA47; }
.indice-testa { display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 18px; font-size: .82rem; letter-spacing: .06em; }
.indice-testa .quando { color: #8a6d1f; text-transform: uppercase; }
.indice-lingue, .indice-lingue a { color: #5c6a7a; text-decoration: none; }
.indice-lingue a:hover { color: #002652; text-decoration: underline; }
.indice-riga h2 { margin: 8px 0 10px; font-size: 1.55rem; line-height: 1.25; }
.indice-riga h2 a { color: #002652; text-decoration: none; }
.indice-riga h2 a:hover { text-decoration: underline; }
.indice-riga p { line-height: 1.7; color: #2c3a4a; max-width: 950px; }
@media (max-width: 640px) { .indice h1 { font-size: 2rem; }
  .indice-riga h2 { font-size: 1.25rem; } }

.giu-fila { display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* il tasto dell'indice: vedi «I DUE TASTI DELL'APERTURA» in fondo (20/08/2026) */

/* indice: la firma della testata (18/08/2026) */
.apertura-indice { min-height: 46vh; }
.indice h1, .indice-riga h2 { font-family: "Fraunces", Georgia, serif; }
.indice-riga h2 { font-weight: 560; font-size: 1.7rem; }
.indice-riga h2 a { text-decoration: none; }
.vai { margin-left: 16px; padding: 3px 12px; border: 1.5px solid #D9AA47;
  color: #87651C; text-decoration: none; font-size: .78rem;
  letter-spacing: .08em; white-space: nowrap; }
.vai:hover { background: #D9AA47; color: #002652; }

/* 18/08/2026: la nota di metodo sta in FONDO, prima dei riferimenti —
   il racconto non si interrompe piu' per parlare delle verifiche. */
.metodo-coda { margin: 40px 0 8px; }

/* ---- INDICE A GRIGLIA (19/08/2026) ------------------------------------------
   Trentasette numeri non si scorrono a tutta larghezza: si abbracciano con lo
   sguardo. Copertina, giorno, titolo, una riga. */
.indice-giorno { font-family: var(--narrow, inherit); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grigio, #6b7280);
  margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.10); }
.indice-griglia { display: grid; gap: 26px 24px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.indice-griglia .scheda { display: flex; flex-direction: column; }
.scheda-link { display: block; text-decoration: none; color: inherit; }
.scheda-cop { display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 10px; background: rgba(0,0,0,.06); }
.scheda-cop img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.scheda-link:hover .scheda-cop img { transform: scale(1.04); }
.indice-griglia .scheda h3 { font-size: 19px; line-height: 1.25; margin: 12px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.indice-griglia .scheda p { font-size: 14.5px; line-height: 1.5; margin: 0;
  color: var(--grigio, #4b5563);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.scheda-pie { display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px !important; font-size: 12.5px; letter-spacing: .06em;
  color: var(--grigio, #6b7280); }
.scheda-pie a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 620px) {
  .indice-griglia { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .indice-griglia .scheda h3 { font-size: 16px; -webkit-line-clamp: 3; }
  .indice-griglia .scheda p { display: none; }
}

/* L'indice a griglia vuole respiro: la misura di lettura (1100px) serve al testo
   a tutta larghezza, non a una griglia di schede (19/08/2026). */
.indice-pagina .indice { max-width: 1260px; padding-left: 3vw; padding-right: 3vw; }
.indice-pagina .indice-griglia { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (min-width: 1000px) {
  .indice-pagina .indice-griglia { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .indice-pagina .indice-griglia { grid-template-columns: repeat(3, 1fr); }
}

/* il campo di ricerca dell'indice (19/08/2026) */
.cerca-riga { display: flex; align-items: center; gap: 12px; margin: 26px 0 6px; }
.cerca-riga input { flex: 1; max-width: 520px; font: inherit; font-size: 15px;
  padding: 11px 15px; border: 1px solid rgba(0,0,0,.16); border-radius: 999px;
  background: #fff; color: inherit; }
.cerca-riga input:focus { outline: none; border-color: #8a6d1f;
  box-shadow: 0 0 0 3px rgba(138,109,31,.14); }
.cerca-riga input::placeholder { color: #9aa3ad; }
#cerca-esito { font-size: 13px; letter-spacing: .06em; color: #6b7280; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* ── LE DUE AREE DELLA TESTATA (20/08/2026) ─────────────────────────────────
   Ordine del proprietario: «tutte le strutture del sito, dividiamola in due,
   news e racconti e scienze». L'attualità deperisce, i racconti no: mescolarli
   in un elenco unico penalizzava la lettura di entrambi. L'intestazione d'area
   pesa più del sottotitolo del giorno, che le sta dentro. */
.area-testata { font-size: clamp(26px, 4vw, 38px); line-height: 1.1;
  margin: 68px 0 6px; padding-top: 26px; letter-spacing: -.01em;
  border-top: 2px solid rgba(240,180,41,.55); }
.area-testata:first-of-type { margin-top: 18px; }
.area-riga { display: block; font-family: var(--narrow, inherit);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grigio, #6b7280); margin-top: 8px; font-weight: 400; }
/* dentro un'area il giorno è un livello più in basso, e pesa meno */
.area-testata + .indice-giorno, .indice-giorno { margin-top: 30px; }
.aree-scorciatoia { font-family: var(--narrow, inherit); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.aree-scorciatoia a { color: var(--grigio, #6b7280); text-decoration: none;
  border-bottom: 1px solid rgba(240,180,41,.5); padding-bottom: 2px; }
.aree-scorciatoia a:hover { color: inherit; }
@media (max-width: 700px) {
  .area-testata { margin-top: 46px; padding-top: 20px; }
}

/* ── IL COMMUTATORE DI LINGUA (20/08/2026) ──────────────────────────────────
   Ordine del proprietario: «invece di esserci "leggi in italiano" o "leggi in
   inglese", dovrebbe esserci in alto a destra il pulsante italiano inglese,
   come abbiamo fatto sugli altri applicativi». Stessa forma di inri.gamma97.com,
   coi colori di questa testata.
   ⚠️ `.lingue` è `position:fixed` e NON va mai messo `relative`: cade dentro il
   flusso e la pillola diventa una barra distesa sopra l'apertura. Errore già
   pagato su inri il 15/08/2026. */
.lingue { position: fixed; top: clamp(14px, 2.2vh, 26px);
  right: clamp(14px, 3vw, 40px); z-index: 70; display: flex; gap: 2px;
  padding: 3px; border-radius: 999px; background: rgba(10,22,40,.62);
  backdrop-filter: blur(9px); border: 1px solid rgba(240,180,41,.42);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.6); }
.lingue a { display: block; font-family: var(--narrow, inherit); font-weight: 700;
  font-size: 12px; letter-spacing: .16em; padding: 8px 15px; border-radius: 999px;
  text-decoration: none; color: rgba(245,240,232,.82);
  transition: background .22s, color .22s; }
.lingue a:hover { color: #F0B429; }
.lingue a.qui { background: #F0B429; color: #0A1628; }
@media print { .lingue { display: none; } }


/* ── I TRE TASTI DELLE AREE (20/08/2026) ───────────────────────────────
   «tre pulsanti veloci che mandano a news, a scienze, a storie» → «molto
   più evidenti e più belli» → «spigolosi: un effetto stondato
   tridimensionale, proprio come se fossero dei pulsanti» → «hanno una
   colorazione dei caratteri leggermente diversa rispetto alla parte alta
   del sito, e non hanno l'aspetto tridimensionale».

   DUE REGOLE IMPARATE QUI.
   1) I colori e i caratteri si prendono dai TOKEN della testata, mai a
      occhio: il numero è var(--oro) #D9AA47 in var(--serif) Fraunces con
      font-variant-numeric tabular — le stesse dichiarazioni di `.nastro-kpi b`
      nella fascia in alto — e l'etichetta è var(--narrow) spaziata come
      `.nastro span`. La prima versione usava #F0B429 e Georgia: vicini, e
      per questo stonavano.
   2) Il rilievo NON è un'ombra sfocata sotto, che dà una carta che fluttua.
      Serve la catena completa di un tasto fisico: lume sul bordo alto,
      penombra sul bordo basso, pendenza di colore dall'alto in basso,
      ZOCCOLO pieno (l'ombra dura, senza sfocatura) e sotto una vera ombra
      portata. Premendo, il tasto scende dell'altezza dello zoccolo e lo
      zoccolo sparisce: è quel gesto a farlo sentire un tasto.
   ⚠️ Il commutatore di lingua è position:fixed a 17px dall'alto: qui si sta
   sotto e con z-index più basso, o le due cose si accavallano. */
.aree-tasti{
  position:sticky; top:0; z-index:20;
  display:flex; gap:18px; flex-wrap:wrap; align-items:stretch;
  margin:0 0 46px; padding:20px 0 26px;
  background:var(--carta,#faf8f4);
  box-shadow:0 1px 0 rgba(0,38,82,.10), 0 14px 26px -22px rgba(0,38,82,.6);
}
.aree-tasti a, .aree-tasti .area-filtro{
  position:relative; display:flex; flex-direction:column; gap:1px;
  padding:15px 30px 14px; min-width:148px;
  border-radius:18px;
  background:linear-gradient(178deg,#1E4173 0%,#0B3061 34%,#002652 72%,#00203F 100%);
  color:#faf8f4; text-decoration:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),     /* il lume sul bordo alto */
    inset 0 0 0 1px rgba(217,170,71,.16),      /* un filo d'oro perimetrale */
    inset 0 -3px 6px rgba(0,10,25,.55),        /* la penombra in basso */
    0 6px 0 #001A34,                            /* lo ZOCCOLO: lo spessore */
    0 14px 22px -8px rgba(0,26,52,.55),         /* l'ombra portata */
    0 2px 3px rgba(0,26,52,.30);
  transition:transform .13s ease, box-shadow .13s ease, filter .18s ease;
}
.aree-tasti a:hover,.aree-tasti a:focus-visible,
.aree-tasti .area-filtro:hover,.aree-tasti .area-filtro:focus-visible{
  filter:brightness(1.12);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.38),
    inset 0 0 0 1px rgba(217,170,71,.34),
    inset 0 -3px 6px rgba(0,10,25,.5),
    0 8px 0 #001A34,
    0 18px 26px -8px rgba(0,26,52,.6),
    0 2px 3px rgba(0,26,52,.3);
}
.aree-tasti a:active, .aree-tasti .area-filtro:active{                       /* premuto: scende sullo zoccolo */
  transform:translateY(6px);
  box-shadow:
    inset 0 3px 7px rgba(0,10,25,.65),
    inset 0 0 0 1px rgba(217,170,71,.2),
    0 0 0 #001A34,
    0 3px 6px -3px rgba(0,26,52,.5);
}
.aree-tasti a:focus-visible{outline:2px solid var(--oro,#D9AA47); outline-offset:5px}
/* il numero: le stesse dichiarazioni di .nastro-kpi b, in grande */
.tasto-conta{
  order:-1;
  font-family:var(--serif,"Fraunces",Georgia,serif);
  font-size:32px; line-height:1.08; font-weight:600;
  color:var(--oro,#D9AA47);
  font-variant-numeric:tabular-nums; letter-spacing:-.005em;
  text-shadow:0 1px 0 rgba(0,16,32,.55);
}
/* l'etichetta: lo stesso carattere spaziato delle strisce in alto */
.tasto-nome{
  font-family:var(--narrow,"Archivo Narrow","Arial Narrow",sans-serif);
  font-size:12px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#faf8f4;
  text-shadow:0 1px 0 rgba(0,16,32,.5);
}
.area-testata{scroll-margin-top:108px}
@media (prefers-reduced-motion:reduce){
  .aree-tasti a{transition:none}
  .aree-tasti a:hover,.aree-tasti a:focus-visible,.aree-tasti a:active{transform:none}
}
@media (max-width:640px){
  .aree-tasti{gap:11px; padding:15px 0 20px; margin-bottom:32px}
  .aree-tasti a{min-width:0; flex:1; padding:12px 12px 11px; align-items:center;
                border-radius:15px}
  .tasto-conta{font-size:26px}
  .tasto-nome{font-size:10.5px; letter-spacing:.15em}
}


/* ── I DUE TASTI DELL'APERTURA (20/08/2026) ───────────────────────────────
   Erano due rettangoli piatti: uno d'oro pieno, uno col solo contorno.
   Ricevono la stessa catena dei tre tasti delle aree — lume sul bordo alto,
   filo perimetrale, penombra in basso, pendenza di colore, ZOCCOLO pieno e
   ombra portata — perché due tasti nella stessa pagina non possono obbedire
   a due fisiche diverse. Premendoli scendono dell'altezza dello zoccolo e lo
   zoccolo sparisce: è quel gesto a farli sentire tasti.
   I due sono i due lati della stessa moneta: il primo è d'oro (chiama
   all'azione), il secondo è di notte col filo d'oro (accompagna), e all'hover
   si riempie d'oro senza mai perdere lo spessore.
   ⚠️ Colori dai TOKEN, mai a occhio: --hi #e8c476 e --mid #8a6f2f della
   testata, e l'oro pieno --oro #D9AA47 dei tasti delle aree. */
.apertura .giu {
  font: 700 13px/1 var(--narrow); text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none;
  position: relative; border-radius: 14px; border: 0;
  padding: 16px 30px; letter-spacing: .18em;
  background: linear-gradient(178deg, #F4DDA6 0%, #E8C476 36%, #D9AA47 76%, #C99B3B 100%);
  color: #0a1628;
  text-shadow: 0 1px 0 rgba(255, 250, 235, .5);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 252, 244, .72),   /* il lume sul bordo alto */
    inset 0 0 0 1px rgba(122, 88, 22, .26),     /* il filo perimetrale */
    inset 0 -3px 6px rgba(94, 66, 12, .32),     /* la penombra in basso */
    0 6px 0 var(--mid, #8a6f2f),                /* lo ZOCCOLO: lo spessore */
    0 14px 22px -8px rgba(0, 12, 28, .72),      /* l'ombra portata sulla notte */
    0 2px 3px rgba(0, 12, 28, .4);
  transition: transform .13s ease, box-shadow .13s ease, filter .18s ease,
              background .18s ease, color .18s ease;
}
.apertura .giu:hover, .apertura .giu:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 253, 248, .85),
    inset 0 0 0 1px rgba(122, 88, 22, .34),
    inset 0 -3px 6px rgba(94, 66, 12, .28),
    0 8px 0 var(--mid, #8a6f2f),
    0 18px 26px -8px rgba(0, 12, 28, .78),
    0 2px 3px rgba(0, 12, 28, .4);
}
.apertura .giu:active {                       /* premuto: scende sullo zoccolo */
  transform: translateY(6px);
  filter: none;
  box-shadow:
    inset 0 3px 7px rgba(94, 66, 12, .5),
    inset 0 0 0 1px rgba(122, 88, 22, .3),
    0 0 0 var(--mid, #8a6f2f),
    0 3px 6px -3px rgba(0, 12, 28, .6);
}
.apertura .giu:focus-visible { outline: 2px solid #faf8f4; outline-offset: 5px; }

/* il secondo: di notte, col filo d'oro — stesso spessore, altra voce */
.apertura .giu.giu-indice, .giu-fila .giu-indice {
  background: linear-gradient(178deg, #1E4173 0%, #0B3061 34%, #002652 72%, #00203F 100%);
  color: #E8C476; border: 0;
  text-shadow: 0 1px 0 rgba(0, 16, 32, .55);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1.5px rgba(217, 170, 71, .78),   /* il filo d'oro, qui si vede */
    inset 0 -3px 6px rgba(0, 10, 25, .55),
    0 6px 0 #001A34,
    0 14px 22px -8px rgba(0, 12, 28, .7),
    0 2px 3px rgba(0, 12, 28, .35);
}
.apertura .giu.giu-indice:hover, .apertura .giu.giu-indice:focus-visible {
  background: linear-gradient(178deg, #F4DDA6 0%, #E8C476 36%, #D9AA47 76%, #C99B3B 100%);
  color: #002652;
  text-shadow: 0 1px 0 rgba(255, 250, 235, .5);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 253, 248, .8),
    inset 0 0 0 1px rgba(122, 88, 22, .3),
    inset 0 -3px 6px rgba(94, 66, 12, .28),
    0 8px 0 var(--mid, #8a6f2f),
    0 18px 26px -8px rgba(0, 12, 28, .78),
    0 2px 3px rgba(0, 12, 28, .4);
}
.apertura .giu.giu-indice:active {
  box-shadow:
    inset 0 3px 7px rgba(0, 10, 25, .6),
    inset 0 0 0 1.5px rgba(217, 170, 71, .5),
    0 0 0 #001A34,
    0 3px 6px -3px rgba(0, 12, 28, .55);
}
/* la fila respira quanto basta perché due tasti in rilievo non si tocchino */
.giu-fila { gap: 18px; align-items: stretch; }

/* in stampa nessun tasto ha spessore */
@media print { .apertura .giu, .giu-fila .giu-indice { box-shadow: none; transform: none; } }
/* chi ha chiesto meno movimento non riceve il salto */
@media (prefers-reduced-motion: reduce) {
  .apertura .giu { transition: none; }
  .apertura .giu:hover, .apertura .giu:active { transform: none; }
}


/* ══ I FILTRI DELL'INDICE (20/08/2026) ═════════════════════════════════════
   «se promesse fa ancora fatica ad orientarsi» — e la fatica era di disegno:
   tre tasti che erano ÀNCORE (ti portavano a un punto, poi scorrevi lo stesso)
   e trentotto schede spezzate in venti griglie da uno o due elementi, una per
   giorno. Ora i tasti filtrano, il raggruppamento è per mese, e la pagina parla
   la lingua della home invece di essere un foglio crema con dei bottoni sopra.

   TRE COSE PRESE DALLA HOME, perché le due pagine si sentano lo stesso sito:
   1) la FISICA dei tasti — lume, filo, penombra, zoccolo, e la pressione che
      li fa scendere: la stessa dei tre tasti delle aree e dei due dell'apertura,
      in scala minore (zoccolo 4px invece di 6, raggio 12 invece di 14/18);
   2) l'ORO come segno di ciò che è acceso: il tasto attivo è d'oro pieno, come
      il tasto che chiama all'azione sull'apertura — non un grigio più scuro;
   3) il FILETTO d'oro e la serif Fraunces sui titoli, che è la firma della
      testata: senza, un elenco è solo un elenco. */
.indice-pagina main.indice { max-width: 1180px; margin: 0 auto;
  padding: 0 var(--gutter) 70px; }

/* ── la fascia dei filtri: resta sotto gli occhi mentre si scorre ────────── */
.filtri {
  position: sticky; top: 0; z-index: 20;
  /* sticky è già un contesto di posizionamento: l'::after qui sotto si àncora
     a questa fascia e non al primo antenato posizionato più in alto */
  margin: 0 0 34px; padding: 22px 0 16px;
  background: var(--carta, #faf8f4);
  /* la fascia sta dentro un main a larghezza limitata, ma il suo fondo deve
     arrivare ai bordi dello schermo: due ombre piatte laterali dello stesso
     colore la estendono senza toglierla dal flusso (20/08/2026) */
  /* il colore arriva ai bordi con due ombre piatte laterali… */
  box-shadow: -50vw 0 0 var(--carta, #faf8f4), 50vw 0 0 var(--carta, #faf8f4);
}
/* …ma la riga di separazione e la sua ombra no: restano larghe quanto
   l'elemento, e la fascia si legge come un riquadro appoggiato invece che come
   un ripiano che attraversa la pagina. Questo la porta oltre i margini. */
.filtri::after {
  content: ""; position: absolute; left: -50vw; right: -50vw; bottom: 0;
  height: 1px; background: rgba(0,38,82,.12);
  box-shadow: 0 14px 26px -20px rgba(0,38,82,.55);
  pointer-events: none;
}
.scheda-min { white-space: nowrap; }
.filtri-tasti { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.filtri-cerca { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 14px 0 0; }
.filtri-esito { margin: 12px 0 0; font-family: var(--narrow);
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grigio, #6b7480); }

/* ── il tasto-filtro: la fisica dei tasti della home, in scala minore ────── */
.fil {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 12px/1 var(--narrow); letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(178deg,#1E4173 0%,#0B3061 34%,#002652 72%,#00203F 100%);
  color: #faf8f4;
  text-shadow: 0 1px 0 rgba(0,16,32,.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.28),      /* il lume sul bordo alto */
    inset 0 0 0 1px rgba(217,170,71,.16),       /* il filo d'oro perimetrale */
    inset 0 -3px 6px rgba(0,10,25,.5),          /* la penombra in basso */
    0 4px 0 #001A34,                             /* lo zoccolo: lo spessore */
    0 10px 16px -8px rgba(0,26,52,.5);
  transition: transform .13s ease, box-shadow .13s ease, filter .18s ease,
              background .18s ease, color .18s ease;
}
.fil:hover { filter: brightness(1.12); transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.36),
    inset 0 0 0 1px rgba(217,170,71,.34),
    inset 0 -3px 6px rgba(0,10,25,.46),
    0 6px 0 #001A34,
    0 14px 20px -8px rgba(0,26,52,.55);
}
.fil:active { transform: translateY(4px);            /* scende sullo zoccolo */
  box-shadow:
    inset 0 3px 7px rgba(0,10,25,.6),
    inset 0 0 0 1px rgba(217,170,71,.2),
    0 0 0 #001A34;
}
.fil:focus-visible { outline: 2px solid var(--oro,#D9AA47); outline-offset: 4px; }
/* `hidden` non basta su un elemento che dichiara display:inline-flex: la
   regola del display vince sull attributo, e il tasto resta visibile. Pagato
   sul tasto AZZERA, che compariva anche senza filtri attivi (20/08/2026). */
.fil[hidden] { display: none !important; }
.fil-n { font-size: 11px; letter-spacing: .06em; opacity: .72;
  font-variant-numeric: tabular-nums; }

/* ACCESO = oro pieno, come il tasto che chiama all'azione sull'apertura */
.fil-on {
  background: linear-gradient(178deg,#F4DDA6 0%,#E8C476 36%,#D9AA47 76%,#C99B3B 100%);
  color: #0a1628; text-shadow: 0 1px 0 rgba(255,250,235,.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,252,244,.72),
    inset 0 0 0 1px rgba(122,88,22,.26),
    inset 0 -3px 6px rgba(94,66,12,.3),
    0 4px 0 var(--mid,#8a6f2f),
    0 10px 16px -8px rgba(0,26,52,.45);
}
.fil-on .fil-n { opacity: .6; }
.fil-azzera { background: none; color: var(--grigio,#6b7480);
  box-shadow: inset 0 0 0 1.5px rgba(0,38,82,.22); text-shadow: none; }
.fil-azzera:hover { filter: none; color: var(--blu,#002652);
  box-shadow: inset 0 0 0 1.5px rgba(0,38,82,.45); }
.fil-azzera:active { transform: translateY(1px); }

.filtri-cerca input { flex: 1; min-width: 260px; max-width: 520px;
  font: inherit; font-size: 15px; padding: 12px 18px; border-radius: 12px;
  border: 1.5px solid rgba(0,38,82,.18); background: #fff; color: var(--inchiostro,#12202f); }
.filtri-cerca input:focus { outline: none; border-color: var(--mid,#8a6f2f);
  box-shadow: 0 0 0 3px rgba(217,170,71,.22); }
.filtri-cerca input::placeholder { color: #9aa3ad; }

/* ── il mese: la serif della testata, e il filetto d'oro che corre ───────── */
.indice-mese {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--serif); font-weight: 340; letter-spacing: -.015em;
  font-size: clamp(24px, 3vw, 34px); color: var(--blu,#002652);
  margin: 46px 0 22px;
}
/* la riga che dice di che parla l area: il titolo da il nome, questa da il
   motivo per entrarci — senza, tre parole sole non aiutano a scegliere */
.gruppo-riga { font-family: var(--narrow); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grigio,#6b7480);
  align-self: center; }
.indice-mese::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--hi,#e8c476), rgba(232,196,118,0)); }
.mese[hidden] { display: none; }
.indice-flusso .mese:first-child .indice-mese { margin-top: 8px; }

/* ── le schede: si comportano come le carte della home ──────────────────── */
.indice-griglia .scheda { transition: transform .3s ease; }
.indice-griglia .scheda:hover { transform: translateY(-4px); }
.scheda-link:hover h3 { color: var(--oro,#D9AA47); }
.indice-griglia .scheda h3 { transition: color .3s ease; }
.scheda-cop { position: relative; }
.scheda[hidden] { display: none !important; }

/* il segno di ciò che si può ASCOLTARE: quattro su trentotto, e senza questo
   si trovano solo aprendo i numeri a caso */
.scheda-voce {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,26,52,.82); color: var(--hi,#e8c476);
  font-size: 13px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(217,170,71,.5), 0 2px 6px rgba(0,16,32,.4);
}
/* stessa specificità della regola che taglia la sintesi a due righe
   (`.indice-griglia .scheda p`, 0-2-1): senza, il suo `display:-webkit-box`
   vince e il piede non è mai un flex — data e lingua escono attaccate */
.indice-griglia .scheda p.scheda-pie {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; overflow: visible; -webkit-line-clamp: none;
}
.scheda-quando { font-family: var(--narrow); letter-spacing: .12em;
  text-transform: uppercase; color: var(--grigio,#6b7480); }
.scheda-fine { display: inline-flex; gap: 10px; align-items: center; }

.indice-vuoto { margin: 60px 0; text-align: center; font-size: 17px;
  color: var(--grigio,#6b7480); }

@media (max-width: 760px) {
  .filtri { padding: 14px 0 12px; }
  .fil { padding: 10px 14px; font-size: 11px; letter-spacing: .12em; }
  .filtri-cerca input { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fil, .indice-griglia .scheda { transition: none; }
  .fil:hover, .fil:active, .indice-griglia .scheda:hover { transform: none; }
}


/* ══ LA CODA DELLA REGIA (20/08/2026) ══════════════════════════════════════
   Prima la regia mostrava dodici voci: gli altri duecentocinquanta lavori non
   comparivano da nessuna parte. Ora ci sono tutti, quindi servono le stesse
   tre cose dell'indice — filtri, ricerca, contatore — e una scheda che si
   legge in tre secondi: stato, titolo, tre-cinque righe, fonte, comandi.
   I filtri riusano `.fil` e `.filtri` dell'indice: due pannelli della stessa
   casa non devono chiedere due abitudini diverse. */
.regia-main { max-width: 1240px; }
.coda-griglia { display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.lavoro { background: #fff; border: 1px solid rgba(0,38,82,.10); border-radius: 16px;
  padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 10px 22px -18px rgba(0,26,52,.5); }
.lavoro[hidden] { display: none !important; }
.lav-testa { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  flex-wrap: wrap; font-family: var(--narrow); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; }
.lav-stato { padding: 3px 10px; border-radius: 999px; color: #fff;
  background: #4a5a70; }
/* ogni stato ha il suo colore: il verde e il rosso non si spiegano, si vedono */
.st-in-coda { background: #4a5a70; }
.st-bloccato { background: #8a6d1f; }
.st-guasto { background: #a3352b; }
.st-avviato { background: #2e5f8a; }
.st-pronto { background: #2e7d4f; }
.st-sospeso { background: #6b6b6b; }
.st-pubblicato { background: #002652; }
.lav-fam { color: var(--mid,#8a6f2f); }
/* i due marchi di QUALITA: si leggono a colpo docchio e non si confondono con
   lo stato, che dice dove sta il lavoro e non come e stato fatto (21/08/2026) */
/* IN LAVORAZIONE: un punto che pulsa e il nome del passo. Niente barra di
   avanzamento — nessuno sa quanto manca a un modello, e una barra che si ferma
   a meta e peggio di nessuna barra (21/08/2026) */
.st-in-lavorazione { background: #8a6d1f; }
.lavoro-corso { box-shadow: 0 0 0 1.5px rgba(217,170,71,.55),
  0 10px 22px -18px rgba(0,26,52,.5); }
/* LA TORRE DI CONTROLLO: che cosa sta girando adesso, in cima a tutto. Quattro
   dati misurati — fase, che cosa fa, quali modelli girano DAVVERO, da quanto —
   e nessuna previsione al minuto: ieri l incisione e passata da 15 a 143 secondi
   per movimento senza preavviso, e una previsione precisa sarebbe una bugia
   gentile (21/08/2026) */
.torre { margin: 0 0 26px; padding: 20px 24px; border-radius: 16px;
  background: linear-gradient(178deg,#1E4173 0%,#0B3061 34%,#002652 72%,#00203F 100%);
  color: #faf8f4;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22),
              inset 0 0 0 1px rgba(217,170,71,.24),
              0 14px 26px -18px rgba(0,26,52,.7); }
.torre-libera { background: none; color: var(--inchiostro,#1c2430);
  box-shadow: inset 0 0 0 1px rgba(0,38,82,.14); }
.torre-eti { margin: 0 0 6px; font-family: var(--narrow); font-size: 11px;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hi,#e8c476); }
.torre-libera .torre-eti { color: var(--grigio,#6b7480); }
.torre-tit { display: flex; align-items: center; gap: 11px; margin: 0 0 14px;
  font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; }
.torre-vuota { margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--grigio,#6b7480); }
.torre-dati { display: grid; gap: 10px 26px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.torre-dati div { margin: 0; }
.torre-dati dt { font-family: var(--narrow); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(232,196,118,.85); }
.torre-dati dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
.torre-nota { margin: 16px 0 0; padding-top: 12px; font-size: 12.5px;
  line-height: 1.5; color: rgba(250,248,244,.78);
  border-top: 1px solid rgba(255,255,255,.14); }
/* COM E ANDATA: la riga che dice l esito dell ultima lavorazione. Serve piu
   della barra di avanzamento — un lavoro che dura un minuto non lo si vede mai
   in corso, ma il suo esito conta lo stesso (21/08/2026) */
.lav-esito { margin: 10px 0 0; padding: 7px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45; }
.lav-esito strong { font-family: var(--narrow); letter-spacing: .1em; }
.es-riuscito { background: rgba(46,125,79,.12); color: #2e7d4f; }
.es-gate-rosso { background: rgba(163,53,43,.10); color: #a3352b; }
.es-non-golden { background: rgba(138,109,31,.13); color: #8a6d1f; }
.es-fermato { background: rgba(0,38,82,.07); color: var(--grigio,#6b7480); }
.st-in-fila { background: #4a5a70; }
.st-gate-rosso { background: #a3352b; }
.lav-corso { display: flex; align-items: center; gap: 9px; margin: 10px 0 0;
  font-family: var(--narrow); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mid,#8a6f2f); }
.lav-pulsa { width: 9px; height: 9px; border-radius: 50%;
  background: var(--oro,#D9AA47); flex: none;
  animation: lav-batte 1.4s ease-in-out infinite; }
@keyframes lav-batte { 0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .lav-pulsa { animation: none; } }
.lav-golden, .lav-vecchio { padding: 2px 9px; border-radius: 999px;
  font-size: 10px; letter-spacing: .16em; }
/* IL MARCHIO GOLDEN: oro vero, che luccica. Quattro cose insieme e non una di
   piu — su una pagina da 250 schede un marchio che si agita diventa rumore.
   L'oro e l'informazione; il movimento e solo il modo di darla. */
.lav-golden {
  position: relative; overflow: hidden;
  background: linear-gradient(178deg, #F4DDA6 0%, #E8C476 36%, #D9AA47 76%, #C99B3B 100%);
  color: #3a2c08; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, .85),
    inset 0 0 0 1px rgba(122, 88, 22, .34),
    inset 0 -2px 4px rgba(94, 66, 12, .26),
    0 0 0 rgba(217, 170, 71, 0);
  animation: oro-respira 1.8s ease-in-out infinite;
}
/* la banda di luce che attraversa: un riflesso, non un lampeggio */
.lav-golden::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, .78) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: oro-luccica 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes oro-luccica {
  0%, 34% { transform: translateX(-130%); }
  66%, 100% { transform: translateX(130%); }
}
@keyframes oro-respira {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,253,248,.85),
             inset 0 0 0 1px rgba(122,88,22,.34),
             inset 0 -2px 4px rgba(94,66,12,.26),
             0 0 0 rgba(217,170,71,0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,253,248,.95),
             inset 0 0 0 1px rgba(122,88,22,.44),
             inset 0 -2px 4px rgba(94,66,12,.22),
             0 0 10px rgba(217,170,71,.62); }
}
@media (prefers-reduced-motion: reduce) {
  .lav-golden { animation: none; }
  .lav-golden::after { display: none; }
}
/* SECONDO LIVELLO: oro SPENTO e FERMO. Niente luccichio — l'animazione e il
   premio del massimo, e se luccica anche il livello di mezzo il luccichio non
   significa piu niente (21/08/2026) */
.lav-ascolto { background: linear-gradient(178deg, #efe3c4 0%, #e3d2a6 60%, #d6c391 100%);
  color: #6b5518; box-shadow: inset 0 1px 0 rgba(255,253,248,.6),
  inset 0 0 0 1px rgba(138,109,31,.34); animation: none; }
.lav-golden b, .lav-ascolto b, .lav-vecchio b {
  font-size: 9px; letter-spacing: .04em; margin-right: 4px; opacity: .9; }
/* la riga che dice come salire di livello */
.lav-salire { margin: 10px 0 0; padding: 8px 11px; border-radius: 9px;
  background: rgba(138,109,31,.09); font-size: 12.5px; line-height: 1.5;
  color: #6b5518; }
.lav-salire-eti { font-family: var(--narrow); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-right: 7px;
  color: var(--mid,#8a6f2f); }
.lav-salire strong { font-weight: 700; }
.st-ascolto { background: #8a6d1f; }
/* TERZO LIVELLO: grigio appena tinto, il piu spento dei tre — la scala si legge
   anche in bianco e nero, per intensita oltre che per colore */
.lav-vecchio { background: rgba(0,38,82,.05); color: #8a8f98;
  box-shadow: inset 0 0 0 1px rgba(0,38,82,.14); }
.lav-quando { margin-left: auto; color: var(--grigio,#6b7480); font-weight: 400;
  letter-spacing: .08em; }
.lav-tit { font-family: var(--serif); font-weight: 400; font-size: 18px;
  line-height: 1.25; margin: 0 0 8px; color: var(--blu,#002652); }
.lav-tit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,38,82,.2); }
.lav-riga { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5;
  color: var(--inchiostro,#1c2430); }
.lav-riga:last-of-type { color: var(--grigio,#6b7480); font-style: italic; }
.lav-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(0,38,82,.08); }
.lav-fonte { font-family: var(--narrow); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grigio,#6b7480);
  text-decoration: none; }
.lav-fonte:hover { color: var(--mid,#8a6f2f); }
.lav-comandi { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
/* ogni tasto e avvolto in una form propria, che e un elemento di BLOCCO: senza
   questo i tre comandi vanno a capo uno per riga (20/08/2026) */
.lav-comandi .az { display: inline-flex; margin: 0; }
.lav-comandi { align-items: center; }
/* il selettore della tipologia: tre scelte piccole, quella attiva in oro.
   Non e un comando come Lancia o Cestina — cambia COME il numero verra
   raccontato, quindi si veste da interruttore, non da tasto (21/08/2026) */
.lav-tipologia { display: inline-flex; gap: 4px; align-items: center; }
.lav-tipologia .az { display: inline-flex; margin: 0; }
.tip { border: 0; cursor: pointer; padding: 5px 10px; border-radius: 8px;
  font: 700 10px/1 var(--narrow); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,38,82,.06); color: var(--grigio,#6b7480);
  transition: background .15s ease, color .15s ease; }
.tip:hover { background: rgba(0,38,82,.12); color: var(--blu,#002652); }
.tip-on { background: var(--oro,#D9AA47); color: #0a1628;
  box-shadow: inset 0 1px 0 rgba(255,252,244,.6); }
.bott.piccolo { font-size: 11px; padding: 7px 12px; }
/* il comando che non si annulla da sé si veste da avvertimento, non da tasto */
.bott.rischio { color: #a3352b; border-color: rgba(163,53,43,.35); }
.bott.rischio:hover { background: #a3352b; color: #fff; }
.coda-vuota { margin: 50px 0; text-align: center; color: var(--grigio,#6b7480); }
.regia-lancia { margin-top: 40px; }
@media (max-width: 620px) {
  .coda-griglia { grid-template-columns: 1fr; }
}

/* ── LA TORRE SI MUOVE (21/08/2026) ────────────────────────────────────────
   Quattro movimenti, quattro compiti diversi: la barra dice quanta strada e
   fatta, lo shimmer dice «viva» quando la barra non cambia per venti minuti,
   l onda dice che un modello genera adesso, il cronometro — l unico che gira
   nel browser — distingue «lavora» da «si e piantato». */
.torre-gesto { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px;
  font-size: 15.5px; line-height: 1.4; color: #faf8f4; }
.torre-gesto strong { font-weight: 600; color: var(--hi,#e8c476); }
.torre-gesto-lungo { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55;
  color: rgba(250,248,244,.72); max-width: 62ch; }

/* l onda: cinque barrette che ballano — un modello sta generando */
.onda { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.onda i { width: 2.5px; height: 4px; border-radius: 2px;
  background: var(--hi,#e8c476); animation: onda 1.05s ease-in-out infinite; }
.onda i:nth-child(2) { animation-delay: .13s }
.onda i:nth-child(3) { animation-delay: .26s }
.onda i:nth-child(4) { animation-delay: .39s }
.onda i:nth-child(5) { animation-delay: .52s }
@keyframes onda { 0%,100% { height: 4px; opacity: .5 }
                  50% { height: 15px; opacity: 1 } }

/* i puntini dopo il verbo: il gesto e in corso, non concluso */
.puntini i { opacity: 0; animation: punto 1.4s infinite; }
.puntini i:nth-child(2) { animation-delay: .2s }
.puntini i:nth-child(3) { animation-delay: .4s }
@keyframes punto { 0%,60%,100% { opacity: 0 } 30% { opacity: 1 } }

/* la barra: proporzione vera + shimmer che scorre */
.torre-barra { position: relative; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.13); margin: 0 0 8px; }
.torre-riempi { position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  background: linear-gradient(90deg,#c9a227,#e8c476 55%,#f4dda0);
  transition: width .6s cubic-bezier(.4,0,.2,1); }
.torre-riempi::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: scorre 1.7s linear infinite; }
@keyframes scorre { from { transform: translateX(-100%) } to { transform: translateX(220%) } }

.torre-quota { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px;
  font-size: 13px; color: rgba(250,248,244,.78); }
.torre-quota strong { color: #faf8f4; font-weight: 600; }
.torre-perc { margin-left: auto; font-family: var(--narrow); font-size: 12px;
  font-weight: 700; letter-spacing: .1em; color: var(--hi,#e8c476); }

/* le tappe: fatte piene, quella in corso che respira, le future spente */
.torre-tappe { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 0 0 18px;
  padding: 0; list-style: none; }
.tap { display: flex; align-items: center; gap: 6px; font-family: var(--narrow);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tap-seg { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tap-ok { color: rgba(250,248,244,.85) }
.tap-ok .tap-seg { background: var(--hi,#e8c476);
  box-shadow: 0 0 0 3px rgba(232,196,118,.16); }
.tap-ora { color: #fff }
.tap-ora .tap-seg { background: #fff; animation: respira 1.15s ease-in-out infinite; }
@keyframes respira { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); transform: scale(1) }
                     50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); transform: scale(1.25) } }
.tap-poi { color: rgba(250,248,244,.38) }
.tap-poi .tap-seg { background: rgba(255,255,255,.22) }

.torre-cronometro { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  /* chi ha chiesto meno movimento perde l effetto, non l informazione:
     il cronometro continua a salire perche e l unico dato vivo */
  .onda i, .puntini i, .torre-riempi::after, .tap-ora .tap-seg { animation: none }
  .onda i { height: 9px; opacity: .8 }
}

/* IL GUASTO IN CHIARO (21/08/2026): un rifacimento finito male non lasciava traccia
   in regia e si scopriva solo perche «era sparita la finestra dell elaborazione». */
.lav-guasto { margin: 12px 0 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(163,53,43,.06);
  box-shadow: inset 0 0 0 1px rgba(163,53,43,.20); }
.gua-eti { margin: 0 0 4px; font-family: var(--narrow); font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a3352b; }
.gua-che { margin: 0 0 7px; font-size: 13.5px; line-height: 1.45; color: #7a2b22; }
.gua-manca { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.65;
  color: var(--grigio,#6b7480); }
.gua-manca li { margin: 0 0 2px; }
.gua-passo { display: block; font-family: var(--narrow); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: #a08b52; }
.gua-altro { margin: 6px 0 0; font-size: 12px; color: var(--grigio,#6b7480);
  font-style: italic; }


/* I TRE SETTORI nella regia (21/08/2026): stessa meccanica dei filtri di stato,
   ma una riga propria e un accento diverso — sono un'altra domanda («di che cosa
   parla»), non un altro stato, e mescolarli in una riga sola li fa leggere come
   sinonimi. */
.filtri-tipologia { margin-top: .5rem; }
/* ⚠️ 21/08 sera, visto in uno scatto: il primo tentativo dava a questi tasti un
   fondo ORO CHIARO tenendo il testo chiaro dei filtri di stato — testo chiaro su
   fondo chiaro, illeggibile. Il fondo resta quello di casa: cambia SOLO il bordo,
   che basta a dire «questa riga e un altra domanda». */
.filtri-tipologia .fil-tip { border-color: rgba(200, 164, 90, .55); }
.filtri-tipologia .fil-tip:hover { border-color: rgba(200, 164, 90, .85); }
.filtri-tipologia .fil-tip.fil-on {
  background: #C8A45A;
  border-color: #C8A45A;
  color: #12203a;
}


/* LA TORRE QUANDO LAVORA FUORI DAL CORRIDORE (21/08/2026): stessa carta, ma un
   accento oro che dice «attenzione, non e' libera». */
/* La carta della torre, quando c'e' del lavoro, ha fondo NAVY: il testo del
   paragrafo nasce pero' per la carta chiara del ramo «libera», e su navy resta
   grigio su blu. Visto in uno scatto il 21/08 e corretto qui, non nel markup. */
.torre-fuori { border-color: rgba(200, 164, 90, .55); }
.torre-fuori .torre-vuota { color: #DCE4F0; }
.torre-fuori .torre-vuota strong { color: #C8A45A; }
.torre-fuori .torre-viva { color: #EDF1F8; border-top-color: rgba(200, 164, 90, .20); }
.torre-fuori .torre-viva b { color: #C8A45A; font-weight: 600; }
.torre-elenco { list-style: none; margin: .6rem 0 0; padding: 0; }
.torre-viva {
  padding: .35rem 0;
  border-top: 1px solid rgba(20, 32, 58, .10);
  font-size: .95rem;
}
.torre-viva .torre-che { font-weight: 600; }
.torre-viva .torre-cronometro { font-variant-numeric: tabular-nums; }


/* QUANTO MANCA (22/08/2026): sta accanto ai passi compiuti, non accanto alla
   percentuale — chi guarda cerca prima il tempo, e la percentuale e una conferma.
   Tono piu basso della quota: e una stima, non una misura, e non deve gridare. */
.torre-manca {
  margin-left: .6rem;
  color: rgba(220, 228, 240, .72);
  font-size: .92em;
}
.torre-manca::before { content: "· "; opacity: .5; }


/* L AVVISO quando un lavoro si e fermato (22/08/2026): rosso di casa, bordo pieno,
   e resta finche non ne parte un altro. Un guasto silenzioso e peggio di uno rumoroso. */
.torre-guasta {
  border-color: #a3352b;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(163,53,43,.16), rgba(163,53,43,.06));
}
.torre-guasta .torre-eti { color: #ff9b8f; letter-spacing: .04em; }
.torre-guasta .torre-tit { color: #12203a; }
.torre-guasta .torre-vuota { color: #3a2420; }
.torre-guasta .torre-vuota strong { color: #a3352b; }
.torre-guasta .torre-gesto-lungo { color: #5a4038; }
/* 25/08/2026 — IL MOTIVO, E L'AVVERTIMENTO. La torre diceva «fermato — a mano, o
   da un errore»: il motivo esatto era gia' nel diario del numero e non arrivava
   in pagina. Queste tre classi lo portano. Monospaziato sulla nota perche' e' un
   messaggio di macchina (chiave assente, nome di stadio): si legge per confronto,
   non per prosa, e la lettura di sistema davanti a una persona va marcata come
   tale invece di essere travestita da frase. */
.torre-perche {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: rgba(163,53,43,.10);
  border-left: 3px solid #a3352b;
  font-size: 13.5px; line-height: 1.5; color: #3a2420;
}
.torre-perche b { color: #a3352b; }
.torre-perche-nota {
  display: block; margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.45; color: #5a4038;
  overflow-wrap: anywhere;
}
.torre-avviso {
  flex-basis: 100%; margin: 8px 0 0;
  font-size: 12.5px; line-height: 1.45; color: #7d2b22;
}


/* CHE COSA MANCA PER IL GOLDEN, sulla scheda (22/08/2026): si legge prima dei
   comandi, perché è la ragione per cui si preme il tasto sotto. */
.lav-manca {
  margin: .5rem 0 0;
  padding: .5rem .7rem;
  border-left: 3px solid rgba(200, 164, 90, .7);
  background: rgba(200, 164, 90, .07);
  font-size: .92rem;
  line-height: 1.45;
}
.lav-manca b { color: #8a6d1f; }
.lav-manca .lav-perche { opacity: .72; font-style: italic; }


/* LA PORTA DELLA REGIA, in alto a sinistra sulla home (22/08/2026). Sta sopra
   l'apertura scura, quindi si veste da sé invece di ereditare: su quel fondo un
   colore di testo qualunque sparisce. Discreto ma raggiungibile col pollice —
   min-height 40px, che è la misura di un bersaglio tattile. */
.alla-regia {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 164, 90, .45);
  background: rgba(11, 18, 32, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #C8A45A;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.alla-regia:hover,
.alla-regia:focus-visible {
  background: rgba(200, 164, 90, .92);
  border-color: #C8A45A;
  color: #12203a;
}
@media (max-width: 520px) {
  .alla-regia { top: .7rem; left: .8rem; padding: .4rem .7rem; font-size: .74rem; }
}


/* I LAVORI IN ATTESA DEL VIA (22/08/2026): in cima all'elenco, riconoscibili al
   primo sguardo — non sono lavorazioni, sono decisioni da prendere. */
.lavoro-attesa { border-color: rgba(200, 164, 90, .55); }
.st-in-attesa { background: #8a6d1f; color: #fff; }


/* ── LA REGIA CHE DICE LA VERITÀ (23/08/2026): gradino, sezioni, archivio ── */
/* il ::after dei filtri si allunga di ±50vw per la riga a tutta pagina e faceva
   scorrere la regia in orizzontale (docW 1690 su 1280, misurato). clip, non hidden:
   non crea un contesto di scorrimento e lascia sticky ai filtri. */
html:has(body.regia-pagina) { overflow-x: hidden; }   /* sull'html si propaga al viewport; sul body no (misurato: scrollX 410) */
.regia-sezione { margin: 34px 0 10px; }
.regia-sez-tit { font-family: var(--serif); font-size: 26px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.regia-sez-n { font: 600 14px var(--narrow); background: var(--blu); color: #fff; border-radius: 999px; padding: 2px 10px; }
.regia-sez-sotto { font: 14px var(--sans); color: var(--grigio); }
.lav-gradino { margin: 4px 0 8px; font-size: 13.5px; color: #2b3a52; }
.lav-gradino b { letter-spacing: .12em; font-weight: 600; margin-right: 4px; }
.lav-gradino-nome { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; margin-right: 6px; }
.lav-gradino-golden b, .lav-gradino-golden .lav-gradino-nome { color: #2e7d4f; }
.lav-gradino-ascoltabile b, .lav-gradino-ascoltabile .lav-gradino-nome { color: #8a6d1f; }
.lav-gradino-scritto b, .lav-gradino-scritto .lav-gradino-nome { color: #2e5f8a; }
.lav-gradino-grezzo b, .lav-gradino-grezzo .lav-gradino-nome { color: #6b6b6b; }
.lav-gradino-guasto b, .lav-gradino-guasto .lav-gradino-nome { color: #a33; }
.fil-eti { font: 700 11px var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); margin-right: 8px; align-self: center; }
.regia-archivio { margin: 40px 0 10px; border-top: 1px solid #d8dde6; padding-top: 14px; }
.regia-archivio summary { cursor: pointer; font-family: var(--serif); font-size: 22px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.arch-lista { list-style: none; padding: 0; margin: 12px 0 0; }
.arch-lista li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #e8ecf2; font-size: 14px; }
.arch-meta { color: var(--grigio); font-size: 12.5px; }
@media (max-width: 700px) { .arch-lista li { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   ORDINI RICEVUTI — il riquadro nato il 24/08/2026 con l'avanzamento degli
   ordini via email. Il markup (app/servizio.py::_carte_ordini) generava span
   con classi che QUI NON C'ERANO: senza regole gli span sono inline, si
   attaccano l'uno all'altro e la riga usciva «emailAuterion e u-blox…
   Russiabocciato dal gateil testo non ha retto le regole».
   Lezione: un pezzo nuovo di markup nasce col suo stile, o esce illeggibile
   senza dare errore — nessuno se ne accorge dal codice. (24/08/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 26/08/2026 — LO STORICO SI APRE SU RICHIESTA. Il riquadro «Ordini ricevuti»
   teneva dodici righe sempre aperte fra i filtri e l'inventario, e chi apre la
   regia quasi sempre vuole sapere che cosa gira ADESSO. `<details>` e non un
   interruttore in JavaScript: la CSP di casa vieta gli script in linea, e questa
   e' una cosa che l'HTML sa fare da se'. */
.ord-scatola { margin: 0; }
.ord-sommario {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 2px 0;
  border-radius: 6px; user-select: none;
}
.ord-sommario::-webkit-details-marker { display: none; }
.ord-sommario::before {
  content: "▸"; display: inline-block; font-size: 11px; opacity: .7;
  transition: transform .15s ease; flex: 0 0 auto;
}
.ord-scatola[open] > .ord-sommario::before { transform: rotate(90deg); }
.ord-sommario:hover::before { opacity: 1; }
.ord-sommario:focus-visible { outline: 2px solid #C8A45A; outline-offset: 3px; }
.ord-sommario .torre-eti { margin: 0; }
.ord-conto {
  font-size: 12.5px; opacity: .75; margin-left: auto;
}
/* un ordine finito male si vede SENZA aprire: chiudere una sezione non deve
   nascondere un guasto */
.ord-male { color: #a3352b; opacity: 1; }
body.regia-pagina:not(.tema-chiaro) .ord-male { color: #ff9b8f; }
.ord-scatola[open] > .ord-sommario { margin-bottom: 10px; }
.ord-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ord-riga {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 3px 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.ord-riga:last-child { border-bottom: 0; padding-bottom: 0; }
.ord-quando {
  font-family: var(--narrow); font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; white-space: nowrap;
  color: rgba(232,196,118,.92);
}
.ord-da {
  font-family: var(--narrow); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  color: rgba(250,248,244,.58);
}
.ord-che {
  font-size: 14.5px; line-height: 1.42; color: #faf8f4;
  overflow-wrap: anywhere;
}
.ord-tema { font-style: italic; font-size: 12.5px; color: rgba(250,248,244,.62); }
.ord-fine {
  justify-self: end; align-self: center; white-space: nowrap;
  font-family: var(--narrow); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: rgba(250,248,244,.82);
}
.ord-spiega {
  grid-column: 3 / -1;
  font-size: 12.5px; line-height: 1.45; color: rgba(250,248,244,.68);
}
/* il colore dice l'esito senza leggere: la classe nasce dalla PRIMA parola
   dello stato (app/servizio.py: ord-{stato.split()[0]}) */
.ord-pubblicato { background: rgba(46,125,79,.30); color: #b7e6c8; }
.ord-bocciato   { background: rgba(163,53,43,.34);  color: #ffb3a8; }
.ord-caduto     { background: rgba(163,53,43,.34);  color: #ffb3a8; }
.ord-rifatto    { background: rgba(217,170,71,.26); color: #f0d79a; }
.ord-aspetta    { background: rgba(217,170,71,.26); color: #f0d79a; }
.ord-in         { background: rgba(0,168,222,.24);  color: #a9e2f5; }
.ord-fermato    { background: rgba(255,255,255,.13); color: rgba(250,248,244,.7); }
.ord-scartato   { background: rgba(255,255,255,.13); color: rgba(250,248,244,.7); }

@media (max-width: 720px) {
  .ord-riga { grid-template-columns: auto 1fr; gap: 2px 10px; }
  .ord-che    { grid-column: 1 / -1; }
  .ord-fine   { justify-self: start; grid-column: 1 / -1; margin-top: 3px; }
  .ord-spiega { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   I FERMI AL GATE, e l'ambito della riga «qualità» (24/08/2026).
   Le classi nuove nascono QUI insieme al markup: la stessa mattina il riquadro
   degli ordini era uscito illeggibile proprio perché le sue classi non erano
   mai state scritte, e dal codice non si vedeva.
   ═══════════════════════════════════════════════════════════════════════════ */

/* la riga dei filtri dichiara su che cosa conta: «stato» conta tutti i lavori,
   «qualità» solo i pubblicati — due totali diversi, e va detto */
.fil-ambito {
  display: block; margin-top: 2px;
  font-family: var(--narrow); font-size: 9.5px; font-style: normal;
  font-weight: 600; letter-spacing: .06em; text-transform: none;
  color: var(--grigio,#6b7480); opacity: .9;
}

/* la carta di un numero bocciato: rossa sul bordo, non nel corpo — è fermo,
   non guasto, e da qui si ripesca */
.lavoro-fermo {
  border-color: rgba(163,53,43,.42);
  background: linear-gradient(180deg, rgba(163,53,43,.055), transparent 60%);
}
.lavoro-fermo .lav-tit { color: var(--inchiostro,#1c2430); }
.lav-nota {
  font-family: var(--narrow); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; color: var(--grigio,#6b7480);
}


/* ═══════════════════════════════════════════════════════════════════════════
   IL CARTIGLIO DELLA REGIA (24/08/2026 sera) — «ancora un caos in regia senza
   possibilità di capire e agire». Una riga sola, in cima, che dice quanti sono
   i lavori e che cosa sta fuori dall'inventario. È l'unico posto dove si legge
   un totale: prima ce n'erano tre, e due non tornavano.
   ═══════════════════════════════════════════════════════════════════════════ */
.regia-conto {
  margin: 0 0 14px;
  font-size: 15px; line-height: 1.6;
  color: var(--inchiostro,#1c2430);
}
.regia-conto strong {
  font-size: 19px; font-weight: 700;
  color: var(--blu,#002652);
}
.rc-sep    { color: rgba(0,38,82,.28); margin: 0 3px; }
.rc-quiet  { color: var(--grigio,#6b7480); font-size: 13.5px; }
.rc-fuori  { color: #a3352b; font-weight: 600; }
.rc-nota {
  display: inline-block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.45; color: var(--grigio,#6b7480);
}

/* le carte di servizio si distinguono a colpo d'occhio da un lavoro
   dell'inventario: bordo a tratti, perché sono qualcosa da SBRIGARE */
.lavoro[data-fuori-conto] { border-style: dashed; }


/* ═══════════════════════════════════════════════════════════════════════════
   «CI HO GIÀ PROVATO» (24/08/2026) — la riga che dice che cosa la macchina ha
   tentato da sola prima di chiedere una mano. Direttiva del proprietario:
   l'autoriparazione prima dell'intervento manuale, e la regia deve DIRE com'è
   andata — altrimenti chi guarda rilancia lo stesso rimedio e lo paga due volte.
   ═══════════════════════════════════════════════════════════════════════════ */
.lav-tentato {
  margin: 10px 0 0; padding: 8px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid transparent;
}
.lav-tentato strong {
  font-family: var(--narrow); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px;
  margin-right: 5px;
}
.tent-nota {
  display: block; margin-top: 3px;
  font-size: 11.5px; line-height: 1.45; opacity: .82;
  overflow-wrap: anywhere;
}
.tent-ok {
  background: rgba(46,125,79,.10); border-left-color: #2e7d4f; color: #245c3b;
}
.tent-parziale {
  background: rgba(217,170,71,.13); border-left-color: #8a6d1f; color: #6b5417;
}
.tent-no {
  background: rgba(163,53,43,.09); border-left-color: #a3352b; color: #7d2b22;
}


/* ═══════════════════════════════════════════════════════════════════════════
   I GESTI DENTRO L'AVVISO DEL GUASTO (25/08/2026). Parole del proprietario:
   «a cosa serve? non ho pulsanti o link di azione e non dice che video è».
   Un avviso che descrive un problema e non porta il gesto obbliga a cercare
   la carta fra cinquantadue — il lavoro che la regia esiste per risparmiare.
   ═══════════════════════════════════════════════════════════════════════════ */
.torre-fonte {
  margin: 8px 0 0; font-size: 13px; line-height: 1.5;
}
.torre-fonte a { color: #7d2b22; text-underline-offset: 2px; }
.torre-guasta .torre-fonte { color: #5a4038; }

.torre-gesti {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 14px 0 6px;
}
.torre-gesti form { margin: 0; }
.torre-gesti .bott { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   LA REGIA NASCE SCURA (25/08/2026) — «vedo sempre errore in pagina e non è
   scuro di default». Il canone di casa (`_TEMA-CHIARO-SCURO.md`, direttiva del
   04/08/2026) dice: scuro sempre, chiaro a un clic, la scelta si ricorda.

   ⚠️ PERCHÉ QUI E NON NEL FOGLIO INTERO. `podcast.css` ha **363 colori
   letterali** fuori dai due `:root` e serve ANCHE le pagine pubbliche dei
   numeri: portarlo tutto a variabili è il lavoro giusto, ma è lungo e tocca ciò
   che vedono i lettori. Qui si inverte SOLO la regia, ridefinendo le variabili
   sotto `body.regia-pagina` — quello che già passa per `var()` diventa scuro da
   sé — e correggendo a mano i pochi punti che il foglio scrive espliciti.
   Il resto del sito non cambia di un pixel.
   Il lavoro completo (foglio a variabili + interruttore su ogni pagina) resta
   da fare, ed è scritto in PODCAST.md fra le cose aperte.
   ═══════════════════════════════════════════════════════════════════════════ */
body.regia-pagina {
  --carta:      #0e1626;   /* il fondo: blu notte, non nero — resta di casa */
  --inchiostro: #e8eef7;   /* il testo */
  --grigio:     #93a4bb;   /* i secondari */
  --velo:       rgba(255, 255, 255, .07);
  --blu:        #9dc4ff;   /* gli accenti che erano blu profondo, ora chiari */
  --oro:        #e8c476;
  --si:         #6fd39b;
  --no:         #ff9b8f;
  --forse:      #e3b95f;
  background: #0e1626;
  color: #e8eef7;
}

/* i pezzi che il foglio scrive col colore esplicito e che var() non raggiunge */
body.regia-pagina:not(.tema-chiaro) .filtri { background: #0e1626;
  box-shadow: -50vw 0 0 #0e1626, 50vw 0 0 #0e1626; }
body.regia-pagina:not(.tema-chiaro) .filtri::after { background: rgba(255,255,255,.14); }
body.regia-pagina:not(.tema-chiaro) .lavoro,
body.regia-pagina:not(.tema-chiaro) .regia-carta {
  background: #16233a; border-color: rgba(255,255,255,.13);
  box-shadow: 0 14px 26px -20px rgba(0,0,0,.7);
}
body.regia-pagina:not(.tema-chiaro) .lav-tit,
body.regia-pagina:not(.tema-chiaro) .lav-tit a,
body.regia-pagina:not(.tema-chiaro) .arch-tit,
body.regia-pagina:not(.tema-chiaro) .regia-sez-tit { color: #e8eef7; }
body.regia-pagina:not(.tema-chiaro) .regia-conto strong,
body.regia-pagina:not(.tema-chiaro) .regia-conto { color: #e8eef7; }
body.regia-pagina:not(.tema-chiaro) .rc-quiet,
body.regia-pagina:not(.tema-chiaro) .rc-nota,
body.regia-pagina:not(.tema-chiaro) .regia-sez-sotto,
body.regia-pagina:not(.tema-chiaro) .lav-perche { color: #93a4bb; }
body.regia-pagina:not(.tema-chiaro) .rc-sep { color: rgba(255,255,255,.28); }

/* l'avviso del guasto: rosso leggibile su fondo scuro, non rosa su bianco */
body.regia-pagina:not(.tema-chiaro) .torre-guasta {
  background: linear-gradient(180deg, rgba(163,53,43,.30), rgba(163,53,43,.14));
  border-color: #d4574a;
}
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-tit,
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-vuota { color: #ffe3de; }
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-vuota strong { color: #ff9b8f; }
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-gesto-lungo,
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-fonte { color: #e7bdb6; }
body.regia-pagina:not(.tema-chiaro) .torre-guasta .torre-fonte a { color: #ffc9c0; }
body.regia-pagina:not(.tema-chiaro) .torre-perche {
  background: rgba(0,0,0,.24); border-left-color: #d4574a; color: #ffe3de;
}
body.regia-pagina:not(.tema-chiaro) .torre-perche b { color: #ff9b8f; }
body.regia-pagina:not(.tema-chiaro) .torre-perche-nota { color: #e7bdb6; }
body.regia-pagina:not(.tema-chiaro) .torre-avviso { color: #ffc9c0; }
body.regia-pagina:not(.tema-chiaro) .torre-libera {
  background: #16233a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  color: #e8eef7;
}
body.regia-pagina:not(.tema-chiaro) .torre-libera .torre-eti { color: #93a4bb; }

/* i tasti e i campi */
body.regia-pagina:not(.tema-chiaro) .bott {
  background: #1d2c47; color: #e8eef7; border-color: rgba(255,255,255,.16);
}
body.regia-pagina:not(.tema-chiaro) .bott:hover { background: #26375a; }
body.regia-pagina:not(.tema-chiaro) .bott.oro { background: var(--oro); color: #12203a; }
body.regia-pagina:not(.tema-chiaro) .filtri-cerca input {
  background: #16233a; color: #e8eef7; border-color: rgba(255,255,255,.16);
}
body.regia-pagina:not(.tema-chiaro) .filtri-cerca input::placeholder { color: #7b8ca6; }
body.regia-pagina:not(.tema-chiaro) .fil-eti,
body.regia-pagina:not(.tema-chiaro) .fil-ambito,
body.regia-pagina:not(.tema-chiaro) .filtri-esito { color: #93a4bb; }

/* le carte di servizio e le righe «già tentato» */
body.regia-pagina:not(.tema-chiaro) .lavoro-fermo {
  background: linear-gradient(180deg, rgba(163,53,43,.18), transparent 60%);
  border-color: rgba(212,87,74,.5);
}
body.regia-pagina:not(.tema-chiaro) .lavoro-fermo .lav-tit { color: #ffe3de; }
body.regia-pagina:not(.tema-chiaro) .tent-ok { background: rgba(46,125,79,.22); color: #9fe0bd; }
body.regia-pagina:not(.tema-chiaro) .tent-parziale { background: rgba(217,170,71,.20); color: #e8c476; }
body.regia-pagina:not(.tema-chiaro) .tent-no { background: rgba(163,53,43,.22); color: #ffb3a8; }
body.regia-pagina:not(.tema-chiaro) .lav-manca { background: rgba(217,170,71,.13); color: #e3d3ab; }
body.regia-pagina:not(.tema-chiaro) .lav-riga { color: #c3d0e2; }
body.regia-pagina:not(.tema-chiaro) .lav-nota { color: #93a4bb; }

/* l'archivio in fondo */
body.regia-pagina:not(.tema-chiaro) .regia-archivio,
body.regia-pagina:not(.tema-chiaro) details { color: #c3d0e2; }

/* l interruttore del tema, accanto a «Rileggi la coda» */
.fil-tema { cursor: pointer; }
/* IL CHIARO A UN CLIC: si annullano le variabili scure, e il foglio torna
   quello di sempre — nessuna regola duplicata, nessun colore da tenere in due
   posti (canone _TEMA-CHIARO-SCURO). */
body.regia-pagina.tema-chiaro {
  --carta: #faf8f4; --inchiostro: #1c2430; --grigio: #5c6a7a;
  --velo: rgba(0,38,82,.08); --blu: #002652; --oro: #D9AA47;
  --si: #2e7d4f; --no: #b3452e; --forse: #8a6d1f;
  background: #faf8f4; color: #1c2430;
}
body.regia-pagina.tema-chiaro .filtri { background: #faf8f4;
  box-shadow: -50vw 0 0 #faf8f4, 50vw 0 0 #faf8f4; }
body.regia-pagina.tema-chiaro .filtri::after { background: rgba(0,38,82,.12); }
body.regia-pagina.tema-chiaro .lavoro,
body.regia-pagina.tema-chiaro .regia-carta { background: #fff;
  border-color: rgba(0,38,82,.14); box-shadow: 0 14px 26px -20px rgba(0,26,52,.35); }
body.regia-pagina.tema-chiaro .lav-tit,
body.regia-pagina.tema-chiaro .lav-tit a,
body.regia-pagina.tema-chiaro .arch-tit,
body.regia-pagina.tema-chiaro .regia-sez-tit,
body.regia-pagina.tema-chiaro .regia-conto { color: #1c2430; }
/* ⚠️ 27/08/2026 — `:not(.oro)`: senza, la veste chiara sbiancava anche il tasto
   PRIMARIO di ogni carta, che in veste scura e oro. Il gesto principale perdeva
   la sua evidenza esattamente nel tema in cui serve di piu (fondo chiaro). */
body.regia-pagina.tema-chiaro .bott:not(.oro) { background: #fff; color: #1c2430;
  border-color: rgba(0,38,82,.2); }
body.regia-pagina.tema-chiaro .bott.oro { background: var(--oro, #D9AA47);
  color: #12203a; border-color: rgba(217,170,71,.75); }
body.regia-pagina.tema-chiaro .filtri-cerca input { background: #fff;
  color: #1c2430; border-color: rgba(0,38,82,.2); }

/* ⛔ 25/08/2026 — IL BANNER DEL GUASTO ERA ILLEGGIBILE NELLA VESTE CHIARA.
   Visto, non dedotto: scatto Chrome a 1280 con `tema-chiaro` acceso — titolo
   bianco su rosa, «⚠️ Prima di rilanciare…» arancio pallido su rosa pallido,
   il link della fonte quasi invisibile.

   PERCHE' il principio dichiarato qui sopra («si annullano le variabili scure e
   il foglio torna quello di sempre») non lo copriva: quel principio regge solo
   dove lo scuro passa dalle VARIABILI. Le regole `body.regia-pagina .torre-guasta
   …` scrivono invece colori esadecimali a mano (#ffe3de, #ffc9c0, #e7bdb6), e una
   variabile ridefinita non li tocca. In piu' lo sfondo del banner e' un rosso
   TRASPARENTE (rgba .30 → .14): sotto il fondo scuro diventa rosso cupo e il testo
   chiaro ci sta bene; sotto #faf8f4 diventa rosa pallido e lo stesso testo sparisce.
   Un colore trasparente eredita il fondo: dichiarare la veste sulle variabili non
   basta se il fondo cambia sotto.

   Qui si rimettono i colori chiari che il foglio base gia' ha (righe ~1334-1366):
   non sono colori nuovi da tenere in due posti, sono gli stessi, riaffermati dove
   la regola scura li aveva scavalcati. Riguarda SOLO `.torre-guasta`: la torre in
   lavorazione e quella libera hanno un fondo pieno proprio e si leggono in
   entrambe le vesti — verificato nello stesso scatto. */
/* l'etichetta in cima resta l'ultimo pezzo pallido: #ff9b8f e' pensato per il
   fondo scuro. Sul rosa chiaro serve il rosso pieno del bordo. */
body.regia-pagina.tema-chiaro .torre-guasta .torre-eti { color: #a3352b; }
body.regia-pagina.tema-chiaro .torre-guasta .torre-tit { color: #12203a; }
body.regia-pagina.tema-chiaro .torre-guasta .torre-vuota { color: #3a2420; }
body.regia-pagina.tema-chiaro .torre-guasta .torre-vuota strong { color: #a3352b; }
body.regia-pagina.tema-chiaro .torre-guasta .torre-gesto-lungo,
body.regia-pagina.tema-chiaro .torre-guasta .torre-fonte { color: #5a4038; }
body.regia-pagina.tema-chiaro .torre-guasta .torre-fonte a { color: #a3352b; }
body.regia-pagina.tema-chiaro .torre-perche {
  background: rgba(163,53,43,.10); border-left-color: #a3352b; color: #3a2420; }
body.regia-pagina.tema-chiaro .torre-perche b { color: #a3352b; }
body.regia-pagina.tema-chiaro .torre-perche-nota { color: #5a4038; }
body.regia-pagina.tema-chiaro .torre-avviso { color: #7d2b22; }

/* ── I NUMERI PUBBLICATI, e i tasti messi in ordine (27/08/2026) ────────────
   Direttiva del proprietario: «metti meglio i pulsanti. inoltre quelli già fatti e
   pubblicati dovrebbero essere su un'altra pagina, qua creano solo confusione».
   Il difetto dei tasti non era il numero ma la DISPOSIZIONE: `.lav-comandi` è un
   flex che va a capo, e con etichette lunghe come «▶ Porta al golden — articolo +
   podcast · da «lo scavo»» ogni tasto prendeva una larghezza diversa, il testo
   andava a capo DENTRO il tasto e la colonna dei comandi diventava una scala.
   Rimedio: una GRIGLIA a colonne uguali. I tasti si allineano, hanno la stessa
   altezza, e chi guarda vede tre gruppi invece di sette oggetti sparsi. */
.pub-azioni { display: grid; gap: 8px; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--velo, rgba(0,38,82,.08)); }
.pub-fila { display: grid; gap: 7px; }
.pub-fila-primi { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.pub-fila-vetrina,
.pub-fila-altri { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
/* la fila dei patti: tante colonne quanti sono i tasti, cosi nessuno resta orfano
   su una riga sua (canone delle griglie senza orfani) */
.pub-fila-patto.pub-n3 { grid-template-columns: repeat(3, 1fr); }
.pub-fila-patto.pub-n2 { grid-template-columns: repeat(2, 1fr); }
.pub-fila-patto.pub-n1 { grid-template-columns: 1fr; }
.pub-fila-patto .bott { padding-left: 6px; padding-right: 6px; letter-spacing: .04em; }
/* l etichetta del gruppo, che toglie la ripetizione dai tre tasti del patto */
.pub-eti { margin: 4px 0 0; font-family: var(--narrow); font-size: 9.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grigio, #6b7480); }
.pub-fila .az { display: block; margin: 0; }
.pub-fila .bott {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; min-height: 34px; text-align: center;
  line-height: 1.2; letter-spacing: .07em; }
/* i due gruppi secondari pesano meno del primo: la gerarchia si vede prima di
   leggere le etichette */
.pub-fila-vetrina .bott,
.pub-fila-patto .bott,
.pub-fila-altri .bott { font-size: 10.5px; }
/* IL RISCHIO SI DEVE VEDERE ANCHE NELLA VESTE SCURA: #a3352b su #16233a e un
   rosso su un blu quasi nero — il tasto piu pericoloso era il meno visibile.
   Stessa famiglia di difetto del banner del guasto (25/08/2026). */
body.regia-pagina:not(.tema-chiaro) .bott.rischio { color: #ff9d90; border-color: rgba(212,87,74,.45); }
body.regia-pagina:not(.tema-chiaro) .bott.rischio:hover { background: #a3352b; color: #fff; }
/* i link dentro il cartiglio: blu di sistema su fondo scuro = illeggibili */
body.regia-pagina:not(.tema-chiaro) .regia-conto a,
body.regia-pagina:not(.tema-chiaro) .rc-nota a,
body.regia-pagina:not(.tema-chiaro) .regia-libera a,
body.regia-pagina:not(.tema-chiaro) .lede a { color: var(--oro, #D9AA47); text-decoration: underline;
  text-underline-offset: 2px; }
.pub-primo { font-size: 12px !important; min-height: 40px !important; }

/* la testa della carta: la qualità a sinistra, dove sta a destra */
.pub-dove { font-family: var(--narrow); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 999px; display: inline-flex; align-items: baseline; gap: 6px; }
.pub-dove em { font-style: normal; font-weight: 500; letter-spacing: .04em;
  text-transform: none; opacity: .75; }
.pub-dentro { background: rgba(46,125,79,.14); color: #2e7d4f; }
.pub-fuori { background: rgba(0,38,82,.07); color: var(--grigio, #6b7480); }
.pub-manca { margin: 8px 0 0; padding: 7px 10px; border-radius: 9px;
  font-size: 12px; line-height: 1.45;
  background: rgba(217,170,71,.13); color: var(--inchiostro, #1c2430); }
.pub-piede { margin: 10px 0 0; }
.regia-libera { margin: 40px 0; padding: 22px; border-radius: 14px; text-align: center;
  font-size: 15px; line-height: 1.6; border: 1px dashed var(--velo, rgba(0,38,82,.14)); }

/* nella veste scura le due pillole devono restare leggibili: verde e grigio
   su fondo chiaro spariscono su #16233a (già pagato il 25/08 col banner del guasto) */
body.regia-pagina:not(.tema-chiaro) .pub-dentro { background: rgba(46,125,79,.24); color: #9fe0bd; }
body.regia-pagina:not(.tema-chiaro) .pub-fuori { background: rgba(255,255,255,.08); color: #a9bad0; }
body.regia-pagina:not(.tema-chiaro) .pub-manca { background: rgba(217,170,71,.14); color: #e3d3ab; }
body.regia-pagina:not(.tema-chiaro) .regia-libera { color: #c3d0e2; border-color: rgba(255,255,255,.18); }

/* … e la stessa griglia sui comandi della REGIA, che soffrivano dello stesso male */
.lav-comandi { margin-left: 0; width: 100%; display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); align-items: stretch; }
.lav-comandi .az { display: block; margin: 0; }
.lav-comandi .bott { display: inline-flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; min-height: 34px; text-align: center;
  line-height: 1.2; }
.lav-pie { flex-direction: column; align-items: stretch; gap: 9px; }
.lav-pie .lav-fonte, .lav-pie .lav-tipologia { align-self: flex-start; }

@media (max-width: 430px) {
  .pub-fila, .lav-comandi { grid-template-columns: 1fr; }
  .pub-fila-patto.pub-n3, .pub-fila-patto.pub-n2 { grid-template-columns: 1fr; }
}

/* La barra di navigazione IN CIMA (28/08/2026). Le stesse voci che stavano solo in
   fondo: chi apre la pagina non scorre tutto l'elenco per cambiare pagina.
   Sta sopra l'apertura, quindi si porta il proprio sfondo — l'apertura è un canvas. */
.nav-alta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px clamp(16px, 4vw, 56px);
  background: rgba(10, 22, 40, .92);
  border-bottom: 1px solid var(--bordo, #233859);
  position: relative; z-index: 3;
}
.nav-alta .bott { font-size: 13px; padding: 7px 14px; }

/* ── I SELETTORI DELLA FAMIGLIA (28/08/2026) ────────────────────────────────
   «i tuoi pulsanti della tipologia, mettili di colore differente in modo che siano
   piu visibili» — rilievo del proprietario davanti alla pagina dei pubblicati.
   Erano tre tasti identici, impilati uno sotto l'altro: l'attivo oro, gli altri due
   grigi su fondo scuro. Per sapere come e raccontato un numero bisognava leggerli.
   Ora ogni famiglia porta la SUA tinta — le stesse gia in uso in `_STATI` — e i tre
   stanno in riga. Acceso: colore pieno. Spento: lo stesso colore al 22%, cosi si
   riconosce anche da spento, che e il punto del rilievo. */
.pub-fila-fam { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pub-fila-fam .az { display: block; margin: 0; }
.pub-fila-fam .tip {
  width: 100%; box-sizing: border-box; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--narrow); letter-spacing: .1em; text-transform: uppercase;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* i tre colori, uno per famiglia — l'ordine e sempre storia · scienza · news */
.pub-fila-fam .az:nth-child(1) .tip { background: rgba(122,146,178,.22); color: #b8c9de;
                                      border-color: rgba(122,146,178,.35); }
.pub-fila-fam .az:nth-child(2) .tip { background: rgba(90,169,214,.20);  color: #8fd0f0;
                                      border-color: rgba(90,169,214,.35); }
.pub-fila-fam .az:nth-child(3) .tip { background: rgba(217,170,71,.18);  color: #e8c476;
                                      border-color: rgba(217,170,71,.35); }
.pub-fila-fam .az:nth-child(1) .tip.tip-on { background: #7a92b2; color: #0d1626;
                                             border-color: #9db4d0; }
.pub-fila-fam .az:nth-child(2) .tip.tip-on { background: #5aa9d6; color: #04121d;
                                             border-color: #8fd0f0; }
.pub-fila-fam .az:nth-child(3) .tip.tip-on { background: var(--oro,#D9AA47); color: #12203a;
                                             border-color: #f0d79a; }
.pub-fila-fam .tip:hover { filter: brightness(1.25); }
/* quella accesa si vede anche di sbieco: e l'unica col peso pieno */
.pub-fila-fam .tip.tip-on { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); font-weight: 800; }

/* nella veste chiara gli stessi tre colori, col contrasto girato */
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(1) .tip { background: rgba(74,90,112,.12); color: #3d5170; }
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(2) .tip { background: rgba(46,95,138,.12); color: #245a86; }
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(3) .tip { background: rgba(138,109,31,.14); color: #7a5f1c; }
/* ⛔ e l ACCESA deve restare accesa anche in chiaro: senza queste tre righe le
   regole qui sopra la appiattiscono e non si capisce piu come e raccontato il
   numero. Stesso male del tasto oro sbiancato dal tema chiaro (27/08). */
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(1) .tip.tip-on { background: #4a5a70; color: #fff; border-color: #3d5170; }
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(2) .tip.tip-on { background: #2e5f8a; color: #fff; border-color: #245a86; }
body.regia-pagina.tema-chiaro .pub-fila-fam .az:nth-child(3) .tip.tip-on { background: #8a6d1f; color: #fff; border-color: #7a5f1c; }

@media (max-width: 430px) {
  .pub-fila-fam { grid-template-columns: repeat(3, 1fr); }
}

/* ── I TASTI D AREA SONO FILTRI, NON ANCORE (29/08/2026) ───────────────────
   Ordine del proprietario: una griglia sola in ordine di data, e i tasti che
   filtrano. Erano <a href=#area-...>; ora sono <button>, e il CSS li deve
   trattare uguale — un pulsante nasce con font, bordo e sfondo del sistema, e
   senza queste righe la fila dei tasti cambiava faccia. */
.aree-tasti .area-filtro{
  font: inherit; cursor: pointer; border: 0; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.aree-tasti .area-filtro.attivo{
  border-color: var(--oro, #C8A45A);
  box-shadow: 0 0 0 1px var(--oro, #C8A45A) inset;
}
/* 02/09/2026 - niente opacity su questo testo. Misurato dal dominio con
   contrasto-vero: con opacity .75 il grigio del registro arrivava all'occhio
   a #848e99 su cream, cioe' 3,14:1 - sotto il 4,5:1 che WCAG AA chiede a 13px.
   Senza, e' il colore del registro (--grigio #5c6a7a) e fa 5,21:1. Resta
   secondario per COLORE, non per trasparenza. Vedi _VISIBILITA-ORGANICA §11.58. */
.area-riga-sola{ margin: 0 0 18px; }
.area-vuota{ opacity: .7; padding: 24px 0; }


/* ---- LA SCHEDA DEL CANALE NELL'APERTURA (01/09/2026) ------------------------
   Ordine del proprietario: «un bel pulsante grosso per accedere ai nostri
   podcast apple». La prima stesura era un terzo tasto viola sotto gli altri
   due: «non mi piace li', stona e non e' armonico» — e aveva ragione due volte.
   Il viola di una piattaforma dentro un'apertura navy e oro e' un corpo
   estraneo; e un terzo tasto appeso sotto rompe la coppia, che e' equilibrata
   perche' sono DUE.
   ⭐ La soluzione non e' un tasto piu' bello: e' dare al canale il posto che
   gli manca. Il lato destro dell'apertura era vuoto (solo l'erba che ondeggia):
   li' ora c'e' la scheda, con la copertina VERA — la stessa che si vede su
   Apple — il nome della testata e le due vie per ascoltarla. Il tasto e' quello
   di casa, oro; nessun colore di nessuna piattaforma.
   ⚠️ Vetro e non tinta piena: sotto c'e' un'animazione, e coprirla di colore
   la spegnerebbe. */
/* ⛔ ALLINEAMENTO — due tentativi sbagliati prima di questo, e la ragione vale
   oltre questa pagina. Affiancando la scheda al blocco di testo come fratelli,
   `align-items: flex-end` allinea i BORDI DEI BOX, non i contenuti: il box del
   testo porta dentro il proprio padding, e la scheda restava 10 px piu' in alto
   dei tasti. Rifarle lo stesso padding non ha funzionato — il computed diceva
   50 px al testo e 60 alla copia, con la stessa identica dichiarazione.
   ⭐ La struttura risolve quello che i numeri inseguono: la scheda entra DENTRO
   `.apertura-testo`, che e' il blocco che porta il padding buono. I tasti sono
   l'ultima cosa della colonna di sinistra, quindi il fondo di quella colonna E'
   il fondo dei tasti — e `align-items: flex-end` ci appoggia la scheda esatta.
   Nessun numero da tenere allineato a mano, mai piu'. */
/* ⚠️ `.apertura-testo` nasce con `align-self: flex-start` e `max-width: 900px`:
   giusto per una colonna sola, ma con le due colonne il blocco resta largo
   quanto il suo contenuto e la scheda non arriva mai al margine destro (960 px
   di scarto a 1999 px, misurati). Con le colonne il blocco prende la riga
   intera, e il margine destro della scheda torna a essere il gutter — lo
   stesso, al pixel, del margine sinistro del titolo. */
.apertura-testo:has(.ap-colonne) { max-width: none; align-self: stretch; width: 100%; }
.ap-colonne {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 64px); flex-wrap: wrap;
}
.ap-parole { flex: 1 1 520px; max-width: 900px; }

/* LE DUE PIATTAFORME, NELLA FILA DEI TASTI (01/09/2026, quinta stesura).
   Ordine del proprietario: «ingrandisci icone e mettile a sx allineate a pulsanti
   e della stessa dimensione».
   ⭐ Il percorso di oggi, in ordine: tasto d'oro grande dentro una scheda di vetro
      a destra → due tasti piccoli → due tasti di notte → due icone da 30 px → via
      la cornice → **le icone entrano nella fila dei tasti**. La colonna destra non
      esiste piu': l'apertura torna a essere UNA colonna sola, e le piattaforme
      stanno dove sta tutto il resto delle azioni.
   ⚠️ 45 px, l'altezza esatta del tasto (`min-height: 44px` + il bordo): «della
      stessa dimensione» e' una misura, non un'impressione — si verifica leggendo i
      rettangoli, e i tre oggetti della fila devono dare la stessa `h`.
   ⚠️ `.ap-parole` era GIA' a 900 px (il suo `max-width`) anche con la colonna
      destra piena: togliendola il testo NON si allarga. Misurato prima di spostare,
      perche' un'apertura che cambia impaginazione da sola sarebbe un difetto
      introdotto di straforo. */
/* ⚠️ I 3 px di discesa NON sono un ritocco a occhio. I tasti hanno lo ZOCCOLO
   (`0 6px 0` nel box-shadow): il loro ingombro visivo va da 680 a 731, centro 705,5.
   Le tessere sono PIATTE e vanno da 680 a 725, centro 702,5. Il §9 di oggi dice che
   su un oggetto in rilievo l'occhio legge la linea di TERRA, ma su uno piatto legge
   il CENTRO — qui ce ne sono di tutti e due i tipi nella stessa fila, e cio' che si
   allinea e' il centro ottico. Da qui i 3 px, che sono (731-725)/2. */
.cs-icone { display: inline-flex; align-items: center; gap: 10px; margin: 0;
  transform: translateY(3px); }
.cs-anche {
  font: 700 9px/1 var(--narrow, sans-serif); letter-spacing: .18em;
  text-transform: uppercase; color: #8ea3bd; white-space: nowrap;
}
.cs-icona { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cs-icona img {
  width: 45px; height: 45px; border-radius: 10px; display: block;
  box-shadow: 0 5px 12px -5px rgba(0, 8, 20, .85),
              inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .15s ease, filter .15s ease;
}
.cs-icona:hover img, .cs-icona:focus-visible img { transform: translateY(-2px); filter: brightness(1.08); }
.cs-icona:focus-visible { outline: 2px solid #E8C476; outline-offset: 4px; border-radius: 12px; }

/* ⏳ IN ATTESA — Spotify c'e', si vede spento, e non si clicca. Il canale e' stato
   collegato il 01/09 ma il catalogo lo pubblica entro 24 ore: finche' l'indirizzo
   risponde 404 un link porterebbe in un vicolo cieco.
   ⚠️ E' uno <span>, non un <a>: niente href da neutralizzare a mano, e un lettore
   di schermo non lo annuncia come collegamento. */
.cs-icona.cs-attesa { cursor: default; }
.cs-icona.cs-attesa img { filter: grayscale(1); opacity: .4; }
.cs-icona.cs-attesa:hover img { transform: none; filter: grayscale(1); }
.cs-presto {
  font-size: 9px; letter-spacing: .05em; text-transform: none; color: #708499;
}

/* ⚠️ Sotto i 900 px la scheda scende sotto il testo e si allarga: in colonna
   stretta, affiancarla al titolo lo strozzerebbe. */
@media (max-width: 900px) {
  .ap-colonne { flex-direction: column; align-items: stretch; gap: 26px; }
  /* ⛔ In colonna il `flex-basis` cambia asse: i 520 px pensati come LARGHEZZA
     minima diventano un'ALTEZZA, e fra i tasti e la scheda si apriva un vuoto
     di 183 px sul telefono (277 su una tavoletta). Misurato, non visto a occhio:
     la colonna risultava alta 520 px con dentro 363 px di contenuto. */
  .ap-parole { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .cs-copertina { width: 74px; height: 74px; flex-basis: 74px; }
  .cs-nome { font-size: 18px; white-space: normal; }
}

/* l'indirizzo copiato: la conferma sta dove stava il link, non altrove */
.cs-feed a.copiato { color: #7fd3a3; border-bottom-color: transparent; cursor: default; }