/* Kinnection, bouwstenen: de doorlopende lijn met haar knopen. Prompt 05.
   De lijn is geen decor, ze is de volgorde. Ze loopt in de vrije strook aan de rand van de pagina, van knoop naar knoop,
   en tekent mee terwijl je scrolt. Een knoop die bereikt is, kleurt en draait op zijn punt. Het tekenen staat in lijn.js.

   Scherm: de lijn steekt over tussen links en rechts. Gsm en tablet: ze golft langs de linkerrand.
   Beweging uit: de lijn staat er meteen helemaal.

   Opbouw: <main data-lijnveld> met daarin één <svg class="lijn">, en in elke sectie een <span class="knoop knoop-links" data-knoop>.
   Een knoop staat in een .binnen, zodat hij in de strook valt. Wat boven de lijn moet liggen (kaart, beeldslot, paneel) doet dat vanzelf. */

[data-lijnveld]{position:relative;overflow-x:clip}
.lijn{position:absolute;inset:0;z-index:var(--layer-thread);width:100%;height:100%;overflow:visible;pointer-events:none}
.lijn path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lijn-spoor{stroke:var(--color-thread-track);stroke-width:var(--stroke-check)}
.lijn-draad{stroke:var(--color-thread);stroke-width:var(--stroke-thread)}

.knoop{position:absolute;z-index:var(--layer-marker);top:0;left:calc(var(--page-margin-start) / 2 - var(--knot-size) / 2);width:var(--knot-size);height:var(--knot-size);border:var(--stroke-check) solid var(--color-border-quiet);border-radius:var(--radius-knot);background:var(--color-surface);transition:background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm),transform var(--duration-spring) var(--ease-spring)}
.knoop.aan{background:var(--color-accent);border-color:var(--color-accent);transform:rotate(var(--knot-turn))}
@media (min-width:900px){
  .knoop-rechts{left:auto;right:calc(var(--page-margin-end) / 2 - var(--knot-size) / 2)}
}