/* ============================================================
   ixMaps · linguaggio UI moderno
   Identità ixMaps (blu cartografico + mono tecnico + molto bianco)
   × pulizia Vercel / chat AI. Stesso linguaggio di site_wbgt.css,
   adattato alla pagina di confronto censimenti 2011-2021.
   ============================================================ */
:root {
    /* compat con riferimenti inline esistenti */
    --primary-color: #08519c;
    --secondary-color: #5b6470;
    --accent-color: #3182bd;
    --text-color: #0b0d0f;
    --background-color: #ffffff;
    --sidebar-background: #ffffff;
    --title-color: #24A2AF;

    /* design tokens */
    --soft: #f6f7f9;
    --inset: #eef1f4;
    --ink: #0b0d0f;
    --ink-2: #5b6470;
    --ink-3: #9aa1ab;
    --line: #e9ebef;
    --line-2: #d7dbe1;
    --blue: #08519c;
    --blue-2: #3182bd;
    --azure: #e8f1fb;
    --azure-ink: #0f4c81;

    --border-radius: 14px;
    --r-ctrl: 9px;
    --r-pill: 999px;
    --sh-soft: 0 1px 2px rgba(11, 30, 60, .05);
    --sh-float: 0 6px 28px rgba(11, 40, 80, .10);
    --transition: all 0.15s ease;

    --mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;            /* niente scrollbar esterna: scorre solo la sidebar */
}

body {
    margin: 0; padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Logo */
.logo {
    position: absolute; bottom: 20px; right: 20px;
    z-index: 9999; cursor: pointer; transition: var(--transition); opacity: 0.85;
}
.logo:hover { opacity: 1; }
.logo-text {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px; line-height: 0.85; font-weight: 700;
    color: #9aa0a6; text-align: left;
}

/* Sidebar — flat, hairline, ombra appena accennata */
.sidebar {
    position: absolute; right: 5%; top: 14px;
    max-width: 360px; width: 30%; min-width: 310px;
    background: var(--sidebar-background);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    box-shadow: var(--sh-float);
    z-index: 99999; transition: var(--transition);
    max-height: calc(100vh - 28px);
    display: flex; flex-direction: column;
}
.sidebar-content { padding: 14px 20px; overflow-y: auto; }

.sidebar h1 {
    font-size: 1.5em; font-weight: 700;
    line-height: 1.2; letter-spacing: -0.01em;
    margin: 0 0 6px 0; color: var(--title-color);
    padding-bottom: 6px; border-bottom: 2px solid var(--title-color);
}

.sidebar-toggle {
    position: absolute; top: 6px; right: 6px;
    background: none; border: none; font-size: 22px;
    color: var(--ink-3); cursor: pointer; padding: 6px;
    border-radius: 7px; transition: var(--transition);
}
.sidebar-toggle:hover { background-color: var(--soft); color: var(--ink-2); }

a { color: var(--text-color); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--blue); }
.source-link { color: var(--blue); font-weight: 500; }
.source-link:hover { text-decoration: underline; }

/* Info: metodo di confronto (link in sidebar) */
.info-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--blue);
}
.info-link:hover { color: var(--azure-ink); text-decoration: underline; }
.info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
    background: var(--blue); color: #fff;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-weight: 700; font-size: 10.5px; line-height: 1;
}

/* ---- Gruppi di navigazione (temi in evidenza) ---- */
.nav-title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-3);
    margin: 12px 0 4px; padding-bottom: 3px;
    border-bottom: 1px solid var(--line);
}
.nav-title:first-of-type { margin-top: 2px; }

.nav-menu { list-style: none; padding: 0; margin: 0; }
.nav-menu li { margin: 0; }
.nav-menu a {
    display: block; padding: 4px 9px; border-radius: 7px;
    font-size: 13px; color: var(--ink-2);
}
.nav-menu a:hover { background-color: var(--soft); color: var(--ink); }
.nav-menu a.active { background-color: var(--azure); color: var(--azure-ink); font-weight: 600; }
.nav-menu ul { list-style: none; padding-left: 16px; margin: 0; }
.nav-menu ul a { font-size: 12px; color: var(--ink-3); }
.nav-menu ul a.active { color: var(--azure-ink); }

/* Controlli */
.controls {
    background: #fff; padding: 10px 14px;
    border-radius: var(--r-ctrl); margin: 10px 0;
    border: 1px solid var(--line);
}
.control-label {
    display: block; font-weight: 600;
    font-size: 12.5px; letter-spacing: 0; text-transform: none;
    color: var(--ink-2); margin-bottom: 6px;
}

/* Slider — override degli stili (thumb verde) iniettati da ixMaps.
   Specificità .controls .slider + !important per vincere sulle regole inline.
   Copre anche lo slider "Chart size" nativo (.legend-bottom-slider), iniettato
   a runtime da ixMaps fuori dalla sidebar. */
.controls .slider,
.legend-bottom-slider .slider {
    -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 2px;
    background: var(--line-2) !important;
    outline: none; opacity: 1 !important; cursor: pointer;
}
.controls .slider { width: 100%; }
.controls .slider::-webkit-slider-thumb,
.legend-bottom-slider .slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px !important; height: 16px !important; border-radius: 50% !important;
    background: #fff !important; border: 2px solid var(--blue) !important;
    box-shadow: var(--sh-soft); cursor: pointer;
}
.controls .slider::-moz-range-thumb,
.legend-bottom-slider .slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--blue); box-shadow: var(--sh-soft); cursor: pointer;
}
.controls .slider::-moz-range-track,
.legend-bottom-slider .slider::-moz-range-track {
    background: var(--line-2); height: 4px; border-radius: 2px;
}

/* Overlay codice sorgente */
.code-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 20, 35, .5); z-index: 999999; display: none;
}
.code-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 1200px; height: 80%; background: #fff;
    border-radius: var(--border-radius); box-shadow: 0 12px 44px rgba(11, 40, 80, .22);
    display: flex; flex-direction: column; border: 1px solid var(--line);
    overflow: auto; padding: 18px;
}

/* Overlay info: metodo di confronto */
.info-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 20, 35, .5); z-index: 999999; display: none;
}
.info-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 440px; background: #fff;
    border-radius: var(--border-radius); box-shadow: 0 12px 44px rgba(11, 40, 80, .22);
    border: 1px solid var(--line); padding: 24px 26px;
}
.info-container h2 {
    margin: 0 0 12px; font-size: 1.15em; color: var(--title-color);
}
.info-container p {
    margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
}
.info-close {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; font-size: 22px; line-height: 1;
    color: var(--ink-3); cursor: pointer; padding: 6px; border-radius: 7px;
    transition: var(--transition);
}
.info-close:hover { background-color: var(--soft); color: var(--ink-2); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b3b8bf; }

@media (max-width: 768px) {
    .sidebar {
        position: fixed; right: 10px; top: 14px;
        width: calc(100% - 20px); max-width: none; min-width: auto;
        max-height: calc(100vh - 28px);
    }
    .logo { right: 10px; bottom: 10px; }
    .logo-text { font-size: 30px; }
    .code-container { width: 95%; height: 90%; }
}
@media (max-width: 480px) {
    .sidebar-content { height: 100%; overflow-y: auto; }
    .logo-text { font-size: 26px; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--blue-2); outline-offset: 2px;
}