.energy-card {
  /* Grow with metrics; stop before product-detail (right 80 + width 475 + gap 32). */
  --energy-card-max-width: calc(100vw - (144 + 80 + 475 + 32) * var(--u));

  position: fixed;
  left: calc(144 * var(--u));
  top: calc(32 * var(--u));
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(calc(760 * var(--u)), var(--energy-card-max-width));
  max-width: var(--energy-card-max-width);
  min-width: calc(489 * var(--u));
  min-height: calc(152 * var(--u));
  height: auto;
  margin: 0;
  padding: calc(16 * var(--u));
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background-image: var(--glass);
  backdrop-filter: blur(calc(25 * var(--u)));
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-16 * var(--u)));
  transition:
    opacity 520ms ease,
    transform 620ms var(--zoom-ease),
    visibility 0s linear 620ms;
}

.experience.is-zoomed .energy-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: var(--ui-settle-delay), var(--ui-settle-delay), 0s;
}

/* Title-only pill when a POI has no energy metrics (Figma: zoom-1_building NO info). */
.energy-card.is-empty {
  justify-content: center;
  width: max-content;
  min-width: 0;
  min-height: 0;
  height: calc(64 * var(--u));
  padding-block: calc(16 * var(--u));
}

.energy-card.is-empty .energy-card__divider,
.energy-card.is-empty .energy-card__metrics {
  display: none;
}

.energy-card__heading {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
}

.energy-card__title {
  margin: 0;
  color: #ffffff;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: calc(32 * var(--u));
  white-space: nowrap;
}

.energy-card__divider {
  display: block;
  width: 100%;
  height: max(1px, calc(1.5 * var(--u)));
  margin: calc(8 * var(--u)) 0 0;
  border: 0;
  background: #ffffff;
  pointer-events: none;
}

.energy-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(28 * var(--u));
  row-gap: calc(16 * var(--u));
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin-top: calc(16 * var(--u));
}

.energy-card__metric {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.energy-card__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  line-height: calc(14 * var(--u));
  overflow-wrap: break-word;
}

.energy-card__reading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(4 * var(--u));
  color: #ffffff;
}

.energy-card__value {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.energy-card__unit {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}