/* Paleo Planet Simulator -- 3-D climate globe, run page (docs/web.md "Globe").
   Uses the custom properties defined in style.css's :root (loaded first in run.html);
   does not modify style.css. The starfield behind the globe is body::before from
   style.css showing through the canvas's transparent clear colour -- nothing to
   duplicate here. */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.globe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
/* An author-stylesheet `display` rule beats the browser's own `[hidden] {display:
   none}` UA rule regardless of selector specificity (origin outranks specificity in
   the cascade) -- without this, run.js setting #globe-wrap.hidden = true while the
   globe never mounts (the fallback path) left an empty, glowing circle visibly on
   the page instead of nothing. */
.globe-wrap[hidden] { display: none; }

.globe-canvas {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  height: clamp(320px, 55vw, 420px);
  border-radius: 50%;
  overflow: hidden;
  /* No box-shadow halo: it is cast from the circular *canvas* edge, which used to sit
     right at the planet's limb. Now that the camera sits back far enough to show the
     axis tips, the planet is smaller than its canvas and that halo reads as a hard dark
     ring around the planet. The sphere's own atmosphere rim (globe.js) is the glow. */
  cursor: grab;
  touch-action: none; /* dragging the globe must not scroll the page */
}
.globe-canvas:active { cursor: grabbing; }
.globe-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

@media (min-width: 700px) {
  .globe-canvas { height: 480px; max-width: 480px; }
}

/* Texture toggle and zoom sit on one row under the canvas; on a narrow screen the zoom
   pill wraps below the toggle rather than squeezing it. */
.globe-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.globe-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.globe-toggle[hidden] { display: none; } /* same author-vs-UA cascade issue as .globe-wrap above */
.globe-toggle button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 7px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
}
.globe-toggle button.active { background: var(--accent-dim); color: var(--text); }
.globe-toggle button[hidden] { display: none; }

/* Köppen legend -- reused both next to the world-map tile (web/koppen.png, in the
   "World maps" tile grid, style.css's .tile) and under the globe when its Biomes
   texture is active. */
.koppen-legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 10px 2px;
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-top: 1px solid var(--border);
}
.koppen-legend li { white-space: nowrap; }
.koppen-legend .code { color: var(--text); font-weight: 600; }
.koppen-legend[hidden] { display: none; }

#globe-koppen-legend {
  justify-content: center;
  max-width: 420px;
  border-top: none;
}
@media (min-width: 700px) {
  #globe-koppen-legend { max-width: 480px; }
}

/* Zoom: same pill as .globe-toggle, sized for a thumb (44 px target) since this is the
   one control a phone visitor can't reach any other way -- the wheel has no equivalent. */
.globe-zoom {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.globe-zoom[hidden] { display: none; } /* author-vs-UA cascade, as above */
.globe-zoom button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 44px;
  height: 34px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-body);
}
.globe-zoom button:hover { background: var(--accent-dim); color: var(--text); }
.globe-zoom button + button { border-left: 1px solid var(--border); }

.globe-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 460px;
}
/* Little round keys matching the globe's axis tips (globe.js northCap/southCap colours). */
.axis-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: baseline;
}
.axis-n { background: #6fd3ff; }
.axis-s { background: #ff9a5a; }

/* Köppen legend swatches -- Joe, 2026-09-13: the two-to-four letter codes meant nothing
   to a reader, so the colour box is the thing that ties a legend row to the map, and the
   code survives only as the row's title/tooltip. Colours come from run.js's
   KOPPEN_COLORS, which mirrors postproc/texture.py. */
.koppen-legend .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -2px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.koppen-legend li { display: inline-flex; align-items: center; }