/* ==========================================================================
   GLOBAL ANALYTICS - choropleth map block

   Live's map lives in templates/Blocks/mapping.php and carries a 120-line
   inline <style>. This build's block was rewritten with ga- prefixed classes
   and ids, but the stylesheet was never carried across - every one of these
   selectors had ZERO rules, so the map had no styling at all. The visible
   damage: .ga-pills had no flex-wrap, so the country pills stacked one per row
   and the block came out 624px tall against live's 101px.

   This is live's style block, copied and renamed to the ga- names:
       .legend-bar -> .ga-legend-bar      .pills     -> .ga-pills
       .gradient-track -> .ga-gradient-track   .pill      -> .ga-pill
       .map-wrap -> .ga-map-wrap          .pill-code -> .ga-pill-code
       #worldMap -> #ga-world-map         .pill-dot  -> .ga-pill-dot
       #tooltip -> .ga-tooltip            .pill-num  -> .ga-pill-num
       .tt-name/.tt-count -> .ga-tt-name/.ga-tt-count

   .card-header / .card-sub / .stats / .no-data are left under their original
   names: the block still uses .card-sub, and the other three are harmless here.
   The map's own header uses utility classes plus .ga-map-header (below), which
   replaces live's .card-header.
   ========================================================================== */

/* live's .card-header, applied to this block's header row */
.ga-map-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .card-sub {
        font-size: 13px;
        color: #888;
        margin-top: 2px;
    }

    .stats {
        display: flex;
        gap: 1.5rem;
    }

    .ga-legend-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0.75rem;
    }

    .ga-legend-bar span {
        font-size: 12px;
        color: #aaa;
    }

    .ga-gradient-track {
        width: 140px;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(to right, #ffab71, #ff7a2c, #cc5a00);
    }

    .ga-map-wrap {
        position: relative;
        background: transparent; /* FIX: transparent background */
        border-radius: 20px;
        overflow: hidden;
    }

    #ga-world-map {
        display: block;
        width: 100%;
    }

    /* display is NOT set here. The hover handler reveals this element by
       removing its `hidden` attribute, and a CSS `display: none` outranks that
       attribute, so setting it here made the tooltip permanently invisible
       however the JavaScript behaved. Visibility is governed by [hidden] below. */
    .ga-tooltip {
        position: absolute;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 13px;
        pointer-events: none;
        z-index: 10;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        white-space: nowrap;
    }

    /* The single control. The attribute is set on the element in the markup and
       toggled by the hover handler; nothing else decides. */
    .ga-tooltip[hidden] {
        display: none;
    }

    .ga-tooltip .ga-tt-name {
        font-weight: 600;
        color: #1a1a1a;
        display: block;
    }

    .ga-tooltip .ga-tt-count {
        color: #888;
    }

    .ga-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 1rem;
    }

    .ga-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: 1px solid var(--color-secondary-container);
        border-radius: 100px;
        padding: 4px 10px;
        font-size: 13px;
        cursor: default;
    }

    .ga-pill-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .ga-pill-flag {
        width: 16px;
        height: 12px;
        border-radius: 2px;
    }

    .ga-pill-code { color: #888; }

    .ga-pill-num {
        font-weight: 600;
        color: #1a1a1a;
    }

    .no-data {
        text-align: center;
        padding: 3rem;
        color: #aaa;
        font-size: 14px;
    }
/* ---------- The map tooltip's country code ----------
   The code leads and the name follows, because the code is what a reader matches
   against the pills below the map and against their own analytics. It is set as
   a small monospace chip so it reads as an identifier rather than as the first
   word of the country's name. */
.ga-map-wrap .ga-tooltip .ga-tt-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ga-map-wrap .ga-tooltip .ga-tt-code {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    background: var(--color-primary-dim-20, rgba(255, 122, 44, 0.12));
    border-radius: 4px;
    padding: 1px 5px;
    flex: none;
}

.ga-map-wrap .ga-tooltip .ga-tt-code[hidden] {
    display: none;
}

/* The name no longer needs its own block, now that the head row wraps it. */
.ga-map-wrap .ga-tooltip .ga-tt-name {
    display: inline;
    font-weight: 600;
    color: #1a1a1a;
}