/* =====================================================================
   Referendum Facile — foglio di stile condiviso
   Usato da index.html (landing + dashboard) e viewer.html (browser).

   Struttura:
   1. TOKEN PER TEMA   — chiaro / seppia / scuro / notte (palette verde/ambra)
   2. FONT             — sans (Barlow · François One) / serif (Lora · DM Serif Display) — tutti self-hosted
   3. BASE             — reset, tipografia, helper comuni
   4. COMPONENTI INDEX — nav, hero, counters, grafici, top-firme, steps, cta, footer
   5. COMPONENTI VIEWER— header, toolbar, card, badge, progress, modal, pagination
   ===================================================================== */

/* ============================ 1. TEMI ============================
   Palette "Sentri-inspired": midnight violet come canvas profondo,
   electric lime (--lime) come highlight raro, hot pink come accento
   secondario. I nomi storici --green/--amber restano per compatibilità:
   --green* = famiglia VIOLA (azione primaria, link, accenti),
   --amber* = famiglia PINK (accento secondario, badge, grafici).
   --lime = chip di evidenziazione (uno per viewport, vedi .hl).
   ================================================================= */
[data-theme="chiaro"] {
  --green:#5B3FD6; --green-dark:#150F23; --green-light:#8B7CE8;
  --amber:#C2255C; --amber-light:#FA7FAA;
  --bg:#FFFFFF; --bg-alt:#F5F4FB; --surface:#FFFFFF;
  --text:#1F1633; --text-muted:#5B5470; --border:#E5E7EB;
  --green-tint:rgba(91,63,214,0.10); --amber-tint:rgba(250,127,170,0.14);
  --accent:#5B3FD6; --accent-light:#EEEAFB; --success:#5B3FD6;
  --badge-law-bg:#EEEAFB; --badge-law-text:#422082;
  --badge-ref-bg:#FFE3EE; --badge-ref-text:#B01A52;
  --progress-bg:#E8E6F2; --toolbar-bg:rgba(255,255,255,0.92);
  --header-bg:#150F23; --header-text:#FFFFFF;
  --lime:#C2EF4E;
  --shadow:0 1px 3px rgba(21,15,35,.07), 0 4px 14px rgba(21,15,35,.05);
  --shadow-hover:0 4px 14px rgba(21,15,35,.10), 0 10px 28px rgba(21,15,35,.08);
  --input-bg:#FFFFFF; --scrollbar:#CFCCDB; --drawer-bg:#F5F4FB;
  --modal-overlay:rgba(21,15,35,0.72);
  --code-bg:#150F23; --code-text:#C2EF4E;
}
[data-theme="seppia"] {
  /* Seppia chiara a basso contrasto: canvas crema caldo, testo bruno tenue,
     accenti seppia/terracotta morbidi (niente viola/pink/lime). */
  --green:#9C7A4D; --green-dark:#7A5C36; --green-light:#BCA079;
  --amber:#B08968; --amber-light:#D8BFA3;
  --bg:#F4ECDD; --bg-alt:#EDE2CE; --surface:#F8F1E4;
  --text:#5A4A36; --text-muted:#8A765B; --border:#DDCDB2;
  --green-tint:rgba(156,122,77,0.10); --amber-tint:rgba(176,137,104,0.12);
  --accent:#9C7A4D; --accent-light:#EBDFC9; --success:#9C7A4D;
  --badge-law-bg:#EBDFC9; --badge-law-text:#7A5C36;
  --badge-ref-bg:#EEE0CC; --badge-ref-text:#8A6A45;
  --progress-bg:#E0D2B8; --toolbar-bg:rgba(244,236,221,0.96);
  --header-bg:#6B5840; --header-text:#F4ECDD;
  --lime:#D8BFA3;
  --shadow:0 1px 3px rgba(90,74,54,.06), 0 4px 14px rgba(90,74,54,.04);
  --shadow-hover:0 4px 14px rgba(90,74,54,.08), 0 10px 28px rgba(90,74,54,.06);
  --input-bg:#F8F1E4; --scrollbar:#CDBA98; --drawer-bg:#EBDFC9;
  --modal-overlay:rgba(90,74,54,0.55);
  --code-bg:#6B5840; --code-text:#F4ECDD;
}
[data-theme="scuro"] {
  --green:#9D8FF0; --green-dark:#6A5FC1; --green-light:#B6AAF5;
  --amber:#FA7FAA; --amber-light:#FFA3C4;
  --bg:#150F23; --bg-alt:#1F1633; --surface:#241A3D;
  --text:#FFFFFF; --text-muted:#BDB8C8; --border:#362D59;
  --green-tint:rgba(157,143,240,0.18); --amber-tint:rgba(250,127,170,0.18);
  --accent:#B6AAF5; --accent-light:#251C44; --success:#C2EF4E;
  --badge-law-bg:#251C44; --badge-law-text:#B6AAF5;
  --badge-ref-bg:#3A1F2E; --badge-ref-text:#FA7FAA;
  --progress-bg:#362D59; --toolbar-bg:rgba(21,15,35,0.94);
  --header-bg:#0E0A18; --header-text:#FFFFFF;
  --lime:#C2EF4E;
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
  --shadow-hover:0 4px 14px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);
  --input-bg:#1F1633; --scrollbar:#3A3158; --drawer-bg:#120C1F;
  --modal-overlay:rgba(0,0,0,0.82);
  --code-bg:#C2EF4E; --code-text:#150F23;
}
[data-theme="notte"] {
  /* Bianco e nero ad alto contrasto: canvas nero puro, testo bianco,
     accenti in scala di grigi/bianco (niente viola/pink/lime). */
  --green:#FFFFFF; --green-dark:#CCCCCC; --green-light:#E0E0E0;
  --amber:#FFFFFF; --amber-light:#CCCCCC;
  --bg:#000000; --bg-alt:#0D0D0D; --surface:#121212;
  --text:#FFFFFF; --text-muted:#B5B5B5; --border:#4A4A4A;
  --green-tint:rgba(255,255,255,0.12); --amber-tint:rgba(255,255,255,0.12);
  --accent:#FFFFFF; --accent-light:#1C1C1C; --success:#FFFFFF;
  --badge-law-bg:#1C1C1C; --badge-law-text:#FFFFFF;
  --badge-ref-bg:#1C1C1C; --badge-ref-text:#FFFFFF;
  --progress-bg:#333333; --toolbar-bg:rgba(0,0,0,0.96);
  --header-bg:#000000; --header-text:#FFFFFF;
  --lime:#FFFFFF;
  --shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.45);
  --shadow-hover:0 4px 14px rgba(0,0,0,.7), 0 10px 28px rgba(0,0,0,.55);
  --input-bg:#0D0D0D; --scrollbar:#5A5A5A; --drawer-bg:#0A0A0A;
  --modal-overlay:rgba(0,0,0,0.88);
  --code-bg:#FFFFFF; --code-text:#000000;
}

/* ============================ 2. FONT ============================ */
/* Tutti i font self-hosted, niente Google Fonts.
   Barlow: 4 tagli statici woff2 (Regular/Bold + italic, ~38 KB l'uno).
   DM Serif Display: Regular + Italic woff2 (~30 KB l'uno) — display font, solo weight 400.
   Lora: 4 tagli woff2 (Regular/Bold + italic, ~22 KB l'uno) — corpo serif del viewer. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/Barlow-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/Barlow-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/Barlow-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: italic; font-weight: 700;
  font-display: swap; src: url('/fonts/Barlow-BoldItalic.woff2') format('woff2');
}
/* François One: display chunky-condensed per i titoli del tema "sans" (1 taglio, weight 400).
   Toggle di lettura "Serif" del viewer: Lora per il corpo (4 tagli), DM Serif Display per i titoli. */
@font-face {
  font-family: 'Francois One'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/FrancoisOne-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/DMSerifDisplay-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/DMSerifDisplay-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/Lora-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/Lora-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/Lora-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 700;
  font-display: swap; src: url('/fonts/Lora-BoldItalic.woff2') format('woff2');
}
[data-font="sans"] {
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-heading: 'Francois One', 'Barlow', system-ui, sans-serif;
}
[data-font="serif"] {
  --font-body:    'Lora', Georgia, serif;
  --font-heading: 'DM Serif Display', Georgia, serif;
}

/* ============================ 3. BASE ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body, 'Barlow', system-ui, sans-serif);
  background: var(--bg); color: var(--text);
  line-height: 1.65; overflow-x: hidden; min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
}
img { max-width: 100%; display: block; }
a { color: var(--green); }
a:hover { text-decoration: underline; }
code { font-size: 0.85em; background-color: var(--code-bg); padding: 2px 4px; border-radius: 4px; color: var(--code-text); }
h1, h2, h3 {
  font-family: var(--font-heading, 'DM Serif Display', Georgia, serif);
  line-height: 1.3; color: var(--text);
}
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.45rem); }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--alt { background: var(--bg-alt); }
.label {
  position: relative;
  display: inline-block; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}
.label::after {
    content: '';
    position: absolute;
    top: 75%;
    left: 0;
    height: 5px;
    width: 60px;
    background: var(--lime);
}
/* Chip lime di evidenziazione (firma del sistema): avvolge UNA parola
   chiave dentro un titolo. Tienilo raro — uno per viewport. */
.hl {
  background: var(--lime); color: #150F23;
  padding: 0 0.28em; border-radius: 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.section-title { margin-bottom: 0.8rem; }
.section-lead  { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 3rem; max-width: 70ch; }

/* Reveal on scroll (index) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

.skip-link {
  position: absolute; top: -100%; left: 1rem; background: var(--green); color: #fff;
  padding: 0.5rem 1rem; border-radius: 0 0 6px 6px; font-weight: 600; z-index: 200; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Scrollbar (condiviso) */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

/* ===================== 4. COMPONENTI INDEX ===================== */
/* Buttons (BEM) */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s, color 0.18s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(91,63,214,0.38); }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }
.btn--amber { background: var(--amber); color: var(--accent-light); border-color: var(--amber); }
.btn--amber:hover { background: var(--amber-light); border-color: var(--amber-light); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(250,127,170,0.45); }
.btn--lg { padding: 1rem 2.5rem; font-size: 1.1rem; }

/* Header/footer: font fissi (Barlow / Francois One), immuni al toggle Serif/Sans
   del viewer (data-font ridefinisce --font-body/--font-heading sul <html>; qui li
   riancoriamo ai sans, così header e footer restano uguali alle altre pagine). */
.site-head, .footer {
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-heading: 'Francois One', 'Barlow', system-ui, sans-serif;
  /* Riapplica il font-body sul sottoalbero: il testo che non dichiara font-family
     (es. .site-head__sub) eredita il valore già risolto da body, quindi le sole
     variabili non basterebbero a riportarlo al sans. */
  font-family: var(--font-body);
  /* Ancora la dimensione base del sottoalbero a --rf-fix (= 18/s nel viewer, 1
     altrove): così anche il testo senza font-size esplicito — es. .footer__col li,
     che determina l'altezza della riga — resta alla misura delle altre pagine,
     non al root scalato dai pulsanti A+/A−. */
  font-size: calc(1rem * var(--rf-fix, 1));
}
/* Header condiviso (index + viewer) — sticky solo con --sticky (index) */
.site-head { background: var(--surface); border-bottom: 1px solid var(--border); transition: background 0.25s, border-color 0.25s; }
.site-head--sticky {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* --rf-fix (default 1) compensa lo scaler A+/A− del viewer: header/footer restano
   a misura costante. Su index la var non è impostata → fallback 1, nessun effetto. */
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: calc(1rem * var(--rf-fix, 1)); min-height: calc(3.75rem * var(--rf-fix, 1)); padding: calc(0.5rem * var(--rf-fix, 1)) calc(1rem * var(--rf-fix, 1)); }
.site-head__brand { display: flex; align-items: baseline; gap: calc(0.6rem * var(--rf-fix, 1)); flex-wrap: wrap; text-decoration: none; }
.site-head__brand:hover { text-decoration: none; }
.site-head__title { font-family: var(--font-heading); font-size: calc(1.45rem * var(--rf-fix, 1)); color: var(--green); letter-spacing: -0.02em; line-height: 1; }
.site-head__title .acc { color: var(--amber); }
.site-head__sub { font-size: calc(0.8rem * var(--rf-fix, 1)); color: var(--text-muted); }
@media (max-width: 560px) { .site-head__sub { display: none; } }
.site-head__actions { display: flex; align-items: center; gap: calc(0.75rem * var(--rf-fix, 1)); flex-shrink: 0; }
/* Bottone "Approfondimenti" nell'header: pin anche font e padding */
.site-head .btn { font-size: calc(1rem * var(--rf-fix, 1)); padding: calc(0.25rem * var(--rf-fix, 1)) calc(1.15rem * var(--rf-fix, 1)); }
.site-head__skip { display: none; }
@media (min-width: 580px) { .site-head__skip { display: inline-flex; } }
.theme-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: none;
  border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s; flex-shrink: 0;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg-alt); }

/* Hero */
.hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; }

/* Sfondo: sfumatura animata (aurora) + filtro noise */
.hero__aurora {
  position: absolute; inset: -30%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 45% at 20% 25%, var(--green-tint), transparent 70%),
    radial-gradient(35% 40% at 80% 20%, var(--amber-tint), transparent 70%),
    radial-gradient(45% 50% at 65% 80%, var(--green-tint), transparent 70%),
    radial-gradient(35% 40% at 25% 85%, var(--amber-tint), transparent 70%);
  filter: blur(60px) saturate(1.3);
  opacity: 0.85;
  animation: hero-aurora 22s ease-in-out infinite alternate;
}
@keyframes hero-aurora {
  0%   { transform: translate3d(0,0,0) scale(1)   rotate(0deg); }
  50%  { transform: translate3d(2%,-3%,0) scale(1.15) rotate(8deg); }
  100% { transform: translate3d(-3%,2%,0) scale(1.08) rotate(-6deg); }
}
.hero__noise {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: hero-noise 0.6s steps(4) infinite;
}
@keyframes hero-noise {
  0%   { background-position: 0 0; }
  25%  { background-position: -30px 20px; }
  50%  { background-position: 25px -15px; }
  75%  { background-position: -10px -25px; }
  100% { background-position: 15px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__aurora, .hero__noise { animation: none; }
}
.hero__inner { position: relative; z-index: 1; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--green-tint); color: var(--green); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 100px; margin-bottom: 1.25rem;
}
.hero__title { margin-bottom: 1.25rem; max-width: 18ch; }
.hero__title em { font-style: italic; color: var(--green); }
.hero__lead { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem; }
.hero__lead strong { color: var(--text); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-bottom: 2.5rem; }

/* Counters */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 820px; }
@media (max-width: 720px) { .counters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .counters { grid-template-columns: 1fr; } }
.counter { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.4rem; box-shadow: #0001 0 0 25px;}
.counter__n { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--green); line-height: 1.05; }
.counter:nth-child(2) .counter__n { color: var(--amber); }
.counter:nth-child(3) .counter__n { color: var(--green-light); }
.counter:nth-child(4) .counter__n { color: var(--green-dark); }
.counter__l { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }

/* Chart grid */
.chart-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 820px) { .chart-grid { grid-template-columns: 1fr 1fr; } }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; }
.chart-card--wide { grid-column: 1 / -1; }
.chart-card__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1.25rem; }
.chart-card__note { font-size: 0.78rem; color: var(--text-muted); margin-top: 1rem; }
.chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.chart-card__head .chart-card__title { margin-bottom: 0; }

/* Segmented toggle */
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg__btn { font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); background: none; border: 0; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; transition: background 0.18s, color 0.18s; }
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active { background: var(--green); color: #fff; }

/* Bar rows */
.bars { display: flex; flex-direction: column; gap: 0.8rem; }
.bar-row { display: grid; grid-template-columns: 16ch 1fr 4ch; gap: 0.75rem; align-items: center; }
.bar-row__label { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row__track { height: 1.6rem; background: var(--border); border-radius: 4px; overflow: hidden; }
.bar-row__fill { height: 100%; border-radius: 4px; width: 0; transition: width 1.2s cubic-bezier(0.4,0,0.2,1); background: var(--bar-c, var(--accent)); background-image: linear-gradient(90deg, color-mix(in srgb, var(--bar-c, var(--accent)) 72%, #000) 0%, var(--bar-c, var(--accent)) 50%, color-mix(in srgb, var(--bar-c, var(--accent)) 68%, #fff) 100%); }
.bar-row__val { font-family: var(--font-heading); font-size: 1rem; text-align: right; font-weight: 700; }

/* Top firme — tile coi numeri in grande (niente barre) */
.topfirme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 700px) { .topfirme { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .topfirme { grid-template-columns: 1fr; } }
.topfirme__card { position: relative; background: linear-gradient(160deg, var(--green-tint), transparent 70%), var(--bg); border: 1px solid var(--border); border-radius: 0 0 12px 12px; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.12rem; overflow: hidden; }
.topfirme__card:nth-child(1) { background: linear-gradient(160deg, var(--amber-tint), transparent 70%), var(--bg); }
.topfirme__card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background: var(--green); }
.topfirme__card:nth-child(1)::before { background: var(--amber); }
.topfirme__rank { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; color: var(--success); }
.topfirme__num { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--green); line-height: 1.05; }
.topfirme__unit { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.45rem; }
.topfirme__title { font-size: 0.86rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.topfirme__empty { grid-column: 1 / -1; font-size: 0.88rem; color: var(--text-muted); padding: 1.5rem 0; text-align: center; }
.topfirme__title a { color: var(--text); text-decoration: none; }
.topfirme__title a:hover { color: var(--green); text-decoration: underline; }

/* Donut + legend */
.donut-wrap { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
.donut { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut__num { font-family: var(--font-heading); font-size: 2.2rem; color: var(--text); line-height: 1; }
.donut__sub { font-size: 0.72rem; color: var(--text-muted); }
.legend { display: flex; flex-direction: column; gap: 0.6rem; }
.legend__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.legend__dot { width: 0.8rem; height: 0.8rem; border-radius: 3px; flex-shrink: 0; }
.legend__n { font-weight: 700; margin-left: auto; padding-left: 1rem; }

/* Steps */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.5rem 0.75rem; }
.step__icon-wrap {
  position: relative; width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--green-tint); border: 2px solid rgba(91,63,214,0.25);
  display: flex; align-items: center; justify-content: center; color: var(--green); margin-bottom: 1.25rem;
}
.step__num {
  position: absolute; top: -6px; right: -6px; width: 1.5rem; height: 1.5rem;
  background: var(--amber); color: var(--accent-light); border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.step__title { margin-bottom: 0.65rem; }
.step__text { color: var(--text-muted); font-size: 0.95rem; max-width: none; }

/* CTA */
.cta-section { background: radial-gradient(circle, rgb(108 74 255) 0%, rgb(4 0 19) 150%); padding: 5rem 0; position: relative; overflow: hidden; text-align: center; }
.cta-section::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%); pointer-events: none; }
.cta-section h2 { color: #fff; }
.cta-section p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin: 0 auto 1.75rem; }
.cta-section .label { color: rgba(255,255,255,0.6); }

/* Footer (index) */
.footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: calc(3.5rem * var(--rf-fix, 1)) 0 calc(5rem * var(--rf-fix, 1)); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: calc(2.5rem * var(--rf-fix, 1)); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__brand { font-family: var(--font-heading); font-size: calc(1.5rem * var(--rf-fix, 1)); color: var(--green); margin-bottom: calc(0.4rem * var(--rf-fix, 1)); }
.footer__brand .acc { color: var(--amber); }
.footer__tagline { font-size: calc(0.9rem * var(--rf-fix, 1)); color: var(--text-muted); margin-bottom: calc(0.9rem * var(--rf-fix, 1)); }
.footer__col h4 { font-size: calc(1rem * var(--rf-fix, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); margin-bottom: calc(0.9rem * var(--rf-fix, 1)); }
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: calc(0.5rem * var(--rf-fix, 1)); }
.footer__col a { font-size: calc(0.9rem * var(--rf-fix, 1)); color: var(--text-muted); transition: color 0.15s; text-decoration: none; }
.footer__col a:hover { color: var(--green); }
.footer__bottom { margin-top: calc(2.5rem * var(--rf-fix, 1)); padding-top: calc(1.5rem * var(--rf-fix, 1)); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: calc(1rem * var(--rf-fix, 1)); justify-content: space-between; font-size: calc(0.8rem * var(--rf-fix, 1)); color: var(--text-muted); }

/* Back to top (index) */
.back-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: var(--green); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transform: translateY(8px); transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 4px 16px rgba(91,63,214,0.45); z-index: 90;
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover { background: var(--green-dark); }

/* ===================== 5. COMPONENTI VIEWER ===================== */
/* Sticky toolbar */
.toolbar {
  position: sticky; top: 0; z-index: 100; background: var(--toolbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); padding: 10px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  transition: background-color .25s, border-color .25s;
}
.tool-group { display: flex; align-items: center; gap: 6px; }
.tool-label { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.tool-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.page-size-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* Theme swatches */
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; transition: transform .15s, border-color .15s; }
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: var(--accent); }
.swatch[data-t="chiaro"] { background: #ffffff; box-shadow: inset 0 0 0 1px #d6d2e2; }
.swatch[data-t="seppia"] { background: #ece7fa; box-shadow: inset 0 0 0 1px #c6bce2; }
.swatch[data-t="scuro"]  { background: #150f23; box-shadow: inset 0 0 0 1px #362d59; }
.swatch[data-t="notte"]  { background: #0f0b1e; box-shadow: inset 0 0 0 1px #2c2452; }

/* Toolbar buttons / select */
.tbtn {
  height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer;
  font-size: .8rem; font-weight: 700; font-family: var(--font-body);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap; flex-shrink: 0;
}
.tbtn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.sort-select {
  height: 28px; padding: 0 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer;
  font-size: .78rem; font-weight: 600; font-family: var(--font-body); outline: none;
  transition: border-color .15s; flex-shrink: 0;
}
.sort-select:hover, .sort-select:focus { border-color: var(--accent); }

/* Search */
.search-wrap { flex: 1; min-width: 160px; }
.search-input {
  width: 100%; padding: 6px 12px; font-size: .875rem; font-family: var(--font-body);
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Filter chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
.chip-toggle.active { background: #d32f2f; border-color: #d32f2f; color: #fff; }
.chip-toggle.active:hover { color: #fff; }
.stats-pill { font-size: .78rem; font-weight: 600; color: var(--accent); background: var(--accent-light); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }

/* Main / grid */
.main { max-width: 1300px; margin: 0 auto; padding: 28px 20px 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, box-shadow .2s, background-color .25s, border-color .25s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-top { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: flex-start; }
.logo-wrap { width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.logo-initials { font-size: 1rem; font-weight: 700; color: var(--accent); }
.card-meta { flex: 1; min-width: 0; }
.badge { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-bottom: 7px; }
.badge-law { background: var(--badge-law-bg); color: var(--badge-law-text); }
.badge-ref { background: var(--badge-ref-bg); color: var(--badge-ref-text); }
.badge-expired { background: #d32f2f; color: #fff; margin-left: 5px; }
.card--expired { opacity: .82; }
.card--expired .logo-wrap img, .card--expired .logo-initials { filter: grayscale(.6); }
.card-title { font-family: var(--font-heading); font-size: .88rem; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-gu { font-size: .68rem; color: var(--text-muted); }
.card-body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.card-desc { font-size: .85rem; line-height: 1.65; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Progress */
.progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.progress-firme { font-size: .88rem; font-weight: 700; color: var(--text); }
.progress-pct   { font-size: .72rem; color: var(--text-muted); }
.progress-track { height: 5px; background: var(--progress-bg); border-radius: 3px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--success); border-radius: 3px; transition: width .4s ease; }
.progress-quorum { font-size: .7rem; color: var(--text-muted); margin-top: 4px; }

/* Meta */
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.meta-item { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.meta-item strong { display: block; color: var(--text); font-weight: 600; margin-top: 1px; }

/* Card actions + buttons (viewer-specific, prefisso .cbtn per non collidere con .btn di index) */
.card-actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.cbtn { padding: 8px 14px; border-radius: 8px; font-size: .8rem; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; display: block; transition: all .15s; font-family: var(--font-body); border: 1px solid; }
.cbtn-outline { background: transparent; border-color: var(--border); color: var(--text-muted); }
.cbtn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.cbtn-primary { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.cbtn-primary:hover { background: var(--accent); color: #fff; }
.cbtn-disabled { background: var(--progress-bg); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; pointer-events: none; opacity: .75; }
.modal-expired-note { color: #d32f2f; font-size: .82rem; font-weight: 600; margin-top: 8px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 500; background: var(--modal-overlay); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px 4vh; overflow-y: auto; }
.modal-backdrop.hidden { display: none; }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 32px 80px rgba(0,0,0,.4); width: 100%; max-width: 1024px; margin: auto; animation: modal-in .22s ease; position: relative; overflow: visible; isolation: isolate; z-index: 1; }
.modal-head { position: relative; top: auto; z-index: auto; border-bottom: 1px solid var(--border); padding: 18px 140px 18px 28px; display: flex; align-items: flex-start; gap: 14px; overflow: visible; }
.modal-logo { width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.modal-logo img { width: 100%; height: 100%; object-fit: contain; }
.modal-logo-initials { font-size: .95rem; font-weight: 700; color: var(--accent); }
.modal-head-text { flex: 1; min-width: 0; }
.modal-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text); margin-top: 7px; }
.modal-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 8px; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; z-index: 999; box-shadow: 0 6px 18px rgba(0,0,0,.12); pointer-events: auto; }
.modal-close:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.modal-totop { position: fixed; bottom: 24px; right: 24px; z-index: 600; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--accent); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.modal-totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.modal-totop:hover { filter: brightness(1.08); }
.modal-nav { position: absolute; top: 14px; right: 56px; display: flex; gap: 6px; z-index: 999; }
.modal-nav-btn, .modal-back-btn { border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: .78rem; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.modal-nav-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.modal-nav-btn:hover, .modal-back-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.modal-nav-btn:disabled, .modal-back-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.modal-back-btn { padding: 0 10px; height: 32px; white-space: nowrap; z-index: 999; background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.modal-body { padding: 28px; }
.modal-section { margin-bottom: 28px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 10px; display: block; }
.modal-text { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: var(--text-muted); }
.modal-quesito { font-family: var(--font-body); font-size: .92rem; line-height: 1.85; color: var(--text-muted); white-space: pre-wrap; padding: 20px 22px; background: var(--drawer-bg); border: 1px solid var(--border); border-radius: 10px; }
/* Box "Testo ufficiale del quesito": stile prominente come .proposta-box del blog */
.quesito-box { background: var(--bg-alt, var(--drawer-bg)); border: 1px solid var(--border); border-left: 4px solid var(--amber, var(--accent)); border-radius: 0 12px 12px 0; padding: 1.4rem 1.6rem; }
.quesito-box__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber, var(--accent)); margin-bottom: .4rem; }
.quesito-box__title { font-family: var(--font-heading); font-size: 1.25rem; margin: 0 0 .5rem; line-height: 1.2; color: var(--text); }
.quesito-box__intro { font-size: .9rem; color: var(--text-muted); margin: 0 0 1rem; }
.quesito-box__details summary { cursor: pointer; font-weight: 600; color: var(--green, var(--accent)); font-size: .9rem; list-style: none; display: inline-flex; align-items: center; gap: 8px; user-select: none; }
.quesito-box__details summary::-webkit-details-marker { display: none; }
.quesito-box__details summary::before { content: '▸'; font-size: .8rem; transition: transform .15s; }
.quesito-box__details[open] summary::before { transform: rotate(90deg); }
.quesito-box__quesito { font-family: var(--font-body); white-space: pre-wrap; font-size: .92rem; line-height: 1.7; color: var(--text-muted); margin-top: 1rem; max-height: 420px; overflow: auto; padding: 14px 16px; background: var(--drawer-bg); border: 1px solid var(--border); border-radius: 8px; }
@media (max-width: 720px) { .quesito-box__quesito { max-height: none; overflow: visible; } }
/* Sezione collassabile (<details>): summary cliccabile con freccia, contenuto chiuso di default */
.modal-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin-bottom: 0; user-select: none; }
.modal-collapse > summary::-webkit-details-marker { display: none; }
.modal-collapse > summary::before { content: '▸'; font-size: .8rem; color: var(--accent); transition: transform .15s; }
.modal-collapse[open] > summary::before { transform: rotate(90deg); }
.modal-collapse[open] > summary { margin-bottom: 10px; }
.modal-collapse > summary:hover { color: var(--text); }
/* Glossario: acronimi/latino con tooltip nativo (<abbr title>) */
.gloss { font-family: Georgia, "Times New Roman", Times, serif; color: var(--accent); text-transform: uppercase; background: var(--accent-light); padding: 3px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); cursor: help; text-decoration: none; }
.gloss-lat { text-transform: none; font-style: italic; }
.modal-divider { height: 1px; background: var(--border); margin: 20px 0; }
.modal-actions { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; margin-top: 6px; }
.modal-link { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px; transition: opacity .15s; }
.modal-link:hover { opacity: .75; }

/* Empty state */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-muted); background: var(--surface); border-radius: 14px; border: 1px dashed var(--border); font-size: .9rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.page-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-family: var(--font-body); font-size: .78rem; font-weight: 700; transition: all .15s; }
.page-btn:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Responsive (viewer) */
@media (max-width: 599px) {
  .toolbar { gap: 6px 10px; padding: 8px 14px; }
  .tool-sep { display: none; }
  .main { padding: 16px 12px 0; }
  .modal-body { padding: 20px; }
  .modal-head { padding: 16px 56px 16px 20px; }
}

/* ===================== 6. COMPONENTI BLOG ===================== */
/* Colonna di lettura per gli articoli */
.container--prose { max-width: 1024px; }

/* --- Indice blog: griglia di card articolo --- */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 680px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); border-color: var(--green-light); }
.post-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card__title { font-size: 1.3rem; line-height: 1.2; margin: 0; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { color: var(--green); }
.post-card__excerpt { color: var(--text-muted); font-size: 0.94rem; flex: 1; }
.post-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.post-card__more { font-size: 0.85rem; font-weight: 700; color: var(--green); text-decoration: none; text-align: right; margin-top: 0.6rem; }
.post-card__more:hover { text-decoration: underline; }
.post-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: 14px; }
.post-empty code { background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; }
.home-posts__cta { text-align: center; margin-top: 2rem; }

/* --- Meta e tag (indice + articolo) --- */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.article-meta time { font-weight: 600; }
.article-tag { display: inline-block; background: var(--green-tint); color: var(--green); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 100px; }

/* --- Pagina articolo --- */
.article-main { padding: 2.5rem 0 4rem; }
.article-back { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-bottom: 1.5rem; }
.article-back:hover { color: var(--green); }
.article-head { margin-bottom: 1.75rem; }
.article-title { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0.6rem 0 0.8rem; line-height: 1.1; }
.article-hook { font-size: 1.2rem; color: var(--text-muted); font-style: italic; max-width: 60ch; }
.article-byline { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.75rem; }
.article-cover { margin: 0 0 2rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.article-cover img { width: 100%; }

/* Prosa dell'articolo */
.article-body { font-size: 1.08rem; line-height: 1.75; color: var(--text-muted); }
.article-body > * + * { margin-top: 1.25rem; }
.article-body h2, .article-h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 2.5rem 0 0.25rem; }
.article-body h3 { margin: 2rem 0 0.25rem; }
.article-body a { color: var(--green); }
[data-theme="scuro"] .article-body a,
[data-theme="notte"] .article-body a { color: var(--lime); }
.article-body ul, .article-body ol { padding-left: 1rem; }
.article-body li + li { margin-top: 0.4rem; }
.article-body blockquote { position: relative; max-width: 80%; margin: 1.75rem auto; border-left: 4px solid var(--green); background: var(--green-tint); padding: 1.1rem 1.5rem 1.1rem 3.5rem; border-radius: 0 8px 8px 0; color: var(--text-muted); font-style: italic; }
.article-body blockquote::before { content: "\201C"; position: absolute; top: 0.1rem; left: 0; font-family: var(--font-heading), Georgia, serif; font-size: 6rem; line-height: 1; color: color-mix(in srgb, var(--green) 35%, transparent); pointer-events: none; }
.article-body blockquote > :first-child { margin-top: 0; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body code { padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 0.55rem 0.75rem; text-align: left; }
.article-body th { background: var(--bg-alt); }

/* Figure (immagini fornite dall'autore) */
.article-figure { margin: 2rem 0; }
.article-figure img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.article-figcaption { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: 0.6rem; }

/* Player audio (versione ascoltabile dell'articolo) — sfondo a zone di colore animate */
.audio-player { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 2rem; }
.audio-player::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 20%, var(--amber) 10%, transparent 80%),
    radial-gradient(55% 75% at 88% 30%, var(--accent) 30%, transparent 70%),
    radial-gradient(70% 90% at 60% 95%, var(--green) 20%, transparent 65%);
  background-size: 200% 200%;
  opacity: 0.20;
  animation: audioGlow 16s ease-in-out infinite;
}
@keyframes audioGlow {
  0%   { background-position:   0% 50%,  100% 50%,  50% 0%; }
  33%  { background-position: 100% 30%,    0% 70%,  20% 100%; }
  66%  { background-position:  40% 100%,  60% 0%,  100% 40%; }
  100% { background-position:   0% 50%,  100% 50%,  50% 0%; }
}
.audio-player > * { position: relative; z-index: 1; }
.audio-player__label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 0.7rem; }
.audio-player__el { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .audio-player::before { animation: none; } }

/* Grafici inseriti nell'articolo (riusano .chart-card/.bar-row/.donut) */
.article-chart { margin: 2.25rem 0; }
/* Barre: box all'80% della larghezza, centrato */
.chart-card--bars { width: 90%; margin-left: auto; margin-right: auto; }
/* Donut: box centrato e non troppo largo (evita lo sbilanciamento a sinistra) */
.chart-card--donut { max-width: 540px; margin-left: auto; margin-right: auto; }
.chart-card--donut .donut-wrap { justify-content: center; }
@media (max-width: 599px) { .chart-card--bars { width: 100%; } }

/* Box "Testo originale della proposta" */
.proposta-box { background: var(--bg-alt); border: 1px solid var(--border); border-left: 8px solid var(--amber); border-radius: 0 12px 12px 0; padding: 1.4rem 1.6rem; margin: 0 0 2.25rem; }
.proposta-box__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.4rem; }
.proposta-box__title { font-size: 1.25rem; margin: 0 0 0.75rem; line-height: 1.2; }
.proposta-box__details summary { cursor: pointer; font-weight: 600; color: var(--green); font-size: 0.9rem; }
.proposta-box__quesito { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); margin-top: 0.9rem; max-height: 360px; overflow: auto; padding-right: 0.5rem; }
.proposta-box__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.1rem; }
.proposta-box__site { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; word-break: break-all; }
.proposta-box__site:hover { color: var(--green); }
.proposta-box__warn { font-size: 0.9rem; color: var(--text-muted); }

/* Pro / Contro */
.procontro { margin: 3rem 0 0; }
.procontro__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 700px) { .procontro__grid { grid-template-columns: 1fr 1fr; } }
.position-col { border: 1px solid var(--border); border-radius: 0 0 12px 12px; padding: 1.3rem 1.4rem; background: var(--surface); }
.position-col--pro { border-top: 8px solid var(--green); background: linear-gradient(180deg, var(--green-tint), transparent 55%), var(--surface); }
.position-col--contro { border-top: 8px solid var(--amber); background: linear-gradient(180deg, var(--amber-tint), transparent 55%), var(--surface); }
.position-col__head {
  font-size: 1.3rem; margin: 0 0 1rem; display: inline-block;
  /* --- Controlli sottolineatura ondulata --- */
  --wave-w: 25px;     /* larghezza di un'onda (più piccola = onde più fitte) */
  --wave-h: 6px;      /* altezza/ampiezza dell'onda (più grande = onde più marcate) */
  --wave-gap: 0.2rem; /* distanza dal testo */
}
/* Sottolineatura ondulata — eredita il colore del titolo (verde/ambra) via currentColor.
   L'SVG ha viewBox intrinseco 20x6 ma viene scalato a var(--wave-w) x var(--wave-h) dalla mask
   (preserveAspectRatio='none'); 'vector-effect=non-scaling-stroke' mantiene costante lo spessore.
   Per cambiare lo SPESSORE del tratto modifica stroke-width nell'SVG qui sotto. */
.position-col__head::after {
  content: ""; display: block; height: var(--wave-h); margin-top: var(--wave-gap);
  background-color: currentColor;
  -webkit-mask: var(--wave-svg) repeat-x left center / var(--wave-w) var(--wave-h);
          mask: var(--wave-svg) repeat-x left center / var(--wave-w) var(--wave-h);
  --wave-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='black' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.position-col--pro .position-col__head { color: var(--green); }
.position-col--contro .position-col__head { color: var(--amber); }
.position-col__empty { color: var(--text-muted); }
.position-card { padding: 0.75rem 0; border-top: 1px solid var(--border); }
.position-card:first-of-type { border-top: none; padding-top: 0; }
.position-card__name { font-weight: 700; font-size: 0.95rem; }
.position-card__why { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Rassegna stampa */
.fonti { margin: 3rem 0 0; }
.fonti-list { list-style: none; padding: 0; margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.fonti-list li { border: 1px solid var(--border); border-radius: 10px; }
.fonti-list a { display: block; padding: 0.85rem 1.1rem; color: var(--text); text-decoration: none; font-size: 0.95rem; transition: background 0.15s; }
.fonti-list a:hover { background: var(--bg-alt); }
.fonti-list__src { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin-bottom: 0.15rem; }

/* ============================ 7. GUIDA (guida/index.html) ============================ */
.guide-note {
  border-left: 8px solid var(--green);
  background: var(--green-tint);
  padding: 1rem 1.2rem;
  border-radius: 0 6px 6px 0;;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.guide-note__label {
  font-weight: 600;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.guide-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.2rem;
  margin: 1.8rem 0;
  padding: 1.2rem;
  background: var(--bg-alt);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.guide-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--success);
  background: var(--green-tint);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.guide-step__content h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.guide-step__content p {
  margin: 0.3rem 0;
  font-size: 0.95rem;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 0.75rem; text-align: left; }
.article-body th { background: var(--bg-alt); font-weight: 600; color: var(--text-muted); }
.article-body td { vertical-align: top; }

/* ============================ 8. PAGINE LEGALI (privacy-policy/index.html) ============================ */
/* Layout condiviso con guida (.article-main / .article-head / .article-body).
   Qui restano solo i componenti specifici: indice, nota, placeholder. */
.legal__note {
  border-left: 3px solid var(--amber);
  background: var(--bg-alt);
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}
.legal__toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  max-width: 72ch;
}
.legal__toc h2 { margin: 0 0 0.6rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.legal__toc ol { margin: 0 0 0 1.2rem; }
.legal__toc li { margin-bottom: 0.3rem; }
.placeholder { background: var(--amber-light, #fde68a); color: #000; padding: 0 .25rem; border-radius: 3px; font-weight: 600; }