.pep-explorer { margin:1.5rem 0; padding:1rem; border:1px solid #aab9c7; border-radius:10px; min-width:0; }
#official-state-demographics .seo-table-wrap:focus-visible { outline:3px solid #162942; outline-offset:3px; }
#state-demographics-scroll-help { padding:.6rem; border-left:4px solid #526d87; }
.pep-explorer select { min-height:2.75rem; max-width:100%; font:inherit; padding:.4rem; }
.pep-explorer button, .pep-comparison-controls select { font:inherit; min-height:2.75rem; max-width:100%; padding:.5rem; }
.pep-comparison-controls label { display:block; font-weight:650; }
.pep-comparison-controls select { width:100%; }
.pep-demographics { margin:1.5rem 0; padding:1rem; border:1px solid #aab9c7; border-radius:10px; min-width:0; }
#pep-annotation { overflow-wrap:anywhere; }
.pep-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1rem; min-width:0; }
.pep-map-panel { min-width:0; }
.pep-mobile-picker { display:block; margin:0 0 .8rem; }
.pep-mobile-picker label { display:block; font-weight:650; margin-bottom:.25rem; }
#pep-county-picker { width:100%; min-height:2.75rem; }
#pep-map { display:block; width:100%; height:auto; max-height:650px; background:#edf3f5; border:1px solid #8c9eac; border-radius:6px; touch-action:manipulation; }
#pep-map[hidden] { display:none; }
#pep-map path[role=button] { stroke:white; stroke-width:.8; vector-effect:non-scaling-stroke; cursor:pointer; }
#pep-map path[role=button]:hover, #pep-map path.is-selected { stroke:#162942; stroke-width:2.5; }
#pep-map path[role=button]:focus-visible { outline:3px solid #162942; outline-offset:2px; stroke:#162942; stroke-width:3; }
#pep-map-help { font-size:.88rem; }
#pep-legend { padding:.7rem; border:1px solid #8c9eac; border-radius:6px; }
#pep-legend p { margin:.4rem 0 0; }
#pep-details { align-self:start; padding:1rem; border:1px solid #8c9eac; border-radius:6px; overflow-wrap:anywhere; }
#pep-details h3 { margin-top:0; }
.pep-rank-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:1rem 0; min-width:0; }
.pep-rank-controls input, .pep-rank-controls select, .pep-rank-controls button { font:inherit; min-height:2.75rem; max-width:100%; padding:.4rem; }
.pep-rank-controls input { min-width:0; width:16rem; }
#county-table tr[hidden] { display:none; }
.pep-trends { margin:1.5rem 0; padding:1rem; border:1px solid #aab9c7; border-radius:10px; min-width:0; }
.pep-trend-chart-viewport { max-width:100%; overflow-x:auto; border:1px solid #8c9eac; }
.pep-trend-chart-viewport:focus-visible { outline:3px solid #162942; outline-offset:2px; }
#pep-trend-chart { display:block; width:700px; height:330px; background:#f7fafb; }
#pep-trend-chart text { fill:#162942; font-size:14px; }
#pep-trend-chart .pep-axis { stroke:#31485e; stroke-width:2; }
#pep-trend-chart .pep-trend-line { stroke:#164b78; stroke-width:3; }
#pep-trend-chart .pep-partial-line { stroke:#a74329; stroke-width:2; stroke-dasharray:5 4; }
#pep-trend-chart .pep-base-point { fill:#a74329; }
#pep-trend-chart .pep-trend-point { fill:#164b78; }
.pep-select-county { font:inherit; color:#164b78; text-decoration:underline; background:none; border:0; cursor:pointer; padding:.3rem; }
.pep-select-county:focus-visible { outline:3px solid #162942; }
.pep-housing { margin:1.5rem 0; padding:1rem; border:1px solid #aab9c7; border-radius:10px; min-width:0; }
#pep-scatter { display:block; width:100%; max-width:100%; height:auto; background:#f7fafb; border:1px solid #8c9eac; }
#pep-scatter text { fill:#162942; font-size:12px; }
#pep-scatter .pep-axis { stroke:#31485e; stroke-width:2; }
#pep-scatter circle { fill:#164b78; stroke:white; stroke-width:1; cursor:pointer; }
#pep-scatter circle.is-selected { fill:#a74329; stroke:#162942; stroke-width:3; }
#pep-scatter circle:focus-visible { outline:3px solid #a74329; }
#pep-housing-table tr.is-selected { background:#e6f0f5; }
.pep-expanded-scatter { margin:1.5rem 0; padding:1rem; border:1px solid #aab9c7; border-radius:10px; min-width:0; overflow-wrap:anywhere; overflow-anchor:none; }
.pep-scatter-controls { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; min-width:0; }
.pep-scatter-controls label { flex:1 1 16rem; min-width:0; }
.pep-scatter-controls select { display:block; width:100%; max-width:100%; min-width:0; font:inherit; padding:.5rem; min-height:44px; }
.pep-expanded-scatter button { font:inherit; min-height:44px; max-width:100%; padding:.4rem; }
.pep-expanded-scatter .seo-table-wrap { overflow-x:auto; max-width:100%; }
.pep-scatter-chart-viewport { max-width:100%; overflow-x:auto; border:1px solid #8c9eac; touch-action:pan-x pan-y; overscroll-behavior-x:contain; scrollbar-width:auto; }
.pep-scatter-chart-viewport:focus { outline:3px solid #162942; outline-offset:2px; }
/* Smooth programmatic page scroll can move a point after pointer hit-testing. */
html:has(.pep-expanded-scatter) { scroll-behavior:auto; }
.pep-scatter-scroll-controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.pep-scatter-scroll-controls[hidden] { display:none; }
#pep-scatter-chooser { max-height:40vh; overflow-y:auto; overscroll-behavior-y:contain; padding:.75rem; margin:1rem 0; border:2px solid #31485e; scroll-padding:.75rem; }
#pep-scatter-chooser[hidden] { display:none; }
#pep-scatter-chooser ul { margin:0; padding-left:1.25rem; }
#pep-scatter-chooser li { padding:.5rem 0; }
#pep-scatter-chooser button, #pep-scatter-chooser a { scroll-margin:.75rem; }
#pep-scatter-chooser :focus, .pep-scatter-scroll-controls button:focus { outline:3px solid #162942; outline-offset:2px; }
#pep-expanded-chart { display:block; width:900px; height:460px; background:#f7fafb; }
#pep-expanded-chart text { fill:#162942; font-size:14px; }
#pep-expanded-chart .pep-axis { stroke:#31485e; stroke-width:2; }
#pep-expanded-chart circle { fill:#164b78; stroke:white; stroke-width:1; cursor:pointer; }
#pep-expanded-chart circle.is-selected, #pep-expanded-chart circle:focus { fill:#a74329; stroke:#162942; stroke-width:3; outline:2px solid #a74329; }
#pep-scatter-table { min-width:850px; }
#pep-scatter-table tr.is-selected { background:#e6f0f5; }
#county-table tr.is-selected, #national-table tr.is-selected { background:#e6f0f5; }
@media(max-width:800px) { .pep-layout { grid-template-columns:minmax(0,1fr); } .pep-rank-controls { align-items:stretch; flex-direction:column; } .pep-rank-controls input, .pep-rank-controls select { width:100%; } }
@media(max-width:800px) { .pep-mobile-picker { display:block; } }
