/* ===== AI MUSCLE HEATMAP ===== */
.heatmap-wrap { position: relative; }

/* Borderless: the artwork sits on the card background with no frame or divider,
   so nothing competes with the figures themselves. */
.heatmap-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  background: transparent;
}
.heatmap-pane { position: relative; padding: 2px 0 0; }

.heatmap-view-caption {
  text-align: center; font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: #64748B;
  margin-top: 2px;
}

.heatmap-body { width: 100%; height: auto; display: block; }

/* Rated muscles are a translucent wash plus a crisp contour, so the grey
   anatomy underneath stays fully readable through the colour. */
.heatmap-body .muscle polygon {
  fill-opacity: 0.45;
  stroke-width: 2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 0.2s ease, stroke-width 0.18s ease;
}
.heatmap-body .muscle { cursor: pointer; }
.heatmap-body .muscle:hover polygon { fill-opacity: 0.68; stroke-width: 3.2; }
/* Not-rated areas get a dashed grey contour so they read as "unknown"
   instead of blending silently into the grey artwork. */
.heatmap-body .muscle.is-unrated polygon {
  fill: #94A3B8; fill-opacity: 0.10;
  stroke: #94A3B8; stroke-opacity: 0.85;
  stroke-width: 1.4; stroke-dasharray: 5 4;
}
.heatmap-body .muscle.is-unrated:hover polygon { fill-opacity: 0.24; stroke-width: 2; }
.heatmap-tooltip {
  position: absolute; z-index: 30; pointer-events: none;
  transform: translate(-50%, -115%);
  background: #0F172A; color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15,23,42,0.25);
  opacity: 0; transition: opacity 0.15s ease;
}
.heatmap-tooltip.visible { opacity: 1; }
.heatmap-legend {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid #EEF0F4;
}
.heatmap-legend span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: #64748B;
}
.heatmap-legend i {  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}

/* Compact variant for the dashboard card, where the map is a summary rather
   than the centrepiece. Capping the panel width shrinks both figures
   proportionally, which is what actually drives the card's height. */
.heatmap-compact .heatmap-panel { max-width: 300px; margin: 0 auto; }
.heatmap-compact .heatmap-pane { padding: 4px 2px 2px; }
.heatmap-compact .heatmap-view-caption { font-size: 8px; }
.heatmap-compact .heatmap-legend {
  gap: 5px 9px; padding-top: 9px; margin-top: 9px;
}
.heatmap-compact .heatmap-legend span { font-size: 9px; }
.heatmap-compact .heatmap-legend i { width: 7px; height: 7px; }