/* HSL palettes: USA purple, orange, green, yellow, red.
   Dark palette derives from pale; OUS derives from USA using separate shifts.
   Saturation/lightness shifts are percentage points; hue shift is degrees.
   pale-* serves light/light_gray; dark-* serves dark/dark_gray. */
.search_map_canvas {
    /* Dark palette delta from pale: degrees, then percentage points. */
    --map-dark-hue-shift: 0;
    --map-dark-saturation-shift: -15;
    --map-dark-lightness-shift: -52;
    --map-dark-yellow-saturation-shift: -33; /* Additional reduction for dark yellow. */

    /* Foreground dark colors invert pale lightness, then apply these deltas. */
    --map-dark-foreground-hue-shift: 0;
    --map-dark-foreground-saturation-shift: 0;
    --map-dark-foreground-lightness-shift: 0;

    --map-ous-hue-shift: -20;
    --map-ous-saturation-shift: 0;
    --map-ous-lightness-shift: 2;

	/* pale */
    --map-pale-purple: hsl(231 22% 83%);
    --map-pale-orange: hsl(44 61% 86%);
    --map-pale-green: hsl(95 30% 88%);
    --map-pale-red: hsl(3 31% 85%);
    --map-pale-yellow: hsl(59 88% 90%);

    /* dark */
    --map-dark-purple: hsl(from var(--map-pale-purple) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-dark-orange: hsl(from var(--map-pale-orange) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-dark-green: hsl(from var(--map-pale-green) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-dark-red: hsl(from var(--map-pale-red) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-dark-yellow: hsl(from var(--map-pale-yellow) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift) + var(--map-dark-yellow-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));

    /* OUS is computed via HSL shift */
    --map-pale-ous-purple: hsl(from var(--map-pale-purple) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-pale-ous-orange: hsl(from var(--map-pale-orange) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-pale-ous-green: hsl(from var(--map-pale-green) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-pale-ous-red: hsl(from var(--map-pale-red) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-pale-ous-yellow: hsl(from var(--map-pale-yellow) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));

    --map-dark-ous-purple: hsl(from var(--map-dark-purple) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-dark-ous-orange: hsl(from var(--map-dark-orange) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-dark-ous-green: hsl(from var(--map-dark-green) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-dark-ous-red: hsl(from var(--map-dark-red) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));
    --map-dark-ous-yellow: hsl(from var(--map-dark-yellow) calc(h + var(--map-ous-hue-shift)) calc(s + var(--map-ous-saturation-shift)) calc(l + var(--map-ous-lightness-shift)));

    /* Slot order generated by admin/update-map-colors.py: color_order.
       Hover uses the opposite theme. */
    --map-us-1: var(--map-pale-purple);
    --map-us-1-hover: var(--map-dark-purple);
    --map-intl-1: var(--map-pale-ous-purple);
    --map-intl-1-hover: var(--map-dark-ous-purple);
    --map-us-2: var(--map-pale-orange);
    --map-us-2-hover: var(--map-dark-orange);
    --map-intl-2: var(--map-pale-ous-orange);
    --map-intl-2-hover: var(--map-dark-ous-orange);
    --map-us-3: var(--map-pale-green);
    --map-us-3-hover: var(--map-dark-green);
    --map-intl-3: var(--map-pale-ous-green);
    --map-intl-3-hover: var(--map-dark-ous-green);
    --map-us-4: var(--map-pale-yellow);
    --map-us-4-hover: var(--map-dark-yellow);
    --map-intl-4: var(--map-pale-ous-yellow);
    --map-intl-4-hover: var(--map-dark-ous-yellow);
    --map-us-5: var(--map-pale-red);
    --map-us-5-hover: var(--map-dark-red);
    --map-intl-5: var(--map-pale-ous-red);
    --map-intl-5-hover: var(--map-dark-ous-red);

    --map-pale-water: hsl(206 51% 82%);
    --map-water: var(--map-pale-water);
    --map-pale-land: hsl(75 29% 95%);
    --map-land: var(--map-pale-land);
    --map-pale-country-border: hsl(197 14% 35%);
    --map-country-border: var(--map-pale-country-border);
    --map-pale-subdivision-border: hsl(198 14% 47%);
    --map-subdivision-border: var(--map-pale-subdivision-border);
    --map-pale-highlight: hsl(201 44% 61%);
    --map-highlight: var(--map-pale-highlight);
    --map-pale-city-fill: hsl(202 77% 30%);
    --map-city-fill: var(--map-pale-city-fill);
    --map-pale-city-text: hsl(0 0% 100%);
    --map-city-text: var(--map-pale-city-text);
    --map-pale-country-count-fill: hsl(0 0% 50%);
    --map-country-count-fill: var(--map-pale-country-count-fill);
}
html:not([data-theme]) .search_map_canvas,
[data-theme="dark"] .search_map_canvas,
[data-theme="dark_gray"] .search_map_canvas {
    --map-us-1: var(--map-dark-purple);
    --map-us-1-hover: var(--map-pale-purple);
    --map-intl-1: var(--map-dark-ous-purple);
    --map-intl-1-hover: var(--map-pale-ous-purple);
    --map-us-2: var(--map-dark-orange);
    --map-us-2-hover: var(--map-pale-orange);
    --map-intl-2: var(--map-dark-ous-orange);
    --map-intl-2-hover: var(--map-pale-ous-orange);
    --map-us-3: var(--map-dark-green);
    --map-us-3-hover: var(--map-pale-green);
    --map-intl-3: var(--map-dark-ous-green);
    --map-intl-3-hover: var(--map-pale-ous-green);
    --map-us-4: var(--map-dark-yellow);
    --map-us-4-hover: var(--map-pale-yellow);
    --map-intl-4: var(--map-dark-ous-yellow);
    --map-intl-4-hover: var(--map-pale-ous-yellow);
    --map-us-5: var(--map-dark-red);
    --map-us-5-hover: var(--map-pale-red);
    --map-intl-5: var(--map-dark-ous-red);
    --map-intl-5-hover: var(--map-pale-ous-red);
    --map-water: hsl(from var(--map-pale-water) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-land: hsl(from var(--map-pale-land) calc(h + var(--map-dark-hue-shift)) calc(s + var(--map-dark-saturation-shift)) calc(l + var(--map-dark-lightness-shift)));
    --map-country-border: hsl(from var(--map-pale-country-border) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
    --map-subdivision-border: hsl(from var(--map-pale-subdivision-border) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
    --map-highlight: hsl(from var(--map-pale-highlight) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
    --map-city-fill: hsl(from var(--map-pale-city-fill) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
    --map-city-text: hsl(from var(--map-pale-city-text) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
    --map-country-count-fill: hsl(from var(--map-pale-country-count-fill) calc(h + var(--map-dark-foreground-hue-shift)) calc(s + var(--map-dark-foreground-saturation-shift)) calc(100 - l + var(--map-dark-foreground-lightness-shift)));
}
.search_map_section { margin: 1rem 0; }
.search_map_actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 0.5rem; }
.search_map_actions [data-map-fit] { justify-self: start; }
.search_map_actions [data-map-companies-toggle] { justify-self: end; }
.search_map_companies_overlay { position: absolute; z-index: 900; top: 12px; right: 12px; display: flex; flex-direction: column; box-sizing: border-box; width: 360px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); border: 1px solid hsl(207 11% 58%); border-radius: 8px; background: var(--pale_back_color, hsl(0 0% 100%)); color: var(--back_text_color, hsl(206 31% 13%)); box-shadow: 0 3px 14px hsl(0 0% 0% / 30%); }
.search_map_companies_overlay[hidden] { display: none; }
.search_map_companies_header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid hsl(207 11% 58%); }
.search_map_companies_drag { padding: 4px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: bold; text-align: left; cursor: move; touch-action: none; user-select: none; }
.search_map_companies_grouping { flex: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search_map_companies_grouping label { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; white-space: nowrap; }
.search_map_companies_content { min-height: 0; padding: 8px 14px; overflow-y: auto; overscroll-behavior: contain; }
.search_map_companies_content section { margin: 0 0 0.75rem; }
.search_map_companies_content h3 { margin: 0 0 0.25rem; font: inherit; font-weight: bold; }
.search_map_companies_content h2 { margin: 0 0 0.5rem; font: inherit; font-style: italic; text-align: center; }
.search_map_companies_content ul { margin: 0; padding-left: 1.25rem; }
.search_map_companies_content li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.search_map_status:empty { display: none; }
.search_map_credits { position: relative; }
.search_map_credits_overlay { visibility: hidden; position: absolute; z-index: 10000; bottom: 100%; left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 12px; background: var(--pale_back_color, hsl(0 0% 100%)); color: var(--back_text_color, hsl(206 31% 13%)); box-shadow: 0 3px 14px hsl(0 0% 0% / 40%); font-size: var(--small_font); line-height: 1.25; }
.search_map_credits_overlay > strong { display: block; text-align: center; }
.search_map_credits_overlay p { margin: 0.5rem 0 0; }
.search_map_credits:hover .search_map_credits_overlay,
.search_map_credits:focus-within .search_map_credits_overlay { visibility: visible; }
/* Keep Leaflet's panes and controls below the form dialogs. */
.search_map_canvas { isolation: isolate; height: min(65vh, 650px); min-height: 320px; background: var(--map-water); border: 1px solid hsl(207 11% 58%); border-radius: 4px; }
.search_map_canvas.leaflet-container { font: inherit; }
.search_map_title { position: absolute; z-index: 800; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 110px); padding: 4px 12px; border-radius: 12px; background: hsl(202 77% 30%); color: hsl(0 0% 100%); font-size: 1.5em; line-height: 1.25; font-weight: bold; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
.search_map_logo { position: absolute; z-index: 800; bottom: 10px; right: 10px; width: 48px; height: 48px; padding: 0; border: 0; background: hsl(0 0% 0% / 0%); cursor: pointer; }
.search_map_logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.search_map_badge { background: var(--map-city-fill); border: 0; border-radius: 12px; color: var(--map-city-text); box-shadow: none; padding: 1px 5px; font-weight: bold; pointer-events: none; }
.search_map_badge::before { display: none; }
.search_map_remote_marker { display: flex; align-items: center; justify-content: center; }
.search_map_remote_badge { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; min-height: 20px; border: 1px solid hsl(0 0% 100%); border-radius: 0; padding: 1px 3px; white-space: nowrap; }
.search_map_region_badge { background: hsl(0 0% 0% / 0%); padding: 0; }
.search_map_region_number { display: flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; padding: 2px; border-radius: 50%; color: var(--map-city-text); }
.search_map_country_marker { display: flex; align-items: center; justify-content: center; }
.search_map_country_number { flex-shrink: 0; padding: 1px 5px; border: 1px solid var(--map-city-text); border-radius: 6px; color: var(--map-city-text); font-weight: bold; white-space: nowrap; }
.search_map_state_number { background: var(--map-country-count-fill); color: hsl(0 0% 100%); border-color: hsl(0 0% 100%); }
.search_map_section :focus-visible { outline: 3px solid hsl(201 80% 44%); outline-offset: 2px; }
.search_map_records { list-style: none; padding-left: 0; margin: 0; }
.search_map_records li { margin: 0; }
.search_map_outline { overflow: visible; }
.search_map_outline .search_map_records { max-height: none; overflow-y: visible; }
.search_map_company_heading { margin-top: .3rem; }
.search_map_popup_counts { font-style: italic; }
.search_map_popup_header { text-align: center; margin-bottom: 0.5rem; }
.search_map_company_cities { font-weight: normal; }
.search_map_page_popup { position: fixed; z-index: 10000; transform: none !important; left: var(--popup-left, 1rem) !important; top: var(--popup-top, 1rem); bottom: auto !important; margin: 0; max-width: calc(100vw - 2rem); }
.search_map_page_popup .leaflet-popup-content-wrapper { background: var(--pale_back_color, hsl(0 0% 100%)); color: var(--back_text_color, hsl(206 31% 13%)); overflow: hidden; }
.search_map_page_popup .leaflet-popup-content { color: var(--back_text_color, hsl(206 31% 13%)); font: inherit; line-height: 1.25; margin: 10px 14px; padding-right: 10px; box-sizing: border-box; max-width: calc(100vw - 2rem - 30px); max-height: min(398px, calc(100vh - 2rem - 22px)); overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: auto; }
.search_map_page_popup .leaflet-popup-content::-webkit-scrollbar { width: 14px; }
.search_map_page_popup .leaflet-popup-content:has(> .search_map_name_only) { padding: 0; scrollbar-gutter: auto; width: max-content !important; height: auto !important; max-height: none; overflow: visible; }
.search_map_page_popup .leaflet-popup-content::-webkit-scrollbar-thumb { background: hsl(0 0% 50%); border: 3px solid var(--pale_back_color, hsl(0 0% 100%)); border-radius: 7px; }
.search_map_page_popup .search_map_outline section { margin: 0; padding: 0; }
.search_map_page_popup .leaflet-popup-tip-container { display: none; }
.search_map_page_popup :focus-visible { outline: 3px solid hsl(201 80% 44%); outline-offset: 2px; }
.search_map_page_popup a.leaflet-popup-close-button { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; font: inherit; line-height: 1.25; text-align: center; text-decoration: none; color: var(--back_text_color, hsl(206 31% 13%)); opacity: 0; }
.search_map_page_popup a.leaflet-popup-close-button:hover,
.search_map_page_popup a.leaflet-popup-close-button:focus-visible { opacity: 1; }
.search_map_canvas path[role="button"]:focus { outline: none; stroke: hsl(201 80% 44%); stroke-width: 3; }
.search_map_page_popup .search_map_popup_heading { font-weight: bold; }
.search_map_canvas .leaflet-control-zoom-in span { display: inline-block; transform: translateY(-4px); }
.search_map_canvas .leaflet-control-zoom-out span { display: inline-block; transform: translateY(-3px); }
@media (max-width: 650px) { .search_map_canvas { height: 55vh; min-height: 280px; } }
