/* === Single-line diagram section (injected, pure SVG/CSS) === */
.hz-sld{max-width:74rem;margin:0 auto;padding:7rem 2rem;}
.hz-sld-eyebrow{display:flex;align-items:center;gap:.8rem;
  font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#FBB320;}
.hz-sld-eyebrow::before{content:"";width:32px;height:1px;background:#FBB320;opacity:.6;}
.hz-sld h2{font:600 clamp(28px,4.5vw,48px)/1.05 Inter,sans-serif;letter-spacing:-.035em;color:#fff;margin:1.4rem 0 .9rem;max-width:18ch;}
.hz-sld .hz-sld-sub{font:400 16px/1.6 Inter,sans-serif;color:rgb(255 255 255/.55);max-width:34rem;}

.hz-sld-frame{position:relative;margin-top:2.5rem;
  opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.hz-sld-frame.in{opacity:1;transform:none;}
.hz-sld-frame svg{display:block;width:100%;height:auto;overflow:visible;}

/* interactive nodes + info card */
.sld-node{cursor:pointer;transition:filter .15s ease;}
.sld-node:hover{filter:brightness(1.6) drop-shadow(0 0 4px rgba(251,179,32,0.5));}
.hz-sld-card{position:absolute;z-index:5;min-width:198px;max-width:236px;padding:.9rem 1rem;
  background:rgba(15,14,19,0.97);border:1px solid rgb(255 255 255/.13);border-radius:12px;
  box-shadow:0 16px 42px rgba(0,0,0,.55);pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;}
.hz-sld-card.show{opacity:1;transform:none;}
.hz-sld-card .c-title{font:600 13px/1.25 Inter,sans-serif;letter-spacing:-.01em;color:#fff;}
.hz-sld-card .c-status{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .75rem;
  font:600 10px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;}
.hz-sld-card .c-status i{width:7px;height:7px;border-radius:50%;flex:none;}
.hz-sld-card .c-rows{display:flex;flex-direction:column;gap:.4rem;}
.hz-sld-card .c-row{display:flex;justify-content:space-between;gap:1rem;}
.hz-sld-card .c-row .k{font:400 11px/1.3 Inter,sans-serif;color:rgb(255 255 255/.45);}
.hz-sld-card .c-row .v{font:500 10px/1.3 "JetBrains Mono",monospace;color:rgb(255 255 255/.82);text-align:right;}

.hz-sld-legend{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem;
  font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255/.5);}
.hz-sld-legend span{display:flex;align-items:center;gap:.55rem;}
.hz-sld-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* marching-ants current flow */
@keyframes sld-flow{to{stroke-dashoffset:-26;}}
.sld-flow{stroke-dasharray:7 6;animation:sld-flow 1.1s linear infinite;}
/* fault pulse + expanding ring */
@keyframes sld-fault{0%,100%{opacity:.55;}50%{opacity:1;}}
.sld-fault{animation:sld-fault 1.5s ease-in-out infinite;}
@keyframes sld-ring{0%{r:13;opacity:.55;}100%{r:34;opacity:0;}}
.sld-ring{animation:sld-ring 1.9s ease-out infinite;}

/* mobile: keep the wide diagram legible by letting it scroll horizontally */
@media (max-width:760px){
  .hz-sld{padding:4.5rem 1.25rem;}
  .hz-sld-frame{margin-left:-1.25rem;margin-right:-1.25rem;padding:0 1.25rem 6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .hz-sld-frame::-webkit-scrollbar{display:none;}
  .hz-sld-frame svg{min-width:640px;}
  .hz-sld-card{display:none;}            /* hover card is desktop-only */
  .sld-node{cursor:default;}
  .hz-sld-legend{padding-left:1.25rem;}
}
@media (prefers-reduced-motion:reduce){.sld-flow,.sld-fault,.sld-ring{animation:none;}.sld-flow{stroke-dasharray:none;}}

/* === Embedded in the dashboard mockup's chart panel === */
/* Center the diagram in the panel. Size it by WIDTH (height:auto) so it fills
   the panel width and stays big — NOT height:100%, which makes the SVG viewport
   tall and shrinks the diagram via preserveAspectRatio. */
.hz-sld-embed{margin-top:0;height:100%;display:flex;align-items:center;justify-content:center;}
/* contain:paint isolates the marching-ants / fault repaint to the SVG box so it
   doesn't invalidate the surrounding card (helps scroll/animation smoothness). */
.hz-sld-embed svg{width:100%;height:auto;max-height:100%;margin:0;contain:paint;}
/* On mobile the panels stack full-width. Neutralize the OLD standalone-section
   mobile rules (640px min-width + negative margins + horizontal scroll) that
   still match .hz-sld-frame, so the embedded diagram just fits the narrow
   panel instead of overflowing it. */
@media (max-width:760px){
  .hz-sld-embed{margin:0;padding:0;overflow:visible;}
  .hz-sld-embed svg{min-width:0;width:100%;height:auto;max-height:none;}
}
.hz-sld-embed .hz-sld-card{min-width:170px;max-width:210px;padding:.7rem .85rem;}