:root{
  --ink:#172332; --navy:#173a5e; --navy2:#0d2742; --cream:#f4edda; --paper:#fffaf0;
  --line:#263746; --gold:#d0a44a; --shadow:rgba(12,25,40,.34);
  --ui:Verdana,Tahoma,Arial,sans-serif; --display:"Arial Narrow",Verdana,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 15%,#61798e 0,#32485d 42%,#172536 100%);color:var(--ink);font-family:var(--ui)}
body{padding:clamp(8px,2vw,22px)}
button,a{font:inherit}
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid #ffd35a;outline-offset:2px}
.stage{max-width:1440px;margin:auto;border:2px solid #081521;background:#b9c5ce;box-shadow:0 14px 36px var(--shadow),inset 0 0 0 2px #e8eef2;min-height:calc(100vh - 44px);display:flex;flex-direction:column}
.titlebar,.footerbar,.panel-title,.modal-titlebar{color:white;background:linear-gradient(#315f89 0,#173f65 46%,#0c2a47 52%,#173b5d 100%);text-shadow:0 1px 0 #000}
.titlebar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 9px 16px;border-bottom:2px solid #071727}
.kicker{margin:0 0 2px;font-size:10px;letter-spacing:.19em;color:#dfeaf4}
h1{margin:0;font-family:var(--display);font-size:clamp(22px,3.1vw,40px);letter-spacing:.035em;line-height:1}
.chrome-button,.text-button{cursor:pointer;color:white;border:1px solid #061523;border-radius:4px;background:linear-gradient(#6889a4,#294f70 48%,#123552 52%,#234a69);box-shadow:inset 0 1px 0 #b8cad8,0 2px 3px #07131f;padding:0}
.chrome-button:hover,.text-button:hover{filter:brightness(1.15)}
.chrome-button:active,.text-button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #06131e}
.help-button{width:44px;height:44px;font-weight:900;font-size:22px;border-radius:50%}
.workspace{display:grid;grid-template-columns:minmax(0,4fr) minmax(255px,1fr);gap:10px;padding:10px;flex:1;min-height:0}
.map-panel{position:relative;min-height:560px;border:2px solid #263747;background:linear-gradient(#d6e3eb,#aac5d6);box-shadow:inset 0 0 0 2px #f7fbfe;overflow:hidden}
#map{width:100%;height:100%;display:block;min-height:560px}
.county{stroke:#fff9e8;stroke-width:.25;vector-effect:non-scaling-stroke;transition:filter 180ms,stroke-width 180ms,opacity 180ms;cursor:pointer}
.county:hover,.county:focus,.county.preview{stroke:#101820;stroke-width:1.4;filter:brightness(1.14)}
.county.selected{stroke:#ffdf55;stroke-width:2.6;filter:drop-shadow(0 0 2px #111)}
.state-borders{fill:none;stroke:#263342;stroke-width:1.1;pointer-events:none;vector-effect:non-scaling-stroke}
.nation-border{fill:none;stroke:#0f1c28;stroke-width:1.7;pointer-events:none;vector-effect:non-scaling-stroke}
.loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#dce8ee;color:#173a5e;font-weight:bold;letter-spacing:.05em}
.status-strip{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;color:#f5f7f8;background:linear-gradient(90deg,rgba(11,35,57,.94),rgba(29,65,94,.92));border:1px solid #071727;box-shadow:0 2px 7px #203040;font-size:11px}
.text-button{min-height:32px;padding:5px 9px;font-size:10px;font-weight:bold;white-space:nowrap}
.control-well{display:flex;flex-direction:column;gap:10px;min-width:0}
.panel{background:var(--paper);border:2px solid #263747;box-shadow:inset 0 0 0 2px #d8cab0,0 3px 8px var(--shadow)}
.panel-title{padding:7px 9px;border-bottom:1px solid #071727;font-weight:bold;font-size:12px;letter-spacing:.08em}
.legend-panel{flex:0 0 auto}
.legend-note,.empty-state{font-size:11px;line-height:1.45;margin:10px 12px;color:#394651}
.matrix-wrap{display:grid;grid-template-columns:18px 1fr;grid-template-rows:1fr 22px;margin:10px 12px}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,34px);gap:3px}
.matrix-cell{border:1px solid #1d2b36;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);cursor:pointer}
.matrix-cell:hover,.matrix-cell.active{outline:3px solid #ffcf42;outline-offset:0}
.y-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.x-label{grid-column:2;font-size:9px;text-transform:uppercase;text-align:center;padding-top:5px}
.legend-footer{margin:0 12px 12px;font-size:10px;display:flex;align-items:center;gap:7px}
.swatch{width:18px;height:13px;border:1px solid #263746;display:inline-block}
.nodata{background:repeating-linear-gradient(135deg,#d4d1c8 0,#d4d1c8 4px,#b6b3aa 4px,#b6b3aa 8px)}
.detail-panel{flex:1;min-height:260px}
#detailContent{padding:10px 12px 14px}
.place-title{font-family:var(--display);font-size:21px;margin:0;color:#173a5e}
.state-line{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:2px 0 10px;color:#68737d}
.metric{margin:9px 0}
.metric-head{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.metric strong{font-size:13px;color:#173a5e}
.bar{height:8px;margin-top:3px;border:1px solid #394b59;background:#ddd5c4}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,#e7b45d,#b34b3a)}
.compare{font-size:10px;color:#4b5965;margin-top:3px}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.fact{border:1px solid #aa9c84;background:#f3ead8;padding:7px}
.fact span{display:block;font-size:9px;text-transform:uppercase;color:#65717a}
.fact b{font-size:12px}
.tooltip{position:absolute;z-index:5;pointer-events:none;max-width:250px;padding:9px 11px;background:#fff8e9;border:2px solid #18334c;box-shadow:3px 4px 8px rgba(0,0,0,.3);font-size:11px;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity 120ms,transform 120ms}
.tooltip.visible{opacity:1;transform:none}
.footerbar{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-top:2px solid #071727;font-size:9px;letter-spacing:.04em}
.modal{position:fixed;inset:0;z-index:100;background:rgba(3,12,20,.72);display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal-card{width:min(680px,100%);max-height:min(82vh,720px);background:#fff9ed;border:2px solid #071727;box-shadow:0 16px 50px #000;display:flex;flex-direction:column}
.modal-titlebar{display:flex;align-items:center;justify-content:space-between;padding:7px 8px 7px 13px;border-bottom:2px solid #071727}
.modal-titlebar h2{font-size:16px;margin:0}
.modal-titlebar .chrome-button{width:36px;height:36px;font-size:22px}
.modal-body{padding:14px 18px 22px;overflow:auto;font-size:12px;line-height:1.55}
.modal-body h3{font-size:13px;color:#173a5e;margin:14px 0 3px;text-transform:uppercase}
.modal-body a{color:#174e7b}
@media (max-width:800px){
  body{padding:0;background:#263d52}
  .stage{min-height:100vh;border-width:0}
  .workspace{display:block;padding:7px}
  .map-panel{min-height:58vh}
  #map{min-height:58vh}
  .control-well{display:block}
  .panel{margin-top:7px}
  .legend-panel{padding-bottom:1px}
  .detail-panel{min-height:0}
  .matrix{grid-template-rows:repeat(3,30px)}
  .footerbar{flex-direction:column;gap:3px}
}
@media (max-width:480px){
  .kicker{display:none}
  h1{font-size:22px}
  .titlebar{padding-left:10px}
  .status-strip{font-size:10px}
  .matrix-wrap{margin-left:8px;margin-right:8px}
  .tooltip{display:none}
  .fact-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  body{padding:0;background:white}
  .stage{box-shadow:none;min-height:auto}
  .help-button,.text-button,.tooltip,.loading{display:none!important}
  .workspace{grid-template-columns:3fr 1fr}
  .map-panel,#map{min-height:620px}
}