/* GLOBE — the satellite globe screen and the frame's globe-mode buttons */

/* ---------- Frame in globe mode ---------- */

.globe-only {
  display: none;
}

.frame[data-mode="globe"] .globe-only {
  display: flex;
}

.frame[data-mode="globe"] #navUp,
.frame[data-mode="globe"] #settingsButton,
.frame[data-mode="globe"] #backButton,
.frame[data-mode="globe"] #navDown,
.frame[data-mode="globe"] #globeButton {
  display: none;
}

/* the first visible button in each row has no divider on its left */
.frame[data-mode="globe"] #globeZoomOut,
.frame[data-mode="globe"] #globeEnd {
  border-left: 0;
  box-shadow: var(--frame-btn-shadow);
}

/* the clock slot gives way to Zoom out */
.frame[data-mode="globe"] .frame-clock {
  display: none;
}

/* no header strip: the globe fills the space between the rows */
.frame[data-mode="globe"] {
  grid-template-rows:
    calc(var(--frame-row-height) + env(safe-area-inset-top))
    0
    0
    minmax(0, 1fr)
    calc(var(--frame-row-height) + env(safe-area-inset-bottom));
}

.frame[data-mode="globe"] .frame-header,
.frame[data-mode="globe"] .frame-alert-slot {
  visibility: hidden;
  overflow: hidden;
  border: 0;
}

.frame[data-mode="globe"] .panel-footer {
  z-index: var(--z-status);
}

.frame[data-mode="globe"] .panel-readout {
  visibility: hidden;
}

.frame-icon {
  flex: 0 0 auto;
  width: var(--frame-tri-size);
  height: var(--frame-tri-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--rule-thick);
  transform: scale(1.4);
}

/* two rotate buttons share the bottom-middle slot */
.frame-btn-pair {
  display: none;
  border-left: var(--rule) solid var(--frame-divider);
}

.frame[data-mode="globe"] .frame-btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.frame-btn-pair > .frame-btn + .frame-btn {
  border-left: var(--rule) solid var(--frame-divider);
}

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

.screen--globe {
  padding: 0;
  overflow: hidden;
  background: var(--globe-space);
}

.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.globe-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.globe-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  background: none;
  border: 0;
  color: var(--panel-text);
  text-shadow: var(--panel-text-shadow);
  transform: translate(calc(-1 * var(--globe-dot-size) / 2), -50%);
  pointer-events: auto;
  /* a pinch that starts on a marker zooms the globe, not the page */
  touch-action: none;
}

.globe-dot {
  flex: 0 0 auto;
  width: var(--globe-dot-size);
  height: var(--globe-dot-size);
  background: var(--globe-dot);
  border-radius: var(--radius-pill);
  box-shadow: var(--globe-dot-glow);
}

/* while the globe moves, the faded markers are in old spots: taps go to the globe */
.screen--globe.is-moving .globe-marker {
  pointer-events: none;
}

.globe-marker.is-pending .globe-dot {
  background: var(--globe-dot-pending);
  box-shadow: none;
}

.globe-marker-icon {
  width: var(--globe-marker-icon);
  height: var(--globe-marker-icon);
  object-fit: contain;
  filter: var(--hero-icon-shadow);
}

.globe-label {
  padding: var(--space-1) var(--space-2);
  background: var(--globe-label-bg);
  border-radius: var(--radius-sm);
  font-size: var(--globe-label-font);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.globe-marker:hover .globe-label,
.globe-marker:focus-visible .globe-label {
  background: var(--globe-label-bg-hover);
}

.globe-marker.is-flipped {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--globe-dot-size) / 2), -50%);
}

/* when labels would collide, the farther city shows just its dot */
.globe-marker.is-compact .globe-label,
.globe-marker.is-compact .globe-marker-icon {
  display: none;
}

.globe-marker.is-compact:hover .globe-label,
.globe-marker.is-compact:focus-visible .globe-label {
  display: inline;
}

.globe-badge {
  position: absolute;
  top: var(--space-4);
  right: 0;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-5);
  background: var(--title-block);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  color: var(--title-text);
  font-size: var(--globe-badge-font);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-caps);
  text-shadow: var(--title-text-shadow);
  text-transform: uppercase;
  pointer-events: none;
}

.globe-status {
  position: absolute;
  bottom: var(--globe-status-bottom);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100% - 2 * var(--space-5));
  padding: var(--space-2) var(--space-5);
  background: var(--status-face);
  border: var(--hairline) solid var(--status-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  transform: translateX(-50%);
}

.globe-status.hidden {
  display: none;
}

.globe-status:not(.is-busy) .loader-dots {
  display: none;
}