/**
 * 3D 地球（查询结果的地理位置可视化）
 * 渲染由 assets/js/globe.bundle.js 完成，颜色取自下方令牌，随主题切换
 */

:root {
  --globe-ocean: #1c2029;
  --globe-line: #2b323d;
  /* 国界线：比海岸线弱、比经纬网强，中性灰避免与强调色抢注意力 */
  --globe-border: #8b93a7;

  /* 地球画布上限：宽卡片下放大到此为止，避免把结果卡撑得过高需要滚动 */
  --globe-max: 420px;
}

:root[data-theme='light'] {
  --globe-ocean: #e7ebf2;
  --globe-line: #cfd6e1;
  --globe-border: #8a90a0;
}

.globe-block {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* 方形画布：窄卡片堆叠时居中限宽，宽卡片在右栏内撑满并居中 */
.globe-canvas {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--inset);
  cursor: grab;
}

/* 卡片够宽（双栏生效）时：地球放大利用右栏空间，但不超过 --globe-max */
@container result-card (min-width: 540px) {
  .globe-block {
    justify-content: center;
  }

  .globe-canvas {
    max-width: var(--globe-max);
  }
}

.globe-canvas:active {
  cursor: grabbing;
}

.globe-canvas canvas {
  display: block;
}

/* WebGL 不可用时的占位 */
.globe-canvas.is-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  cursor: default;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}

/* 坐标与提示：同一行两端对齐，窄屏自动换行 */
.globe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}

.globe-meta-coord {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.globe-meta-label {
  flex-shrink: 0;
}

/* 坐标值：等宽字体，避免数字跳动 */
.globe-meta-coord #globe-coord {
  font-family: var(--mono);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.globe-meta-tip {
  flex-shrink: 0;
}

/* 极窄卡片：地图略微缩小，避免挤压（同样以卡片宽度为准） */
@container result-card (max-width: 320px) {
  .globe-canvas {
    max-width: 260px;
  }
}