/* Heatmap preview styles extracted from inline sample markup */
.heatmap-scale {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.heatmap-scale:last-child {
  margin-bottom: 0;
}

.heatmap-cell {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
}

.heatmap-cell.level-3,
.heatmap-cell.level-4,
.heatmap-cell.level-5 {
  color: #fff;
}

.dark .heatmap-cell.level-0,
.dark .heatmap-cell.level-1,
.dark .heatmap-cell.level-2 {
  color: #1f2937;
}

.heatmap-scale.primary .level-0 { background: var(--heatmap-0); }
.heatmap-scale.primary .level-1 { background: var(--heatmap-1); }
.heatmap-scale.primary .level-2 { background: var(--heatmap-2); }
.heatmap-scale.primary .level-3 { background: var(--heatmap-3); }
.heatmap-scale.primary .level-4 { background: var(--heatmap-4); }
.heatmap-scale.primary .level-5 { background: var(--heatmap-5); }

/* Dark mode scale, shown below the primary scale in light and dark mode */
.heatmap-scale.dark-scale .level-0 { background: var(--heatmap-dark-0); }
.heatmap-scale.dark-scale .level-1 { background: var(--heatmap-dark-1); }
.heatmap-scale.dark-scale .level-2 { background: var(--heatmap-dark-2); }
.heatmap-scale.dark-scale .level-3 { background: var(--heatmap-dark-3); }
.heatmap-scale.dark-scale .level-4 { background: var(--heatmap-dark-4); }
.heatmap-scale.dark-scale .level-5 { background: var(--heatmap-dark-5); }
.heatmap-scale.dark-scale .heatmap-cell.level-0,
.heatmap-scale.dark-scale .heatmap-cell.level-1 { color: #fff; }
.heatmap-scale.dark-scale .heatmap-cell.level-2,
.heatmap-scale.dark-scale .heatmap-cell.level-3,
.heatmap-scale.dark-scale .heatmap-cell.level-4,
.heatmap-scale.dark-scale .heatmap-cell.level-5 { color: #1f2937; }
/* Step 2 is deeper in these themes, so white text reads better */
.grok .heatmap-scale.dark-scale .heatmap-cell.level-2,
.georgia .heatmap-scale.dark-scale .heatmap-cell.level-2,
.maestro .heatmap-scale.dark-scale .heatmap-cell.level-2 { color: #fff; }

.heatmap-scale.hot .level-0 { background: var(--heatmap-hot-0); }
.heatmap-scale.hot .level-1 { background: var(--heatmap-hot-1); }
.heatmap-scale.hot .level-2 { background: var(--heatmap-hot-2); }
.heatmap-scale.hot .level-3 { background: var(--heatmap-hot-3); }
.heatmap-scale.hot .level-4 { background: var(--heatmap-hot-4); }
.heatmap-scale.hot .level-5 { background: var(--heatmap-hot-5); }

.heatmap-scale.cool .level-0 { background: var(--heatmap-cool-0); }
.heatmap-scale.cool .level-1 { background: var(--heatmap-cool-1); }
.heatmap-scale.cool .level-2 { background: var(--heatmap-cool-2); }
.heatmap-scale.cool .level-3 { background: var(--heatmap-cool-3); }
.heatmap-scale.cool .level-4 { background: var(--heatmap-cool-4); }
.heatmap-scale.cool .level-5 { background: var(--heatmap-cool-5); }

.heatmap-scale.warm .level-0 { background: var(--heatmap-warm-0); }
.heatmap-scale.warm .level-1 { background: var(--heatmap-warm-1); }
.heatmap-scale.warm .level-2 { background: var(--heatmap-warm-2); }
.heatmap-scale.warm .level-3 { background: var(--heatmap-warm-3); }
.heatmap-scale.warm .level-4 { background: var(--heatmap-warm-4); }
.heatmap-scale.warm .level-5 { background: var(--heatmap-warm-5); }