/* Phase 10 — complexity x churn heatmap row tints.
   Five discrete buckets via color-mix(in srgb, ...). No hex anchors.
   Follows the severity-tint pattern at ide.css (status pill colours).

   Bucket mapping:
     cool     — score 0 or bottom 10th percentile. No tint, default bg.
     mild     — 10-30th percentile. Faint green wash, barely perceptible.
     normal   — 30-55th percentile. No tint — mid-range is neutral.
     elevated — 55-75th percentile. Soft amber wash via --attention.
     hot      — 75-90th percentile. Stronger amber via --attention.
     critical — top 10th percentile. Red wash + left border via --error.
*/

.ide-heatmap--cool {
  /* No tint. Keep the row's default background. */
}

.ide-heatmap--mild {
  background-color: color-mix(in srgb, transparent 90%, var(--success) 10%);
}

.ide-heatmap--normal {
  /* No tint — mid-range is neutral. */
}

.ide-heatmap--elevated {
  background-color: color-mix(in srgb, transparent 88%, var(--attention) 12%);
}

.ide-heatmap--hot {
  background-color: color-mix(in srgb, transparent 80%, var(--attention) 20%);
}

.ide-heatmap--critical {
  background-color: color-mix(in srgb, transparent 75%, var(--error) 25%);
  border-left: 2px solid color-mix(in srgb, transparent 50%, var(--error) 50%);
}

/* ============================================================
   Phase 10 Tier 6 — Files-tab header + heatmap toggle button
   ============================================================ */

.ide-files-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.ide-heatmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition);
}

.ide-heatmap-toggle:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.ide-heatmap-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.ide-heatmap-toggle__icon {
  width: 12px;
  height: 12px;
  filter: var(--icon-filter, none);
}

.ide-heatmap-toggle[aria-pressed="true"] .ide-heatmap-toggle__icon {
  filter: var(--icon-filter-accent, none);
}

/* ============================================================
   Phase 10 Tier 6 — Hover tooltip
   ============================================================ */

.ide-heatmap-tooltip {
  position: fixed;
  min-width: 220px;
  max-width: 360px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  z-index: 10000;
  pointer-events: auto;
}

.ide-heatmap-tooltip__title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.ide-heatmap-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.5;
}

.ide-heatmap-tooltip__label {
  color: var(--text-muted);
}

.ide-heatmap-tooltip__value {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.ide-heatmap-tooltip__sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.ide-heatmap-tooltip__final {
  font-weight: 600;
  color: var(--text-primary);
}

.ide-heatmap-tooltip__subhead {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 0.75rem;
}

.ide-heatmap-tooltip__contrib {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.ide-heatmap-tooltip__contrib-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ide-heatmap-tooltip__contrib-score {
  color: var(--text-primary);
  flex-shrink: 0;
}

.ide-heatmap-tooltip__note {
  margin-top: 6px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.75rem;
}