/* Lijnfiguur: alle opmaak, als vast bestand (de CSP staat geen ingevoegde stijl toe).
   Een variant zet alleen de kleuren: --lf-vlak (achtergrond van de vlakken), --lf-rand, --lf-mid,
   --lf-dim en --lf-licht (de enige lichte lijn). Geen vulling, gloed of verloop: alleen de lijn licht op. */
.lijnfiguur {
  --lf-vlak: #ffffff; --lf-rand: #a4a4ac; --lf-mid: #c3c3c9; --lf-dim: #e0e0e4; --lf-licht: #18181b;
  display: none; position: relative; aspect-ratio: 5 / 4; width: 100%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.lf-aan .lijnfiguur { display: block; }
.lijnfiguur svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lijnfiguur svg path {
  fill: var(--lf-vlak); stroke: var(--lf-mid); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; transition: stroke 260ms cubic-bezier(.5, 0, .1, 1);
}
.lijnfiguur svg .nf { fill: none; }
.lijnfiguur svg .sil { stroke: var(--lf-rand); }
.lijnfiguur svg .lo { stroke: var(--lf-dim); }
.lijnfiguur svg .hi { stroke: var(--lf-licht); }
.lijnfiguur svg .dash { stroke: var(--lf-mid); stroke-dasharray: 1 3; }
.lijnfiguur svg circle.stip { stroke: none; fill: var(--lf-dim); transition: fill 260ms cubic-bezier(.5, 0, .1, 1); }
.lijnfiguur svg circle.stip.aan { fill: var(--lf-licht); }
.lf-lees {
  position: absolute; top: 10px; right: 12px; z-index: 1; pointer-events: none;
  font: 600 12px/1 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; letter-spacing: .04em;
  color: var(--lf-rand); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .lijnfiguur svg path, .lijnfiguur svg circle.stip { transition: none; }
}