/* World Data page — implements data-visualization-playbook.md, which was previously
   "ideas only, nothing built" because pixel history didn't exist yet. */

.data-page {
  max-width: 940px;
  margin: 0 auto;
  padding: 16px;
}

.viz {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #21262d;
}
.viz h2 { margin: 0 0 6px; font-size: 17px; }

.viz-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.viz-controls {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.viz-controls label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #8b949e;
}

.viz canvas {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin-top: 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
}

.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #8b949e;
  margin-top: 10px;
}
.chart-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6e7681;
  padding: 7px 10px;
  border-bottom: 1px solid #30363d;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #161b22;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }

/* Timelapse replay controls (data-visualization-playbook.md concept #3) */
.replay-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.replay-play {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.replay-play:hover { border-color: #58a6ff; color: #58a6ff; }
.replay-play.playing { border-color: #d29922; color: #d29922; }
.replay-play:disabled { opacity: .6; cursor: default; }

.replay-bar label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #8b949e;
}

.replay-scrub {
  flex: 1;
  min-width: 160px;
  accent-color: #58a6ff;
}
.replay-scrub:disabled { opacity: .4; }

.replay-clock {
  font-size: 12px;
  color: #8b949e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.replay-note { margin-top: 8px; }

/* --- Pixels-per-minute + export (added 2026-08-19) ------------------------- */
.rate-summary { display: flex; gap: 22px; margin-bottom: 10px; font-size: 13px; }
.rate-summary .rs { color: #8b949e; }
.rate-summary .rs b { color: #e6edf3; font-size: 17px; font-variant-numeric: tabular-nums;
  margin-right: 5px; }

.export-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin: 14px 0 8px 0; }
.export-grid label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #8b949e; }
.export-grid select, .export-grid input { padding: 6px 9px; font: inherit; font-size: 13px;
  background: #010409; color: #e6edf3; border: 1px solid #30363d; border-radius: 3px; }
.export-grid input:disabled { opacity: .45; }
.export-btn { display: inline-block; padding: 8px 18px; font-size: 13px; font-weight: 600;
  text-decoration: none; border-radius: 3px; background: #E59500; color: #111; }
.export-btn:hover { filter: brightness(1.1); }

/* 3D spike map is orbitable — signal it with the cursor. */
#churn-canvas { cursor: grab; }
#churn-canvas.grabbing { cursor: grabbing; }