/* Atlas of Aid — stile delle pagine. Caratteri e struttura della famiglia (come italiain3d.it), accento proprio.
   Colori dei grafici: palette di riferimento validata (blu e arancio per le serie, rampa blu sequenziale per la mappa). */
[hidden] { display: none !important; }
:root {
  --paper: #f6f5f1; --ink: #1c2430; --ink-soft: #5f6b78; --rule: #d3d0c7; --accent: #0f766e; --link: #1a5fb4;
  --s1: #2a78d6; --s2: #eb6834; --grid: #e2dfd6; --none: #e6e3db;
  --c0: #cde2fb; --c1: #9ec5f4; --c2: #6da7ec; --c3: #3987e5; --c4: #256abf; --c5: #184f95;
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #13181f; --ink: #e3e7ec; --ink-soft: #95a1ae; --rule: #2c3540; --accent: #2dd4bf; --link: #7cb4ff;
  --s1: #3987e5; --s2: #d95926; --grid: #232b35; --none: #222a33;
  --c0: #184f95; --c1: #1c5cab; --c2: #256abf; --c3: #3987e5; --c4: #6da7ec; --c5: #9ec5f4; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #13181f; --ink: #e3e7ec; --ink-soft: #95a1ae; --rule: #2c3540; --accent: #2dd4bf; --link: #7cb4ff;
  --s1: #3987e5; --s2: #d95926; --grid: #232b35; --none: #222a33;
  --c0: #184f95; --c1: #1c5cab; --c2: #256abf; --c3: #3987e5; --c4: #6da7ec; --c5: #9ec5f4; color-scheme: dark }
* { box-sizing: border-box; }
/* i link interni (#mappa, #sede, #perimetro…) si fermano sotto la testata fissa */
html { scroll-padding-top: 84px; }
@media (max-width: 760px) { html { scroll-padding-top: 150px; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: 1.45; overflow-x: hidden; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
/* link nel contenuto e nel piè di pagina: blu, senza sottolineatura (compare al passaggio del mouse) */
main a, footer a { color: var(--link); text-decoration: none; }
main a:hover, footer a:hover { text-decoration: underline; color: var(--link); }
a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.anteprima { margin: 0; padding: 4px 16px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--paper); text-align: center; }

.testa { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 20; background: var(--paper); flex-wrap: wrap; }
.marchio { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.marchio a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.marchio em { font-style: normal; color: var(--accent); }
.logo { width: 28px; height: 28px; }
.l-o { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.l-m { fill: none; stroke: var(--ink-soft); stroke-width: 1.1; }
.l-h { fill: var(--accent); stroke: var(--paper); stroke-width: 30; paint-order: stroke; stroke-linejoin: round; }
.testa nav { display: flex; gap: 16px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; }
.testa nav a { text-decoration: none; }
.tendina { position: relative; }
.tendina button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tendina button:hover { color: var(--accent); }
.tendina-voci { display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 210px; padding: 6px 0; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); text-transform: none; letter-spacing: 0; font-size: 15px; }
.tendina-voci a { display: block; padding: 7px 14px; white-space: nowrap; }
.tendina-voci a:hover, .tendina-voci a:focus-visible { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.tendina.aperta .tendina-voci, .tendina:focus-within .tendina-voci { display: block; }
@media (hover: hover) { .tendina:hover .tendina-voci { display: block; } }
.cerca { position: relative; margin-left: auto; }
.cerca input { font: 15px var(--f-ui); padding: 6px 10px; width: 230px; max-width: 60vw; border: 1px solid var(--rule); background: transparent; color: var(--ink); }
.risultati { position: absolute; right: 0; top: 100%; width: 340px; max-width: 90vw; margin: 4px 0 0; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--ink); z-index: 30; }
.risultati li a { display: block; padding: 6px 10px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.risultati li a span { color: var(--ink-soft); font-size: 13px; margin-left: 6px; }
.lingue { display: flex; gap: 6px; font: 13px var(--f-data); }
.lingue a { text-decoration: none; color: var(--ink-soft); }
.lingue a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; }

h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 600; margin: 28px 0 12px; letter-spacing: -.01em; }
h2.sez, main h2 { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
h3 { font-size: 16px; margin: 28px 0 8px; }
.occhiello { margin: 28px 0 -8px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.altro-nome { color: var(--ink-soft); margin-top: -6px; }
.nota { color: var(--ink-soft); font-size: 15px; }
.avviso { border-left: 3px solid var(--accent); padding-left: 10px; }
.verifica { border-left: 3px solid var(--s2); padding: 2px 0 2px 12px; margin: 20px 0; font-size: 15px; max-width: 46em; }
.verifica p { margin: 6px 0; } .verifica ul { margin: 6px 0; padding-left: 18px; } .verifica li { margin: 4px 0; }
.attacco { font-size: 19px; }

/* hero della home: claim, sottotitolo, azioni; il globo del marchio come segno grafico */
.eroe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
        /* a tutta larghezza: esce dalla colonna della pagina, i testi restano allineati alla colonna */
        margin-inline: calc(50% - 50vw); padding: 56px calc(50vw - 50%) 40px; border-bottom: 1px solid var(--rule);
        background: radial-gradient(110% 140% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
                    color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.eroe-occhiello { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.eroe h1 { max-width: 18em; margin: 0; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.01em; }
.eroe-sotto { max-width: 40em; margin: 18px 0 0; font-size: 19px; color: var(--ink-soft); }
.eroe-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 26px 0 0; }
.eroe-azioni .btn { display: inline-block; font-size: 15px; padding: 9px 16px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); text-decoration: none; }
.eroe-azioni .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.eroe-azioni .btn.pieno { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.eroe-azioni .btn.pieno:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); text-decoration: none; }
.eroe-azioni .link { font-size: 15px; }
.eroe-globo { width: clamp(120px, 20vw, 230px); height: auto; opacity: .9; }
.eroe-globo .l-o { stroke-width: .9; } .eroe-globo .l-m { stroke-width: .6; } .eroe-globo .l-h { stroke-width: 18; }
.numeri dt a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--accent); }
@media (max-width: 760px) { .eroe { grid-template-columns: 1fr; padding-top: 36px; } .eroe-globo { display: none; } .eroe-sotto { font-size: 17px; } }
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 24px; margin: 24px 0 0; }
.numeri div { border-top: 1px solid var(--ink); padding: 10px 0; }
.numeri dt { font: 500 34px var(--f-data); letter-spacing: -.02em; }
.numeri dd { margin: 0; color: var(--ink-soft); }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 760px) { .due { grid-template-columns: 1fr; } .cerca { margin-left: 0; width: 100%; } .cerca input { width: 100%; max-width: none; } }

.fatti { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; margin: 20px 0; }
.fatti div { border-top: 1px solid var(--rule); padding: 8px 0; }
.fatti dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.fatti dd { margin: 2px 0 0; font: 500 18px var(--f-data); }
.fatti.verifiche { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fatti.verifiche dd { font: 16px/1.4 var(--f-ui); }

/* grafici */
.chart { width: 100%; height: auto; display: block; margin: 8px 0; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .ax { fill: var(--ink-soft); font: 11px var(--f-data); }
.chart .s1, .chart .sbar { fill: var(--s1); }
.chart .s2 { fill: var(--s2); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .line.s1 { stroke: var(--s1); } .chart .line.s2 { stroke: var(--s2); }
.chart .dot { stroke: var(--paper); stroke-width: 2; }
.chart [data-tip]:hover, .chart [data-tip]:focus { opacity: .8; }
.legenda { display: flex; gap: 18px; font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legenda i.s1 { background: var(--s1); } .legenda i.s2 { background: var(--s2); }
.hbars { list-style: none; margin: 0; padding: 0; }
.hbars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.hb-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-bar { height: 10px; }
.hb-bar i { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.hb-val { font: 13px var(--f-data); color: var(--ink-soft); min-width: 70px; text-align: right; }

/* mappa */
.mappa { margin: 8px 0 0; }
.mappa svg { width: 100%; height: auto; display: block; }
.mappa path { stroke: var(--paper); stroke-width: .5; vector-effect: non-scaling-stroke; }
.mappa a[href] path:hover { stroke: var(--ink); stroke-width: 1; }
.mappa .tela { position: relative; overflow: hidden; }
.mappa svg.zoomata { cursor: grab; }
.mappa svg.zoomata:active { cursor: grabbing; }
.strati { display: inline-flex; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.strati button { font: 13px var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.strati button + button { border-left: 1px solid var(--ink); }
.strati button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 34px; height: 34px; font: 18px/1 var(--f-data); border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); cursor: pointer; }
.zoom button:hover { border-color: var(--ink); }
.zoom-aiuto { font-size: 13px; text-align: left; margin: 4px 0 0; }
.mappa figcaption .nota { text-align: left; margin: 4px 0 0; }
.c-none { fill: var(--none); } .c0 { fill: var(--c0); } .c1 { fill: var(--c1); } .c2 { fill: var(--c2); }
.c3 { fill: var(--c3); } .c4 { fill: var(--c4); } .c5 { fill: var(--c5); }
.mappa figcaption { font: 12px var(--f-data); color: var(--ink-soft); text-align: right; }
.scala i { display: inline-block; width: 22px; height: 10px; vertical-align: -1px; }
.scala i.c-none { background: var(--none); } .scala i.c0 { background: var(--c0); } .scala i.c1 { background: var(--c1); }
.scala i.c2 { background: var(--c2); } .scala i.c3 { background: var(--c3); } .scala i.c4 { background: var(--c4); } .scala i.c5 { background: var(--c5); }

/* elenchi e tabelle */
table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
th, td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
td:nth-child(n+2) { font-family: var(--f-data); font-size: 14px; }
details summary { cursor: pointer; color: var(--ink-soft); font-size: 15px; margin: 6px 0; }
.elenco { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 32px; }
.elenco li { padding: 4px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.colonne-elenco { list-style: none; padding: 0; columns: 4 200px; column-gap: 24px; }
.colonne-elenco li { padding: 3px 0; break-inside: avoid; }
.n { font: 12px var(--f-data); color: var(--ink-soft); }
.paesi { line-height: 1.9; }
.cronologia { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.cronologia li { padding: 4px 0 4px 14px; position: relative; }
.cronologia li::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.cronologia time { font: 14px var(--f-data); margin-right: 8px; }
.definizione { font-size: 19px; color: var(--ink-soft); margin: 4px 0 12px; max-width: 46em; }
.descrizione { max-width: 60em; margin: 8px 0; }
.originale summary { font-size: 13px; }
.ident { font: 13px var(--f-data); line-height: 1.9; }
code { font-family: var(--f-data); }

.tip { position: fixed; z-index: 50; pointer-events: none; padding: 5px 8px; background: var(--ink); color: var(--paper); font: 13px var(--f-data); border-radius: 3px; max-width: 280px; }

footer { margin-top: 64px; border-top: 1px solid var(--ink); font-size: 14.5px; padding: 24px 0 40px; }
.colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 32px; }
.colonne h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; border: 0; padding: 0; }
.colonne ul { list-style: none; padding: 0; margin: 0; }
.colonne li { padding: 2px 0; }
footer .riga { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-soft); }
footer .fonti { font-size: 13px; }

/* pagine editoriali */
main ol, main ul:not(.hbars):not(.elenco):not(.colonne-elenco):not(.cronologia):not(.risultati) { max-width: 60em; }
main p { max-width: 60em; }
.glossario dt { font-weight: 600; margin-top: 14px; }
.glossario dd { margin: 2px 0 0; max-width: 56em; color: var(--ink); }

/* barra dei link in testa alla scheda */
.link-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 10px 0 4px; }
.link-bar .btn { display: inline-block; padding: 5px 12px; border: 1px solid var(--link); border-radius: 4px; font-size: 15px; text-decoration: none; }
.link-bar .btn:hover { background: var(--link); color: var(--paper); text-decoration: none; }
.link-bar .regs { font-size: 14px; color: var(--ink-soft); }
table.progetti td:first-child { font-family: var(--f-ui); font-size: 15px; max-width: 30em; }
.riparto { display: flex; height: 14px; max-width: 46em; margin: 8px 0 6px; background: var(--none); }
.riparto span { display: block; height: 100%; } .riparto .pub, .sw.pub { background: var(--c4); } .riparto .rest, .sw.rest { background: var(--c1); }
.legenda { font-size: 15px; margin: 4px 0; } .sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: baseline; }
/* home: le ONG del tuo paese */
.tuo-paese select { font: 15px var(--f-ui); padding: 4px 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); max-width: 100%; }
.tuo-paese ol.elenco { margin: 8px 0; }
.due-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 16px; }
.due-note p { margin: 0 0 12px; }
@media (max-width: 760px) { .due-note { grid-template-columns: 1fr; } }
/* pagina dei flussi (flows/, sito/flussi.js) */
.lead { color: var(--ink-soft); margin: 0 0 14px; }
.fl-viste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; padding: 0; margin: 12px 0 16px; }
.fl-viste legend { font-weight: 600; font-size: 16px; margin-bottom: 8px; padding: 0; }
.fl-vista { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; background: var(--paper); }
.fl-vista:hover { border-color: var(--ink); }
.fl-vista:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.fl-vista input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.fl-vista b { display: block; font-size: 16px; margin-bottom: 3px; }
.fl-vista small { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
@media (max-width: 640px) { .fl-viste { grid-template-columns: 1fr; } }
.fl-comandi { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 8px 0 12px; font-size: 15px; }
.fl-comandi select, .fl-comandi button { font: 15px var(--f-ui); padding: 5px 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 4px; }
.fl-comandi button { cursor: pointer; } .fl-comandi button:hover { border-color: var(--ink); }
.fl-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
#fl-mappa { width: 100%; height: auto; display: block; }
.fl-terra { fill: var(--none); stroke: var(--paper); stroke-width: .5; cursor: pointer; }
.fl-terra:hover { fill: color-mix(in srgb, var(--none) 70%, var(--ink)); }
.fl-terra.attivo { fill: color-mix(in srgb, var(--accent) 35%, var(--none)); }
.fl-arco { fill: none; stroke-linecap: round; opacity: .6; } .fl-arco:hover { opacity: 1; }
.fl-nodi circle { fill: var(--ink); }
.fl-pannello h2 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.fl-pannello ol { margin: 0; padding-left: 20px; font-size: 15px; } .fl-pannello li { margin: 3px 0; }
.fl-pannello .n { font: 13px var(--f-data); color: var(--ink-soft); white-space: nowrap; }
.fl-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }
.fl-legenda i { display: inline-block; width: 18px; height: 4px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.fl-assenti { margin: 22px 0 0; padding: 14px 16px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.fl-assenti strong { display: block; margin-bottom: 4px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 820px) { .fl-griglia { grid-template-columns: 1fr; } }
/* temi: soccorso in mare */
.scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sr-rotte td:first-child, table.sr-org td:first-child, table.sr-org td:nth-child(3) { font-family: var(--f-ui); font-size: 15px; }
table.sr-rotte td:nth-child(n+2), table.sr-rotte th:nth-child(n+2) { text-align: right; }
table.sr-org td:nth-child(3) { min-width: 14em; }
.tl { margin: 12px 0 8px; font-size: 14px; }
.tl-riga { display: grid; grid-template-columns: minmax(9em, 16em) 1fr; gap: 10px; align-items: center; min-height: 22px; }
.tl-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-nome small { color: var(--ink-soft); font-size: 12px; }
.tl-pista { position: relative; height: 12px; border-bottom: 1px solid var(--grid); }
.tl-bar { position: absolute; top: 2px; height: 8px; border-radius: 2px; background: var(--ink-soft); opacity: .45; }
.tl-bar.attivo { background: var(--s1); opacity: 1; }
.tl-bar.aereo.attivo { background: var(--s2); }
.tl-scala .tl-pista { border: 0; height: 18px; }
.tl-scala .tl-pista span { position: absolute; top: 2px; font-family: var(--f-data); font-size: 12px; color: var(--ink-soft); }
@media (max-width: 560px) { .tl-riga { grid-template-columns: 8.5em 1fr; } .tl-nome small { display: none; } }
table.sr-org td:nth-child(4), table.sr-org td:nth-child(5), table.sr-org td:nth-child(6) { white-space: nowrap; }
/* home: porta d'ingresso a card */
.numeri.piccoli { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 28px; }
.numeri.piccoli dt { font-size: 24px; }
.numeri.piccoli dd { font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0 8px; }
@media (max-width: 860px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { --c: var(--accent); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--c) 28%, var(--rule)); border-radius: 6px;
  color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--c) 8%, var(--paper)); transition: border-color .15s; }
.card:hover, .card:focus-visible { border-color: var(--c); text-decoration: none; }
.card-lists { --c: #1a5fb4; } .card-families { --c: #7c4dbd; } .card-countries { --c: #0f766e; }
.card-flows { --c: #c2571a; } .card-themes { --c: #b0356b; } .card-italy { --c: #3f7d20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-lists { --c: #7cb4ff; } :root:not([data-theme="light"]) .card-families { --c: #b794ea; }
  :root:not([data-theme="light"]) .card-countries { --c: #2dd4bf; } :root:not([data-theme="light"]) .card-flows { --c: #f0935c; }
  :root:not([data-theme="light"]) .card-themes { --c: #ec7fae; } :root:not([data-theme="light"]) .card-italy { --c: #8cc96a; } }
:root[data-theme="dark"] .card-lists { --c: #7cb4ff; } :root[data-theme="dark"] .card-families { --c: #b794ea; } :root[data-theme="dark"] .card-countries { --c: #2dd4bf; }
:root[data-theme="dark"] .card-flows { --c: #f0935c; } :root[data-theme="dark"] .card-themes { --c: #ec7fae; } :root[data-theme="dark"] .card-italy { --c: #8cc96a; }
.card-icona { width: 28px; height: 28px; fill: var(--c); }
.card[hidden] { display: none; }
.card-titolo { font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.card:hover .card-titolo { color: var(--c); }
.card-testo { font-size: 15px; color: var(--ink-soft); line-height: 1.4; }
table.us-num td:first-child, table.us-org td:first-child { font-family: var(--f-ui); font-size: 15px; }
table.us-num td:nth-child(n+2), table.us-num th:nth-child(n+2), table.us-org td:nth-child(n+3), table.us-org th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.cta-estratti { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 14px 0 8px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 6px; }
.cta-estratti .btn { flex: none; font-size: 15px; padding: 9px 16px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); text-decoration: none; }
.cta-estratti .btn:hover { border-color: var(--accent); color: var(--accent); }
.modulo { max-width: 40em; display: grid; gap: 14px; }
.modulo label { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.modulo input:not([type=checkbox]), .modulo textarea { font: 16px var(--f-ui); padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.modulo .consenso { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.modulo .trappola { position: absolute; left: -9999px; }
.modulo button { font: inherit; cursor: pointer; }
.modulo .eroe-azioni { margin: 0; }