/* Live heartbeat card, shared by the homepage "Proof, every hour" widget and /status.
   heartbeat.js builds the DOM; this file only styles it. One card per chain.

   Tokens set per card by the script:
     --hb-a / --hb-ar   chain accent (hex / r,g,b): XRP blue, Hedera purple. Also the trace colour, read back by the script.
     --hb-c / --hb-cr   state colour (hex / r,g,b): mint, amber, coral or grey. Used by the dot.
   Everything that moves stops under prefers-reduced-motion: the strip is drawn in full, once, and the dot keeps a static glow. */

.hb{--hb-a:#3D80FF;--hb-ar:61,128,255;--hb-c:#8A93A8;--hb-cr:138,147,168;
  position:relative;padding:14px 16px 13px;border-radius:var(--r-lg,16px);
  background:linear-gradient(160deg,var(--surface-2,#182238),var(--surface,#121A2F));
  border:1px solid var(--line,rgba(244,246,251,.08));overflow:hidden;color:var(--text,#F4F6FB);
  box-shadow:0 0 0 1px rgba(var(--hb-ar),.06),0 20px 50px -34px rgba(var(--hb-ar),.55)}
.hb::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,rgba(var(--hb-ar),.16),transparent 65%)}
.hb>*{position:relative}

.hb-head{display:flex;align-items:center;gap:10px;min-height:22px}
.hb-name{font-weight:700;font-size:15px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:7px;min-width:0}
.hb-name small{font-weight:500;font-size:12.5px;color:var(--muted,#8A93A8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-state{margin-left:auto;font-size:12px;font-weight:600;color:var(--hb-c);white-space:nowrap;text-transform:capitalize}

/* The pulse: a dot that thumps twice at a resting pace, a soft radial glow behind it and a ring that
   drifts outward. One cycle is 8/7 s, about 52 bpm. The dot is the clock for the whole card:
   heartbeat.js reads this animation's start time and draws one QRS spike per thump. */
.hb-pulse{position:relative;width:16px;height:16px;flex:none;display:inline-block;--hb-c:#8A93A8;--hb-cr:138,147,168;--hb-sync:0s}
.hb-pulse[data-state="operational"]{--hb-c:#22E6A5;--hb-cr:34,230,165}
.hb-pulse[data-state="degraded"]{--hb-c:#FFB020;--hb-cr:255,176,32}
.hb-pulse[data-state="down"]{--hb-c:#FF5470;--hb-cr:255,84,112}
.hb-pulse::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--hb-cr),.55),rgba(var(--hb-cr),0) 68%);opacity:.7}
.hb-pulse::after{content:"";position:absolute;inset:1px;border-radius:50%;border:1.5px solid rgba(var(--hb-cr),.75);opacity:0}
.hb-pulse i{position:absolute;inset:4px;border-radius:50%;background:var(--hb-c);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 6px 1px rgba(var(--hb-cr),.9),0 0 14px 2px rgba(var(--hb-cr),.45)}
.hb-pulse.beat::before{animation:hbGlow 1.142857s cubic-bezier(.4,0,.2,1) infinite var(--hb-sync)}
.hb-pulse.beat::after{animation:hbRing 1.142857s cubic-bezier(.2,.5,.3,1) infinite var(--hb-sync)}
.hb-pulse.beat i{animation:hbBeat 1.142857s cubic-bezier(.4,0,.2,1) infinite var(--hb-sync)}
@keyframes hbBeat{0%,42%,100%{transform:scale(1)}9%{transform:scale(1.22)}20%{transform:scale(1.02)}29%{transform:scale(1.13)}}
@keyframes hbRing{0%{transform:scale(.85);opacity:0}6%{opacity:.5}100%{transform:scale(2.1);opacity:0}}
@keyframes hbGlow{0%,45%,100%{opacity:.5;transform:scale(1)}12%{opacity:.95;transform:scale(1.12)}}

/* The trace: a canvas, painted by heartbeat.js like a bedside monitor. A fixed window, one PQRST
   complex per hourly run (newest at the right), a sweep bar moving left to right at constant speed
   that erases the old trace just ahead of it and writes the new trace just behind it. The script owns
   every pixel, including the red irregular complexes for failed runs; this only sizes the box. */
.hb-trace{display:block;width:100%;height:auto;aspect-ratio:320/56;margin:10px 0 8px;border-radius:8px;
  background:linear-gradient(180deg,rgba(244,246,251,.035),rgba(244,246,251,0))}

/* The numbers. */
.hb-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hb-nums b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-nums span{display:block;font-size:11.5px;color:var(--muted,#8A93A8);margin-top:2px;line-height:1.3}
.hb-tx{margin-top:9px;padding-top:9px;border-top:1px solid var(--line,rgba(244,246,251,.08));font-size:12.5px;color:var(--muted,#8A93A8);
  display:flex;align-items:center;gap:8px;min-width:0}
.hb-tx a{color:var(--hb-a);font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hb-tx a:hover{text-decoration:underline;text-underline-offset:2px}
.hb-tx svg{width:11px;height:11px;flex:none;opacity:.7}

@media (max-width:360px){.hb-nums b{font-size:17px}.hb{padding:12px 13px 11px}}

@media (prefers-reduced-motion:reduce){
  .hb-pulse.beat::before,.hb-pulse.beat::after,.hb-pulse.beat i{animation:none}
  .hb-pulse.beat::after{opacity:.5;transform:scale(1.6)}
}