/* Self-hosted fonts */
@font-face {
    font-family: 'NeutraText';
    src: url('../assets/fonts/NeutraText-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MinionPro';
    src: url('../assets/fonts/MinionPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MinionPro';
    src: url('../assets/fonts/MinionPro-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('../assets/fonts/DINPro.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('../assets/fonts/DINPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('../assets/fonts/DINPro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('../assets/fonts/DINPro-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINProCondBoldItalic';
    src: url('../assets/fonts/DINPro-CondBoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Override Web Awesome brand color scale to match agency blue #1270B3 */
:root {
    /* UI panel background — controls opacity of all floating widgets (buttons, legend, slider, KPI box).
       Set to rgba(255,255,255,1) for fully opaque or rgba(255,255,255,0.9) for 90% opacity, etc. */
    --ui-panel-bg: rgba(255, 255, 255, 1);
    --wa-color-brand-95: #ddeef9;
    --wa-color-brand-90: #b8d9f2;
    --wa-color-brand-80: #7ab8e4;
    --wa-color-brand-70: #4897d0;
    --wa-color-brand-60: #1a85d0;
    --wa-color-brand-50: #1270B3;
    --wa-color-brand-40: #0d5a8e;
    --wa-color-brand-30: #094070;
    --wa-color-brand-20: #062a4a;
    --wa-color-brand-10: #031525;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
}

/* Hide Web Awesome components until they're defined (prevents flash of unstyled content) */
wa-dialog:not(:defined),
wa-drawer:not(:defined) {
    display: none;
}

header {
    background-color: #58585A;
    color: #fff;
    text-align: left;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'DINPro', Arial, sans-serif;
    font-size: 29px;
    font-weight: 700;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

header a {
    display: flex;
    align-items: center;
}

#headerLogo {
    height: 30px;
    width: auto;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

/* Full-screen loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

.loading-overlay.fade-out {
    opacity: 0;
}

.loading-overlay.hidden {
    display: none;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-text {
    margin-top: 20px;
    font-size: 18px;
    font-family: 'DINPro-Bold', 'DINPro', Arial, sans-serif;
    font-weight: bold;
    font-weight: bold;
}

/* Legend */
.legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--ui-panel-bg);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    z-index: 1000;
    width: 210px;
}

.legend h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 12px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
    color: #58585A;
}

.legend-color {
    width: 20px;
    height: 15px;
    margin-right: 8px;
}

/* Interactive vertical color bar legend */
.legend-bar-wrapper {
    position: relative;
    display: flex;
    gap: 8px;
    margin: 10px 0 0 0;
}

.legend-bar {
    width: 32px;
    height: 180px;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
    background: linear-gradient(to bottom,
        #800026 0%, #800026 20%,
        #e31a1c 20%, #e31a1c 40%,
        #fd8d3c 40%, #fd8d3c 60%,
        #fed976 60%, #fed976 80%,
        #ffffcc 80%, #ffffcc 100%
    );
}


.legend-bar-ticks {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 13px;
    font-family: 'DINPro', Arial, sans-serif;
    color: #58585A;
    height: 180px;
}

.legend-hover-band {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: none;
}

.legend-threshold-line {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 3px;
    background: #000;
    border-radius: 2px;
    pointer-events: none;
    display: none;
}

.legend-threshold-line.active {
    display: block;
}

/* Vertical threshold line used when bar is horizontal (mobile) */
.legend-threshold-line.horizontal {
    width: 3px;
    height: calc(100% + 8px);
    top: -4px;
    bottom: auto;
    left: auto;
    right: auto;
}

.legend-filter-hint {
    font-size: 13px;
    color: #58585A;
    font-family: 'DINPro', Arial, sans-serif;
    font-style: italic;
}

.legend-filter-row {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.legend-reset-btn-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#legendResetBtn::part(base) {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: unset;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #58585A;
    background-color: rgba(88, 88, 90, 0.12);
    border: 1px solid #aaaaaa;
    font-size: 18px;
    flex-shrink: 0;
}

#legendResetBtn::part(base):hover {
    background-color: #e31a1c;
    color: #ffffff;
    border-color: #e31a1c;
}

/* Desktop: show icon, hide text label */
.legend-reset-text { display: none; }
.legend-reset-icon { display: inline-flex; }

/* Legend explanatory text */
.legend-explanation {
    margin-top: 10px;
    font-size: 12px;
    color: #58585A;
    line-height: 1.3;
    text-align: left;
    padding: 10px 0 0 0;
    border-top: 1px solid #e0e0e0;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    background: #58585A;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    width: auto;
}

.tooltip-school-name {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #ffeb3b;
}

.tooltip-count {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
}

.tooltip-hint {
    display: block;
    font-size: 14px;
    opacity: 0.8;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Month display in top-right corner */
#monthDisplay {
    position: absolute;
    top: 70px;
    right: 20px;
    background: var(--ui-panel-bg);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    z-index: 1000;
    text-align: center;
    width: 265px;
}

#monthText {
    font-size: 18px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
    margin-bottom: 5px;
}

#totalText {
    font-size: 18px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

/* Wrapper for all drawer option groups - centers all children */
#drawerOptionsWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drawer-section-label {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #58585A;
    margin: 0 0 8px 0;
    text-align: center;
}

/* Drawer controls row (placeholder - download button moved to footer) */
#drawerControls {
    display: none;
}

/* Slider container at center bottom */
#sliderContainer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-panel-bg);
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    z-index: 1000;
    width: 560px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 12px;
}

#filingModeInline {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#filingModeLabel {
    font-family: 'DINPro', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #58585A;
    white-space: nowrap;
}

#sliderDivider {
    width: 1px;
    height: 50px;
    background-color: #d0d0d0;
    flex-shrink: 0;
    align-self: center;
}

#sliderMain {
    flex: 1;
    text-align: center;
}

#sliderLabel {
    margin-top: 8px;
    font-size: 17px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 700;
    color: #58585A;
}

/* Slider "Click and drag to change the month:" label (inside shadow DOM) */
#monthSlider::part(label) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

/* Drawer footer buttons - spread them apart */
.drawer-footer-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

/* About button inside Options drawer footer */
#aboutBtn::part(base) {
    background-color: var(--ui-panel-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 5px;
    color: #58585A;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#aboutBtn::part(base):hover {
    background-color: #58585A;
    color: rgba(255, 255, 255, 0.9);
}

/* Download filtered data button - matches About button style */
#downloadFilteredData::part(base) {
    background-color: var(--ui-panel-bg);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #58585A;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#downloadFilteredData::part(base):hover {
    background-color: #58585A;
    color: rgba(255, 255, 255, 0.9);
}

/* Tooltip background color and font — applies to all wa-tooltip instances */
wa-tooltip::part(body) {
    background-color: #58585A;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
}

wa-tooltip::part(base__arrow) {
    background-color: #58585A;
}

/* adjust font style of county trends button */
#countyTrendsBtn {
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 1000;
}

#countyTrendsBtn::part(base) {
    color: #58585A;
    background-color: var(--ui-panel-bg);
    border: none;
    border-radius: 5px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#countyTrendsBtn::part(base):hover {
    background-color: #1270B3;
    color: #ffffff;
}

/* Options button in lower-left */
#optionsBtn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 1000;
}

#optionsBtn::part(base) {
    color: #58585A;
    background-color: var(--ui-panel-bg);
    border: none;
    border-radius: 5px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#optionsBtn::part(base):hover {
    background-color: #1270B3;
    color: #ffffff;
}

a.mapboxgl-ctrl-logo {
    display: none !important;
}

/* ARC Logo position */
#arcLogo {
    position: absolute;
    bottom: 30px;
    right: 200px;
    z-index: 1000;
    opacity: 0.8;
}

#arcLogo img {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Mobile welcome dialog */
#mobileWelcomeDialog::part(title) {
    font-family: 'MinionPro', Georgia, serif;
    font-weight: 600;
    color: #58585A;
}

.mobile-welcome-body {
    line-height: 1.6;
    font-family: 'MinionPro', Georgia, serif;
    font-weight: 400;
    color: #58585A;
}

/* About dialog content layout */
.about-dialog {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-heading {
    font-size: 18px;
    font-family: 'MinionPro', Georgia, serif;
    font-weight: 600;
    color: #58585A;
    margin: 16px 0 6px 0;
}

.about-body {
    color: #58585A;
    font-size: 17px;
    font-family: 'MinionPro', Georgia, serif;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}


/* Tract popup styles */
.tract-popup {
    position: absolute;
    background: var(--ui-panel-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 2000;
    width: 550px;
    /* Increased from 460px for better chart visibility */
    font-family: 'Arial', sans-serif;
    backdrop-filter: blur(5px);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(37, 37, 37, 0.05);
    border-radius: 8px 8px 0 0;
}

.tract-name {
    margin: 0;
    font-size: 16px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

.popup-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.popup-close:hover {
    background-color: rgba(227, 26, 28, 0.1);
    color: #e31a1c;
}

.popup-content {
    padding: 15px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
    color: #58585A;
}

/* Chart container for individual census tract popups (when clicking on tracts) */
.chart-container {
    position: relative;
    height: 160px;
    /* Increased from 120px for better trend visibility */
    width: 100%;
    margin-bottom: 10px;
}

.loading-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-size: 14px;
    gap: 8px;
}

#trendChart {
    display: none;
    width: 100%;
    height: 100%;
}

.chart-explanation {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
    font-family: 'DINPro', Arial, sans-serif;
    font-style: italic;
}

/* Trends tab bar inside drawer */
.trends-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
}

.trends-tab {
    background: none;
    border: none;
    padding: 8px 20px;
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #999;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.trends-tab:hover {
    color: #58585A;
}

.trends-tab.active {
    color: #58585A;
    border-bottom-color: #1270B3;
}

/* City select wrapper — hidden until city tab is active */
.city-select-wrapper {
    display: none;
    padding: 3px 0 0 0;
}

/* City mode: flex column so the chart and select share available space reliably.
   Height is anchored directly to the drawer size instead of relying on a
   percentage chain that breaks through WA's Shadow DOM body. */
.county-trends-content.city-mode {
    display: flex;
    flex-direction: column;
    height: calc(85vh - 220px); /* drawer(85vh) - WA header/footer(~120px) - tab bar(~45px) - select(~40px) */
    overflow: hidden;
}

.county-trends-content.city-mode .county-chart-container {
    flex: 1 1 0;    /* grow to fill, shrink if needed */
    height: 0;      /* flex algorithm controls height, not the default calc() */
    min-height: 250px;
    max-height: none;
}

.county-trends-content.city-mode .city-select-wrapper {
    display: block;
    flex-shrink: 0; /* never compress the select widget */
    width: 75%;
    margin: 0 auto;
}

/* Match app font in the city multi-select */
#cityMultiSelect::part(form-control-label) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #58585A;
}

#cityMultiSelect::part(combobox) {
    font-family: 'DINPro', Arial, sans-serif;
    font-size: 14px;
}

/* Prevent city name tags from truncating.
   ::part(tag) alone doesn't reach inside wa-tag's shadow DOM;
   WA/Shoelace forwards the inner content part so we can target it directly. */
#cityMultiSelect::part(tag) {
    max-width: none;
}

#cityMultiSelect::part(tag__content),
#cityMultiSelect::part(tag__label) {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
}

/* DINPro font for city names in the dropdown list */
#cityMultiSelect wa-option::part(base),
#cityMultiSelect wa-option::part(label) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
}

/* Explanation text above the chart in the trends drawer */
#countyTrendsDrawer .chart-explanation {
    margin: 0 0 8px 0;
    flex-shrink: 0; /* prevent compression in city mode flex layout */
}

#countyTrendsDrawer .chart-explanation p {
    margin: 0;
    font-size: 15px;
    color: #666;
    text-align: center;
    font-family: 'DINPro', Arial, sans-serif;
}

/* County Trends Drawer Styles */
.county-trends-drawer {
    --width: 90vw;
    max-width: 1200px;
    /* Height is controlled by --size property in HTML */
}

.county-trends-content {
    padding: 5px 5px 20px 5px; /* extra bottom padding prevents canvas from reaching the overflow:hidden boundary */
    display: flex;
    flex-direction: column;
    height: calc(85vh - 175px); /* drawer(85vh) - WA header/footer(~120px) - tab bar(~45px) - padding */
    overflow: hidden;
}

/* Chart container specifically for county-wide trends drawer (when clicking "Show County Trends") */
.county-chart-container {
    position: relative;
    flex: 1 1 0;    /* grow to fill remaining space; flex algorithm controls height */
    height: 0;      /* override default so flex sizes it, not the browser default */
    width: 100%;
    min-height: 300px;
}

.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    /* Minimize padding for county trends */
    color: #666;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the loading indicator */
}

.chart-loading.hidden {
    display: none;
}

.chart-loading span {
    font-size: 14px;
    /* Slightly smaller text */
}

/* Ensure county trends chart canvas fills container completely */
#countyTrendsChart {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
}

.mapboxgl-ctrl-attrib-inner {
    display: none;
}

/* Prevent the drawer body from showing a scrollbar in city mode */
#countyTrendsDrawer::part(body) {
    overflow: hidden;
}

/* County trends drawer title */
#countyTrendsDrawer::part(title) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

/* County trends drawer Close button (brand variant) */
#countyTrendsDrawer wa-button[variant="brand"]::part(base) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
}

/* About dialog and mobile welcome dialog Close/Got it buttons (regular weight) */
#aboutDialog wa-button[variant="brand"]::part(base),
#mobileWelcomeDialog wa-button[variant="brand"]::part(base) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 400;
}

/* Radio button text in Map Options drawer (correct part name is "label") */
wa-radio[appearance="button"]::part(label) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
}

/* Map Options drawer title */
#optionsDrawer::part(title) {
    font-family: 'DINPro', Arial, sans-serif;
    font-weight: 500;
    color: #58585A;
}

/* About dialog title ("About this app") */
#aboutDialog::part(title) {
    font-family: 'MinionPro', Georgia, serif;
    font-weight: 600;
    color: #58585A;
}

/* Options drawer content */
.options-content {
    padding: 20px;
}

/* Geography selector styling */
#geographySelector {
    margin-bottom: 0;
}

/* Mobile responsive styles */
@media (max-width: 768px) {

    /* Disable all tooltips on mobile — no hover state exists on touch devices */
    wa-tooltip {
        display: none !important;
    }

    /* Hide download button on mobile */
    #downloadFilteredData {
        display: none;
    }

    /* Disable scrolling and ensure full viewport coverage */
    html,
    body {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Ensure map fills entire viewport on mobile */
    #map {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    /* Make month display smaller on mobile */
    #monthDisplay {
        top: 55px;
        right: 10px;
        padding: 8px 10px;
        width: auto;
        min-width: 100px;
    }

    #monthText {
        font-size: 12px;
    }

    #totalText {
        font-size: 11px;
    }

    /* Reduce header font size on mobile */
    header {
        font-size: 21px;
    }

    /* Make ARC logo smaller on mobile */
    #headerLogo {
        height: 16px;
    }

    /* Hide map watermark logo on mobile to reduce clutter */
    #arcLogo {
        display: none;
    }

    /* Reduce header right padding on mobile */
    header {
        padding-right: 10px;
    }

    /* Hide County Trends button on mobile */
    #countyTrendsBtn {
        display: none;
    }

    /* Move Map Options button to top-left on mobile */
    #optionsBtn {
        top: 55px;
        left: 10px;
        bottom: auto;
    }

    /* make the Map Options button font size smaller */
    #optionsBtn::part(base) {
        font-size: 13px;
    }

    /* Slider is moved into drawer on mobile; hide it in its original position */
    #sliderContainer {
        display: none;
    }

    /* Adjust slider label for vertical orientation */
    #sliderLabel {
        font-size: 11px;
        margin-top: 6px;
        margin-bottom: 0;
        word-wrap: break-all;
        text-align: center;
    }

    /* Hide the label text on the slider itself on mobile */
    #monthSlider::part(label) {
        display: none;
    }

    /* Legend: horizontal layout on mobile */
    .legend {
        bottom: 15px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: min(320px, calc(100vw - 30px));
        max-width: none;
        padding: 12px;
        text-align: left;
    }

    .legend h4 {
        font-size: 13px;
        margin: 8px 0;
        text-align: center;
    }

    /* Toggle row inside legend on mobile */
    .legend #filingModeInline {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 2px;
        border-bottom: 1px solid #e0e0e0;
    }

    /* Toggle label font size is set in the legend-filter-row block below */

    /* Horizontal bar: stack bar above tick labels */
    .legend-bar-wrapper {
        flex-direction: column;
        gap: 4px;
        margin-top: 0;
    }

    /* Horizontal color bar: light (0%) on left → dark (highest) on right */
    .legend-bar {
        width: 100%;
        height: 28px;
        background: linear-gradient(to right,
            #ffffcc 0%,  #ffffcc 20%,
            #fed976 20%, #fed976 40%,
            #fd8d3c 40%, #fd8d3c 60%,
            #e31a1c 60%, #e31a1c 80%,
            #800026 80%, #800026 100%
        );
    }

    /* Tick labels spread horizontally below the bar */
    .legend-bar-ticks {
        flex-direction: row;
        height: auto;
        width: 100%;
        justify-content: space-between;
    }

    /* Vertical threshold line for horizontal bar */
    .legend-threshold-line.horizontal {
        width: 3px;
        height: calc(100% + 8px);
        top: -4px;
        bottom: auto;
        left: auto; /* set by JS */
        right: auto;
    }

    /* Filter hint row */
    .legend-filter-row {
        margin-top: 8px;
    }

    .legend-filter-hint {
        font-size: 15px;
    }

    .legend #filingModeLabel {
        font-size: 15px;
        white-space: nowrap;
    }

    /* Mobile: show "Clear filter" text, hide circular icon button */
    .legend-reset-icon { display: none; }
    .legend-reset-text { display: inline; }

    #legendResetBtn::part(base) {
        border-radius: 20px;
        width: auto;
        height: 28px;
        min-height: unset;
        min-width: unset;
        padding: 0 12px;
        line-height: 1;
        background-color: transparent;
        border: 1px solid #aaaaaa;
        color: #58585A;
        font-size: 13px;
        font-family: 'DINPro', Arial, sans-serif;
        font-weight: 400;
        text-decoration: none;
    }

    #legendResetBtn::part(base):hover {
        background-color: transparent;
        border-color: #e31a1c;
        color: #e31a1c;
    }

    /* Arrange legend items horizontally in 2 rows */
    .legend-item {
        display: inline-flex;
        align-items: center;
        margin-right: 6px;
        margin-bottom: 6px;
        font-size: 10px;
    }

    .legend-color {
        width: 15px;
        height: 12px;
        margin-right: 4px;
    }

    /* Hide legend explanation on mobile */
    .legend-explanation {
        display: none;
    }

    /* Style slider when moved into drawer on mobile */
    #mobileSliderContainer #sliderContainer {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 16px 8px;
        background: var(--ui-panel-bg);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        overflow: hidden;
    }

    #mobileSliderContainer #sliderMain {
        width: 100%;
        flex: none;
    }

    #mobileSliderContainer #monthSlider {
        width: 100%;
        height: 36px;
        overflow: hidden;
    }

    #mobileSliderContainer #monthSlider::part(base) {
        min-height: unset;
        height: 36px;
        padding: 0;
        overflow: hidden;
    }

    #mobileSliderContainer #sliderLabel {
        font-size: 14px;
        margin-top: 6px;
        margin-bottom: 0;
    }

    /* Make tract popups smaller on mobile */
    .tract-popup {
        width: calc(100vw - 40px);
        max-width: 350px;
        font-size: 13px;
    }

    .tract-popup .popup-header {
        padding: 10px 12px;
    }

    .tract-popup .tract-name {
        font-size: 14px;
    }

    .tract-popup .popup-close {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .tract-popup .popup-content {
        padding: 12px;
    }

    .tract-popup .chart-container {
        height: 120px;
        margin-bottom: 8px;
    }

    .tract-popup .chart-explanation {
        font-size: 11px;
        margin-top: 8px;
    }
}