/* ==========================================================================
   live-status.css — the hero's live host readout.

   SELF-CONTAINED ON PURPOSE. This file, js/live-status.js and three lines in
   index.html are the whole feature; nothing else references it. See
   revert-live-status.sh to take it back out.
   ========================================================================== */

.live-status {
  position: relative;   /* the note is absolutely positioned against this */
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--mist);
  opacity: 0;
  transition: opacity .6s ease;
}
/* The line's height is reserved only once the script is actually running, so
   the numbers can fade in later without nudging the page, while a visitor
   with JavaScript off gets an element of exactly zero height: no reserved
   gap, no trace of a feature they will never see. */
.live-status.armed {
  min-height: 18px;
  margin-top: 12px;
}
.live-status.ready { opacity: 1; }

.live-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: help;
}

/* the "it is running right now" tell */
.live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--emerald);
  box-shadow: 0 0 8px rgba(53, 185, 138, .8);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--emerald);
  opacity: 0;
  animation: live-ping 2.4s ease-out infinite;
}
@keyframes live-ping {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.live-label { color: var(--mist); }
.live-metrics { display: flex; gap: 0 10px; flex-wrap: wrap; color: var(--emerald); }
.live-metrics span { position: relative; white-space: nowrap; }
/* pixel dot separators, same motif as the project card tags */
.live-metrics span + span::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 3px;
  height: 3px;
  translate: 0 -50%;
  background: var(--line);
}
/* a value that just changed flashes once, so the numbers read as live
   rather than as static decoration */
.live-metrics span.bump { animation: live-bump .5s ease-out; }
@keyframes live-bump {
  0%   { color: var(--foam); text-shadow: 0 0 12px rgba(53, 185, 138, .8); }
  100% { color: var(--emerald); text-shadow: none; }
}

/* The explanation, hidden until hover/focus.
   TAKEN OUT OF FLOW ON PURPOSE. When this was a normal block, revealing it
   grew the hero by 54px; because .panel centres its content, the whole block
   rose 27px — sliding the hovered line out from under the cursor, dropping
   :hover, collapsing the note, putting the line back under the cursor, and
   oscillating. Positioning it absolutely means nothing in the layout moves,
   so the hover is stable, and it rises into place instead of shoving the
   page around. */
.live-note {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mist);
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}
.live-status-line:hover ~ .live-note,
.live-status-line:focus-visible ~ .live-note,
.live-status.open .live-note {
  opacity: .85;
  transform: translateY(0);
}

.has-cursor .live-status-line { cursor: none; }

@media (max-width: 420px) {
  .live-status { font-size: 9px; }
  .live-metrics .live-battery { display: none; }   /* least interesting first */
}

@media (prefers-reduced-motion: reduce) {
  .live-status { transition: none; }
  .live-dot::after { animation: none; }
  .live-metrics span.bump { animation: none; }
  .live-note { transition: none; }
}