/* globe.css — Part 06
 * Inherits: theme.css (tokens, typography, theme toggle), map.css (chrome overlays,
 * popup, HUD, legend, cheats, snap bar, picker). Only globe-specific deltas here.
 */

.pv-page-globe { background: #000; color: #e7eef6; }

.pv-globe-main {
  position: relative;
  width: 100vw;
  height: calc(100vh - var(--pv-header-h, 52px));
  overflow: hidden;
  background: #000;
}

/* Canvas host — deck.gl injects a <canvas> inside.
 * We keep it pitch-black so the sphere sits in void, matching Part 05 aesthetic. */
.pv-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: grab;
}
.pv-globe-canvas.pv-grabbing { cursor: grabbing; }
.pv-globe-canvas.pv-spinning { cursor: progress; }

/* deck.gl's canvas can end up with a tiny focus outline on tab-focus that reads as
 * a stray line on the black void — mute it. */
.pv-globe-canvas canvas:focus { outline: none; }

/* Spin button active state — subtle pulse to show it's running. */
#pv-spin-btn.pv-active {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.55);
  color: #2dd4bf;
  animation: pv-spin-pulse 2.4s ease-in-out infinite;
}
@keyframes pv-spin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18); }
}

/* The credit footer inherits map.css's near-black tone against black — deliberately
 * only visible on bright displays / zoom-in. Part 05's JR-approved sovereignty joke. */
.pv-page-globe .pv-overlay-credit {
  position: absolute;
  left: 10px;
  bottom: 6px;
  font-size: 10px;
  color: #1a2a3a;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

/* On very small viewports, drop the picker's ghost buttons to keep chrome legible. */
@media (max-width: 560px) {
  .pv-overlay-picker #pv-spin-btn { display: none; }
}

/* Light-theme override — if JR toggles theme, keep the globe canvas black (the
 * map page does this too; the sphere is the data, not the chrome). */
:root[data-theme="light"] .pv-page-globe,
:root[data-theme="light"] .pv-globe-main,
:root[data-theme="light"] .pv-globe-canvas {
  background: #000;
  color: #e7eef6;
}


/* hide MapLibre attribution — we use Natural Earth GeoJSON, no tile source */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { display: none !important; }