:root{font-family:Arial,sans-serif;color:#173847;background:#edf3f5;font-size:16px}*{box-sizing:border-box}body{margin:0}header{background:#123744;color:white;padding:20px 4%;display:flex;justify-content:space-between;gap:18px}header a{color:#fff}main{max-width:1440px;margin:auto;padding:32px}h1{font-size:clamp(32px,5vw,60px);margin:12px 0}h2{font-size:21px}.eyebrow{letter-spacing:3px;font-size:12px}.lead{font-size:21px;max-width:850px;line-height:1.6}.warning{background:#fff1d9;border-left:5px solid #bd7a18;padding:22px;line-height:1.6}.card{background:white;border:1px solid #d0dce1;border-radius:12px;padding:24px;margin:20px 0;min-width:0}nav{display:flex;gap:15px;margin:25px 0}.controls{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0}label{display:flex;flex-direction:column;gap:8px;flex:1;min-width:170px}select,input,button{font:inherit;border:1px solid #9eb3be;border-radius:6px;padding:11px;background:white;color:#173847;max-width:100%}button{cursor:pointer}button:focus,select:focus,input:focus,a:focus{outline:3px solid #ed9c25}nav button{background:#173f50;color:white}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.grid .card{margin:0}svg{width:100%;height:auto}.value{font-size:32px;margin-bottom:8px}p{line-height:1.6}a{color:#09647a}.scroll{max-height:550px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;border-bottom:1px solid #dbe5e9;padding:12px}th{position:sticky;top:0;background:#edf3f5}footer{padding:30px 0;color:#58717c;font-size:14px}.shape{stroke:#fff;stroke-width:1;cursor:pointer}.shape:focus,.shape.selected{stroke:#ee8a20;stroke-width:3}#cities{display:flex;gap:8px;flex-wrap:wrap}[hidden]{display:none!important}@media(max-width:800px){main{padding:16px}.grid{grid-template-columns:1fr}header{flex-direction:column}.card{padding:16px}nav{flex-wrap:wrap}label{min-width:100%}}
h1,h2,p,a{overflow-wrap:anywhere}svg text{font-family:Arial,sans-serif}input[type=checkbox]{align-self:flex-start;min-width:20px;min-height:20px}#diagnosticWarning{margin:16px 0}

/* Keep axis labels in CSS pixels on phones; geometry is redrawn on resize. */
#chart{display:block;width:100%;height:330px;max-height:none;min-width:0}#chart text{font-family:Arial,sans-serif;font-size:13px}

#regionalCities{display:flex;gap:8px;flex-wrap:wrap}#regionalMap{display:block;width:100%;min-width:0}#regionalTable td{overflow-wrap:anywhere}#regionalComparison label{max-width:300px}