:root{
  --bg:#0d1117; --bg2:#141b24; --panel:#161e29; --panel2:#1c2734;
  --line:#243140; --line2:#2f3e50;
  --txt:#e7edf4; --txt-dim:#9fb0c3; --txt-mute:#647387;
  --teal:#19b3c4; --teal-dim:#0f7f8c; --gold:#f5b301;
  --good:#5fd0a0; --bad:#ff7a7a;
  --c0:#1b3a4b; --c1:#2c6e7f; --c2:#f2cc4a; --c3:#ef8a3c; --c4:#d94b3b; --c5:#9e1f2f;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --disp:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans); color:var(--txt);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(25,179,196,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(245,179,1,.06), transparent 55%),
    var(--bg);
}
/* 100dvh = the actually-visible viewport on mobile (accounts for the URL bar),
   so the map view fits without the page scrolling; 100vh is the fallback. */
.shell{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:28px;
  padding:16px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,27,36,.9), rgba(13,17,23,.6));
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:conic-gradient(from 200deg,var(--teal),var(--gold),var(--teal));
  box-shadow:0 0 0 1px var(--line2),0 6px 18px rgba(25,179,196,.25);
}
.brand h1{font-family:var(--disp);font-weight:600;font-size:20px;margin:0;letter-spacing:.2px}
.sub{margin:2px 0 0;font-size:12px;color:var(--txt-mute);letter-spacing:.3px}

.kpis{display:flex;gap:26px}
.kpi{display:flex;flex-direction:column;align-items:flex-end}
.kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--txt-mute)}
.kpi-val{font-family:var(--mono);font-weight:600;font-size:22px;line-height:1.1;white-space:nowrap}
.kpi-val.accent{color:var(--teal)}
.kpi-val.muted{color:var(--txt-mute)}

.controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}
.seg{display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{
  background:transparent;border:0;color:var(--txt-dim);
  font-family:var(--sans);font-size:12.5px;padding:8px 13px;cursor:pointer;
  border-right:1px solid var(--line2);transition:.15s;
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.seg button.active{background:var(--teal);color:#04141a;font-weight:600}
.refresh{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);border-radius:9px;
  padding:8px 14px;font-family:var(--sans);font-size:12.5px;cursor:pointer;transition:.15s;
}
.refresh:hover{border-color:var(--teal);color:#fff}
.refresh .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.refresh.busy{opacity:.7;pointer-events:none}
.refresh.busy .dot{background:var(--teal);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ── Body ────────────────────────────────────────────────── */
.body{display:grid;grid-template-columns:380px 1fr;flex:1;min-height:0}

/* Navigator */
.nav{
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--line);background:var(--bg2);
}
.crumbs{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:13px 16px;font-size:12px;color:var(--txt-mute);border-bottom:1px solid var(--line);
}
.crumbs a{color:var(--teal);cursor:pointer;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .chev{color:var(--txt-mute)}
.search{padding:12px 16px 6px}
.search input{
  width:100%;background:var(--panel);border:1px solid var(--line2);
  color:var(--txt);border-radius:8px;padding:9px 12px;font-family:var(--sans);font-size:13px;
}
.search input:focus{outline:none;border-color:var(--teal)}
.list-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 18px 8px;font-size:11px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--txt-mute);
}
.list-head .cnt{font-family:var(--mono)}
.list{overflow-y:auto;flex:1;padding:0 8px 14px}
.row{
  position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:10px;padding:11px 12px;margin:3px 4px;border-radius:9px;
  cursor:pointer;border:1px solid transparent;transition:.12s;
}
.row:hover{background:var(--panel);border-color:var(--line)}
.row.sel{background:var(--panel2);border-color:var(--teal-dim)}
.row .bar{
  position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:linear-gradient(90deg, rgba(25,179,196,.16), rgba(25,179,196,.02));
  border-radius:9px;z-index:0;
}
.row > *{position:relative;z-index:1}
.r-name{font-size:13.5px;line-height:1.25}
.r-leaf{color:var(--txt-dim)}
.r-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.r-val{font-family:var(--mono);font-size:13.5px;font-weight:500}
.r-delta{font-family:var(--mono);font-size:10.5px}
.r-delta.up{color:var(--bad)} .r-delta.down{color:var(--good)} .r-delta.flat{color:var(--txt-mute)}
.empty{padding:30px 18px;color:var(--txt-mute);font-size:13px;text-align:center}

/* Map */
.view{position:relative;min-height:0}
.map-wrap{position:absolute;inset:0;min-height:0}
.stats-wrap{position:absolute;inset:0;overflow-y:auto;padding:20px 22px 28px}
#map{position:absolute;inset:0;background:#0a1018}
.leaflet-container{background:#0a1018;font-family:var(--sans)}
/* kill the browser focus outline (a big square around the shape's bounding box)
   that appears when clicking a region/district vector */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible{outline:none}
.leaflet-container svg path:focus{outline:none}
.leaflet-popup-content-wrapper{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:10px;box-shadow:var(--shadow);
}
.leaflet-popup-tip{background:var(--panel2);border:1px solid var(--line2)}
.leaflet-popup-content{margin:12px 14px;font-size:12.5px}
.pop-name{font-family:var(--disp);font-size:15px;margin-bottom:6px}
.pop-row{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:12px}
.pop-row span:last-child{color:var(--teal)}
.pop-cta{margin-top:8px;font-size:11px;color:var(--txt-mute)}
.pop-coords{display:inline-flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--teal);width:fit-content;transition:.12s}
.pop-coords:hover,.pop-coords:focus-visible{color:#fff;outline:none}
.pop-coords svg{flex:0 0 auto;opacity:.85}
.pop-coords .cc-val{user-select:all}
.pop-coords.copied{color:var(--good)}

.leaflet-tooltip.geo-tip{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:8px;font-size:12px;box-shadow:var(--shadow);padding:6px 9px;
}
.leaflet-tooltip.geo-tip b{font-family:var(--disp);font-weight:600}
.leaflet-tooltip.geo-tip:before{display:none}
/* full-stats hover tooltip (same content as the touch popup) */
.leaflet-tooltip.geo-tip.stats-tip{min-width:162px;padding:9px 11px}
.leaflet-tooltip.geo-tip .pop-name{font-family:var(--disp);font-size:14px;margin-bottom:5px}
.leaflet-tooltip.geo-tip .pop-row{gap:18px}
.leaflet-tooltip.geo-tip .pop-cta{margin-top:6px}

.layer-toggle{
  position:absolute;left:16px;top:16px;z-index:600;
  background:rgba(20,27,36,.92);backdrop-filter:blur(6px);
  border:1px solid var(--line2);
}
.layer-toggle button{font-size:12px;padding:7px 12px}

.legend{
  position:absolute;left:16px;bottom:16px;z-index:500;
  background:rgba(20,27,36,.92);border:1px solid var(--line2);border-radius:10px;
  padding:11px 13px;font-size:11px;color:var(--txt-dim);backdrop-filter:blur(6px);
}
.legend b{display:block;color:var(--txt);font-size:11px;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:7px;font-weight:600}
.legend .scale{display:flex;align-items:center;gap:0}
.legend .sw{width:26px;height:11px}
.legend .ticks{display:flex;justify-content:space-between;font-family:var(--mono);margin-top:3px}

.status{
  position:absolute;right:58px;bottom:18px;z-index:500;
  background:rgba(20,27,36,.92);border:1px solid var(--line2);border-radius:10px;
  padding:8px 13px;font-size:11.5px;color:var(--txt-dim);font-family:var(--mono);
  backdrop-filter:blur(6px);
}
.status .sep{margin:0 8px;color:var(--txt-mute)}

/* Contact pill: bottom-right, just above the status; same family of styling
   with a subtle accent. Sits left of the zoom control so nothing overlaps. */
.contact{
  position:absolute;right:58px;bottom:52px;z-index:500;
  background:rgba(20,27,36,.92);border:1px solid var(--line2);border-radius:10px;
  padding:7px 12px;font-size:11.5px;color:var(--txt-mute);
  backdrop-filter:blur(6px);white-space:nowrap;
}
.contact a{color:var(--teal);text-decoration:none;font-weight:500}
.contact a:hover{text-decoration:underline}
.contact .sep{margin:0 8px;color:var(--line2)}

/* JS adds .status-stacked on mobile/narrow (or when the status would touch the
   legend): everything along the bottom stacks vertically so nothing overlaps.
   Order from the bottom up: contact, status, legend / zoom above them. */
.status-stacked .contact{
  left:8px;right:8px;bottom:8px;text-align:center;font-size:11px;
}
.status-stacked .status{
  left:8px;right:8px;top:auto;bottom:48px;text-align:center;
  font-size:10.5px;line-height:1.35;padding:6px 9px;
}
.status-stacked .status .sep{margin:0 6px}
.status-stacked .legend{bottom:104px}
.status-stacked .leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-bottom:94px}

/* ── Loading states ──────────────────────────────────────── */
.spinner{
  width:30px;height:30px;border-radius:50%;
  border:3px solid var(--line2);border-top-color:var(--teal);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.map-loading,.panel-loading{
  position:absolute;inset:0;z-index:650;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--txt-dim);font-size:13px;text-align:center;padding:20px;
  background:rgba(10,16,24,.55);backdrop-filter:blur(2px);
}
.map-loading[hidden],.panel-loading[hidden]{display:none}
.list-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:46px 18px;color:var(--txt-mute);font-size:13px;
}
.list-loading .spinner{width:24px;height:24px}

/* ── Mobile navigator drawer ─────────────────────────────── */
.nav-toggle{
  display:none;align-items:center;gap:9px;flex:0 0 auto;height:38px;padding:0 12px;
  border-radius:9px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--txt-dim);cursor:pointer;font-family:var(--sans);font-size:12.5px;white-space:nowrap;
}
.nav-toggle .bars{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.nav-toggle .bars span{display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:.2s}
.nav-toggle:hover{color:var(--txt);border-color:var(--teal)}

/* drawer header (visible only when the nav is a drawer, i.e. on mobile) */
.nav-head{display:none;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.nav-head-title{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--txt)}
.nav-close{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt-dim);
  font-size:15px;line-height:1;transition:.15s;
}
.nav-close:hover{color:var(--txt);border-color:var(--teal)}

.nav-backdrop{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5)}
.nav-backdrop[hidden]{display:none}
@media (min-width:981px){.nav-backdrop{display:none}}   /* never on desktop */

@media (max-width:980px){
  /* top bar: stack and let title + KPIs shrink/scroll instead of clipping */
  .topbar{grid-template-columns:1fr;gap:12px;padding:12px 16px}
  .brand{gap:10px;min-width:0}
  .nav-toggle{display:flex}
  .brand-text{min-width:0}
  .brand h1{font-size:16px;line-height:1.25}
  .sub{font-size:11px}
  .kpis{gap:16px}
  .kpi{align-items:flex-start;flex:1 1 0;min-width:0}
  .kpi-val{font-size:18px;white-space:normal;word-break:keep-all;line-height:1.15}
  .controls{justify-content:flex-start;gap:8px}
  .controls .seg{flex:0 0 auto;max-width:100%}
  .refresh{flex:0 0 auto}

  /* body becomes a single pane; nav is an off-canvas drawer */
  .body{grid-template-columns:1fr;grid-template-rows:1fr}
  /* map view fills the visible area (static, no page scroll) but keeps a floor
     so it never collapses; on extremely short screens the page scrolls instead
     of the map disappearing */
  .view{min-height:260px}
  .nav{
    position:fixed;top:0;left:0;bottom:0;z-index:950;
    width:86%;max-width:340px;border-right:1px solid var(--line);
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow);
  }
  body.nav-open .nav{transform:none}
  .nav-head{display:flex}

  /* layer toggle stays top-left; status/legend collision handled by .status-stacked */
  .layer-toggle{left:10px;top:10px}
  .layer-toggle button{font-size:11px;padding:6px 9px}
  .legend{left:10px;padding:9px 10px}

  /* stats: header + segmented toggles wrap instead of being trimmed */
  .stats-wrap{padding:16px 14px 24px}
  .stats-head{flex-wrap:wrap;gap:10px}
  .stats-scope{font-size:16px;flex:1 1 100%}
  .diff-head{flex-wrap:wrap;gap:8px}
  .diff-title{flex:1 1 100%}
  .chart-box{height:240px}
}
@media (max-width:560px){
  .brand h1{font-size:15px}
  .sub{display:none}
  /* three KPIs share the row evenly; long numbers wrap to the next line
     (breakable spaces from fmtKpi) instead of forcing a horizontal scroll */
  .kpis{gap:10px;justify-content:space-between}
  .kpi{flex:1 1 0;min-width:0}
  .kpi-label{font-size:9px;letter-spacing:1px}
  .kpi-val{font-size:15px}
  .seg button{padding:7px 10px;font-size:12px}
  #period-toggle button{padding:6px 9px;font-size:11px}
  .stats-kpis .skpi{flex:1 1 130px;padding:11px 12px}
  .stats-kpis .sk-val{font-size:18px}
  .chart-card{padding:13px 12px 14px}
  .chart-box{height:210px}
}

/* ── Stats panel ─────────────────────────────────────────── */
.stats-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.stats-scope{font-family:var(--disp);font-size:18px;color:var(--txt);line-height:1.3}
.stats-kpis{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.stats-kpis .skpi{
  flex:1 1 150px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;
}
.stats-kpis .sk-label{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--txt-mute)}
.stats-kpis .sk-val{font-family:var(--mono);font-weight:600;font-size:22px;margin-top:4px}
.stats-kpis .sk-val.q{color:var(--teal)} .stats-kpis .sk-val.r{color:var(--gold)}
.stats-note{font-size:12.5px;color:var(--txt-mute);min-height:16px;margin-bottom:10px}
.chart-card{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:16px 18px 18px;margin-bottom:18px;box-shadow:var(--shadow);
}
.chart-card h3{
  font-family:var(--disp);font-weight:600;font-size:15px;margin:0 0 12px;
  display:flex;align-items:baseline;gap:10px;
}
.chart-card h3 .hint{font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--txt-mute)}
.chart-box{position:relative;height:300px}

/* difference card + chart chrome */
.diff-card{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 18px 16px;margin-bottom:18px;
}
.diff-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.diff-title{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--txt-mute)}
.diff-body{font-family:var(--mono);font-size:14px;color:var(--txt-dim);line-height:1.6}
.diff-body .big{font-size:20px;font-weight:600;color:var(--teal)}
.diff-body .up{color:var(--bad)} .diff-body .down{color:var(--good)} .diff-body .flat{color:var(--txt-mute)}
.diff-body .muted{color:var(--txt-mute)}
.diff-body .range{display:block;font-family:var(--sans);font-size:11.5px;color:var(--txt-mute);margin-top:4px}
#period-toggle button{padding:6px 11px;font-size:12px}

.chart-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chart-tools{display:flex;align-items:center;gap:8px}
.chart-tools #chartmode-toggle button{padding:5px 10px;font-size:11.5px}
.zoom-reset{
  background:var(--panel2);border:1px solid var(--line2);color:var(--txt-dim);
  border-radius:8px;padding:5px 10px;font-family:var(--sans);font-size:11.5px;cursor:pointer;
}
.zoom-reset:hover{border-color:var(--teal);color:#fff}
.chart-hint{font-size:11px;color:var(--txt-mute);margin:4px 0 10px}

/* range slider (noUiSlider, dark) */
.range-row{margin-top:14px}
#range-slider{height:8px;margin:6px 8px 2px}
.noUi-target{background:var(--panel2);border:1px solid var(--line2);box-shadow:none;border-radius:6px}
.noUi-connect{background:var(--teal)}
.noUi-handle{background:var(--txt);border:1px solid var(--line2);box-shadow:none;
  border-radius:5px;width:16px;height:16px;right:-8px;top:-5px;cursor:grab}
.noUi-handle:before,.noUi-handle:after{display:none}
.noUi-connects{border-radius:6px}
.range-label{font-family:var(--mono);font-size:11.5px;color:var(--txt-mute);text-align:center;margin-top:8px}

/* ── Screen-reader-only (crawlable but visually hidden) ──── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Crawlable SEO pages (/regions, /region/...) ─────────── */
.seo-body{height:auto;overflow:auto}
.seo-shell{max-width:920px;margin:0 auto;padding:22px 20px 56px;min-height:100vh;display:flex;flex-direction:column}
.seo-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.seo-brand{display:flex;align-items:center;gap:11px;color:var(--txt);text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:16px}
.seo-applink{color:var(--teal);text-decoration:none;font-size:13.5px;font-weight:500;
  border:1px solid var(--line2);border-radius:9px;padding:8px 13px;transition:.15s}
.seo-applink:hover{border-color:var(--teal);background:rgba(25,179,196,.08)}

.seo-crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;
  color:var(--txt-mute);margin-bottom:14px}
.seo-crumbs a{color:var(--teal);text-decoration:none}
.seo-crumbs a:hover{text-decoration:underline}
.seo-crumbs .sep{color:var(--txt-mute)}
.seo-crumbs .cur{color:var(--txt-dim)}

.seo-main{flex:1}
.seo-kicker{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--txt-mute);margin-bottom:6px}
.seo-main h1{font-family:var(--disp);font-weight:600;font-size:26px;line-height:1.25;margin:0 0 6px}
.seo-updated{font-family:var(--mono);font-size:12px;color:var(--txt-mute);margin:0 0 18px}

.seo-stats{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}
.seo-stat{
  flex:1 1 170px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
}
.seo-stat .l{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--txt-mute)}
.seo-stat .v{font-family:var(--mono);font-weight:600;font-size:24px}
.seo-stat .v.q{color:var(--teal)} .seo-stat .v.r{color:var(--gold)}

.seo-answer{
  font-size:16px;line-height:1.6;color:var(--txt);margin:0 0 18px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:11px;padding:14px 16px;
}
.seo-intro{font-size:15px;line-height:1.7;color:var(--txt-dim);margin:0 0 18px}

/* FAQ (accordion) - matches the FAQPage structured data */
.seo-faq{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.seo-faq h2{font-family:var(--disp);font-weight:600;font-size:18px;margin:0 0 12px}
.seo-faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:0 14px;margin-bottom:8px;
}
.seo-faq summary{
  cursor:pointer;list-style:none;padding:13px 0;font-size:14.5px;font-weight:500;
  color:var(--txt);display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";color:var(--teal);font-size:18px;line-height:1}
.seo-faq details[open] summary::after{content:"–"}
.seo-faq details p{margin:0 0 14px;font-size:14px;line-height:1.65;color:var(--txt-dim)}
.seo-cta{
  display:inline-block;background:var(--teal);color:#04141a;text-decoration:none;
  font-weight:600;font-size:14px;border-radius:10px;padding:11px 18px;margin-bottom:26px;
}
.seo-cta:hover{filter:brightness(1.08)}

.seo-children h2{font-family:var(--disp);font-weight:600;font-size:18px;margin:0 0 14px;
  display:flex;align-items:baseline;gap:10px}
.seo-children h2 .cnt{font-family:var(--mono);font-size:13px;color:var(--txt-mute)}
.seo-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.seo-list a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;text-decoration:none;color:var(--txt);transition:.12s;
}
.seo-list a:hover{border-color:var(--teal-dim);background:var(--panel2)}
.seo-list .n{font-size:13.5px;line-height:1.3}
.seo-list .t{font-family:var(--mono);font-size:13px;color:var(--teal)}
.seo-note{font-size:12.5px;color:var(--txt-mute);margin-top:12px}

.seo-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--txt-mute)}
.seo-foot-nav a{color:var(--teal);text-decoration:none;font-size:13px}
.seo-foot-nav .sep{margin:0 8px;color:var(--txt-mute)}
.seo-foot-note{font-size:12px;line-height:1.6;color:var(--txt-mute);margin:10px 0 0}

@media (max-width:560px){
  .seo-main h1{font-size:21px}
  .seo-list{grid-template-columns:1fr}
}

/* ── Language switcher ───────────────────────────────────── */
.lang-switch{display:flex;flex:0 0 auto;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.lang-switch a{padding:7px 10px;font-size:12px;color:var(--txt-dim);text-decoration:none;
  border-right:1px solid var(--line2);transition:.15s}
.lang-switch a:last-child{border-right:0}
.lang-switch a:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.lang-switch a.active{background:var(--teal);color:#04141a;font-weight:600}
.seo-top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ── Ranking table (hubs) ────────────────────────────────── */
.rank-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:13px}
.rank-table{width:100%;border-collapse:collapse;font-size:14px}
.rank-table th,.rank-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table th{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--txt-mute);font-weight:600}
.rank-table th.num,.rank-table td.num{text-align:right;font-family:var(--mono)}
.rank-table td.rk{color:var(--txt-mute);font-family:var(--mono);width:1%;text-align:center}
.rank-table td.q{color:var(--teal)} .rank-table td.r{color:var(--gold)}
.rank-table tbody tr:hover{background:var(--panel)}
.rank-table a{color:var(--txt);text-decoration:none}
.rank-table a:hover{color:var(--teal);text-decoration:underline}

/* ── "Land not allocated" (no-land big cities) ───────────── */
.seo-noland{
  display:inline-block;background:rgba(245,179,1,.10);border:1px solid var(--gold);
  color:var(--gold);border-radius:11px;padding:12px 18px;font-weight:600;
  font-size:15px;margin:0 0 18px;
}
.seo-answer.noland{color:var(--txt)}
.rank-table td.noland{color:var(--gold);text-align:left;font-style:italic;font-size:13px}
.rank-table tr.nl td{opacity:.85}

/* ── Stats panel restructure + "Show on map" ─────────────── */
.show-map-btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);border-radius:9px;padding:8px 13px;
  font-family:var(--sans);font-size:12.5px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.show-map-btn:hover{border-color:var(--teal);color:#fff}
.diff-head{justify-content:flex-start}
.chart-card-head{flex-wrap:wrap;gap:10px}
.chart-card-head h3{margin:0;margin-right:auto}

/* no-land statuses on map / list / stats / popups */
.r-noland{
  display:inline-block;max-width:118px;text-align:right;line-height:1.15;
  font-size:10px;font-weight:600;color:var(--gold);
}
.pop-addr{font-size:11px;color:var(--txt-mute);margin-bottom:6px;line-height:1.35}
.pop-noland{margin-top:4px;color:var(--gold);font-weight:600;font-size:12px}
.stats-noland{
  flex:1 1 100%;background:rgba(245,179,1,.10);border:1px solid var(--gold);
  color:var(--gold);border-radius:12px;padding:18px;text-align:center;
  font-weight:600;font-size:16px;
}
#stats-wrap.noland .chart-card{display:none}
.leaflet-tooltip.geo-tip.village{font-size:11px}

/* ── Village GPS-pin markers ─────────────────────────────── */
.vpin.leaflet-div-icon{background:transparent;border:0}
.vpin{transition:transform .12s ease;transform-origin:bottom center;cursor:pointer}
.vpin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.vpin:hover{transform:scale(1.5)}
.pop-approx{margin-top:7px;font-size:10px;color:var(--txt-mute);font-style:italic;line-height:1.3}

/* ── /regions list: keep value aligned when names wrap ───── */
.seo-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.seo-list a{align-items:center}
.seo-list .n{min-width:0;line-height:1.3}
.seo-list .t{flex:0 0 auto;white-space:nowrap;margin-left:auto;text-align:right}
.seo-list .t.noland{color:var(--gold);font-size:11px;white-space:normal;max-width:130px;font-weight:600}

/* ── Global-search results (path preview) ────────────────── */
.r-path{display:block;font-size:11px;color:var(--txt-mute);margin-top:2px;line-height:1.2}
.search-row .r-name{line-height:1.3}

/* ── Queue list view ─────────────────────────────────────── */
.queue-wrap{position:absolute;inset:0;overflow-y:auto;padding:20px 22px 28px}
.queue-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;align-items:center}
.q-input{background:var(--panel);border:1px solid var(--line2);color:var(--txt);
  border-radius:8px;padding:9px 12px;font-family:var(--sans);font-size:13px}
.q-input:focus{outline:none;border-color:var(--teal)}
#queue-search{flex:1 1 200px;min-width:0}
.q-num-input{width:160px;flex:0 0 auto}
.q-date-input{width:130px;flex:0 0 auto;text-align:center}
.queue-updated{font-size:11px;color:var(--txt-mute);margin-top:3px}
.q-allbtn{background:var(--panel2);border:1px solid var(--teal-dim);color:var(--teal);
  border-radius:8px;padding:9px 13px;font-family:var(--sans);font-size:12.5px;cursor:pointer;transition:.15s}
.q-allbtn:hover{border-color:var(--teal);color:#fff;background:var(--teal-dim)}
.queue-note{font-size:12.5px;color:var(--txt-mute);margin-bottom:10px;min-height:16px}
.queue-list{display:flex;flex-direction:column;gap:6px}
.q-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.q-num{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--txt-dim);
  min-width:34px;text-align:right}
.q-name{font-size:13.5px;line-height:1.3}
.q-meta{font-size:11px;color:var(--txt-mute);font-family:var(--mono);margin-top:2px}
.q-status{font-size:11px;white-space:nowrap;color:var(--txt-mute);text-align:right}
.q-status.q{color:var(--teal)} .q-status.r{color:var(--gold)}
.q-gps{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:0 0 auto;border:1px solid var(--line2);background:var(--panel2);color:var(--txt-dim);
  border-radius:8px;cursor:pointer;transition:.15s}
.q-gps:hover{border-color:var(--teal);color:var(--teal)}
.q-gps-empty{display:inline-block;width:30px;height:30px}
.queue-list.q-busy{opacity:.45;pointer-events:none;transition:opacity .12s}
.queue-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;
  font-family:var(--mono);font-size:13px;color:var(--txt-dim)}
.q-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line2);
  border-top-color:var(--teal);border-radius:50%;animation:qspin .7s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
.queue-pager button{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:16px;transition:.15s}
.queue-pager button:hover:not(:disabled){border-color:var(--teal);color:#fff}
.queue-pager button:disabled{opacity:.4;cursor:default}

/* ── Queue SEO page (how-to + steps + applink) ───────────── */
.seo-stats{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0}
.seo-stats .st{display:flex;flex-direction:column;gap:3px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 16px;min-width:130px}
.seo-stats .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt-mute)}
.seo-stats .val{font-family:var(--mono);font-size:20px;font-weight:600}
.seo-stats .val.q{color:var(--teal)} .seo-stats .val.r{color:var(--gold)}
.seo-how{margin:22px 0}
.seo-steps{margin:10px 0 0;padding-left:20px;line-height:1.65}
.seo-steps li{margin:6px 0;color:var(--txt-dim)}
.seo-updated{font-size:12.5px;color:var(--txt-mute);margin-left:10px}
.seo-applink.inline{display:inline-block}