/* Atlante delle dipendenze — livello grafico "modern" (stesso linguaggio visivo del resto del sito). */
@layer atlas {
  :root { --a-accent: #0a84ff; --a-ease: cubic-bezier(.22, .8, .24, 1); --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; }
  html:root:not([data-theme=dark]) { --a-bg: #fff; --a-soft: #f5f5f7; --a-card: #fff; --a-text: #1d1d1f; --a-muted: #6e6e73; --a-line: #d2d2d7; --a-link: #0066cc; --a-shadow: 0 20px 50px rgba(0,0,0,.09); }
  html:root[data-theme=dark] { --a-bg: #000; --a-soft: #161618; --a-card: #1d1d1f; --a-text: #f5f5f7; --a-muted: #a1a1a6; --a-line: #333336; --a-link: #2997ff; --a-shadow: 0 24px 60px rgba(0,0,0,.55); }

  html body { background: var(--a-bg) !important; color: var(--a-text) !important; font-family: var(--a-font) !important; -webkit-font-smoothing: antialiased; letter-spacing: -.011em; }
  html body h1, html body h2, html body h3, html body .brand, html body .big-number, html body .value { font-family: var(--a-font) !important; }

  /* testata */
  html body header {
    position: sticky; top: 0; z-index: 50; height: 52px !important; margin: 0 !important; padding: 0 clamp(16px, 4vw, 48px);
    background: color-mix(in srgb, var(--a-bg) 72%, transparent) !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--a-line) 60%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  }
  html body header nav a { color: var(--a-muted) !important; font-size: 13px !important; font-weight: 500; border: 0 !important; padding: 8px 12px; border-radius: 980px; }
  html body header nav a:hover, html body header nav a.active { color: var(--a-text) !important; background: color-mix(in srgb, var(--a-text) 8%, transparent); }
  html body .edition { color: var(--a-muted) !important; font-size: 12px !important; letter-spacing: 0 !important; }

  /* intro */
  html body .explore { background: none !important; padding-top: clamp(40px, 7vw, 90px) !important; }
  html body .intro { text-align: center; max-width: 900px; margin: 0 auto clamp(24px, 4vw, 48px) !important; }
  html body .eyebrow { color: var(--a-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600; }
  html body .eyebrow span { background: var(--a-accent) !important; }
  html body .intro h1 { font-size: clamp(38px, 6.6vw, 84px) !important; line-height: 1.04 !important; letter-spacing: -.055em !important; font-weight: 700 !important; margin: 14px 0 18px !important; color: var(--a-text) !important; text-wrap: balance; }
  html body .intro h1 em {
    font-style: normal !important; background: linear-gradient(95deg, #64d2ff, #0a84ff 45%, #bf5af2) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  }
  html body .intro p { color: var(--a-muted) !important; font-size: clamp(17px, 1.8vw, 22px) !important; max-width: 40ch; margin-inline: auto !important; }

  /* mappa */
  html body .map-wrap { background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--a-accent) 9%, transparent), transparent 75%) !important; border: 0 !important; }
  html body #map canvas { filter: drop-shadow(0 28px 26px rgba(0,0,0,.20)); }
  html body .map-top { color: var(--a-muted) !important; letter-spacing: 0 !important; }
  html body #motion {
    color: var(--a-text) !important; background: color-mix(in srgb, var(--a-text) 8%, transparent) !important; border: 0 !important; border-radius: 980px !important; padding: 8px 14px !important; font-size: 12px !important;
  }
  html body .map-caption, html body .legend span, html body .map-hint, html body .sea { color: var(--a-muted) !important; letter-spacing: 0 !important; font-size: 12px !important; }
  html body .legend i { background: #d2d2d7 !important; border-radius: 50%; }
  html body .legend i.mint { background: var(--a-accent) !important; }
  html body .sea { text-transform: none !important; font-style: italic; opacity: .7; }
  html body #tooltip { background: color-mix(in srgb, var(--a-card) 85%, transparent) !important; color: var(--a-text) !important; border-radius: 12px !important; padding: 7px 12px !important; font-weight: 600; box-shadow: var(--a-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

  /* scheda territoriale */
  html body .region-panel {
    background: var(--a-card) !important; border: 1px solid color-mix(in srgb, var(--a-line) 70%, transparent) !important; border-radius: 28px !important; padding: 28px !important;
    box-shadow: var(--a-shadow) !important;
  }
  html body .region-panel, html body .region-panel label, html body .region-panel .mini-row span { color: var(--a-text) !important; }
  html body .panel-top .eyebrow, html body .panel-top .small, html body .data-label, html body .note { color: var(--a-muted) !important; letter-spacing: 0 !important; text-transform: none !important; }
  html body .region-panel select { background: var(--a-soft) !important; color: var(--a-text) !important; border: 0 !important; border-radius: 14px !important; padding: 12px 14px !important; }
  html body .big-number { font-size: clamp(44px, 5.4vw, 68px) !important; font-weight: 700 !important; letter-spacing: -.05em !important; color: var(--a-text) !important; font-variant-numeric: tabular-nums; line-height: 1.05; }
  html body .availability { color: var(--a-link) !important; font-size: 12px !important; letter-spacing: 0 !important; font-weight: 600 !important; text-transform: none !important; }
  html body .mini-row { border-color: color-mix(in srgb, var(--a-line) 70%, transparent) !important; }
  html body .mini-row b { color: var(--a-text) !important; font-variant-numeric: tabular-nums; }
  html body .detail-link { background: var(--a-accent) !important; color: #fff !important; border-radius: 980px !important; padding: 13px 20px !important; font-weight: 600 !important; border: 0 !important; transition: transform .25s var(--a-ease), filter .2s; }
  html body .detail-link:hover { filter: brightness(1.08); transform: scale(1.02); }

  /* riga inferiore */
  html body .bottomline { border-color: color-mix(in srgb, var(--a-line) 70%, transparent) !important; color: var(--a-muted) !important; }
  html body .bottomline b { color: var(--a-text) !important; }
  html body .bottomline a { color: var(--a-link) !important; letter-spacing: 0 !important; }

  /* dettaglio */
  html body .data-section, html body .method { background: transparent !important; border: 0 !important; }
  html body .section-heading h2, html body .method h2 { font-size: clamp(30px, 4.6vw, 56px) !important; letter-spacing: -.045em !important; font-weight: 700 !important; color: var(--a-text) !important; line-height: 1.06 !important; }
  html body .pill { background: color-mix(in srgb, var(--a-text) 8%, transparent) !important; color: var(--a-text) !important; border: 0 !important; border-radius: 980px !important; }
  html body .stat-card, html body .context article, html body .empty {
    background: var(--a-soft) !important; border: 0 !important; border-radius: 24px !important; padding: 26px !important; box-shadow: none !important;
    transition: transform .4s var(--a-ease), box-shadow .4s var(--a-ease);
  }
  html body .stat-card:hover, html body .context article:hover { transform: translateY(-5px); box-shadow: var(--a-shadow) !important; }
  html body .stat-card .index { color: var(--a-muted) !important; letter-spacing: 0 !important; font-size: 12px !important; }
  html body .stat-card h3, html body .context h3 { color: var(--a-text) !important; letter-spacing: -.03em !important; }
  html body .stat-card .value { font-size: clamp(34px, 4vw, 52px) !important; font-weight: 700 !important; letter-spacing: -.045em !important; color: var(--a-text) !important; font-variant-numeric: tabular-nums; }
  html body .stat-card p, html body .context p, html body .source-line p { color: var(--a-muted) !important; }
  html body .stat-card .bar { background: color-mix(in srgb, var(--a-text) 10%, transparent) !important; height: 8px !important; border-radius: 4px !important; overflow: hidden; }
  html body .stat-card .bar i { background: linear-gradient(90deg, #64d2ff, #0a84ff) !important; border-radius: 4px; display: block; height: 100%; }
  html body .source-line a, html body .method a, html body .empty a { color: var(--a-link) !important; }
  html body .context strong { color: var(--a-text) !important; }

  /* metodo */
  html body .method-items article { background: var(--a-soft) !important; border: 0 !important; border-radius: 24px !important; padding: 24px !important; }
  html body .method-items article > span { color: #fff !important; background: linear-gradient(160deg, #64d2ff, #0a84ff) !important; width: 34px; height: 34px; border-radius: 28%; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
  html body .method-items h3 { color: var(--a-text) !important; }
  html body .method p { color: var(--a-muted) !important; }

  /* comparsa allo scroll */
  html body .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--a-ease), transform .8s var(--a-ease); }
  html body .reveal.visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html body .reveal { opacity: 1; transform: none; transition: none; }
    html body .stat-card:hover, html body .context article:hover { transform: none; }
  }

  @media (max-width: 700px) {
    html body header { height: auto !important; min-height: 52px; flex-wrap: wrap !important; padding: 8px 12px !important; gap: 6px 8px !important; position: sticky; }
    html body header .brand { flex: 1 1 auto; min-width: 0; }
    html body header nav { order: 5; flex: 1 0 100%; display: flex; flex-wrap: nowrap !important; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin: 0 -4px; padding: 2px 0 4px; }
    html body header nav::-webkit-scrollbar { display: none; }
    html body header nav a { flex: 0 0 auto; padding: 7px 12px !important; }
    html body .edition { display: none !important; }
    html body .intro h1 { font-size: clamp(32px, 9.4vw, 44px) !important; }
    html body .explore { padding-top: 28px !important; }
    html body .region-panel { padding: 20px !important; border-radius: 24px !important; }
    html body .atlas-layout { gap: 14px !important; }
  }

  html body .chart-readout, html body .chart-footnote { border: 0 !important; border-radius: 16px !important; background: var(--a-soft) !important; padding: 12px 16px !important; }
  html body .chart-footnote { background: transparent !important; padding-inline: 0 !important; color: var(--a-muted) !important; }
  html body a.skip { border-radius: 980px !important; background: var(--a-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
}