/* ============================================================
   RunOrJog — FLOATING TELEMETRY TAGS
   Sleek HUD readouts (was sticker-pills). A pulsing node + mono
   label on a thin, sharp dark-glass sliver with an accent edge.
   Applies to hero .float-card and showcase .device-chip.
   ============================================================ */

.float-card { --c: var(--fc, var(--cyan)); }
.device-chip { --c: var(--accent, var(--cyan)); }

.float-card, .device-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px 8px 11px; border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em;
  color: #eaf6ff; white-space: nowrap; overflow: hidden;
  background: linear-gradient(115deg, rgba(8, 10, 20, 0.92), rgba(10, 12, 24, 0.66));
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  border-left: 2px solid var(--c);
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
  backdrop-filter: blur(13px) saturate(1.2);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.95), 0 0 20px -14px var(--c), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.device-chip { font-size: 11px; padding: 7px 12px 7px 10px; }

/* leading live-node (replaces the chunky icon disc) */
.float-card::before, .device-chip::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 4px var(--c);
  animation: tag-node 2.2s ease-in-out infinite;
}
@keyframes tag-node { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* hide the old SVG icon — the node + mono label carry it now */
.float-card .ico, .device-chip .ico { display: none; }
.float-card > span, .device-chip > span { position: relative; z-index: 2; }

/* faint scan sweep, staggered */
.float-card::after, .device-chip::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--c) 22%, transparent), transparent);
  transform: skewX(-16deg); animation: tag-sweep 7s ease-in-out infinite;
}
.fc-b::after, .device-chip.b::after { animation-delay: 2.6s; }
.fc-c::after { animation-delay: 3.8s; }
.fc-d::after { animation-delay: 1.5s; }
@keyframes tag-sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* sharper still under cyberpunk */
html[data-theme="cyber"] .float-card,
html[data-theme="cyber"] .device-chip {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .float-card::before, .device-chip::before,
  .float-card::after, .device-chip::after { animation: none; }
  .float-card::after, .device-chip::after { display: none; }
}