/* bch2.org — network map page, v4.
   v4: the loading and error messages moved out of ::after and into a real element, because
   CSS content can carry no data-i18n and so could never be translated.
   v3: rearranged after the listening-node table was removed. Stats run full width at the top,
   the globe and the country list sit side by side, and the explanatory notes close the section
   underneath. v2 left the country list in an orphan row below the globe, which emptied the
   whole right half of the page. Uses the site tokens from bch2.v1.css; the globe panel is a
   dark surface because a lit globe on paper reads as a clipart sticker.
   Served immutable: copy to nodes.v2.css to change it after deploy. */

.nmap {
  background: var(--ink);
  color: var(--on-dark);
  padding: 34px 0 40px;
}
.nmap a { color: var(--bright); }

.nmap__grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 30px;
}
/* The list is capped to roughly the globe's height so the two columns end together instead of
   one running far past the other. */
.nmap__side .nmap__scroll { max-height: 520px; }
/* Beside the globe the list is wide, and an auto-sized name column pushes the counts far from
   the names. Fixing the proportions keeps number and label together. */
.nmap__side th:first-child, .nmap__side td:first-child { width: 42%; }
.nmap__side th:nth-child(2), .nmap__side td:nth-child(2) { width: 14%; padding-right: 18px; }
.nmap__side .barcell { width: 44%; }
.nmap__notes {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-on-dark);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .nmap__notes { grid-template-columns: 1fr 1fr; gap: 34px; } }
.nmap__notes .nmap__note { margin: 0; }

/* Globe ---------------------------------------------------------------------------------- */

#globe-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
}
#globe {
  display: block;
  touch-action: none;           /* drag rotates the globe rather than scrolling the page */
  cursor: grab;
}
#globe:active { cursor: grabbing; }

#globe-status {
  position: absolute;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-align: center;
  max-width: 90%;
}
/* Empty once the globe has drawn; the script clears it. */
#globe-status:empty { display: none; }
#globe-shell[data-error] #globe-status { color: #d08a3a; }

.nmap__ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.nmap__ctl label { display: flex; align-items: center; gap: 8px; }
.nmap__ctl input[type="range"] { width: 112px; accent-color: #0ac18e; }
.nmap__ctl button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--on-dark);
  background: none;
  border: 1px solid var(--rule-on-dark);
  padding: 6px 12px;
  cursor: pointer;
}
.nmap__ctl button:hover { border-color: var(--bright); color: var(--bright); }
.nmap__ctl button:focus-visible,
.nmap__ctl input:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }

#globe-tip {
  position: fixed;
  z-index: 50;
  max-width: 340px;
  padding: 8px 11px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  pointer-events: none;
}

/* Legend + stats -------------------------------------------------------------------------- */

.nmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--on-dark-muted);
}
.nmap__legend li { display: flex; align-items: center; gap: 8px; }
.nmap__legend i {
  width: 9px; height: 9px; border-radius: 50%; flex: none; font-style: normal;
}
.lg-up { background: #0ac18e; box-shadow: 0 0 0 4px rgba(10,193,142,.2); }
.lg-stale { border: 1.5px solid #d08a3a; }
.lg-home { background: #4a9fd8; }

.nmap__stats {
  display: grid;
  /* Full width at the top of the section: six across on a desktop, falling to three then two. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-on-dark);
  border: 1px solid var(--rule-on-dark);
  margin-bottom: 22px;
}
.nmap__stat { background: var(--ink); padding: 14px 16px; }
.nmap__stat b {
  display: block;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.nmap__stat span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.nmap__stat b[data-stale] { color: #d08a3a; }

.nmap__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 62ch;
  margin: 0 0 22px;
}

/* Tables ---------------------------------------------------------------------------------- */

.nmap__tables { margin-top: 36px; display: grid; gap: 34px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) { .nmap__tables { grid-template-columns: 1fr 1.35fr; } }
/* One table left: a 40-row country list stretched edge to edge reads as a spreadsheet, so it
   keeps a column's width instead of filling the row. */


.nmap h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-on-dark);
}
.nmap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nmap th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding: 0 10px 8px 0;
}
.nmap td { padding: 7px 10px 7px 0; border-top: 1px solid rgba(248,249,246,.10); }
.nmap .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nmap .barcell { width: 32%; }
.nmap .bar { display: block; height: 5px; background: #0ac18e; opacity: .55; }
.nmap .st {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px;
}
.st--up { background: #0ac18e; }
.st--stale { border: 1.5px solid #d08a3a; }
.nmap__scroll { max-height: 460px; overflow: auto; }

@media (max-width: 1080px) { .nmap__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .nmap__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .nmap__side .nmap__scroll { max-height: 380px; }
  .hide-sm { display: none; }
}
@media (max-width: 440px) {
  .nmap__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nmap__stat b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  #globe { cursor: default; }
}