/* Core telemetry: a recessed, illuminated energy rail rather than a barcode. */
.energy {
  --energy-light: #e6ffcb;
  --energy-core: #a0ec71;
  --energy-mid: #64c951;
  --energy-base: #347d3d;
  --energy-glow: #8bf56552;
}
.energy:has(.energy-meter[data-level="warning"]) {
  --energy-light: #fff0ba;
  --energy-core: #ffd06d;
  --energy-mid: #eea141;
  --energy-base: #95532c;
  --energy-glow: #ffbd5652;
}
.energy:has(.energy-meter[data-level="critical"]) {
  --energy-light: #ffdac3;
  --energy-core: #ff926c;
  --energy-mid: #ea5a43;
  --energy-base: #8e3034;
  --energy-glow: #ff664d5e;
}
.energy:has(.energy-meter[data-level="nuclear"]) {
  --energy-light: #fff0ff;
  --energy-core: #ebadff;
  --energy-mid: #ba66f0;
  --energy-base: #713ca8;
  --energy-glow: #d08bff66;
}
.energy > div:first-child {
  align-items: baseline;
  gap: .4cqw;
  white-space: nowrap;
  text-shadow: 0 1px 2px #010912;
}
.energy #energy-value {
  color: var(--energy-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.energy .energy-meter {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  height: clamp(7px, .65cqw, 12px);
  margin-top: .38cqw;
  padding: 1px;
  border: 1px solid #527580;
  border-bottom-color: #273e4e;
  border-radius: 2px;
  background: linear-gradient(180deg, #07111cf5, #10202be8);
  box-shadow: inset 0 1px 2px #000c, 0 1px 0 #9be8ff24,
    0 0 .28cqw #040b13a6;
  overflow: hidden;
}
.energy .energy-meter::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg,
    #97b9c606 0, #97b9c606 calc(10% - 1px),
    #bfd7df20 calc(10% - 1px), #bfd7df20 10%);
}
.energy .energy-meter #energy-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 1px;
  background: linear-gradient(180deg,
    var(--energy-light) 0%, var(--energy-core) 24%,
    var(--energy-mid) 63%, var(--energy-base) 100%);
  box-shadow: inset 0 0 4px var(--energy-glow), inset 0 0 0 1px #eaffee14;
  overflow: hidden;
}
.energy .energy-meter #energy-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff02 0%, #ffffff00 50%, #ffffff1a 100%);
}
.energy .energy-meter #energy-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--energy-light);
  box-shadow: 0 0 4px 1px var(--energy-glow);
}
@media (max-aspect-ratio: 1/1) {
  .energy .energy-meter {
    height: clamp(7px, 1.8cqw, 10px);
    margin-top: .8cqw;
    padding: 1px;
  }
  .energy .energy-meter::before { inset: 1px; }
}