:root{
  --ink:#171412;
  --muted:#5f5752;
  --paper:#fbfaf7;
  --panel:rgba(255,255,255,.86);
  --panel-strong:rgba(255,255,255,.96);
  --line:rgba(38,31,28,.14);
  --shadow:0 22px 70px rgba(32,27,24,.16);
  --shadow-strong:0 30px 90px rgba(24,18,17,.28);
  --purple:#7b3294;
  --green:#008837;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#ede9e2;
  overflow:hidden;
}
button,input,select,summary{font:inherit}
button{cursor:pointer}
.skip-link{
  position:absolute;left:-999px;top:.75rem;z-index:2000;background:#fff;
  padding:.65rem 1rem;border:2px solid #111;border-radius:999px;
}
.skip-link:focus{left:.75rem}
.map-stage{position:relative;width:100%;height:100%;overflow:hidden}

.masthead{
  position:absolute;top:0;left:0;right:0;z-index:500;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1rem 1.15rem .5rem;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(251,250,247,.92),rgba(251,250,247,.62) 62%,rgba(251,250,247,0));
}
.masthead>*{pointer-events:auto}
.eyebrow{
  margin:0 0 .18rem;
  font-size:.64rem;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:#6e596f;
  font-weight:850;
}
.masthead h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,3.15vw,3.45rem);
  line-height:.93;
  letter-spacing:-.045em;
  max-width:840px;
}
.subtitle{margin:.28rem 0 0;color:#514a45;font-size:clamp(.84rem,1.2vw,1.02rem)}
.top-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip-btn,.primary-btn,.legend-toggle,.view-btn,.mini-close,.close-btn{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#211c1a;
  padding:.54rem .74rem;
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 10px 30px rgba(44,36,31,.08);
  backdrop-filter:blur(16px);
}
.chip-btn:hover,.legend-toggle:hover,.view-btn:hover{background:#fff;transform:translateY(-1px)}
.primary-btn{
  width:100%;
  background:#241c25;
  border-color:#241c25;
  color:#fff;
  padding:.62rem .72rem;
}
.primary-btn:hover{background:#111}

#mapSvg{
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#f8f6f0 0%,#eeeae3 64%,#e2ddd4 100%);
}
.sphere{
  fill:#f7f3ea;
  stroke:#b8aea4;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.graticule{
  fill:none;
  stroke:#c9c1b7;
  stroke-width:.42;
  stroke-opacity:.46;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.country{
  stroke:#4d4742;
  stroke-width:.38;
  stroke-opacity:.62;
  cursor:pointer;
  transition:opacity .18s ease,filter .18s ease,stroke .18s ease;
  vector-effect:non-scaling-stroke;
}
.country:hover,.country:focus{
  stroke:#111;
  stroke-width:1.5;
  stroke-opacity:.95;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
  outline:none;
}
.country.dimmed{opacity:.12}
.country.hidden-by-filter{opacity:.075;pointer-events:none}
.selected{stroke:#000!important;stroke-width:2.1!important;stroke-opacity:1!important}
.hatch-overlay{
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
}
.hatch-overlay.hidden-by-filter{opacity:.05}
.country-label{
  font-size:8.6px;
  font-weight:760;
  paint-order:stroke;
  stroke:#fffdf9;
  stroke-width:3px;
  stroke-linejoin:round;
  fill:#4d4640;
  pointer-events:none;
  opacity:.82;
}
.map-instruction{
  position:absolute;
  left:50%;
  top:6.15rem;
  transform:translateX(-50%);
  z-index:180;
  padding:.45rem .7rem;
  border:1px solid rgba(36,28,25,.12);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  color:#5a514c;
  font-size:.78rem;
  font-weight:760;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(40,32,28,.06);
  pointer-events:none;
}

.loading{
  position:absolute;z-index:1200;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--panel-strong);
  padding:1rem 1.2rem;border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  font-weight:850;
}

/* Compact exploration control */
.explore-panel{
  position:absolute;
  top:5.2rem;
  right:1rem;
  z-index:450;
  width:min(285px,calc(100vw - 2rem));
  display:grid;
  gap:.48rem;
  padding:.62rem;
  background:rgba(255,255,255,.76);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.explore-panel label{
  display:grid;gap:.24rem;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.105em;
  font-weight:900;
  color:#6c625c;
}
.explore-panel input,.explore-panel select{
  width:100%;
  border:1px solid #d8d1c8;
  border-radius:14px;
  padding:.58rem .68rem;
  background:rgba(255,255,255,.92);
  color:#24201f;
  font-size:.86rem;
  text-transform:none;
  letter-spacing:0;
}
.filter-details{
  border:1px solid rgba(38,31,28,.12);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.48);
}
.filter-details summary{
  list-style:none;
  padding:.55rem .68rem;
  font-size:.78rem;
  font-weight:850;
  color:#2c2522;
}
.filter-details summary::-webkit-details-marker{display:none}
.filter-details summary:after{content:"Tune the bureaucracy";float:right;color:#7b7170;font-size:.72rem;font-weight:700}
.filter-details[open]{
  padding:.5rem;
}
.filter-details[open] summary{
  margin:-.5rem -.5rem .46rem;
  border-bottom:1px solid rgba(38,31,28,.10);
}
.filter-details[open] summary:after{content:"Hide"}
.filter-details label{margin:.48rem 0}
.search-results{
  display:none;
  max-height:220px;
  overflow:auto;
  background:#fff;
  border:1px solid #ded8d0;
  border-radius:16px;
  box-shadow:0 16px 45px rgba(24,18,16,.14);
}
.search-results.active{display:block}
.search-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  text-align:left;
  background:#fff;
  border:0;
  border-bottom:1px solid #eee8e0;
  padding:.62rem .72rem;
  color:#1e1a17;
  cursor:pointer;
  font-size:.86rem;
}
.search-item:hover,.search-item:focus{background:#f7f3ef;outline:none}
.search-item span{color:#776d66}

/* Intro drawer: closed by default and visibly separate from the map */
.narrative-drawer{
  position:absolute;
  z-index:520;
  left:1rem;
  top:5.2rem;
  width:min(350px,calc(100vw - 2rem));
  max-height:calc(100vh - 7rem);
  overflow:auto;
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(18px);
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
  transition:transform .26s ease,opacity .22s ease;
}
.narrative-drawer.collapsed{
  transform:translateX(-108%);
  opacity:0;
  pointer-events:none;
}
.drawer-topline,.panel-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.7rem;
  padding:.75rem .85rem;
  border-bottom:1px solid rgba(38,31,28,.1);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:900;
  color:#655a54;
}
.mini-close{
  width:1.8rem;height:1.8rem;padding:0;font-size:1.15rem;line-height:1;
  display:grid;place-items:center;background:#f8f5f1;
}
.drawer-content{padding:1rem}
.drawer-content h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.4rem;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 .45rem;
}
.drawer-content p{
  font-size:.92rem;
  line-height:1.48;
  color:#403a36;
  margin:.65rem 0;
}
.drawer-content .lede{font-size:1.02rem;color:#211d1a}
.fine-print{
  border-top:1px dashed #c7bfb8;
  padding-top:.75rem;
}
.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.45rem;
  margin-top:.8rem;
}
.stat{
  background:#f4f0eb;
  border:1px solid #ece3dc;
  border-radius:16px;
  padding:.58rem .5rem;
}
.stat b{display:block;font-size:1.18rem;letter-spacing:-.04em}
.stat span{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:#6c625c;font-weight:840}

/* Legend */
.legend{
  position:absolute;
  z-index:430;
  left:1rem;
  bottom:1.15rem;
  width:min(300px,calc(100vw - 2rem));
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:22px;
  padding:.56rem;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.legend.collapsed{
  width:auto;
  padding:.4rem;
}
.legend.collapsed .legend-content{display:none}
.legend-toggle{padding:.5rem .7rem}
.legend h2{
  margin:.4rem 0 .18rem;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;
  letter-spacing:-.025em;
}
.legend p,.legend-note{font-size:.76rem;line-height:1.32;color:#554d48}
.legend-row{
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:.5rem;
  align-items:center;
  padding:.35rem 0;
  border-top:1px solid #eee8e0;
}
.swatch{height:18px;border-radius:6px;border:1px solid rgba(0,0,0,.16)}
.swatch.hatched{background:repeating-linear-gradient(45deg,rgba(217,217,217,.7) 0,rgba(217,217,217,.7) 4px,rgba(105,105,105,.35) 4px,rgba(105,105,105,.35) 6px)}
.legend-label{font-size:.76rem;font-weight:840;line-height:1.05}
.legend-range{font-size:.68rem;color:#6b625d;font-variant-numeric:tabular-nums}

/* Floating analytical view buttons */
.view-switcher{
  position:absolute;
  right:1rem;
  bottom:1.15rem;
  z-index:430;
  display:flex;
  gap:.45rem;
  padding:.38rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.view-btn{padding:.52rem .72rem}

/* High-priority info surfaces */
.tooltip{
  position:absolute;
  z-index:980;
  display:none;
  max-width:305px;
  background:#211b22;
  color:#fff;
  padding:.78rem .9rem;
  border-radius:17px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  font-size:.84rem;
  pointer-events:none;
}
.tooltip b{display:block;font-size:1rem;margin-bottom:.24rem}
.tooltip div{margin:.12rem 0;color:#f0ece8}

.detail-panel{
  position:absolute;
  z-index:950;
  right:1rem;
  top:5.2rem;
  bottom:1rem;
  width:min(405px,calc(100vw - 2rem));
  overflow:auto;
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:26px;
  padding:1rem;
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(18px);
  transform:translateX(112%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.detail-panel.open{transform:translateX(0)}
.close-btn{
  float:right;
  width:2.05rem;
  height:2.05rem;
  padding:0;
  font-size:1.2rem;
  line-height:1;
  display:grid;
  place-items:center;
  background:#fff;
}
.panel-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
  line-height:.98;
  letter-spacing:-.035em;
  margin:.85rem 2.3rem .3rem 0;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  border-radius:999px;
  background:#f0e7f4;
  color:#4c225e;
  padding:.34rem .58rem;
  font-size:.72rem;
  font-weight:860;
}
.panel-section{
  border-top:1px solid #e6ded6;
  margin-top:1rem;
  padding-top:.85rem;
}
.panel-section h3{
  margin:0 0 .48rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.105em;
  color:#5d5450;
}
.panel-section p{
  color:#403a36;
  font-size:.93rem;
  line-height:1.5;
}
.field-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.75rem;
  align-items:baseline;
  padding:.32rem 0;
  font-size:.88rem;
  border-bottom:1px solid rgba(39,31,28,.055);
}
.field-row span:first-child{color:#6a615b}
.field-row strong{text-align:right;font-variant-numeric:tabular-nums}
.joke{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.06rem;
  line-height:1.36;
  color:#32272f;
  background:linear-gradient(90deg,#f6eef8,#fbf8f5);
  border-left:4px solid var(--purple);
  border-radius:15px;
  padding:.82rem;
  margin:.85rem 0;
}

.analysis-panel{
  position:absolute;
  z-index:860;
  right:1rem;
  bottom:4.3rem;
  width:min(390px,calc(100vw - 2rem));
  max-height:min(440px,calc(100vh - 8rem));
  overflow:auto;
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(18px);
  padding:0 .9rem .9rem;
  transform:translateY(16px);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease,opacity .22s ease;
}
.analysis-panel.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.analysis-panel p{font-size:.82rem;color:#544c47;margin:.8rem .05rem}
#scatterSvg{width:100%;height:250px;display:block}
.dot{cursor:pointer;stroke:#fff;stroke-width:.8;opacity:.85}
.dot:hover{stroke:#111;stroke-width:1.2;opacity:1}
.axis text{font-size:10px;fill:#5b544f}
.axis path,.axis line{stroke:#b9b0a8}
.axis-label{font-size:11px;font-weight:850;fill:#3f3834}
.leaderboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}
.leaderboard-grid h3{
  margin:.8rem 0 .35rem;
  font-size:.76rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.rank-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.6rem;
  border-top:1px solid rgba(38,31,28,.09);
  padding:.42rem 0;
  font-size:.78rem;
}
.rank-row button{
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  font-weight:800;
  color:#211c1a;
}
.rank-row button:hover{text-decoration:underline}
.rank-row strong{font-variant-numeric:tabular-nums}

dialog{
  z-index:1100;
  border:0;
  border-radius:28px;
  max-width:min(720px,calc(100vw - 2rem));
  max-height:min(78vh,700px);
  padding:1.25rem;
  background:var(--panel-strong);
  box-shadow:0 34px 100px rgba(0,0,0,.42);
}
dialog::backdrop{background:rgba(20,16,14,.45);backdrop-filter:blur(3px)}
dialog h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.7rem;
  letter-spacing:-.035em;
  margin:.4rem 2.2rem .75rem 0;
}
.modal-body-text{line-height:1.58;color:#403a36}
.modal-body-text a{color:#4b1664;font-weight:800}

.credit{
  position:absolute;
  z-index:220;
  right:.85rem;
  bottom:.38rem;
  max-width:calc(100vw - 2rem);
  font-size:.66rem;
  color:#6b625d;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(38,31,28,.08);
  border-radius:999px;
  padding:.25rem .5rem;
  backdrop-filter:blur(10px);
}

/* Mobile: the map remains the hero, panels become sheets */
@media(max-width:920px){
  .masthead{padding:.78rem .78rem .4rem}
  .masthead h1{font-size:1.45rem;max-width:68vw}
  .eyebrow,.subtitle{display:none}
  .top-actions{gap:.28rem}
  .chip-btn{font-size:.74rem;padding:.44rem .56rem}
  .map-instruction{display:none}
  .explore-panel{
    top:4rem;
    left:.75rem;
    right:.75rem;
    width:auto;
    grid-template-columns:1fr auto;
  }
  .filter-details,.primary-btn{grid-column:1/-1}
  .narrative-drawer{
    left:.75rem;
    right:.75rem;
    top:4rem;
    width:auto;
    max-height:70vh;
  }
  .legend{left:.75rem;bottom:.85rem}
  .view-switcher{right:.75rem;bottom:.85rem}
  .analysis-panel{
    left:.75rem;
    right:.75rem;
    bottom:4rem;
    width:auto;
  }
  .detail-panel{
    top:auto;
    left:.75rem;
    right:.75rem;
    bottom:.75rem;
    width:auto;
    max-height:70vh;
    border-radius:24px;
  }
  .credit{display:none}
}
@media(max-width:560px){
  .top-actions .chip-btn:nth-child(2){display:none}
  .explore-panel{grid-template-columns:1fr;top:3.6rem}
  .legend:not(.collapsed){
    width:calc(100vw - 1.5rem);
  }
  .view-switcher{
    left:.75rem;
    right:auto;
  }
  .leaderboard-grid{grid-template-columns:1fr}
}