/* US Map Styles */
/* Region colors are dedicated map tokens, not the categorical chart ramp. Each region
   has an unselected fill and a selected fill. The unselected fill is a quiet tint that
   keeps the region key readable. The selected fill is saturated so the selection pops.
   The light values are the Material tones the map shipped with. */
:root {
    --us-map-region-1: #BBDEFB; /* New England - Blue */
    --us-map-region-2: #E1BEE7; /* Mid East - Purple */
    --us-map-region-3: #C8E6C9; /* Great Lakes - Green */
    --us-map-region-4: #FFE0B2; /* Plains - Orange */
    --us-map-region-5: #FFCDD2; /* Southeast - Red */
    --us-map-region-6: #FFF9C4; /* Southwest - Yellow */
    --us-map-region-7: #B2DFDB; /* Rocky Mountains - Teal */
    --us-map-region-8: #F8BBD9; /* Far West - Pink */

    --us-map-region-1-selected: #1976D2;
    --us-map-region-2-selected: #7B1FA2;
    --us-map-region-3-selected: #388E3C;
    --us-map-region-4-selected: #F57C00;
    --us-map-region-5-selected: #D32F2F;
    --us-map-region-6-selected: #FBC02D;
    --us-map-region-7-selected: #00796B;
    --us-map-region-8-selected: #C2185B;

    /* Hover darkens the pastel fills on a light background. */
    --us-map-hover-brightness: 0.9;

    /* Selected states keep a thin half-tone outline. A thick full-foreground stroke turned
       edge-dense states such as West Virginia and Maryland into jagged noise; the bright fill
       carries the selection and the outline only sharpens it. */
    --us-map-selected-stroke: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* Dark theme keeps the same eight hues. The unselected fills are mid-lightness muted
   jewel tones: near OKLCH lightness 0.54 they stay clearly hued and mutually distinct on
   the dark background, where deeper values read as near-black mud. The selected fills
   are bright Material tones so the selection pops above them. */
.dark {
    --us-map-region-1: oklch(0.54 0.10 250); /* New England - Blue */
    --us-map-region-2: oklch(0.54 0.09 300); /* Mid East - Purple */
    --us-map-region-3: oklch(0.54 0.09 150); /* Great Lakes - Green */
    --us-map-region-4: oklch(0.60 0.13 55); /* Plains - Orange */
    --us-map-region-5: oklch(0.54 0.10 20); /* Southeast - Red */
    --us-map-region-6: oklch(0.63 0.10 95); /* Southwest - Yellow */
    --us-map-region-7: oklch(0.54 0.08 195); /* Rocky Mountains - Teal */
    --us-map-region-8: oklch(0.54 0.09 345); /* Far West - Pink */

    --us-map-region-1-selected: #64B5F6;
    --us-map-region-2-selected: #CE93D8;
    --us-map-region-3-selected: #81C784;
    --us-map-region-4-selected: #FFA726;
    --us-map-region-5-selected: #EF5350;
    --us-map-region-6-selected: #FDD835;
    --us-map-region-7-selected: #4DB6AC;
    --us-map-region-8-selected: #F06292;

    /* Hover lifts the fills on a dark background. The fills are already mid-lightness,
       so a small lift is enough; 1.3 blew them out. */
    --us-map-hover-brightness: 1.15;
}

.us-map-dialog-content {
    overflow: visible;
}

.us-map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.us-map-container {
    width: 100%;
    max-width: 50rem;
}

.us-map {
    width: 100%;
    height: auto;
    display: block;
}

/* Legend styles */
.us-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.us-map-legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.us-map-legend-color {
    width: 1rem;
    height: 1rem;
    border-radius: 0.125rem;
    border: 0.0625rem solid color-mix(in srgb, var(--foreground) 24%, transparent);
}

/* Swatches show the unselected fill, so a chip matches the states on the map. */
.legend-region-1 { background-color: var(--us-map-region-1); }
.legend-region-2 { background-color: var(--us-map-region-2); }
.legend-region-3 { background-color: var(--us-map-region-3); }
.legend-region-4 { background-color: var(--us-map-region-4); }
.legend-region-5 { background-color: var(--us-map-region-5); }
.legend-region-6 { background-color: var(--us-map-region-6); }
.legend-region-7 { background-color: var(--us-map-region-7); }
.legend-region-8 { background-color: var(--us-map-region-8); }