/* /countries: the list window on the left, the globe on the right.
   Two colors only, like the rest of the site: --fg on --bg. */

.countries-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  max-width: 1180px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  /* Same padding top and bottom (the top one clears the nav words), so the list window
     and the globe sit at the true middle of the screen. */
  padding: calc(var(--cell-h) * 6) 32px;
}

.countries-side { min-width: 0; }

.countries-scroll {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  padding: 6px 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--fg) var(--bg);
}

.countries-group {
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.countries-scroll ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.countries-scroll li { padding: 2px 0; }

.countries-scroll li.sub { padding-left: 2ch; }
.countries-scroll li.sub a::before { content: "\21B3\00a0"; }

.countries-scroll a {
  position: relative;
  display: inline-block;
  color: var(--fg);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Same underline as the nav words: draws in from the left, slides out to the right. */
.countries-scroll a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.24s ease-out;
}

.countries-scroll a:hover::after,
.countries-scroll a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.countries-scroll a:focus { outline: none; }

/* The country lit up on the globe right now: inverted, like a selected menu item. */
.countries-scroll a.is-current {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 0 0 3px var(--fg);
}

.countries-scroll a.is-current::after { transform: scaleX(0); }

.countries-window .statusbar { padding-right: 20px; }

.globe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

#globe {
  display: block;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  cursor: grab;
  /* Vertical swipes still scroll the page on phones; sideways ones spin the globe. */
  touch-action: pan-y;
}

#globe.is-dragging { cursor: grabbing; }

.globe-readout {
  min-height: 1.4em;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-shadow: var(--glow), 0 0 3px var(--bg), 0 0 12px var(--bg);
}

/* Side by side, the list is centered together with its heading, and the globe together
   with its caption. Neither is ever taller than the room between the paddings, so both can
   always sit centered. The list loses 116px: its heading (32px) plus the window's title bar,
   status bar and borders (84px); the globe loses 33px for its caption and the gap above it. */
@media (min-width: 761px) {
  .countries-scroll {
    max-height: min(560px, calc(100vh - var(--cell-h) * 12 - 116px));
    max-height: min(560px, calc(100svh - var(--cell-h) * 12 - 116px));
  }

  #globe {
    max-width: clamp(240px, calc(100vh - var(--cell-h) * 12 - 33px), 620px);
    max-width: clamp(240px, calc(100svh - var(--cell-h) * 12 - 33px), 620px);
  }
}

@media (max-width: 760px) {
  .countries-stage {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: calc(var(--cell-h) * 5) 16px 48px;
  }
  .globe { order: -1; }
  .countries-scroll { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .countries-scroll a::after { transition: none; }
}