/* Floating controls inherit the room palette without introducing card surfaces. */
.telemetry-layer .es-telemetry {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  outline: none;
  transition:
    filter var(--es-dur-fast, 180ms),
    opacity var(--es-dur-fast, 180ms);
}
.telemetry-layer .es-telemetry::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
  transition:
    border-color var(--es-dur-fast, 180ms),
    transform var(--es-dur-fast, 180ms);
}
.telemetry-layer .es-telemetry:hover,
.telemetry-layer .es-telemetry:focus-visible {
  filter: drop-shadow(0 0 0.65rem var(--es-pore));
}
.telemetry-layer .es-telemetry:hover::after,
.telemetry-layer .es-telemetry:focus-visible::after {
  border-color: var(--es-pore);
  transform: scale(1.04);
}
.telemetry-layer .es-telemetry:focus-visible {
  outline: 1px solid var(--es-pore);
  outline-offset: 0.65rem;
}
.telemetry-layer .es-telemetry:hover .telemetry-signal,
.telemetry-layer .es-telemetry:focus-visible .telemetry-signal {
  animation: telemetry-invitation 1.8s ease-in-out infinite alternate;
}
.telemetry-layer .es-telemetry:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.45;
}
@keyframes telemetry-invitation {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .telemetry-layer .es-telemetry,
  .telemetry-layer .es-telemetry::after {
    transition: none;
  }
  .telemetry-layer .es-telemetry .telemetry-signal {
    animation: none;
  }
}

/* Only the focused anatomical metric expands; overview stays sparse. */
.telemetry-value .telemetry-unit {
  margin-left: 0.3em;
  font-size: 0.8em;
}
.telemetry-layer .es-telemetry[data-location="body"] {
  width: min(15rem, calc(100vw - 2rem));
  min-height: 8.1rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.es-telemetry[data-location="body"] .telemetry-key {
  font-size: var(--es-text-small);
  line-height: 1.4;
  letter-spacing: 0.12em;
}
.es-telemetry[data-location="body"] .telemetry-value {
  font: 400 clamp(2.3rem, 3.4vw, 3.8rem) / 1.05 var(--es-font-data);
  letter-spacing: -0.075em;
  margin-top: 0.4rem;
  color: var(--es-ink);
  white-space: nowrap;
}
.es-telemetry[data-location="body"] .telemetry-signal {
  width: 8rem;
  height: 2.1rem;
  margin-top: 0.4rem;
}
.es-telemetry[data-location="body"] .telemetry-note {
  font-size: var(--es-text-small);
  line-height: 1.6;
  max-width: 27ch;
}
body.is-paused .telemetry-layer .telemetry-signal {
  animation-play-state: paused;
}
@media (max-width: 700px) {
  .telemetry-layer .es-telemetry[data-location="body"] {
    width: min(13.5rem, 57vw);
  }
  .es-telemetry[data-location="body"] .telemetry-value {
    font-size: 2.3rem;
  }
  .es-telemetry[data-location="body"] .telemetry-key {
    font-size: var(--es-text-small);
  }
}
.es-telemetry[data-location="body"] .telemetry-unit {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.4em;
  letter-spacing: -0.02em;
  color: var(--es-muted);
}

/* Readings occupy a framing lane over the room, clear of the anatomy. */
.telemetry-layer {
  overflow: visible;
}
.telemetry-layer .es-telemetry {
  box-sizing: border-box;
}
@media (max-width: 700px) {
  body.scene-focused .telemetry-layer .es-telemetry[data-location="body"] {
    width: calc(
      var(--es-mobile-metric-lane) - 2 * var(--es-telemetry-clearance)
    );
    min-height: 8.1rem;
  }
  body.scene-focused .es-telemetry[data-location="body"] .telemetry-value {
    font-size: 1.85rem;
  }
  body.scene-focused .es-telemetry[data-location="body"] .telemetry-signal {
    width: 110px;
  }
  body.scene-focused .es-telemetry[data-location="body"] .telemetry-key {
    font-size: var(--es-text-small);
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }
  body.scene-focused .es-telemetry[data-location="body"] .telemetry-note {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Readable labels stay beside the anatomy, within its reserved gutter. */
.telemetry-key,
.telemetry-note,
.es-telemetry[data-location="body"] .telemetry-key,
.es-telemetry[data-location="body"] .telemetry-note,
body.scene-focused .es-telemetry[data-location="body"] .telemetry-key {
  font-size: var(--es-text-small);
  line-height: 1.45;
  letter-spacing: 0.01em;
  opacity: 1;
}
.es-telemetry[data-location="body"] .telemetry-unit {
  font-size: max(var(--es-text-small), 0.4em);
}
.es-telemetry .telemetry-note {
  max-width: 100%;
}
@media (max-width: 700px) {
  .es-telemetry {
    width: 8.5rem;
  }
  .telemetry-layer .es-telemetry[data-location="body"] {
    min-height: 0;
  }
}

/* Readouts remain legible over bright room screens and upholstery, without cards. */
@media (min-width: 701px) {
  .telemetry-layer .es-telemetry {
    isolation: isolate;
    text-shadow:
      0 1px 2px var(--es-ground),
      0 0 0.45rem var(--es-ground);
  }
  .telemetry-layer .es-telemetry::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2rem -2.5rem;
    border-radius: 3rem;
    background: color-mix(
      in srgb,
      var(--es-ground) var(--es-metric-tint),
      transparent
    );
    filter: blur(var(--es-reading-softness));
    pointer-events: none;
  }
}

/* Mobile placement reserves eight pixels; keep decorative rings inside that fit. */
@media (max-width: 700px) {
  .telemetry-layer .es-telemetry::after {
    inset: 0;
  }

  /* A sense glyph invites exploration; readings belong to its selected chapter. */
  .telemetry-layer .es-telemetry[data-location="room"] {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 50%;
    background: var(--es-ground);
    color: var(--es-pore);
    box-shadow:
      0 0 0 1px var(--es-glass-line),
      0 0 18px var(--es-glow-soft);
    text-align: center;
  }
  .es-telemetry[data-location="room"] .telemetry-key,
  .es-telemetry[data-location="room"] .telemetry-value,
  .es-telemetry[data-location="room"] .telemetry-note {
    display: none;
  }
  .es-telemetry[data-location="room"] .telemetry-signal {
    display: block;
    width: 32px;
    height: 20px;
    margin: 2px 0 0;
    opacity: 1;
  }
  .es-telemetry[data-location="room"]::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 7px;
    bottom: 6px;
    left: 22px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
  }
  .telemetry-layer .es-telemetry[data-location="room"]:active {
    background: var(--es-surface-2);
    filter: drop-shadow(0 0 0.65rem var(--es-pore));
  }
}