/* Droptine Network Graph
   Scoped component CSS for droptine-group.webflow.io.
   Relies on the site's existing Webflow variables, fonts, and theme tokens. */

.dt-network{
  --dt-bg:var(--primary--background,var(--_color---neutral--off-white,#f2f2f2));
  --dt-text:var(--primary--text,var(--_color---neutral--dark-gray,#151919));
  --dt-line:var(--primary--border,var(--_color---neutral--mid-gray-1,#bfbdba));
  --dt-brand:var(--primary--accent,var(--_color---primary--brand,#2e3d28));
  --dt-brand-interactive:var(--primary--accent-dark,var(--_color---primary--brand-interactive,#253420));
  --dt-rust:var(--_color---secondary--rust,#b45f36);
  --dt-tan:var(--_color---secondary--tan,#d0b78e);
  --dt-sand:var(--_color---secondary--sand,#d8c49c);
  --dt-blue:var(--_color---secondary--blue,#5d6c7b);
  --dt-muted:var(--_color---neutral--mid-gray-2,#7e827d);
  --dt-body:var(--_typography---fonts--body,inherit);
  --dt-heading:var(--_typography---fonts--heading,Georgia,serif);
  --dt-mono:var(--_typography---fonts--mono,monospace);
  --dt-user:var(--dt-brand);
  --dt-vendor:color-mix(in srgb,var(--dt-tan) 72%,var(--dt-brand));
  --dt-saas:var(--dt-blue);
  --dt-device:color-mix(in srgb,var(--dt-muted) 70%,var(--dt-brand));
  --dt-risk:var(--dt-rust);
  --dt-node-shadow:rgba(16,19,18,.14);
  --dt-node-shadow-tight:rgba(16,19,18,.22);
  --dt-icon-shadow:rgba(16,19,18,.22);
  --dt-halo-core:rgba(16,19,18,.07);
  --dt-halo-mid:rgba(16,19,18,.04);
  --dt-halo-edge:rgba(16,19,18,.016);
  box-sizing:border-box;
  position:relative;
  width:100%;
  max-width:100%;
  min-height:clamp(520px,58vw,760px);
  aspect-ratio:3/2;
  overflow:hidden;
  overflow-wrap:anywhere;
  isolation:isolate;
  background:var(--dt-bg);
  color:var(--dt-text);
  border:1px solid color-mix(in srgb,var(--dt-line) 55%,transparent);
  font-family:var(--dt-body);
}

.dt-network,.dt-network *,.dt-network *::before,.dt-network *::after{box-sizing:border-box}

.dt-network[data-dt-theme="dark"]{
  --dt-user:color-mix(in srgb,var(--dt-brand) 52%,var(--dt-text));
  --dt-vendor:color-mix(in srgb,var(--dt-tan) 78%,var(--dt-text));
  --dt-saas:color-mix(in srgb,var(--dt-blue) 76%,var(--dt-text));
  --dt-device:color-mix(in srgb,var(--dt-muted) 66%,var(--dt-text));
  --dt-risk:color-mix(in srgb,var(--dt-rust) 82%,var(--dt-text));
  --dt-node-shadow:rgba(0,0,0,.38);
  --dt-node-shadow-tight:rgba(0,0,0,.56);
  --dt-icon-shadow:rgba(0,0,0,.5);
  --dt-halo-core:rgba(0,0,0,.2);
  --dt-halo-mid:rgba(0,0,0,.12);
  --dt-halo-edge:rgba(0,0,0,.05);
}

@media (prefers-color-scheme:dark){
  .dt-network:not([data-dt-theme="light"]){
    --dt-user:color-mix(in srgb,var(--dt-brand) 52%,var(--dt-text));
    --dt-vendor:color-mix(in srgb,var(--dt-tan) 78%,var(--dt-text));
    --dt-saas:color-mix(in srgb,var(--dt-blue) 76%,var(--dt-text));
    --dt-device:color-mix(in srgb,var(--dt-muted) 66%,var(--dt-text));
    --dt-risk:color-mix(in srgb,var(--dt-rust) 82%,var(--dt-text));
    --dt-node-shadow:rgba(0,0,0,.38);
    --dt-node-shadow-tight:rgba(0,0,0,.56);
    --dt-icon-shadow:rgba(0,0,0,.5);
    --dt-halo-core:rgba(0,0,0,.2);
    --dt-halo-mid:rgba(0,0,0,.12);
    --dt-halo-edge:rgba(0,0,0,.05);
  }
}

.dt-network::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(color-mix(in srgb,var(--dt-text) 11%,transparent) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 54%,transparent 84%);
  opacity:.15;
  pointer-events:none;
}

.dt-network__topbar{
  position:absolute;
  z-index:8;
  top:clamp(12px,1.8vw,22px);
  left:clamp(12px,1.8vw,22px);
  right:clamp(12px,1.8vw,22px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--_layout---grid--gap-sm,16px);
  pointer-events:none;
}

.dt-network__eyebrow{
  display:block;
  margin-bottom:var(--_typography---eyebrow--bottom-margin,.45rem);
  font-family:var(--_typography---eyebrow--font,var(--dt-mono));
  font-size:clamp(9px,.75vw,12px);
  font-weight:var(--_typography---eyebrow--font-weight,500);
  line-height:var(--_typography---eyebrow--line-height,1);
  letter-spacing:var(--_typography---eyebrow--letter-spacing,.08em);
  text-transform:uppercase;
  color:color-mix(in srgb,var(--dt-text) 58%,transparent);
}

.dt-network__heading{
  margin:0;
  max-width:17ch;
  font-family:var(--_typography---h2--font,var(--dt-heading));
  font-size:clamp(28px,4.5vw,64px);
  font-weight:var(--_typography---h2--font-weight,500);
  line-height:.92;
  letter-spacing:var(--_typography---h2--letter-spacing,0);
  color:var(--dt-text);
  text-wrap:balance;
}

.dt-graph-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  width:min(560px,54vw);
  pointer-events:auto;
}
.dt-graph-tabs[hidden]{display:none}

.dt-graph-tab{
  appearance:none;
  border:1px solid color-mix(in srgb,var(--dt-line) 55%,transparent);
  background:color-mix(in srgb,var(--dt-bg) 90%,var(--dt-text) 4%);
  color:color-mix(in srgb,var(--dt-text) 78%,transparent);
  min-height:34px;
  border-radius:var(--_components---button--border-radius,999px);
  padding:0 12px;
  cursor:pointer;
  font-family:var(--_components---button--font,var(--dt-mono));
  font-size:11px;
  font-weight:var(--_components---button--font-weight,500);
  line-height:1;
  letter-spacing:var(--_components---button--letter-spacing,.03em);
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.dt-graph-tab:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--dt-brand) 44%,var(--dt-line))}
.dt-graph-tab.is-active{background:var(--dt-brand);border-color:var(--dt-brand);color:var(--_color---neutral--off-white,#f2f2f2)}

.dt-network__stage{position:absolute;inset:0;z-index:1}
.dt-network__lines,.dt-network__packets{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dt-network__lines{z-index:1;color:var(--dt-text)}
.dt-network__packets{z-index:2}
.dt-network__lines path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dt-network__packets circle{vector-effect:non-scaling-stroke}
.dt-network__halo-layer,.dt-network__node-layer{position:absolute;inset:0}
.dt-network__halo-layer{z-index:3;pointer-events:none}
.dt-network__node-layer{z-index:4}

.dt-node-halo{
  position:absolute;
  left:calc(var(--x)*1%);
  top:calc(var(--y)*1%);
  width:clamp(96px,11vw,170px);
  height:clamp(78px,9vw,140px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--dt-halo-core) 0%,var(--dt-halo-mid) 42%,var(--dt-halo-edge) 72%,transparent 100%);
  filter:blur(24px);
  opacity:.86;
}

.dt-node{
  --node-color:var(--dt-tan);
  position:absolute;
  left:calc(var(--x)*1%);
  top:calc(var(--y)*1%);
  width:clamp(62px,6.2vw,112px);
  height:clamp(76px,7.6vw,132px);
  transform:translate(-50%,-50%);
  text-align:center;
  filter:drop-shadow(0 14px 22px var(--dt-node-shadow)) drop-shadow(0 2px 3px var(--dt-node-shadow-tight));
}
.dt-node.is-user{--node-color:var(--dt-user)}
.dt-node.is-vendor{--node-color:var(--dt-vendor)}
.dt-node.is-saas{--node-color:var(--dt-saas)}
.dt-node.is-device{--node-color:var(--dt-device)}
.dt-node.is-risk{--node-color:var(--dt-risk)}
.dt-node__content{transition:opacity .22s ease,transform .22s ease;will-change:opacity,transform}
.dt-node.is-changing .dt-node__content{opacity:0;transform:translateY(3px) scale(.96)}

.dt-node__icon{
  display:block;
  height:clamp(20px,2.2vw,35px);
  line-height:clamp(20px,2.2vw,35px);
  font-size:clamp(17px,2vw,34px);
  color:var(--node-color);
  text-shadow:0 1px 2px var(--dt-icon-shadow),0 0 10px color-mix(in srgb,var(--node-color) 18%,transparent);
}

.dt-node__label{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  min-height:2.2em;
  margin-top:.25rem;
  overflow:hidden;
  font-family:var(--_typography---fonts--mono,var(--dt-mono));
  font-size:clamp(10px,.78vw,14px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:0;
  color:color-mix(in srgb,var(--dt-text) 92%,transparent);
  text-wrap:balance;
}
.dt-node.is-risk .dt-node__label{color:var(--dt-risk)}
.dt-node.is-risk.is-pulsing::after{
  content:"";
  position:absolute;
  left:50%;
  top:24%;
  width:clamp(38px,4.6vw,76px);
  height:clamp(38px,4.6vw,76px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--dt-risk) 32%,transparent) 0%,color-mix(in srgb,var(--dt-risk) 15%,transparent) 45%,transparent 72%);
  animation:dt-risk-pulse 1.35s cubic-bezier(.2,.7,.2,1) both;
  z-index:-1;
}
@keyframes dt-risk-pulse{from{opacity:.9;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}

.dt-network__legend{
  position:absolute;
  right:clamp(12px,1.8vw,22px);
  bottom:clamp(12px,1.8vw,22px);
  z-index:6;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  max-width:min(520px,60vw);
  pointer-events:none;
}

.dt-pill{
  --dot:var(--dt-brand);
  display:inline-flex;
  align-items:center;
  gap:.48em;
  min-height:28px;
  border:1px solid color-mix(in srgb,var(--dt-line) 50%,transparent);
  border-radius:999px;
  padding:0 .72em;
  background:color-mix(in srgb,var(--dt-bg) 88%,var(--dt-text) 4%);
  color:color-mix(in srgb,var(--dt-text) 78%,transparent);
  font-family:var(--_typography---fonts--mono,var(--dt-mono));
  font-size:clamp(9px,.68vw,12px);
  font-weight:500;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dt-pill::before{content:"";width:.58em;height:.58em;border-radius:50%;background:var(--dot);box-shadow:0 0 12px var(--dot)}
.dt-pill[data-kind="user"]{--dot:var(--dt-user)}
.dt-pill[data-kind="vendor"]{--dot:var(--dt-vendor)}
.dt-pill[data-kind="saas"]{--dot:var(--dt-saas)}
.dt-pill[data-kind="device"]{--dot:var(--dt-device)}
.dt-pill[data-kind="risk"]{--dot:var(--dt-risk)}

@media (prefers-reduced-motion:reduce){
  .dt-node,.dt-graph-tab{transition:none}
  .dt-node.is-risk::after{display:none}
}

@media (max-width:767px){
  .dt-network{
    --dt-mobile-gutter:clamp(16px,6vw,24px);
    inline-size:min(100%,calc(100vw - (var(--dt-mobile-gutter) * 2)));
    max-inline-size:calc(100vw - (var(--dt-mobile-gutter) * 2));
    min-inline-size:0;
    min-height:560px;
    aspect-ratio:4/5;
    margin-inline:0 auto;
  }
  .dt-network__stage,
  .dt-network__lines,
  .dt-network__packets{
    max-inline-size:100%;
    overflow:hidden;
  }
  .dt-network__topbar{display:block;right:12px}
  .dt-network__heading{font-size:clamp(26px,10vw,46px)}
  .dt-graph-tabs{width:100%;justify-content:flex-start;margin-top:12px}
  .dt-node{
    width:clamp(54px,16vw,68px);
    height:clamp(70px,18vw,84px);
  }
  .dt-node-halo{
    width:clamp(76px,24vw,104px);
    height:clamp(64px,20vw,88px);
  }
  .dt-node__icon{
    height:clamp(17px,5vw,22px);
    line-height:clamp(17px,5vw,22px);
    font-size:clamp(16px,5vw,22px);
  }
  .dt-node__label{
    -webkit-line-clamp:3;
    min-height:3.1em;
    font-size:clamp(9px,2.8vw,11px);
    line-height:1.03;
  }
  .dt-network__legend{
    left:10px;
    right:10px;
    max-width:calc(100% - 20px);
    justify-content:flex-start;
    overflow:hidden;
  }
  .dt-pill{
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
    min-height:26px;
    padding-inline:.6em;
    font-size:clamp(8px,2.45vw,10px);
    white-space:nowrap;
  }
}