/* ==========================================================================
   Shortcode: [data_guard_diagram]
   Ambient-flow diagram for the Data Guard page. Scoped under .dg-shortcode -
   --color-coral/black/white/deep-field/steel already exist as global theme
   variables (assets/css/style.css), so only the one variable this diagram
   needs that ISN'T already a site-wide token (--color-signal-teal) is
   declared here, scoped locally rather than added to :root.
   ========================================================================== */

.dg-shortcode{
  --color-signal-teal:#0099B8;
  background:var(--color-black);
  color:var(--color-white);
  max-width:100%;
  margin:0 auto 30px;
}

.dg-dirtoggle{display:none;align-items:center;gap:10px;margin-bottom:28px;}
.dg-dirtoggle.is-visible{display:flex;}
.dg-dirtoggle-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-steel);}
.dg-dir-btn{
  background:var(--color-deep-field);color:var(--color-white);border:1px solid transparent;
  padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
}
.dg-dir-btn.active{border-color:var(--color-signal-teal);color:var(--color-signal-teal);}

.dg-diagram{
  position:relative;
  display:grid;
  grid-template-columns:250px 130px 220px 130px 250px;
  grid-template-areas:
    "lnet larrow center rarrow rnet"
    "icons icons icons icons icons";
  row-gap:18px;
  align-items:start;
  margin:0 auto;
}

.dg-lnet{grid-area:lnet;} .dg-rnet{grid-area:rnet;}
.dg-larrow{grid-area:larrow;} .dg-rarrow{grid-area:rarrow;}

/* network boxes */
.dg-network{position:relative;z-index:2;background:var(--color-deep-field);}
.dg-network-header{display:flex;align-items:center;gap:10px;padding:10px 16px;}
.dg-network-header svg{width:25px;height:25px;color:var(--color-white);flex-shrink:0;}
.dg-network-item{
  background:var(--color-steel);color:var(--color-black);font-weight:700;font-size:14px;
  padding:11px 16px;
}
.dg-network-item + .dg-network-item{border-top:1px solid rgba(0,0,0,.14);}

/* bottom icon row */
.dg-datatypes{grid-area:icons;display:flex;justify-content:space-between;gap:4px;}
.dg-datatype{
  background:transparent;border:none;color:var(--color-white);font-family:inherit;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px;flex:1;text-align:center;
}
.dg-datatype svg{width:38px;height:38px;color:var(--color-white);transition:color .15s;}
.dg-datatype span{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--color-steel);}

/* .dg-datatypes-left/-right are plain pass-through wrappers at every other breakpoint - the
   10 items flow as direct flex children of .dg-datatypes, same as if the wrappers weren't
   there. They only become real boxes at the tablet breakpoint below. */
.dg-datatypes-left, .dg-datatypes-right{display:contents;}

/* center column — one combined box, same ground as the network boxes */
.dg-dataguard{
  grid-area:center;margin:0 auto;position:relative;z-index:2;
  background:var(--color-deep-field);color:var(--color-white);width:220px;
}

.dg-dataguard-header{
  display:flex;align-items:center;justify-content:center;
  padding:20px 12px;border-bottom:1px solid rgba(255,255,255,.08);
}
.dg-dataguard-title{font-size:16px;font-weight:700;color:var(--color-white);}

.dg-dataguard-stages{display:flex;}
.dg-filter-stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:18px 6px;text-align:center;min-height:66px;
}
.dg-filter-stage + .dg-filter-stage{border-left:1px solid rgba(255,255,255,.08);}
.dg-filter-stage svg{width:40px;height:40px;color:var(--color-signal-teal);flex-shrink:0;transition:color .15s;}
.dg-filter-stage-label{font-size:11px;font-weight:500;line-height:1.25;}
.dg-cdr-label{color:var(--color-coral);font-weight:700;font-size:13px;}

/* arrow bands */
.dg-arrowband{position:relative;height:150px;z-index:0;}
.dg-arrowband-label{
  position:absolute;left:50%;transform:translateX(-50%);width:118px;
  font-size:11px;font-weight:700;text-align:center;line-height:1.35;color:var(--color-white);
}
.dg-track{position:absolute;height:2px;background:rgba(0,153,184,.55);z-index:2;}
.dg-track::before,.dg-track::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border:5px solid transparent;
}
.dg-track::before{left:-1px;border-right-color:var(--color-signal-teal);transform:translate(-100%,-50%);opacity:.55;}
.dg-track::after{right:-1px;border-left-color:var(--color-signal-teal);transform:translate(100%,-50%);opacity:.55;}

.dg-fanlines{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.dg-fanlines line{stroke:var(--color-signal-teal);stroke-width:2;opacity:.55;}

.dg-ambient-pulse{
  position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;z-index:1;
  background:var(--color-coral);box-shadow:0 0 10px 2px rgba(255,90,60,.6);
  transform:translate(-50%,-50%);opacity:0;
}

.dg-mode-ambient #dgRuleEngine svg{animation:dg-filter-breathe 3.4s ease-in-out infinite;}
.dg-mode-ambient #dgFilterEngine svg{animation:dg-filter-breathe 3.4s ease-in-out infinite;animation-delay:.35s;}
@keyframes dg-filter-breathe{
  0%,100%{color:var(--color-signal-teal);}
  50%{color:var(--color-coral);}
}

/* ---------- mobile: stack vertically, single line per side (no fan) ----------
   ~20% of traffic is mobile - rather than shrinking the 5-column layout illegibly,
   this collapses it into one column and drops the multi-route fan down to a single
   connecting line. Same ambient-pulse mechanics (JS-measured, not hardcoded), just
   measured along the vertical axis instead of horizontal. */
@media (max-width:1023px){
  .dg-diagram{
    grid-template-columns:1fr;
    grid-template-areas:
      "lnet"
      "larrow"
      "center"
      "rarrow"
      "rnet"
      "icons";
    row-gap:14px;
    max-width:420px;
  }
  .dg-dataguard{width:100%;max-width:320px;}
  .dg-arrowband{height:70px;}
  .dg-arrowband-label{display:none;}
  .dg-fanlines{display:none;}
  .dg-ambient-pulse{top:0;left:50%;}
  .dg-track::before,.dg-track::after{left:50%;right:auto;top:auto;bottom:auto;border-color:transparent;}
  .dg-track::before{top:-1px;border-bottom-color:var(--color-signal-teal);transform:translate(-50%,-100%);}
  .dg-track::after{bottom:-1px;border-top-color:var(--color-signal-teal);transform:translate(-50%,100%);}
  .dg-datatypes{flex-wrap:wrap;justify-content:flex-start;}
  .dg-datatype{flex:1 1 30%;min-width:96px;}
  .dg-dirtoggle{flex-wrap:wrap;justify-content:center;}
  .dg-dirtoggle-label{flex:0 0 100%;text-align:center;margin-bottom:4px;}
}

/* ---------- wider mobile / small tablet: enough room to tile the 5-and-5 data types as
   columns flanking the diagram instead of wrapping below it. Narrower phones fall through
   to the wrap-below treatment above instead - there isn't room for three columns there. ----------
   Decoupled from the main stack's row heights entirely - a plain absolute-positioned overlay
   with two independent flex columns, so each side just stacks its own 5 items compactly. */
@media (min-width:640px) and (max-width:1023px){
  .dg-diagram{
    grid-template-columns:150px minmax(260px,320px) 150px;
    grid-template-areas:
      ". lnet ."
      ". larrow ."
      ". center ."
      ". rarrow ."
      ". rnet .";
    max-width:640px;
  }
  .dg-datatypes{
    grid-area:auto;position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;justify-content:space-between;align-items:flex-start;
    pointer-events:none;
  }
  .dg-datatypes-left, .dg-datatypes-right{
    display:flex;flex-direction:column;gap:14px;width:150px;pointer-events:auto;
  }
  .dg-datatype{flex:none;width:100%;}
}