*{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1d2433;background:#f5f6f8}
#banner{background:#b3261e;color:#fff;padding:8px 16px;font-size:14px}
#banner a{color:#fff;text-decoration:underline}
#moved{background:#fff4ce;color:#3b2f00;padding:8px 16px;font-size:15px;border-bottom:1px solid #e0c96b}
#moved a{color:#13294b;font-weight:600}
header{padding:8px 16px 0;background:#13294b;color:#fff}
header h1{font-size:18px;margin:0 0 6px}
.back{margin:0 0 4px;font-size:12px}.back a{color:#cfe0ff}
#tabs{display:flex;gap:4px}
.tab{padding:6px 14px;color:#dfe8ff;text-decoration:none;border-radius:6px 6px 0 0}
.tab.active{background:#f5f6f8;color:#13294b;font-weight:600}
.controls{display:flex;flex-wrap:wrap;gap:8px 22px;padding:8px 16px;background:#fff;border-bottom:1px solid #d9dde4;align-items:center}
.group{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.lbl{font-weight:600}
.run{font-size:12px;color:#3d4757}
.map{height:min(66vh,620px);margin:8px;background:#e8eef5;border:1px solid #d9dde4;border-radius:6px}
@media (max-width:900px){.map{height:52vh}}
.legend{padding:0 16px 6px;font-size:12px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.bar{display:inline-flex;vertical-align:middle;border:1px solid #999}
.bar span{display:inline-block;width:16px;height:12px}
.cards{display:flex;flex-wrap:wrap;gap:8px;padding:8px 8px 0}
.card{background:#fff;border:1px solid #d9dde4;border-radius:6px;padding:6px 10px;min-width:200px}
.card h3{margin:0 0 2px;font-size:13px}
.card .big{font-size:20px;font-weight:600}
.pos{color:#1b7837}.neg{color:#9e1b32}
.hint{font-size:12px;color:#5a6577;padding:0 16px}
.empty{margin:24px 16px;font-size:15px}
#detail{position:fixed;right:12px;top:12px;bottom:12px;width:min(520px,94vw);overflow:auto;background:#fff;border:1px solid #c9ced8;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:12px 14px;z-index:1000}
#closeDetail{position:absolute;right:8px;top:4px;border:0;background:none;font-size:22px;cursor:pointer}
table{border-collapse:collapse;font-size:12px;margin:6px 0}
th,td{border-bottom:1px solid #e3e6eb;padding:3px 6px;text-align:right}
th:first-child,td:first-child{text-align:left}
footer{padding:8px 16px 16px;font-size:12px;color:#5a6577}
.leaflet-container{background:#e8eef5}
.leaflet-popup-content .err{margin:6px 0 0;font-size:12px;max-width:360px}

/* ---- readability pass: plain title, larger controls, in-map empty state, orientation labels ---- */
header h1{font-size:20px;margin:0}
.subtitle{margin:0 0 8px;font-size:13px;color:#cfe0ff}
.back{font-size:14px}.back a{display:inline-flex;align-items:center;min-height:32px}
.tab{display:inline-flex;align-items:center;min-height:36px}
.lbl{font-size:14px}
.seg label,.units-toggle label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border:1px solid #9aa3b2;border-radius:6px;background:#fff;color:#1d2433;cursor:pointer;font-size:14px}
.seg label:has(input:checked),.units-toggle label:has(input:checked){background:#13294b;color:#fff;border-color:#13294b}
.seg input[type=radio],.units-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg label:has(input:focus-visible),.units-toggle label:has(input:focus-visible){outline:2px solid #1a73e8;outline-offset:2px}
.seg input[type=checkbox]{width:18px;height:18px;margin:0}
.units-toggle{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:4px 0 8px}
.units-toggle .lbl{color:#fff}
@media (pointer:coarse),(max-width:600px){.seg label,.units-toggle label,.tab,.back a{min-height:44px}}
.run{font-size:13px}
.legend{font-size:13px}
.updated{margin:0;padding:0 16px 6px;font-size:13px;color:#3d4757}
.intro{margin:0;padding:10px 16px 0;font-size:15px}
.hint{font-size:13px}
footer{font-size:13px}
.mapwrap{position:relative}
.mapwrap .empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:max-content;max-width:min(440px,calc(100% - 32px));text-align:center;padding:16px 20px;font-size:clamp(15px,1.6vw,18px);font-weight:600;line-height:1.4;color:#1d2433;background:#fff;border:1px solid #c9ced8;border-radius:10px;box-shadow:0 4px 16px rgba(19,41,75,.16);z-index:1001;pointer-events:none}
.mapwrap .empty[hidden]{display:none}
.city{white-space:nowrap;font-size:12px;font-weight:600;color:#1d2433;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.city .cdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1d2433;border:1px solid #fff;margin-right:4px;vertical-align:middle}
[hidden]{display:none!important}
header .units-toggle label{background:transparent;color:#fff;border-color:#8fa3c7}
header .units-toggle label:has(input:checked){background:#fff;color:#13294b;border-color:#fff;font-weight:600}

/* follow-up: east-coast labels to the left of the dot; phones get a map box sized to the lower 48 */
.city.west .cname{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.map{height:auto;aspect-ratio:1.55/1;min-height:220px}}
.seg label.off,.seg label:has(input:disabled){background:#eef0f3;color:#4a5363;border-style:dashed;cursor:not-allowed}
.explain{margin:0 0 6px;color:#3d4757}
.opts>summary{display:flex;align-items:center;min-height:44px;padding:4px 16px;background:#fff;border-bottom:1px solid #d9dde4;cursor:pointer;font-weight:600;font-size:14px}
.opts>summary span{font-weight:400;margin-left:6px;color:#3d4757}
@media (min-width:701px){.opts>summary{display:none}}
/* Inline links in the banner and footer stay inline: an inline-block / inline-flex box with min-height or vertical
   padding made its line taller than the others. Vertical padding on an inline box widens the tap area
   without changing the line height. */
#banner a,footer a{display:inline;padding-block:10px}
@media (max-width:600px){.mapwrap .empty{top:auto;bottom:10px;transform:translateX(-50%);max-width:calc(100% - 36px);padding:10px 14px;font-size:14px;line-height:1.35}
.mapwrap:has(.empty:not([hidden])) .map{aspect-ratio:auto;height:calc((100vw - 16px) / 1.55 + 84px)}}
@media (pointer:coarse),(max-width:600px){.leaflet-touch .leaflet-bar a,.leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}}