/* ==========================================================================
   Parco Auto — sistema di design del portale
   Token su :where(:root) (specificità zero): il tema li può ridefinire senza !important.
   Chiaro/scuro automatico con prefers-color-scheme. Prefisso pa- per non urtare il tema.
   Impostazione ripresa da scu-core (portale scuole), palette e componenti propri.
   ========================================================================== */

:where(:root) {
  --pa-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pa-bg: #f4f6f6;
  --pa-surface: #ffffff;
  --pa-surface-2: #ecf1f1;
  --pa-ink: #122427;
  --pa-ink-2: #3a4f53;
  --pa-muted: #627477;
  --pa-line: #dbe3e3;
  --pa-line-strong: #c2cfcf;

  --pa-primary: #0b6b6f;
  --pa-primary-strong: #08555a;
  --pa-primary-ink: #ffffff;
  --pa-primary-soft: #e0f0ef;
  --pa-accent: #ffb51f;
  --pa-accent-ink: #3a2800;
  --pa-warn: #a4520c;
  --pa-warn-soft: #fdecd9;

  /* classi Euro: dalla più vecchia (caldo) alla più nuova (freddo), elettriche in verde */
  --pa-e1: #a3410f;
  --pa-e2: #dd7a26;
  --pa-e3: #edbb4f;
  --pa-e4: #8fbab6;
  --pa-e5: #0b6b6f;
  --pa-e6: #2e9e4f;

  /* alimentazioni */
  --pa-f-petrol: #e08a2c;
  --pa-f-diesel: #4b5763;
  --pa-f-lpg: #2f80c2;
  --pa-f-methane: #86b9e3;
  --pa-f-hybrid: #8fcf7a;
  --pa-f-hybrid-d: #4f9e66;
  --pa-f-electric: #1f8f45;
  --pa-f-other: #b9c1c7;

  /* mappe: due estremi per schema, le 5 classi sono miscele (vedi .pa-q0…4) */
  --pa-map-lo-density: #e3eff0;  --pa-map-hi-density: #08464a;
  --pa-map-lo-electric: #ecf6e3; --pa-map-hi-electric: #1d6e2f;
  --pa-map-lo-old: #fdf0e0;      --pa-map-hi-old: #92330a;
  --pa-map-lo-new: #eceffb;      --pa-map-hi-new: #2c3a8c;
  --pa-map-lo-road: #fbeceb;     --pa-map-hi-road: #962020;
  --pa-map-na: #e5e8ea;
  --pa-map-stroke: #ffffff;

  --pa-radius: 16px;
  --pa-radius-sm: 10px;
  --pa-shadow: 0 1px 2px rgba(18, 36, 39, 0.05), 0 6px 20px rgba(18, 36, 39, 0.06);
  --pa-shadow-lg: 0 18px 48px rgba(18, 36, 39, 0.16);
  --pa-wrap: 1180px;
  --pa-header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :where(:root) {
    --pa-bg: #0c1416;
    --pa-surface: #142023;
    --pa-surface-2: #1b2a2d;
    --pa-ink: #e6eeee;
    --pa-ink-2: #bccbcc;
    --pa-muted: #8fa3a5;
    --pa-line: #26383b;
    --pa-line-strong: #35494c;

    --pa-primary: #5cc8c4;
    --pa-primary-strong: #8adcd8;
    --pa-primary-ink: #06191a;
    --pa-primary-soft: #16393b;
    --pa-accent: #ffc74d;
    --pa-accent-ink: #2b1e00;
    --pa-warn: #ffb27a;
    --pa-warn-soft: #3a2614;

    --pa-e1: #d8703a;
    --pa-e2: #f09a4f;
    --pa-e3: #f3cf73;
    --pa-e4: #9fd0cb;
    --pa-e5: #3fb3b0;
    --pa-e6: #58c777;

    --pa-f-diesel: #9aa7b3;
    --pa-f-other: #6d787f;

    --pa-map-lo-density: #1b2d30;  --pa-map-hi-density: #7ee0dc;
    --pa-map-lo-electric: #1b2c1f; --pa-map-hi-electric: #7fdf8f;
    --pa-map-lo-old: #2e2017;      --pa-map-hi-old: #ffab73;
    --pa-map-lo-new: #1d2033;      --pa-map-hi-new: #a9b6ff;
    --pa-map-lo-road: #301b1b;     --pa-map-hi-road: #ff8f8f;
    --pa-map-na: #253235;
    --pa-map-stroke: #0c1416;

    --pa-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    --pa-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  }
}

/* --------------------------------------------------------------------------
   Contenitore e tipografia
   -------------------------------------------------------------------------- */
.pa {
  max-width: var(--pa-wrap);
  margin: 0 auto;
  padding: 20px 16px 48px;
  color: var(--pa-ink);
  font-family: var(--pa-font);
  font-size: 1rem;
  line-height: 1.55;
  box-sizing: border-box;
}
@media (min-width: 720px) { .pa { padding: 28px 24px 64px; } }
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }

.pa h1, .pa h2, .pa h3 { color: var(--pa-ink); font-family: var(--pa-font); letter-spacing: -0.015em; }
.pa h1 { font-size: clamp(1.8rem, 1.25rem + 2.3vw, 2.6rem); line-height: 1.12; font-weight: 750; margin: 0.15em 0 0.3em; letter-spacing: -0.025em; }
.pa h2 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; margin: 0 0 0.75em; }
.pa h3 { font-size: 1.05rem; line-height: 1.3; font-weight: 650; margin: 1.2em 0 0.5em; }
.pa p { margin: 0 0 0.9em; }
.pa a { color: var(--pa-primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.pa a:hover { color: var(--pa-primary-strong); }
.pa :focus-visible { outline: 3px solid color-mix(in srgb, var(--pa-primary) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.pa small, .pa .pa-small { font-size: 0.85rem; }
.pa-muted { color: var(--pa-muted); }
.pa-lead { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); color: var(--pa-ink-2); max-width: 68ch; }
.pa-num { font-variant-numeric: tabular-nums; }
.pa-mt { margin-top: 20px !important; }
.pa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* Percorso (breadcrumb) */
.pa-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.875rem; color: var(--pa-muted); margin-bottom: 10px; }
.pa-crumbs a { color: var(--pa-ink-2); text-decoration: none; }
.pa-crumbs a:hover { color: var(--pa-primary); text-decoration: underline; }
.pa-crumbs .pa-icon { width: 14px; height: 14px; opacity: 0.6; }

/* Intestazione di pagina */
.pa-head { margin: 4px 0 22px; }
.pa-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pa-primary); margin: 0 0 4px; }

/* --------------------------------------------------------------------------
   Pulsanti, chip, badge
   -------------------------------------------------------------------------- */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--pa-line-strong); background: var(--pa-surface); color: var(--pa-ink);
  font: 600 0.95rem/1.2 var(--pa-font); text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pa-btn:hover { border-color: var(--pa-primary); color: var(--pa-primary); }
.pa-btn:active { transform: translateY(1px); }
.pa-btn--primary { background: var(--pa-primary); border-color: var(--pa-primary); color: var(--pa-primary-ink); }
.pa-btn--primary:hover { background: var(--pa-primary-strong); border-color: var(--pa-primary-strong); color: var(--pa-primary-ink); }
.pa-btn--ghost { background: transparent; border-color: transparent; color: var(--pa-primary); padding-inline: 10px; }
.pa-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; border-radius: 10px; margin-top: 12px; }
.pa a.pa-btn { text-decoration: none; color: var(--pa-ink); }
.pa a.pa-btn:hover { color: var(--pa-primary); }
.pa a.pa-btn--ghost { color: var(--pa-primary); }

.pa-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--pa-line-strong); background: var(--pa-surface); color: var(--pa-ink-2);
  font: 600 0.87rem/1.2 var(--pa-font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pa a.pa-chip { color: var(--pa-ink-2); text-decoration: none; }
.pa-chip:hover, .pa a.pa-chip:hover { border-color: var(--pa-primary); color: var(--pa-primary); }
.pa-chip.is-active, .pa a.pa-chip.is-active { background: var(--pa-primary); border-color: var(--pa-primary); color: var(--pa-primary-ink); }
.pa-chip .pa-icon { width: 16px; height: 16px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.pa-chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.pa-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 650; vertical-align: 0.1em; }
.pa-badge--warn { background: var(--pa-warn-soft); color: var(--pa-warn); }

/* --------------------------------------------------------------------------
   Card, griglie, numeri chiave
   -------------------------------------------------------------------------- */
.pa-card {
  background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow); padding: 20px; margin: 0 0 20px; min-width: 0;
}
@media (min-width: 720px) { .pa-card { padding: 24px 28px; } }
.pa-card > :last-child { margin-bottom: 0; }
.pa-card--flush { padding: 0; overflow: hidden; }
.pa-card--flush .pa-empty { margin: 0; }
.pa-card-title { display: flex; align-items: center; gap: 10px; }
.pa .pa-card-title { margin-top: 0; }
.pa-card-title .pa-icon { width: 20px; height: 20px; color: var(--pa-primary); padding: 7px; box-sizing: content-box; border-radius: 10px; background: var(--pa-primary-soft); }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-bottom: 20px; }
.pa-grid > .pa-card { margin: 0; }
.pa-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .pa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-grid--map { grid-template-columns: 1fr; }
@media (min-width: 960px) { .pa-grid--map { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.pa-block-title { margin-top: 32px; }
.pa-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
.pa-section-head h2 { margin: 0; font-size: 1.4rem; }

.pa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.pa-kpi { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--pa-shadow); }
.pa-kpi-value { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pa-kpi-label { font-size: 0.86rem; color: var(--pa-ink-2); font-weight: 550; }
.pa-kpi-note { font-size: 0.78rem; color: var(--pa-muted); }
.pa-kpi .pa-icon { color: var(--pa-primary); width: 20px; height: 20px; margin-bottom: 4px; }

.pa-summary p { font-size: 1.04rem; color: var(--pa-ink-2); max-width: 75ch; }
.pa-summary strong { color: var(--pa-ink); }

.pa-note { display: flex; gap: 10px; border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; background: var(--pa-warn-soft); color: var(--pa-ink); font-size: 0.94rem; }
.pa-note .pa-icon { color: var(--pa-warn); margin-top: 2px; }
.pa .pa-source { font-size: 0.82rem; color: var(--pa-muted); margin: 18px 0 0; line-height: 1.5; }
.pa-empty { padding: 20px; text-align: center; color: var(--pa-muted); }

/* --------------------------------------------------------------------------
   Tabelle
   -------------------------------------------------------------------------- */
.pa-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.pa-table th, .pa-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--pa-line); vertical-align: middle; }
.pa-table thead th { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pa-muted); border-bottom-color: var(--pa-line-strong); white-space: nowrap; }
.pa-table tbody th { font-weight: 600; }
.pa-table tbody th a { text-decoration: none; }
.pa-table tbody th a:hover { text-decoration: underline; }
.pa-table tbody tr:last-child > * { border-bottom: 0; }
.pa-table td.pa-num, .pa-table th.pa-num { text-align: right; }
.pa-table--compact th, .pa-table--compact td { padding: 7px 8px; }
.pa-table-wrap { overflow-x: auto; }
.pa-card--flush .pa-table th:first-child, .pa-card--flush .pa-table td:first-child { padding-left: 20px; }
.pa-card--flush .pa-table th:last-child, .pa-card--flush .pa-table td:last-child { padding-right: 20px; }
.pa-table--sortable th[data-sort] { cursor: pointer; user-select: none; }
.pa-table--sortable th[data-sort]:hover { color: var(--pa-primary); }
.pa-table--sortable th[aria-sort=ascending]::after { content: " ▲"; font-size: 0.7em; }
.pa-table--sortable th[aria-sort=descending]::after { content: " ▼"; font-size: 0.7em; }
.pa-table tr[hidden] { display: none; }
.pa-rank-n { color: var(--pa-muted); width: 3em; }

/* --------------------------------------------------------------------------
   Grafici
   -------------------------------------------------------------------------- */
.pa-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; margin: 8px 0 6px; padding-top: 22px; }
.pa-bar { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; min-width: 0; }
.pa-bar span { display: block; background: linear-gradient(180deg, color-mix(in srgb, var(--pa-primary) 70%, #fff), var(--pa-primary)); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.pa-bar:last-child span { background: linear-gradient(180deg, #ffd06a, var(--pa-accent)); }
.pa-bar small { color: var(--pa-muted); font-size: 0.72rem; margin-top: 4px; }
.pa-bar b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 650; color: var(--pa-ink-2); opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.pa-bar:hover b, .pa-bar:last-child b, .pa-bar:first-child b { opacity: 1; }

.pa-stack { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--pa-surface-2); margin: 6px 0 10px; }
.pa-stack span { display: block; height: 100%; min-width: 1px; }
.pa-stack span + span { box-shadow: -1px 0 0 var(--pa-surface); }
.pa-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--pa-ink-2); }
.pa-stack-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.pa-stack-legend b { color: var(--pa-ink); font-weight: 650; margin-left: 2px; }
.pa-compare { display: grid; gap: 4px; margin-bottom: 10px; }
.pa-compare-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; align-items: center; gap: 10px; }
.pa-compare-label { font-size: 0.86rem; color: var(--pa-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-compare .pa-stack { margin: 4px 0; }

/* --------------------------------------------------------------------------
   Mappe coropletiche (SVG da PA\Map)
   -------------------------------------------------------------------------- */
.pa-map { margin: 0; }
.pa-map .pa-segmented { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pa-map-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.pa-map-svg path { stroke: var(--pa-map-stroke); stroke-width: 0.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: opacity 0.12s; }
.pa-map-svg a:hover path, .pa-map-svg a:focus path { opacity: 0.75; stroke: var(--pa-ink); stroke-width: 1.4px; }
.pa-map-svg path.is-current { stroke: var(--pa-accent); stroke-width: 2.5px; paint-order: stroke; }
.pa-map-svg a:focus { outline: none; }
.pa-hatch-bg { fill: var(--pa-map-na); }
.pa-hatch-line { stroke: var(--pa-warn); stroke-width: 80; opacity: 0.55; }

.pa-scheme-density { --lo: var(--pa-map-lo-density); --hi: var(--pa-map-hi-density); }
.pa-scheme-electric { --lo: var(--pa-map-lo-electric); --hi: var(--pa-map-hi-electric); }
.pa-scheme-old { --lo: var(--pa-map-lo-old); --hi: var(--pa-map-hi-old); }
.pa-scheme-new { --lo: var(--pa-map-lo-new); --hi: var(--pa-map-hi-new); }
.pa-scheme-road { --lo: var(--pa-map-lo-road); --hi: var(--pa-map-hi-road); }
.pa-q0 { fill: var(--lo); background: var(--lo); }
.pa-q1 { fill: color-mix(in srgb, var(--hi) 25%, var(--lo)); background: color-mix(in srgb, var(--hi) 25%, var(--lo)); }
.pa-q2 { fill: color-mix(in srgb, var(--hi) 50%, var(--lo)); background: color-mix(in srgb, var(--hi) 50%, var(--lo)); }
.pa-q3 { fill: color-mix(in srgb, var(--hi) 75%, var(--lo)); background: color-mix(in srgb, var(--hi) 75%, var(--lo)); }
.pa-q4 { fill: var(--hi); background: var(--hi); }
.pa-qn { fill: var(--pa-map-na); }

.pa-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font-size: 0.8rem; color: var(--pa-ink-2); }
.pa-legend[hidden] { display: none; }
.pa-legend-title { flex-basis: 100%; font-weight: 650; color: var(--pa-ink); }
.pa-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pa-legend-item i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.pa-legend-hatch { background: repeating-linear-gradient(45deg, var(--pa-map-na) 0 3px, color-mix(in srgb, var(--pa-warn) 55%, var(--pa-map-na)) 3px 5px); }

/* --------------------------------------------------------------------------
   Elenchi: classifiche, modelli, vicini, domande
   -------------------------------------------------------------------------- */
.pa-rank-mini { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.pa-rank-mini li { counter-increment: r; display: flex; align-items: baseline; gap: 6px; padding: 7px 0; border-top: 1px solid var(--pa-line); font-size: 0.94rem; }
.pa-rank-mini li:first-child { border-top: 0; }
.pa-rank-mini li::before { content: counter(r); min-width: 1.4em; color: var(--pa-muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.pa-rank-mini a { font-weight: 600; text-decoration: none; }
.pa-rank-mini b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pa-models { margin: 0 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pa-models--compact { grid-template-columns: 1fr; gap: 0; margin: 0; }
.pa-models a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--pa-surface); border: 1px solid var(--pa-line); color: var(--pa-ink); text-decoration: none; font-weight: 600; }
.pa-models--compact a { border: 0; border-top: 1px solid var(--pa-line); border-radius: 0; padding: 8px 2px; background: transparent; }
.pa-models--compact li:first-child a { border-top: 0; }
.pa .pa-models a { color: var(--pa-ink); }
.pa-models a:hover { border-color: var(--pa-primary); color: var(--pa-primary); }
.pa-models b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pa-ink-2); white-space: nowrap; }
.pa-models-rank { min-width: 1.8em; height: 1.8em; display: inline-grid; place-items: center; border-radius: 8px; background: var(--pa-surface-2); color: var(--pa-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pa-models li[hidden] { display: none; }

.pa-ranks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pa-ranks li { padding: 10px 12px; border-radius: 12px; background: var(--pa-surface-2); font-size: 0.93rem; }
.pa-ranks a { text-decoration: none; }

.pa-near { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; }
.pa-near li { padding: 8px 0; border-bottom: 1px solid var(--pa-line); }
.pa-near a { font-weight: 650; text-decoration: none; }
.pa-near span { display: block; font-size: 0.84rem; }

.pa-regions { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pa-regions a { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--pa-ink-2); font-size: 0.93rem; }
.pa-regions a:hover { background: var(--pa-surface-2); }
.pa-regions a[aria-current] { background: var(--pa-primary-soft); color: var(--pa-primary); font-weight: 650; }

.pa-faq { margin-top: 32px; }
.pa-faq-item { border-bottom: 1px solid var(--pa-line); }
.pa-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; font-weight: 650; }
.pa-faq-item summary::-webkit-details-marker { display: none; }
.pa-faq-item summary .pa-icon { color: var(--pa-muted); transition: transform 0.15s; }
.pa-faq-item[open] summary .pa-icon { transform: rotate(180deg); }
.pa-faq-item p { margin: 0 0 16px; color: var(--pa-ink-2); max-width: 75ch; }

.pa-panel { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow); padding: 16px; }
.pa-panel h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.pa-layout { display: grid; gap: 20px; }
@media (min-width: 960px) { .pa-layout--aside { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } .pa-layout--aside > aside { position: sticky; top: calc(var(--pa-header-h) + 12px); } }
@media (max-width: 959px) { .pa-layout--aside > aside { order: 2; } }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.pa-hero {
  position: relative; border-radius: 28px; padding: 36px 20px 28px; margin: 0 0 28px; color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 181, 31, 0.38), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(92, 200, 196, 0.4), transparent 42%),
    linear-gradient(135deg, #073f43 0%, #0b6b6f 58%, #12878a 100%);
}
.pa-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.16;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 26px, transparent 26px 52px);
  background-size: 52px 3px; background-repeat: repeat-x; background-position: 0 calc(100% - 14px);
}
@media (min-width: 720px) { .pa-hero { padding: 60px 56px 48px; } }
.pa-hero > * { position: relative; z-index: 1; }
.pa-hero .pa-eyebrow { color: #ffd26b; }
.pa .pa-hero h1 { color: #fff; max-width: 20ch; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem); }
.pa-hero .pa-lead { color: rgba(255, 255, 255, 0.9); margin-bottom: 24px; }
.pa-hero .pa-search { background: var(--pa-surface); color: var(--pa-ink); border-radius: 20px; padding: 14px; box-shadow: var(--pa-shadow-lg); max-width: 720px; z-index: 20; }
.pa-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; max-width: 820px; }
@media (min-width: 720px) { .pa-stats { grid-template-columns: repeat(4, 1fr); } }
.pa-stats li { display: flex; flex-direction: column; }
.pa-stats strong { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pa-stats span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }

.pa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.pa-tile a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%;
  padding: 14px 16px; border-radius: 14px; background: var(--pa-surface); border: 1px solid var(--pa-line);
  color: var(--pa-ink); text-decoration: none; font-weight: 600; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pa .pa-tile a { color: var(--pa-ink); }
.pa-tile a:hover { border-color: var(--pa-primary); box-shadow: var(--pa-shadow); transform: translateY(-1px); }
.pa-tile-count { font-size: 0.8rem; font-weight: 600; color: var(--pa-muted); background: var(--pa-surface-2); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pa-filterbox { position: relative; max-width: 340px; flex: 1 1 240px; }
.pa-filterbox .pa-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pa-muted); }
.pa-filterbox input { width: 100%; min-height: 42px; padding: 8px 12px 8px 40px; border-radius: 12px; border: 1px solid var(--pa-line-strong); background: var(--pa-surface); color: var(--pa-ink); font: inherit; }

/* --------------------------------------------------------------------------
   Ricerca con suggerimenti
   -------------------------------------------------------------------------- */
.pa-search { position: relative; z-index: 30; }
.pa-search label { display: block; font-weight: 650; margin: 0 0 8px; font-size: 0.95rem; }
.pa-search--compact label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pa-combo { position: relative; display: flex; gap: 8px; }
.pa-combo-field { position: relative; flex: 1; min-width: 0; }
.pa-combo-field > .pa-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pa-muted); width: 20px; height: 20px; pointer-events: none; }
.pa-combo input {
  width: 100%; min-height: 52px; padding: 12px 14px 12px 44px; font: 500 1.05rem/1.2 var(--pa-font);
  border: 1px solid var(--pa-line-strong); border-radius: 14px; background: var(--pa-surface); color: var(--pa-ink);
  -webkit-appearance: none; appearance: none;
}
.pa-combo input::placeholder { color: var(--pa-muted); opacity: 1; }
.pa-combo input:focus { outline: none; border-color: var(--pa-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-primary) 20%, transparent); }
.pa-combo .pa-btn { min-height: 52px; border-radius: 14px; padding-inline: 22px; }
@media (max-width: 520px) { .pa-combo .pa-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pa-combo .pa-btn { padding-inline: 16px; } }
.pa-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000; list-style: none; margin: 0; padding: 6px;
  max-height: min(440px, 60vh); overflow-y: auto; background: var(--pa-surface); color: var(--pa-ink);
  border: 1px solid var(--pa-line); border-radius: 16px; box-shadow: var(--pa-shadow-lg);
}
.pa-suggest [role=option] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.pa-suggest [role=option][aria-selected=true] { background: var(--pa-primary-soft); }
.pa-suggest-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pa-surface-2); color: var(--pa-primary); }
.pa-suggest-icon .pa-icon { width: 18px; height: 18px; }
.pa-suggest-text { display: flex; flex-direction: column; min-width: 0; }
.pa-suggest-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-suggest-label mark { background: none; color: var(--pa-primary); font-weight: 750; }
.pa-suggest-sub { font-size: 0.83rem; color: var(--pa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-suggest-empty { padding: 12px; color: var(--pa-muted); }

/* --------------------------------------------------------------------------
   Confronto tra comuni
   -------------------------------------------------------------------------- */
:where(:root) { --pa-cmp-a: #0b6b6f; --pa-cmp-b: #c4560f; }
@media (prefers-color-scheme: dark) { :where(:root) { --pa-cmp-a: #5cc8c4; --pa-cmp-b: #ff9a5c; } }
.pa-cmp-a-text { color: var(--pa-cmp-a); }
.pa-cmp-b-text { color: var(--pa-cmp-b); }
.pa a.pa-cmp-name { font-weight: 700; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.pa a.pa-cmp-name.pa-cmp-a-text { color: var(--pa-cmp-a); }
.pa a.pa-cmp-name.pa-cmp-b-text { color: var(--pa-cmp-b); }

.pa-compare-form { display: grid; gap: 12px; align-items: end; }
@media (min-width: 760px) { .pa-compare-form { grid-template-columns: 1fr 1fr auto; } .pa-compare-form--one { grid-template-columns: 1fr auto; } }
.pa-compare-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-compare-field label { font-weight: 650; font-size: 0.9rem; }
.pa-compare-form .pa-combo-field > .pa-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pa-muted); width: 20px; height: 20px; pointer-events: none; }
.pa-compare-form input[type=text] {
  width: 100%; min-height: 48px; padding: 10px 14px 10px 44px; font: 500 1rem/1.2 var(--pa-font);
  border: 1px solid var(--pa-line-strong); border-radius: 12px; background: var(--pa-surface); color: var(--pa-ink);
}
.pa-compare-form input[type=text]:focus { outline: none; border-color: var(--pa-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-primary) 20%, transparent); }
.pa-compare-form .pa-btn { min-height: 48px; }
.pa-compare-change > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--pa-primary); }
.pa-compare-change > summary::-webkit-details-marker { display: none; }
.pa-compare-change[open] > summary { margin-bottom: 14px; }
.pa-compare-change { padding-block: 14px; }

.pa-table--compare td.is-higher { font-weight: 750; }
.pa-table--compare thead th { text-transform: none; letter-spacing: 0; }
.pa-table--compare td, .pa-table--compare th { white-space: nowrap; }

.pa-cmp-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--pa-ink); transition: border-color 0.15s; }
.pa a.pa-cmp-link { color: var(--pa-ink); text-decoration: none; }
.pa-cmp-link:hover { border-color: var(--pa-primary); }
.pa-cmp-link strong { font-size: 1.3rem; }

.pa-lines { display: block; width: 100%; height: auto; overflow: visible; }
.pa-lines-grid { stroke: var(--pa-line); stroke-width: 1; stroke-dasharray: 3 4; }
.pa-lines-axis { fill: var(--pa-muted); font: 500 12px var(--pa-font); font-variant-numeric: tabular-nums; }
.pa-lines-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pa-lines-dot { stroke: var(--pa-surface); stroke-width: 2; }
.pa-lines-end { font: 700 13px var(--pa-font); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Incidenti e ricambio: numeri piccoli, barre di confronto, fatti
   -------------------------------------------------------------------------- */
.pa-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pa-minis li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--pa-radius-sm); background: var(--pa-surface-2); min-width: 0; }
.pa-minis b { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--pa-ink); }
.pa-minis span { font-size: 0.8rem; line-height: 1.3; color: var(--pa-muted); }

.pa-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa-hbars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.9rem; }
.pa-hbars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pa-ink-2); }
.pa-hbars i { display: block; height: 10px; min-width: 2px; border-radius: 6px; background: var(--pa-line-strong); }
.pa-hbars b { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.pa-hbars li.is-current span { color: var(--pa-ink); font-weight: 600; }
.pa-hbars li.is-current i { background: var(--pa-primary); }

.pa-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; }
.pa-facts li { display: flex; gap: 10px; align-items: flex-start; }
.pa-facts .pa-icon { flex: none; margin-top: 2px; color: var(--pa-primary); }

@media (max-width: 640px) {
  .pa-minis b { font-size: 1.1rem; }
  .pa-hbars li { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Fonti
   -------------------------------------------------------------------------- */
.pa-sources { margin-top: 40px; padding: 20px; border-radius: var(--pa-radius); background: var(--pa-surface-2); font-size: 0.85rem; color: var(--pa-ink-2); }
.pa .pa-sources h2 { font-size: 0.95rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.pa-sources ul { margin: 0 0 10px; padding-left: 1.1em; display: grid; gap: 4px; }
.pa-sources p { margin: 0; color: var(--pa-muted); }

@media (max-width: 640px) {
  .pa-hero { border-radius: 22px; }
  .pa-card { border-radius: 14px; padding: 16px; }
  .pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pa-kpi { padding: 10px 12px; border-radius: 12px; }
  .pa-kpi-value { font-size: 1.3rem; }
  .pa-kpi-label { font-size: 0.8rem; line-height: 1.3; }
  .pa-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pa-compare-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before, .pa *::after { transition: none !important; scroll-behavior: auto !important; }
}
.pa-big-number { margin: 0; color: var(--pa-ink-2); }
.pa-big-number b { font-size: 1.6rem; color: var(--pa-ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.pa-table tr.pa-row-group > * { border-top: 2px solid var(--pa-line-strong); }