/* ============================================================
       ixMaps · linguaggio UI moderno
       Identità ixMaps (blu cartografico + mono tecnico + molto bianco)
       × pulizia Vercel / chat AI. Variabili compatibili con i map HTML.
       ============================================================ */
    :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: 340px; width: 28%; min-width: 300px;
        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: 18px 20px; }

    .sidebar h1 {
        font-size: 1.95em; font-weight: 700;
        line-height: 1.3; letter-spacing: -0.01em;
        margin: 0 0 10px 0; color: var(--title-color);
        padding-bottom: 10px; 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; }

    /* ---- Segmented control (modalità) ---- */
    .seg {
        display: flex; gap: 4px; margin: 16px 0;
        background: var(--inset); border-radius: var(--r-ctrl); padding: 4px;
    }
    .seg .seg-btn {
        flex: 1; border: none; background: none; cursor: pointer;
        font: inherit; font-size: 12.5px; color: var(--ink-2);
        padding: 7px 4px; border-radius: 6px; transition: var(--transition);
        white-space: nowrap;
    }
    .seg .seg-btn:hover { color: var(--ink); }
    .seg .seg-btn.active {
        background: #fff; color: var(--blue); font-weight: 600;
        box-shadow: var(--sh-soft);
    }

    /* Menu a lista (fallback, se ancora usato) */
    .nav-menu { list-style: none; padding: 0; margin: 16px 0; }
    .nav-menu li { margin: 3px 0; }
    .nav-menu a { display: block; padding: 8px 12px; border-radius: 7px; font-size: 0.95em; }
    .nav-menu a:hover { background-color: var(--soft); }
    .nav-menu a.active { background-color: var(--azure); color: var(--azure-ink); font-weight: 600; }
    .nav-menu ul { list-style: none; padding-left: 0; margin: 4px 0; }

    /* Controlli */
    .controls {
        background: #fff; padding: 14px;
        border-radius: var(--r-ctrl); margin: 14px 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: 9px;
    }

    /* 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;
    }

    /* Statistiche — valori in mono */
    .statistics {
        background: var(--soft); border: 1px solid var(--line);
        border-radius: var(--r-ctrl); padding: 12px 14px; margin: 14px 0 0;
        font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
        flex: 1 1 auto; min-height: 60px; overflow-y: auto;
    }
    .statistics strong { color: var(--ink); font-weight: 600; }
    .statistics .stat-row {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 10px; padding: 3px 0;
    }
    .statistics .stat-row > span:first-child { color: var(--ink-2); }
    .statistics .stat-row .v { font-family: var(--mono); color: var(--ink); text-align: right; }
    .statistics .stat-row .v.big { font-size: 18px; font-weight: 600; color: var(--blue); }
    .statistics .stat-row .v span { font-family: var(--sans); color: var(--ink-3); font-size: 0.85em; }
    .statistics em { font-style: normal; color: var(--ink-3); font-size: 0.82em; }
    .statistics .times {
        margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
    }
    .statistics .times .th {
        display: block; margin-bottom: 5px;
        font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
    }
    .statistics .times .stat-row .v { color: var(--ink-2); }

    /* Codice overlay */
    .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);
    }
    .code-header {
        padding: 14px 18px; background: var(--soft); color: var(--ink);
        border-bottom: 1px solid var(--line);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        display: flex; justify-content: space-between; align-items: center;
    }
    .code-header h2 { font-size: 15px; font-weight: 650; }
    .code-actions { display: flex; gap: 8px; }
    .code-actions a { color: var(--ink-2); padding: 5px 10px; border-radius: 7px; transition: var(--transition); }
    .code-actions a:hover { background: var(--soft); color: var(--ink); }
    .code-content { flex: 1; overflow: auto; padding: 18px; }

    /* 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: 80px;
            width: calc(100% - 20px); max-width: none; min-width: auto;
            max-height: calc(100vh - 100px);
        }
        .logo { right: 10px; top: 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; }
    }

    .loading {
        display: inline-block; width: 18px; height: 18px; margin-right: 0.5em;
        border: 2px solid var(--line); border-top: 2px solid var(--blue);
        border-radius: 50%; animation: spin 1s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    .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;
    }
    .hljs { background: var(--soft); border-radius: var(--r-ctrl); padding: 15px; }