*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f1623;color:#e0e0e0;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

header{background:#1e3a2f;padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0;border-bottom:1px solid #0d2318}
header h1{font-size:1.05rem;color:#fff;font-weight:700;flex-shrink:0}
header a.dir-link{color:#a8d8ea;font-size:.82rem;text-decoration:none;white-space:nowrap;flex-shrink:0}
header a.dir-link:hover{text-decoration:underline}

.map-nav{display:flex;gap:4px;flex-shrink:0}
/* #7a8fa8 passes on the dark sidebar but only reaches 3.7:1 on the header's
   lighter green, so the inactive switcher link is lightened just here */
.map-nav-btn{color:#8ca0b8;font-size:.82rem;text-decoration:none;padding:.3rem .65rem;border-radius:6px;border:1px solid #1e2a42;white-space:nowrap;transition:background .12s,color .12s}
.map-nav-btn:hover{background:#1a2540;color:#c0d0e0}
.map-nav-btn.active{background:#162038;border-color:#3a6aaa;color:#d0e4f8}
.drawer-nav{display:flex;gap:6px;margin-bottom:.3rem}
.drawer-nav .map-nav-btn{flex:1;text-align:center}

.search-wrap{flex:1;position:relative;min-width:0}
#search-input{width:100%;background:#0d1c2e;border:1px solid #2a3a5a;border-radius:7px;padding:.38rem .75rem;color:#c0d8f0;font-size:.83rem;outline:none;transition:border-color .15s}
#search-input::placeholder{color:#6e88a2}
#search-input:focus{border-color:#3a6aaa}
#search-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#111827;border:1px solid #2a3a5a;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.7);z-index:100;display:none;max-height:280px;overflow-y:auto}
.s-result{padding:.5rem .75rem;cursor:pointer;display:flex;align-items:baseline;gap:.5rem;font-size:.83rem}
.s-result:hover{background:#1a2540}
.s-type{font-size:.68rem;color:#6e88a2;white-space:nowrap;flex-shrink:0;min-width:70px}
.s-name{color:#c0d8f0;min-width:0}

.layout{display:flex;flex:1;overflow:hidden;position:relative}

.sidebar{width:220px;flex-shrink:0;background:#111827;border-right:1px solid #1e2a42;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}
.sec-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#7a8aa0;padding:.6rem 0 .3rem}
.sec-label:first-child{padding-top:0}
.sec-label-notop{padding-top:0}
.layer-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .8rem;border-radius:7px;border:1px solid #1e2a42;cursor:pointer;background:#151e30;color:#7a8fa8;font-size:.84rem;text-align:left;transition:background .12s,color .12s,border-color .12s;user-select:none;line-height:1.3}
.layer-btn:hover{background:#1a2540;color:#c0d0e0}
.layer-btn.active{border-color:#3a6aaa;color:#d0e4f8;background:#162038}
.layer-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.sidebar-hint{margin-top:auto;padding-top:1rem;font-size:.75rem;color:#6a8898;line-height:1.55}
.mobile-hint{display:none}

.map-wrap{flex:1;position:relative;overflow:hidden;background:#0c111e;touch-action:none}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map:active{cursor:grabbing}
.country-base{fill:#111926;stroke:#1e2a42;stroke-width:.3;cursor:pointer}
.country-base:hover{fill:#151e2e}
.country-member{pointer-events:none}
.intl-dot{pointer-events:none}
.intl-hit{fill:transparent;cursor:pointer}

#tooltip{position:absolute;pointer-events:none;background:#0d1420;border:1px solid #2a3a5a;border-radius:8px;padding:.65rem .9rem;max-width:240px;font-size:.81rem;box-shadow:0 4px 20px rgba(0,0,0,.7);display:none;z-index:30}
.tt-label{font-size:.68rem;color:#7a90a8;margin-bottom:.3rem}
.tt-name{color:#c0d8f0;font-weight:600}
.tt-type{font-size:.68rem;color:#7a90a8}
.tt-more{margin-top:.3rem;font-size:.7rem;color:#6e88a2;font-style:italic}

#panel{position:absolute;right:.9rem;top:.9rem;width:285px;max-height:calc(100% - 1.8rem);overflow-y:auto;background:#111827;border:1px solid #2a3a5a;border-radius:10px;padding:1rem 1.1rem;font-size:.84rem;box-shadow:0 4px 28px rgba(0,0,0,.7);display:none;z-index:20}
#panel-close{float:right;cursor:pointer;color:#6a8898;font-size:1.3rem;line-height:.9;padding:0 0 .5rem .5rem;background:none;border:none}
#panel-close:hover{color:#a0b8d0}
#permalink-btn{float:right;cursor:pointer;background:none;border:none;color:#7a8a9a;font-size:1rem;line-height:.9;padding:0 0 .5rem .4rem;margin-top:.05rem;transition:color .12s}
#permalink-btn:hover{color:#80b8d8}
.info-country{font-size:1rem;font-weight:700;color:#a8d8ea;margin-bottom:.6rem}
.info-org{margin-bottom:1rem}
.info-org+.info-org{border-top:1px solid #1e2a42;padding-top:1rem}
.info-type{font-size:.68rem;color:#7a90a8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.info-name{font-weight:700;color:#c8dff2;margin-bottom:.45rem;font-size:.92rem}
.info-row{margin-bottom:.28rem}
.info-row dt{display:inline;font-weight:600;color:#7a90a8;font-size:.78rem}
.info-row dt::after{content:": "}
.info-row dd{display:inline;font-size:.82rem}
.info-row a{color:#64b5f6;text-decoration:none}
.info-row a:hover{text-decoration:underline}
.info-link-btn{display:block;margin-top:.6rem;padding:.4rem .75rem;background:#0d1c30;border:1px solid #2a5080;border-radius:6px;color:#64b5f6;font-size:.8rem;text-decoration:none;text-align:center;transition:background .12s,border-color .12s}
.info-link-btn:hover{background:#112040;border-color:#4080b0;color:#90c8f8}
.info-notes{margin-top:.45rem;font-size:.76rem;color:#7a90a8;font-style:italic;border-top:1px solid #1a2438;padding-top:.45rem}
.info-empty{font-size:.82rem;color:#7a90a8;font-style:italic}

/* positioned against .layout, so the offset clears the sidebar's 220px */
#legend{position:absolute;bottom:1rem;left:calc(220px + 1rem);background:rgba(13,20,32,.93);border:1px solid #1e2a42;border-radius:8px;padding:.6rem .85rem;font-size:.75rem;z-index:10}
.leg-row{display:flex;align-items:center;gap:.5rem;color:#7a8fa8;margin-bottom:.25rem}
.leg-row:last-child{margin-bottom:0}
.leg-swatch{width:14px;height:10px;border-radius:2px;flex-shrink:0}
.leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* legend item colors */
#leg-members .leg-swatch{background:#1a4a3a;border:1px solid #2a7a5a}
#leg-intl .leg-dot{background:#f0c040;border:1px solid #90780a}

/* layer swatch colors */
.swatch-members{background:#1a4a3a}
.swatch-intl{background:#f0c040;border:1px solid #90780a;border-radius:50%}

#zoom-ctrl{position:absolute;top:.9rem;left:.9rem;display:flex;flex-direction:column;gap:3px;z-index:10}
.zoom-btn{width:40px;height:40px;background:rgba(13,20,32,.93);border:1px solid #1e2a42;border-radius:6px;color:#7a8fa8;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .12s,color .12s}
.zoom-btn:hover{background:#1a2540;color:#c0d0e0}
.zoom-btn.reset{font-size:.7rem;font-weight:700}
.zoom-btn:focus-visible,.map-nav-btn:focus-visible,.layer-btn:focus-visible{outline:2px solid #64b5f6;outline-offset:2px}
.s-result.focused{background:#1a2540}

#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6e88a2;font-size:.9rem;pointer-events:none}

#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(2rem);background:rgba(13,20,32,.97);border:1px solid #2a5080;border-radius:20px;padding:.45rem 1.2rem;font-size:.8rem;color:#a0c8e8;pointer-events:none;z-index:200;opacity:0;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#mob-fab{display:none;position:fixed;bottom:1.25rem;right:1rem;z-index:50;background:#1e3a2f;color:#a8d8ea;border:1px solid #2d6b3a;border-radius:24px;padding:.65rem 1.1rem;font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:0 3px 16px rgba(0,0,0,.5);align-items:center;gap:.4rem}
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
#mob-overlay.show{display:block}
.bottom-panel{position:fixed;bottom:0;left:0;right:0;background:#111827;border-top:1px solid #2a3a5a;border-radius:16px 16px 0 0;padding:0 1rem 1.5rem;z-index:70;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:none}
.bottom-panel.open{transform:translateY(0)}
.drawer-handle{width:40px;height:4px;background:#2a3a5a;border-radius:2px;margin:.75rem auto .8rem}
#mob-drawer{max-height:55vh;overflow-y:auto;padding-bottom:2rem}
#mob-sheet{max-height:72vh;overflow-y:auto;padding-bottom:2.5rem}
#mob-sheet-close{float:right;cursor:pointer;color:#6a8898;font-size:1.3rem;line-height:.9;padding:0 0 .5rem .5rem;margin-top:.1rem;background:none;border:none}
#mob-sheet-close:hover{color:#a0b8d0}

@media(max-width:768px){
  .sidebar{display:none}
  #mob-fab{display:flex}
  .bottom-panel{display:block}
  #panel{display:none!important}
  #tooltip{display:none!important}
  #legend{bottom:4.5rem;left:1rem;font-size:.71rem} /* sidebar is hidden here */
  #zoom-ctrl{top:.6rem;left:.6rem}
  header{flex-wrap:wrap;row-gap:.45rem}
  header h1{font-size:.9rem;flex:1}
  .search-wrap{flex:1 1 100%;order:5}
  #search-input{font-size:16px} /* below 16px iOS zooms the page on focus */
  .map-nav{display:none}
}
/* Portrait phones: see the matching note in map.css. The world map is a wider
   shape (roughly 2:1), so its height floor is width*0.518 before the fit flips
   to height-constrained. */
@media(max-width:768px) and (orientation:portrait){
  .layout{flex-direction:column;overflow-y:auto}
  .map-wrap{flex:0 0 auto;height:min(64vw,50dvh)}
  /* the legend leaves the map and stacks underneath it; flex-shrink:0 stops a
     short phone's overflow from squashing it (see the note in map.css) */
  #legend{position:static;align-self:flex-start;flex-shrink:0;margin:.85rem 1.15rem 0;max-height:none}
  /* a horizontal row in the empty ocean at the map's bottom-right, matching map.css */
  #zoom-ctrl{top:auto;bottom:.5rem;left:auto;right:.5rem;flex-direction:row}
  .zoom-btn{width:36px;height:36px}
  /* deep bottom padding keeps the last line clear of the floating Layers button */
  .mobile-hint{display:block;flex-shrink:0;padding:.9rem 1.15rem 5.5rem;font-size:.8rem;color:#8aa4b8;line-height:1.6}
  .mobile-hint strong{color:#a8d8ea;font-weight:600;white-space:nowrap}
}
@media(hover:none){#tooltip{display:none!important}}