body {
    max-width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    background-color: white;

    color: black;

    font-family:
        "Google Sans",
        sans-serif;
}


button,
input {
    font: inherit;
}


button {
    touch-action: manipulation;
}


[hidden] {
    display: none !important;
}


p,
h1,
h2,
h3,
a,
label,
button,
input,
span {
    overflow-wrap: break-word;
}


/* ============================================================
   MAIN CONTAINER
============================================================ */

.container {
    width: 100%;
    max-width: 64rem;

    margin-left: auto;
    margin-right: auto;

    padding-left:
        var(--page-padding, clamp(1rem, 4vw, 2rem));

    padding-right:
        var(--page-padding, clamp(1rem, 4vw, 2rem));
}


.data_map_page {
    padding-top:
        clamp(2.5rem, 8vw, 5rem);

    padding-bottom:
        clamp(3rem, 8vw, 5rem);
}


#main {
    width: 100%;

    transition:
        width 0.5s ease,
        transform 0.5s ease;

    will-change:
        width,
        transform;
}


/* ============================================================
   GENERAL TYPOGRAPHY
============================================================ */

h1,
h2 {
    font-family:
        "Boogaloo",
        sans-serif;

    font-weight: 400;
    font-style: normal;
}


h1 {
    font-size:
        clamp(2.8rem, 7vw, 4.5rem);

    line-height: 1;
}


p {
    font-size:
        clamp(1rem, 2vw, 1.2rem);

    line-height: 1.6;
}


.data_map_label {
    margin-top: 5rem;
    display: block;

    margin-bottom: 0.5rem;

    color:
        var(--blickishhh);

    font-size:
        clamp(0.95rem, 2vw, 1.05rem);

    font-weight: 700;
}


/* ============================================================
   QUESTION SEARCH
============================================================ */

.question_search_section {
    width:
        min(100%, 34rem);
}


.question_search_wrapper {
    position: relative;

    width: 100%;
}


#question_search,
#country_search,
.country_sort_button {
    width: 100%;

    min-height: 2.9rem;

    padding:
        0.6rem 0.75rem;

    border:
        1px solid black;

    border-radius:
        0.5rem;

    outline: none;

    background-color: white;

    color: black;

    font-size: 1rem;

    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


#question_search::placeholder {
    color:
        var(--blickishhh);

    opacity: 0.78;
}


#country_search::placeholder {
    color:
        var(--blickishhh);

    opacity: 0.65;
}


#question_search:hover,
#country_search:hover,
.country_sort_button:hover {
    box-shadow:
        0 0 2px var(--bluishhh);
}


#question_search:focus,
#country_search:focus,
.country_sort_button:focus-visible {
    border-color:
        var(--bluishhh);

    box-shadow:
        0 0 3px var(--bluishhh);
}


#question_search:disabled {
    color:
        var(--blickishhh);

    cursor: wait;
}


/* ============================================================
   SHARED QUESTION + SORT MENUS
============================================================ */

.selection_menu {
    position: absolute;

    left: 0;

    width: 100%;

    max-height:
        min(25rem, 58vh);

    overflow-y: auto;
    overflow-x: hidden;

    background-color: white;

    border:
        2px solid black;

    box-shadow:
        0px 8px 16px 0px rgba(0, 0, 0, 0.2);

    z-index: 50;
}


.question_search_results {
    top:
        calc(100% + 0.25rem);
}


.country_sort_menu {
    top:
        calc(100% + 0.25rem);
}


.selection_option {
    width: 100%;

    display: block;

    padding:
        0.75rem 1rem;

    background-color: white;

    border: 0;

    border-bottom:
        1px solid black;

    color: black;

    font-size:
        clamp(1rem, 2vw, 1.1rem);

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


.selection_option:last-child {
    border-bottom: 0;
}


.selection_option.selected {
    color:
        var(--bluishhh);

    font-weight: 700;
}


.selection_result_empty {
    padding: 1rem;

    color:
        var(--blickishhh);

    text-align: center;
}


@media (hover: hover) and (pointer: fine) {

    .selection_option:hover {
        transform:
            translateX(8px);
    }

}


/* ============================================================
   QUESTION STATUS
============================================================ */

.question_status {
    width:
        min(100%, 34rem);

    margin-top: 1rem;

    color:
        var(--blickishhh);

    font-size:
        clamp(0.95rem, 2vw, 1.05rem);
}


.question_status[data-state="error"] {
    color: #871b1b;
}


/* ============================================================
   METRIC HEADER
============================================================ */

.metric_content {
    margin-top:
        clamp(3.5rem, 8vw, 6rem);
}


.metric_header {
    width: 100%;
}


#question_context_heading {
    margin-bottom:
        clamp(1rem, 3vw, 1.5rem);
}


.metric_explanations {
    max-width: 56rem;

    display: grid;

    gap: 0.55rem;
}


.metric_explanations p {
    color:
        var(--blickishhh);
}


.metric_explanations strong {
    color: black;
}





/* ============================================================
   WORLD DATA MAP
============================================================ */

.world_data_map_section {
    width: 100%;

    margin-top:
        clamp(2rem, 6vw, 3.5rem);
}


.world_data_map {
    width: 100%;

    height:
        clamp(22rem, 52vw, 34rem);

    min-height: 22rem;

    overflow: hidden;

    background-color: white;
}


/*
    Countries without data stay white.

    Borders use the same dark gray as the rest of the site.
*/

.world_data_map .jvm-region {
    stroke:
        var(--blickishhh);

    stroke-width:
        0.55;

    vector-effect:
        non-scaling-stroke;
}


/* ============================================================
   MAP TOOLTIP
============================================================ */

.jvm-tooltip {
    position: fixed !important;

    /* The map library also writes inline coordinates on mousemove. */
    left: var(--map-tooltip-left, 0px) !important;
    top: var(--map-tooltip-top, 0px) !important;

    box-sizing: border-box;

    max-width:
        min(18rem, var(--map-tooltip-max-width, calc(100vw - 1rem))) !important;

    max-height:
        var(--map-tooltip-max-height, calc(100dvh - 1rem)) !important;

    overflow: auto;

    margin: 0 !important;

    padding:
        0.65rem 0.8rem !important;

    background-color:
        white !important;

    color:
        black !important;

    border:
        2px solid var(--blickishhh) !important;

    border-radius:
        0.4rem !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15) !important;

    font-family:
        "Google Sans",
        sans-serif !important;

    font-size:
        0.9rem !important;

    line-height:
        1.45 !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        normal !important;

    transform:
        none !important;

    pointer-events:
        none !important;

    z-index:
        9999 !important;
}









/* ============================================================
   MAP ZOOM CONTROLS

   Currently hidden in JS, but keep them in the site style
   if we enable them later.
============================================================ */

.jvm-zoom-btn {
    background-color:
        white !important;

    color:
        black !important;

    border:
        1px solid black !important;

    border-radius:
        0.3rem !important;
}


/* ============================================================
   MAP RESPONSIVE
============================================================ */

@media (max-width: 650px) {

    .world_data_map_section {
        margin-top: 2rem;
    }


    .world_data_map {
        height:
            clamp(18rem, 68vw, 26rem);

        min-height: 18rem;
    }

}


@media (max-width: 420px) {

    .world_data_map {
        height:
            18rem;

        min-height:
            18rem;
    }

}


@media (max-width: 340px) {

    .world_data_map {
        height:
            16rem;

        min-height:
            16rem;
    }

}


@media (max-height: 500px) and (orientation: landscape) {

    .world_data_map {
        height:
            75vh;

        min-height:
            17rem;
    }

}








/* ============================================================
   COUNTRY CONTROLS
============================================================ */

.country_controls {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(15rem, 19rem);

    gap:
        clamp(1rem, 4vw, 2rem);

    align-items: end;

    margin-top:
        clamp(3rem, 7vw, 5rem);

    margin-bottom: 1rem;
}


.country_search_area,
.country_sort_area {
    width: 100%;
}


.sort_dropdown_wrapper {
    position: relative;

    width: 100%;
}


.country_sort_button {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    color: black;

    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.country_sort_button b {
    flex-shrink: 0;

    font-size: 1.15rem;

    transition:
        transform 0.2s ease;
}


.country_sort_button[aria-expanded="true"] b {
    transform:
        rotate(180deg);
}


/* ============================================================
   SCROLLABLE COUNTRY PANEL
============================================================ */

.country_data_panel {
    position: relative;

    width: 100%;

    height:
        clamp(23rem, 60vh, 31.25rem);

    padding:
        clamp(1rem, 4vw, 2rem);

    overflow-y: auto;
    overflow-x: hidden;

    border:
        2px solid var(--blickishhh);

    background-color: white;
}


/* ============================================================
   TABLE COLUMN HEADER
============================================================ */

.country_data_column_header {
    position: sticky;

    top:
        calc(-1 * clamp(1rem, 4vw, 2rem));

    z-index: 10;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr) minmax(7rem, 0.8fr) minmax(4.5rem, 0.45fr);

    gap:
        clamp(0.5rem, 2vw, 1rem);

    margin:
        calc(-1 * clamp(1rem, 4vw, 2rem)) calc(-1 * clamp(1rem, 4vw, 2rem)) 1.5rem;

    padding:
        0.9rem clamp(1rem, 4vw, 2rem);

    border-bottom:
        2px solid var(--blickishhh);

    background-color: white;

    color: black;

    font-size:
        clamp(0.95rem, 2vw, 1.05rem);

    font-weight: 700;
}


.country_data_column_header span:nth-child(2),
.country_data_column_header span:nth-child(3) {
    text-align: right;
}


/* ============================================================
   CONTINENT SECTIONS
============================================================ */

.continent_category {
    margin-top:
        clamp(1.5rem, 4vw, 2rem);

    margin-bottom:
        clamp(3rem, 8vw, 5rem);
}


.continent_category:first-child {
    margin-top: 0;
}


.continent_category:last-child {
    margin-bottom: 0;
}


.continent_header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    margin-bottom: 0.8rem;

    padding-bottom: 0.5rem;

    border-bottom:
        1px solid var(--blickishhh);
}


.continent_header h2 {
    margin: 0;
    padding: 0;

    font-family:
        "Google Sans",
        sans-serif;

    font-size:
        clamp(1.15rem, 2.5vw, 1.35rem);

    font-weight: 700;

    line-height: 1.25;
}


/* ============================================================
   COUNTRY DATA ROWS
============================================================ */

.country_data_rows {
    display: grid;

    gap:
        clamp(0.55rem, 2vw, 0.8rem);
}





.country_data_row {
    min-height: 2.9rem;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr) minmax(7rem, 0.8fr) minmax(4.5rem, 0.45fr);

    gap:
        clamp(0.5rem, 2vw, 1rem);

    align-items: center;

    padding:
        0.6rem 0.75rem;

    border:
        1px solid black;

    border-radius:
        0.5rem;

    background-color:
        white;

    color:
        black;

    transition:
        transform 0.18s ease;
}


.country_data_row[role="link"] {
    cursor: pointer;
}


.country_name {
    min-width: 0;

    display: flex;

    align-items: baseline;

    gap: 0.4rem;

    font-weight: 600;
}


.country_rank {
    flex:
        0 0 auto;

    min-width:
        2.1rem;

    color:
        #707070;

    font-weight:
        700;

    font-variant-numeric:
        tabular-nums;

    text-align:
        right;
}


.country_name_text {
    min-width: 0;

    overflow-wrap:
        anywhere;
}


@media (hover: hover) and (pointer: fine) {

    .country_data_row:hover {
        transform:
            translateX(4px);
    }

}


.country_data_row[role="link"]:focus-visible {
    outline:
        3px solid var(--bluishhh);

    outline-offset:
        2px;
}







.country_value,
.country_year {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.country_no_data {
    color:
        var(--blickishhh);

    font-style: italic;
}


/* ============================================================
   EMPTY COUNTRY SEARCH
============================================================ */

.country_data_empty {
    padding:
        1rem 0;

    color:
        var(--blickishhh);

    font-size:
        clamp(1rem, 2vw, 1.1rem);
}


/* ============================================================
   ≤ 900px
============================================================ */

@media (max-width: 900px) {

    .country_controls {
        grid-template-columns:
            minmax(0, 1fr) minmax(14rem, 17rem);
    }

}


/* ============================================================
   ≤ 650px
============================================================ */

@media (max-width: 650px) {

    .country_controls {
        grid-template-columns: 1fr;

        gap: 0.8rem;
    }


    .country_data_panel {
        height:
            min(62vh, 30rem);
    }

}


/* ============================================================
   ≤ 560px
============================================================ */

@media (max-width: 560px) {

    .data_map_page {
        padding-top: 2rem;
    }


    .metric_content {
        margin-top: 3.5rem;
    }


    .country_controls {
        margin-top: 3rem;
    }


    .country_data_column_header,
    .country_data_row {
        grid-template-columns:
            minmax(0, 1.35fr) minmax(5.8rem, 0.8fr) minmax(3.8rem, 0.45fr);
    }

}


/* ============================================================
   ≤ 420px
============================================================ */

@media (max-width: 420px) {

    :root {
        --page-padding: 0.85rem;
    }


    #question_search,
    #country_search,
    .country_sort_button {
        min-height: 2.8rem;

        padding:
            0.55rem 0.65rem;
    }


    .country_data_panel {
        height:
            min(60vh, 27rem);

        padding: 0.85rem;
    }


    .country_data_column_header {
        top: -0.85rem;

        grid-template-columns:
            minmax(0, 1.25fr) minmax(5.1rem, 0.75fr) minmax(3.4rem, 0.4fr);

        gap: 0.4rem;

        margin:
            -0.85rem -0.85rem 1.2rem;

        padding:
            0.8rem 0.85rem;

        font-size: 0.88rem;
    }


    .country_data_row {
        grid-template-columns:
            minmax(0, 1.25fr) minmax(5.1rem, 0.75fr) minmax(3.4rem, 0.4fr);

        gap: 0.4rem;

        padding:
            0.55rem 0.6rem;

        font-size: 0.9rem;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 340px) {

    :root {
        --page-padding: 0.7rem;
    }


    #question_context_heading {
        font-size: 2.45rem;
    }


    .country_data_panel {
        padding: 0.7rem;
    }


    .country_data_column_header {
        top: -0.7rem;

        grid-template-columns:
            minmax(0, 1.2fr) minmax(4.7rem, 0.75fr) minmax(3.1rem, 0.4fr);

        margin:
            -0.7rem -0.7rem 1rem;

        padding:
            0.75rem 0.7rem;

        font-size: 0.8rem;
    }


    .country_data_row {
        grid-template-columns:
            minmax(0, 1.2fr) minmax(4.7rem, 0.75fr) minmax(3.1rem, 0.4fr);

        padding:
            0.5rem;

        font-size: 0.82rem;
    }

}


/* ============================================================
   SHORT LANDSCAPE PHONE
============================================================ */

@media (max-height: 500px) and (orientation: landscape) {

    .data_map_page {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }


    .country_data_panel {
        height: 70vh;

        min-height: 15rem;
    }

}


/* ============================================================
   KEYBOARD ACCESSIBILITY
============================================================ */

button:focus-visible,
input:focus-visible {
    outline:
        3px solid var(--bluishhh);

    outline-offset: 2px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .country_data_row:hover {
        transform: none;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}