/* ---------- GLOBE ----------
   A textured earth (Three.js, js/views/globe.js) under a 2D overlay of pins
   and hairlines; the glass cards hover over their places. Drag to turn. */
#view-globe {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#view-globe.is-dragging { cursor: grabbing; }
.stage[data-view="globe"] ~ .cards .card { cursor: pointer; }

#view-globe .globe__gl,
#view-globe .globe__map,
#view-globe .globe__overlay {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
#view-globe .globe__map { opacity: 0; }
#view-globe.is-map { cursor: default; }
#view-globe.is-map .globe__map { pointer-events: auto; }
#view-globe .globe__map .maplibregl-canvas { outline: none; }
#view-globe .globe__credit {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 38px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: var(--text-subtle, #696773);
  opacity: 0;
  pointer-events: none;
}

/* The count on a bundle: a small glass pill on the stack's corner. */
.bundle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3000;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  font: 500 12px/26px var(--font);
  letter-spacing: 0.02em;
  color: var(--text-strong);
  background: var(--glass-chrome);
  box-shadow:
    inset 0 1px 0 var(--glass-top),
    inset 0 0 0 1px var(--glass-line),
    0 6px 16px -6px var(--glass-shadow);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
}
.bundle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }