/* ============================================================
   NetRisk.io — Self-explaining attack-surface graph
   Zoned left→right data-flow story, live packets, evidence
   badges, and an auto-narrated value walkthrough.
   ============================================================ */

/* zone bands behind the nodes */
.graph-zone {
  position: absolute; top: 8px; bottom: 8px; z-index: 0; pointer-events: none;
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004));
}
.graph-zone .gz-label {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.graph-zone[data-z="org"]   { border-color: var(--verified-20); background: linear-gradient(180deg, rgba(224,145,46,.05), transparent 60%); }
.graph-zone[data-z="org"] .gz-label { color: var(--brand); }
.graph-zone[data-z="vendor"] { border-color: rgba(16,163,127,.22); background: linear-gradient(180deg, rgba(16,163,127,.05), transparent 60%); }
.graph-zone[data-z="vendor"] .gz-label { color: var(--evidence); }
.graph-zone[data-z="infra"] .gz-label { color: var(--text-3); }
.graph-zone[data-z="exposure"] { border-color: var(--critical-20); background: linear-gradient(180deg, rgba(219,84,64,.06), transparent 60%); }
.graph-zone[data-z="exposure"] .gz-label { color: var(--critical); }

/* evidence badge on each node */
.g-node .gn-badge {
  position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--bg-2); z-index: 4; display: grid; place-items: center;
}
.g-node .gn-badge.ver { background: var(--evidence); }
.g-node .gn-badge.obs { background: var(--observed); }
.g-node .gn-badge.exp { background: var(--missing); }
.g-node .gn-badge.risk { background: var(--critical); }
.g-node .gn-badge.data { background: var(--brand); }
.g-node .gn-badge svg { width: 7px; height: 7px; color: var(--bg); }

/* edge variants */
.g-edge.flow { stroke: var(--observed); stroke-width: 1.6; opacity: .5; }
.g-edge.risk { stroke: var(--critical); stroke-width: 1.6; opacity: .42; }
.g-edge.lit  { opacity: .7; }
/* during the narrated walkthrough */
.g-edge.narrate { opacity: 1 !important; stroke-width: 2.6; filter: drop-shadow(0 0 7px currentColor); }
.g-edge.narrate.lit { stroke: var(--evidence); }
.g-edge.narrate.risk { stroke: var(--critical); }
.g-edge.narrate.flow { stroke: var(--brand); }
.g-edge.dim-edge { opacity: .08 !important; }

/* flowing data packets (SVG circles) */
.packet { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .packet { display: none; } }

/* node focus states during walkthrough */
.g-node { transition: opacity .55s var(--ease-out); }
.g-node .gn-dot { transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s, background .35s; }
.g-node.focus .gn-dot { transform: scale(1.16); border-color: var(--border-strong); box-shadow: 0 0 26px -4px rgba(255,255,255,.18); }
.g-node.focus .gn-label { color: var(--text); background: rgba(11,13,16,.92); }
.g-node.softdim { opacity: .22; }

/* enhanced narration caption */
.path-caption { align-items: flex-start; padding: 12px 18px; max-width: 460px; }
.path-caption .pc-body { text-align: left; }
.path-caption .pc-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.path-caption #pathText { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin-top: 2px; }
.path-caption .pc-val { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.path-caption.risk-on { border-color: var(--critical-20); }
.path-caption.risk-on .pc-step { color: var(--critical); }
.path-caption.risk-on .pc-dot { background: var(--critical); }

/* walkthrough step dots */
.walk-dots { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 6; }
.walk-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .3s, transform .3s; }
.walk-dots i.on { background: var(--brand); transform: scale(1.3); }
.walk-dots i.risk { background: var(--critical); }

/* legend tweak for new flow type */
.graph-legend .lg.flow { color: var(--observed); }

/* ---- known-vendor brand marks on graph nodes ---- */
.g-node[data-brand="openai"] .gn-dot {
  background: linear-gradient(180deg, #12B68C, #0E8E6E);
  border-color: rgba(16,163,127,.55); color: #fff;
  box-shadow: 0 0 22px -6px rgba(16,163,127,.6), var(--shadow-md);
}
.g-node[data-brand="microsoft"] .gn-dot {
  background: #fff; border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 22px -8px rgba(0,164,239,.5), var(--shadow-md);
}
.gn-brand { width: 100%; height: 100%; display: grid; place-items: center; }
.gn-brand.oai svg { width: 20px; height: 20px; }
.gn-brand.ms { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 19px; height: 19px; }
.gn-brand.ms i { display: block; border-radius: 1.5px; }
.g-node[data-brand] .gn-dot { border-style: solid; }
.g-node[data-brand="openai"]:hover .gn-dot,
.g-node[data-brand="openai"].active .gn-dot,
.g-node[data-brand="openai"].focus .gn-dot { border-color: rgba(16,163,127,.9); box-shadow: 0 0 30px -4px rgba(16,163,127,.7); }
@media (max-width: 760px) {
  .gn-brand.oai svg { width: 16px; height: 16px; }
  .gn-brand.ms { width: 15px; height: 15px; }
}