:root{
  --ink:#15130f;
  --panel:#1c1913;
  --paper:#211d16;
  --line:#3a3226;
  --line-soft:#2a251c;
  --text:#eee6d6;
  --muted:#9a9078;
  --red:#b5402f;
  --red-bright:#d15841;
  --amber:#d9a441;
  --amber-soft:#8a6b30;
  --focus:#e8c477;
  --radius:2px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(213,164,65,0.06), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(181,64,47,0.05), transparent 50%);
}

::selection{ background:var(--amber); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* ---------- Masthead ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel), var(--ink));
}
.masthead-inner{
  max-width:1180px;
  margin:0 auto;
  padding:28px 28px 24px;
  display:flex;
  align-items:center;
  gap:20px;
}
.stamp{ flex:0 0 auto; width:52px; height:52px; }
.stamp svg{ width:100%; height:100%; }
.stamp circle{ fill:none; stroke:var(--amber); stroke-width:1; }
.stamp .ticks line{ stroke:var(--red-bright); stroke-width:1.4; }

.masthead-text{ flex:1 1 auto; min-width:0; }
.eyebrow{
  margin:0 0 4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.masthead h1{
  margin:0;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-0.01em;
  color:var(--text);
}
.tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  max-width:46ch;
}
.masthead-count{
  flex:0 0 auto;
  text-align:right;
  border-left:1px solid var(--line);
  padding-left:20px;
}
.count-num{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:30px;
  color:var(--amber);
  line-height:1;
}
.count-label{
  display:block;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Layout ---------- */
.layout{
  max-width:1180px;
  margin:0 auto;
  padding:28px;
  display:grid;
  grid-template-columns:400px 1fr;
  gap:24px;
  align-items:start;
}
@media (max-width:880px){
  .layout{ grid-template-columns:1fr; }
}

.map-pane, .table-pane{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.pane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
}
.pane-head h2{
  margin:0;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:17px;
}
.result-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
}

.ghost-btn{
  background:none;
  border:1px solid var(--amber-soft);
  color:var(--amber);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:var(--radius);
  cursor:pointer;
}
.ghost-btn:hover{ border-color:var(--amber); background:rgba(217,164,65,0.08); }

/* ---------- Map ---------- */
.map-frame{
  position:relative;
  padding:14px 18px 4px;
}
#map{ width:100%; height:auto; display:block; }
.sl-outline{
  fill:var(--paper);
  stroke:var(--line);
  stroke-width:1;
}
.district-dot{ cursor:pointer; }
.district-dot .ring{
  fill:none;
  stroke:var(--amber-soft);
  stroke-width:1;
  transition:stroke .15s, stroke-width .15s;
}
.district-dot .core{
  fill:var(--red);
  opacity:.85;
  transition:fill .15s, opacity .15s;
}
.district-dot .tick{
  stroke:var(--amber-soft);
  stroke-width:.8;
  transition:stroke .15s;
}
.district-dot:hover .ring, .district-dot.active .ring{ stroke:var(--amber); stroke-width:1.4; }
.district-dot:hover .core, .district-dot.active .core{ fill:var(--amber); opacity:1; }
.district-dot:hover .tick, .district-dot.active .tick{ stroke:var(--amber); }
.district-dot.dim{ opacity:.35; }

.map-tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--ink);
  border:1px solid var(--amber-soft);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  padding:6px 9px;
  border-radius:var(--radius);
  transform:translate(-50%,-115%);
  white-space:nowrap;
  z-index:5;
}
.map-tooltip b{ color:var(--amber); }

.district-list{
  list-style:none;
  margin:10px 0 0;
  padding:12px 18px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  border-top:1px solid var(--line-soft);
}
.district-list li{ margin:0; }
.district-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--muted);
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 10px;
  cursor:pointer;
}
.district-chip:hover{ color:var(--text); border-color:var(--amber-soft); }
.district-chip.active{ color:var(--ink); background:var(--amber); border-color:var(--amber); font-weight:600; }

/* ---------- Table pane ---------- */
.search-row{
  display:flex;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--line-soft);
}
#searchInput{
  flex:1 1 auto;
  min-width:0;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  padding:10px 12px;
  border-radius:var(--radius);
}
#searchInput::placeholder{ color:var(--muted); }
#districtSelect{
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  padding:10px 10px;
  border-radius:var(--radius);
  max-width:180px;
}

.table-scroll{
  max-height:640px;
  overflow-y:auto;
}
table{
  width:100%;
  border-collapse:collapse;
}
thead th{
  position:sticky;
  top:0;
  background:var(--panel);
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  z-index:2;
}
tbody td{
  padding:9px 18px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
  vertical-align:baseline;
}
tbody tr:hover{ background:rgba(217,164,65,0.05); }
.col-code{ width:110px; }
.col-district{ width:150px; }
td.code{
  font-family:'IBM Plex Mono', monospace;
  color:var(--amber);
  letter-spacing:.02em;
}
td.town{ color:var(--text); }
.sub-flag{
  display:inline-block;
  margin-left:6px;
  font-size:10px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:3px;
  padding:0 4px;
  vertical-align:middle;
}
td.district-cell{ color:var(--muted); }

.empty-state{
  padding:40px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
}

/* ---------- Footer ---------- */
.colophon{
  max-width:1180px;
  margin:0 auto;
  padding:8px 28px 40px;
  color:var(--muted);
  font-size:12px;
}