.energy-calculator { max-width: 960px; }
.energy-calculator nav { font-size: .9rem; }
.energy-form { display: grid; gap: 1rem; }
.energy-panel, .energy-result, .energy-notes { border: 1px solid #d5dde4; border-radius: .5rem; padding: 1rem; }
.energy-panel legend { float: none; width: auto; padding: 0 .35rem; font-weight: 700; }
.energy-grid, .load-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.energy-calculator label { display: grid; gap: .35rem; font-weight: 600; }
.energy-calculator input, .energy-calculator select { min-height: 2.75rem; width: 100%; padding: .5rem; border: 1px solid #687987; border-radius: .25rem; background: #fff; color: #172b3a; }
.input-with-unit { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: .4rem; }
.load-row { border-top: 1px solid #e2e7eb; padding: 1rem 0; }
.energy-result { background: #f3f8fb; }
.energy-result dl { margin: 0; }
.energy-result dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #d5dde4; }
.energy-result dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 640px) {
  .energy-grid, .load-row { grid-template-columns: minmax(0, 1fr); }
  .load-row { gap: .65rem; }
  .remove-load { justify-self: start; }
  .energy-result dl > div { display: block; }
  .energy-result dd { text-align: left; }
}