/* District map page. Loaded after site.css and vendor/leaflet.css. */
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
header.toolbar{
  display:flex;align-items:center;gap:16px;padding:8px 16px;
  background:var(--surface-1);border-bottom:1px solid var(--rule);flex:none;z-index:1200;
  border-top:2px solid var(--text-primary);
}
.brand{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand h1{font-size:15px;margin:0;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand p{margin:0;font-size:12.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sep{opacity:.55;margin:0 2px}
.bar{display:flex;gap:6px;flex-wrap:wrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface-1);font-weight:600;padding:0 15px}
main{flex:1;display:flex;min-height:0;position:relative}
aside{
  width:340px;flex:none;background:var(--surface-1);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;z-index:1100;
}
.search{padding:10px 12px;border-bottom:1px solid var(--rule)}
.search input{
  width:100%;font:inherit;font-size:14px;min-height:var(--min-target);padding:0 10px;
  border:1px solid var(--rule);background:var(--panel);color:var(--text-primary);
}
.legend{padding:8px 12px;border-bottom:1px solid var(--rule)}
.legend-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.legend-head h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:600}
.legend-head button{font:inherit;font-size:12.5px;background:none;border:none;color:var(--accent);cursor:pointer;
  min-height:var(--min-target);padding:0 8px;text-decoration:underline;text-underline-offset:2px}
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:0 4px}
.chip{
  display:flex;align-items:center;gap:7px;padding:0 6px;min-height:var(--min-target);cursor:pointer;
  border:1px solid transparent;background:none;font:inherit;font-size:12.5px;color:var(--text-secondary);text-align:left;
}
.chip:hover{background:var(--plane)}
.chip[aria-pressed="false"]{opacity:.55}
.chip[aria-pressed="false"] span{text-decoration:line-through}
.chip .sw{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px var(--ring)}
.chip .n{margin-left:auto;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.list{flex:1;overflow-y:auto;padding:6px 8px 24px}
.list h3{margin:0;padding:12px 8px 4px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.drow{
  width:100%;text-align:left;font:inherit;background:none;border:none;cursor:pointer;
  padding:8px 8px;display:flex;gap:9px;align-items:flex-start;min-height:var(--min-target);
}
.drow:hover{background:var(--plane)}
.drow .bar{width:3px;align-self:stretch;flex:none;min-height:30px;display:block}
.drow .t{min-width:0;flex:1}
.drow .nm{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.drow .sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px;line-height:1.4}
.drow.empty .nm{color:var(--text-muted);font-weight:500}
.srcs{
  flex:none;border-top:1px solid var(--rule);padding:9px 12px 11px;
  font-size:12.5px;line-height:1.5;color:var(--text-muted);
}
.srcs b{color:var(--text-secondary);font-weight:600}
.srcs a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}
.mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--plane)}
.banner{
  position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:900;
  background:var(--panel);border:1px solid var(--rule);
  padding:8px 14px;font-size:12.5px;color:var(--text-secondary);
  display:flex;align-items:center;gap:9px;width:max-content;max-width:min(560px,92%);
}
.banner > span:not(.spin){flex:1 1 auto;min-width:0}
.banner.err{border-color:#b42318;color:var(--text-primary)}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.banner button{margin-left:4px}
/* map labels */
.rlab{
  font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--text-primary);
  text-shadow:0 0 3px var(--surface-1),0 0 3px var(--surface-1),0 0 6px var(--surface-1);
  white-space:nowrap;pointer-events:none;text-align:center;
}
.rlab i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}
/* District chips: white face, region-colored ring (set inline), ink numeral. 19:1 on every region. */
.dchip{
  display:flex;align-items:center;justify-content:center;gap:0;
  height:22px;min-width:22px;padding:0 6px;border-radius:11px;
  font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:.03em;
  background:var(--surface-1);white-space:nowrap;
}
.dchip.none{color:var(--text-muted)}
.dchip .ct{font-size:12px;color:var(--text-secondary);margin-left:3px}
/* popup */
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text-primary);border:1px solid var(--rule)}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--rule)}
.leaflet-popup-content{margin:0;width:320px !important;font-size:13px;line-height:1.45}
.leaflet-container a.leaflet-popup-close-button{
  color:var(--text-muted);top:2px;right:2px;width:var(--min-target);height:var(--min-target);
  font-size:26px;line-height:var(--min-target);text-align:center;
}
.pop{padding:13px 14px 12px}
.pop .rg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase}
.pop .rg .sw{width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--ring)}
.pop h3{margin:5px 30px 2px 0;font-size:15px;font-weight:650;letter-spacing:-.01em}
.pop .cols{font-size:12.5px;color:var(--text-muted);margin:0 0 10px;line-height:1.45}
.pop .who{border-top:1px solid var(--rule);padding-top:9px;margin-top:2px}
.pop .who + .who{margin-top:9px}
.pop .who .n{font-weight:620;font-size:13.5px}
.pop .kv{display:grid;grid-template-columns:64px 1fr;gap:2px 8px;margin:5px 0 0;font-size:12.5px}
.pop .kv dt{color:var(--text-muted)}
.pop .kv dd{margin:0;color:var(--text-secondary);word-break:break-word}
.pop a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pop .none{color:var(--text-muted);font-size:12.5px;border-top:1px solid var(--rule);padding-top:9px}
.pop .hid{font-size:12.5px;color:var(--text-muted);margin-top:6px}
.pop .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;border-top:1px solid var(--rule);padding-top:9px}
.pop .links a{
  font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;
  border:1px solid var(--rule);padding:0 10px;min-height:var(--min-target);display:inline-flex;align-items:center;white-space:nowrap;
}
.pop .links a:hover{border-color:var(--accent);text-decoration:underline}
.pop .share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:11px;padding-top:9px}
.pop .share button{
  font:inherit;font-size:12.5px;color:var(--text-secondary);background:none;border:1px solid var(--rule);
  padding:0 10px;min-height:var(--min-target);cursor:pointer;
}
.pop .share button:hover{color:var(--text-primary);border-color:var(--text-primary)}
.pop .share .hid{margin:0}
/* intro dialog */
dialog.intro{
  z-index:950;width:min(470px,90%);background:var(--panel);border:1px solid var(--rule);
  padding:22px 24px 20px;color:var(--text-primary);
}
dialog.intro::backdrop{background:rgba(246,246,246,.35)}
.intro.off{display:none}
.intro h2{margin:0 0 9px;font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.intro p{margin:0 0 11px;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.intro ul{margin:0 0 13px;padding-left:17px;font-size:13px;line-height:1.7;color:var(--text-secondary)}
.intro b{color:var(--text-primary);font-weight:620}
.intro a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* table view */
.sheet{position:absolute;inset:0;background:var(--surface-1);z-index:1000;display:none;flex-direction:column}
.sheet.on{display:flex}
.sheet .bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--rule)}
.sheet .bar h2{margin:0;font-size:13.5px;font-weight:650}
.sheet .count{font-size:12.5px;color:var(--text-muted)}
.sheet .scroll{overflow:auto;flex:1}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
th{position:sticky;top:0;background:var(--surface-1);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600;z-index:2}
td.rgc{font-weight:600}
tbody tr:hover{background:var(--plane)}
.sw-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.btn.only-narrow{display:none}
@media (max-width:860px){
  aside{position:absolute;inset:0;width:100%;display:none}
  aside.on{display:flex}
  .btn.only-narrow{display:inline-flex}
}
/* Leaflet controls at a 44 px target */
.leaflet-touch .leaflet-bar a, .leaflet-bar a{width:var(--min-target);height:var(--min-target);line-height:var(--min-target);font-size:22px}
.leaflet-container{background:var(--plane) !important;font-family:inherit}
.leaflet-control-zoom a{border-radius:0 !important}
.leaflet-container a.leaflet-popup-close-button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

/* Phones: the toolbar becomes two rows, then a single scrollable strip of controls. */
@media (max-width:760px){
  header.toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  header .brand{flex:1 1 auto}
  header .brand h1{font-size:14px}
  header .brand p{display:none}
  header .grow{display:none}
  header .bar{
    order:3;flex:1 1 100%;display:flex;gap:8px;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 -12px;padding:2px 12px 4px;
  }
  header .bar::-webkit-scrollbar{display:none}
  header .bar .btn{flex:none}
  header .bar #btn-side{order:1}
  header .bar #btn-table{order:3}
  header .bar .navlink{order:4}
  .search input{font-size:16px}   /* under 16px iOS Safari zooms on focus */
}

/* ============ motion ============ */
body.reveal-armed .leaflet-overlay-pane canvas,
body.reveal-armed .dchip{opacity:0}
body.reveal-armed.reveal-on .leaflet-overlay-pane canvas{opacity:1;transition:opacity .7s ease}
body.reveal-armed.reveal-on .dchip{opacity:1;transition:opacity .55s ease}
.dchip{transition:opacity .22s ease}
.leaflet-popup{animation:pop-fade .18s ease-out both}
.leaflet-popup-content-wrapper{animation:pop-rise .18s ease-out both}
@keyframes pop-fade{from{opacity:0}to{opacity:1}}
@keyframes pop-rise{from{transform:translateY(5px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){
  body.reveal-armed .leaflet-overlay-pane canvas,
  body.reveal-armed .dchip{opacity:1 !important}
}
.list .nomatch{padding:18px 10px;color:var(--text-muted);font-size:13px;margin:0}
/* Attribution: Leaflet's default link blue is 4.9:1; use ink and underline so links are links (1.4.1, 1.4.6). */
.leaflet-container .leaflet-control-attribution{color:var(--text-secondary);font-size:12px;background:rgba(255,255,255,.9)}
.leaflet-container .leaflet-control-attribution a{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}