/*
 * Network Graphics System - DNA Helix component styles.
 *
 * Like Mesh, this component's SVG content is entirely generated and
 * mutated at runtime by components/dna-helix.js - there is no
 * hand-authored markup to colocate a template with. This file therefore
 * owns paint only: colour and line weight (from variables.css). Position,
 * opacity AND point radius are all written directly to SVG attributes
 * every frame by dna-helix.js (see its docstring for why: the same
 * CSS-transition-on-SVG-geometry gap that affected an earlier Mesh
 * version applies here too, this component additionally needs per-point
 * depth shading, and its points vary in size per frame - none of that a
 * static CSS rule can express). Deliberately no `r` here for `.dna-point`:
 * a CSS-declared value for an SVG geometry property always outranks the
 * same property set via attribute, so keeping `r` here would silently
 * defeat dna-helix.js's per-frame `setAttribute('r', ...)` sizing.
 * Brightness during a pulse is layered on top via the Web Animations API,
 * which - being a real CSS-level effect - takes priority over the plain
 * `opacity` presentation attribute dna-helix.js keeps refreshing
 * underneath it, so the two never fight: WAAPI wins while a pulse plays,
 * then the continuously-updated attribute shows through again the
 * instant it ends.
 */

.network-dna-helix {
  display: block;
  width: 100%;
  height: 100%;
}

.dna-point {
  fill: rgba(var(--network-point-rgb), 1);
}

/* Traces each strand's own path (consecutive point to consecutive point)
   - what makes a strand read as one continuous wave instead of scattered
   dots. Same colour/weight token as .dna-rung; dimmer only via the
   opacity dna-helix.js writes per frame (JS-side alpha range), not via a
   different token here - "same lines" as the rest of the system, per
   static/network/README.md. */
.dna-strand-line {
  fill: none;
  stroke: rgba(var(--network-line-rgb), 1);
  stroke-width: var(--network-line-width);
  stroke-linecap: round;
  /* Dotted, not solid: a short dash close to the line's own width with a
     round linecap renders as a chain of tiny dots rather than a segment -
     lighter and more "technological" than a continuous stroke, without
     needing a second element or token. */
  stroke-dasharray: 0.1 3;
}

/* Connects corresponding points across the two strands - the "ladder"
   rungs. Same weight token as .dna-strand-line; reads dimmer overall
   because dna-helix.js gives it a lower opacity range (secondary
   cross-link, the strand lines carry the primary silhouette).
   Deliberately no `stroke` colour here: dna-helix.js sets it per rung, to
   `url(#<its own per-instance linearGradient>)` - a CSS-declared `stroke`
   would silently outrank that attribute (same reasoning as `.dna-point`
   and `r` above), so the gradient has to stay JS-only. */
.dna-rung {
  fill: none;
  stroke-width: var(--network-line-width);
  stroke-linecap: round;
  stroke-dasharray: 0.1 3; /* dotted, same reasoning as .dna-strand-line above */
}

/* Colour stops for .dna-rung's <linearGradient> (built per instance in
   dna-helix.js) - only stop-opacity differs between the three stops
   (dim/full/dim), so the colour itself lives here once, from the same
   brand token every other line/point uses, rather than being duplicated
   per stop in JS. */
.dna-rung-gradient-stop {
  stop-color: rgb(var(--network-line-rgb));
}