:root{
  --limestone:#e8ebe5;
  --surface:#f7f8f4;
  --ink:#17201d;
  --muted:#5b6762;
  --rule:#cfd5cc;
  --dem:#2d62ae;
  --rep:#c0392f;
  --oth:#8c877a;
  --grow:#2f7a57;
  --fall:#b36a22;
  --focus:#e0a526;
  --cond:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--limestone);color:var(--ink);font:16px/1.55 var(--body)}
a{color:var(--dem)}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:28px 24px 18px}
.mark{font:800 30px/1 var(--cond);letter-spacing:-.3px;color:var(--ink);text-decoration:none}
.status{margin:0;color:var(--muted);font-size:15px}
.status b{color:var(--ink);font-weight:600}

.controls{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end;max-width:1180px;margin:0 auto;padding:12px 24px 14px;background:color-mix(in srgb,var(--limestone) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl>span{font-size:13px;color:var(--muted)}
.ctl select{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317201d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--rule);border-radius:8px;padding:8px 34px 8px 12px;min-width:160px;cursor:pointer}
.seg{display:inline-flex;background:#d9ded6;border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 10px;border-radius:7px;cursor:pointer;white-space:nowrap;font-size:14px}
.seg button:hover:not(:disabled){background:#cdd3ca}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button:disabled{color:#9aa39e;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.seg.small button{font-size:14px;padding:6px 11px}

main{max-width:1180px;margin:0 auto;padding:22px 24px 60px}
.card{margin:0 0 30px;background:var(--surface);border-radius:14px;box-shadow:0 1px 0 var(--rule);overflow:hidden}
.frame{position:relative;line-height:0}
.frame svg{display:block;width:100%;height:auto}
.tools{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:12px 18px 14px;border-top:1px solid var(--rule)}
.tools>button,.table-tools button{border:1px solid var(--rule);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14px}
.tools>button:hover,.table-tools button:hover{border-color:var(--ink)}
.tools>button:first-of-type{margin-left:auto}
.hint{font-size:14px;color:var(--muted)}

.map-frame path.county{cursor:pointer}
.map-frame path.county:hover{stroke:var(--ink);stroke-width:1.6}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:8px;padding:9px 12px;font:14px/1.4 var(--body);max-width:260px;box-shadow:0 6px 18px rgba(23,32,29,.25)}
.tip b{display:block;font-size:15px}

.table-block{background:var(--surface);border-radius:14px;padding:4px 18px 16px;margin-bottom:40px}
.table-block summary{cursor:pointer;padding:14px 0;font:700 22px/1.2 var(--cond)}
.table-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
.tablewrap{overflow:auto;max-height:560px;border:1px solid var(--rule);border-radius:8px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid #e6e9e3;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:#eef1eb;font-weight:600;cursor:pointer;user-select:none}
thead th[aria-sort]::after{content:" ▾";color:var(--muted)}
thead th[aria-sort=ascending]::after{content:" ▴"}
tbody tr:hover{background:#f3f5f0}
td button{border:0;background:none;padding:0;color:var(--dem);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
td.flag{color:var(--muted)}
.up{color:var(--grow)}.down{color:var(--fall)}

.methods h2{font:800 34px/1.1 var(--cond);margin:10px 0 18px}
.methods h3{font:700 20px/1.2 var(--cond);margin:0 0 8px}
.methods .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.methods p,.methods li{color:var(--muted);font-size:15px;max-width:60ch}
.methods ul{padding-left:18px;margin:0}
.methods li{margin-bottom:4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;transition:.2s;pointer-events:none;font-size:15px}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:820px){
  .methods .cols{grid-template-columns:1fr}
  .controls{gap:10px 14px;padding:10px 16px}
  .top,main{padding-left:16px;padding-right:16px}
  .ctl select{min-width:0;width:100%}
  .ctl.place{flex:1 1 100%}
  .tools>button:first-of-type{margin-left:0}
}
@media (max-width:520px){
  .seg button{padding:6px 9px;font-size:14px}
  .controls{position:static}
}