/* ============================================================
   INTERLOCK — component: live runtime-monitor HUD panel
   (counters + status driven by hud.js / cobot-arm.js)
   ============================================================ */
/* sits inside .hero-content; bottom offset equals the content's
   bottom padding, so the panel bottom-aligns with the hero CTA */
.hud{
  position:absolute;right:32px;bottom:170px;z-index:3;
  width:300px;
  border:1px solid var(--line-bright);
  background:rgba(12,17,15,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:12px;
  padding:16px 18px;
}
.hud-title{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text-faint);letter-spacing:.12em;font-size:10px;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;
}
.hud-live{display:flex;align-items:center;gap:6px;color:var(--green)}
.hud-live i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hud-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-dim)}
.hud-row b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.hud-row b.green{color:var(--green)}
.hud-status{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.06em;color:var(--green);
  min-height:32px;
}
.hud-status.alert{color:var(--red)}
.hud-status.check{color:var(--amber)}

@media (max-width:900px){
  .hud{position:static;width:auto;margin:40px 0 52px}
}
@media (max-width:480px){
  .hud{padding:13px 14px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .hud-live i{animation:none}
}