/*
    THE PER-MODULE HEAT MAP'S OWN STYLESHEET.

    Everything Components/Shared/ShadeHeatMap.razor needs and nothing else.

    THE RAMP IS ANCHORED WHERE THE DATA LIVES, not at zero, or every array renders one flat colour.
    The stops below are the legend for that ramp, so they are drawn from the same ends the figure
    is: a scale whose labels and whose fill disagree is worse than no scale.

    WHAT IT DOES NOT OWN. The shade report's own page furniture stays with that page, and
    .sv-measured is a utility.
*/

.sv-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
}

.sv-heatmap__segment {
  margin: 0;
}

.sv-heatmap__svg {
  max-width: 100%;
  height: auto;
  margin-top: var(--sv-space-2);
}

.sv-heatmap__empty {
  font: 400 12px/1.4 var(--sv-font-sans);
  color: var(--sv-text-tertiary);
}

.sv-heatmap__scale {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex-wrap: wrap;
}

.sv-heatmap__ramp {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
}

.sv-heatmap__stop {
  width: 26px;
  height: 10px;
}

.sv-heatmap__scale-ends {
  font-size: 10px;
  color: var(--sv-text-tertiary);
}