/* Shared with the workshop: built into the player and published as /assets/track.css. */
/* The track map (spoor.ts) */
.legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 14px 8px; font-size: .74rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.legenda span { display: inline-flex; align-items: center; gap: 4px; }
.legenda svg { flex: none; }
.rij { position: relative; min-height: 28px; padding: 5px 8px 5px calc(var(--gw) + 6px); border-radius: 6px; cursor: pointer; }
.rij:hover { background: var(--surface-2); }
.rij .t { position: absolute; width: 2.5px; background: var(--track); border-radius: 2px; }
.rij .t.lr { background: var(--loop); width: 2px; }
.rij .h { position: absolute; height: 2px; background: var(--loop); }
.rij .pijl { position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--loop); }
.rij .wissel { position: absolute; height: 14px; border-top: 2.5px solid var(--track); border-right: 2.5px solid var(--track); border-top-right-radius: 10px; }
.rij .samen { position: absolute; top: 0; height: 50%; border-right: 2.5px solid var(--track); border-bottom: 2.5px solid var(--track); border-bottom-right-radius: 8px; }
.rij .gl { position: absolute; overflow: visible; }
.g-keuze { fill: var(--keuze); stroke: var(--surface); stroke-width: 1.5; }
.g-kans { fill: var(--kans); stroke: var(--surface); stroke-width: 1.5; }
.g-kans-in { fill: var(--surface); }
.g-auto { fill: var(--surface); stroke: var(--track); stroke-width: 2; }
.g-venster { fill: var(--venster); }
.g-einde { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.g-start { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.g-stop { fill: var(--ink); }
.rij .trein { position: absolute; width: 18px; height: 18px; border-radius: 50%; display: none; background: var(--signal); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--signal); }
.rij.hier { background: var(--signal-soft); }
.rij.net:not(.hier) .gl { filter: drop-shadow(0 0 0 var(--signal)); }
.rij.net .rn { text-decoration: underline 2px var(--signal); text-underline-offset: 3px; }
.rij.hier .trein { display: block; animation: puls 1.6s ease-out infinite; }
.rij.hier .gl { visibility: hidden; }
@keyframes puls { 0% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--signal); } 70% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 11px transparent; } 100% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--signal); } }
@media (prefers-reduced-motion: reduce) { .rij.hier .trein { animation: none; } }
.rt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rn { font-weight: 600; line-height: 18px; }
.rm { width: 100%; font-size: .76rem; color: var(--muted); font-family: var(--f-mono); line-height: 1.35; overflow-wrap: anywhere; }
.tel:empty { display: none; }
.tel { font-size: .74rem; font-weight: 700; background: var(--signal); color: var(--signal-ink); border-radius: 4px; padding: 0 6px; font-family: var(--f-mono); }
:root .tel { color: #3a2a00; }
.r-seq .rn { font-size: .86rem; font-weight: 800; color: var(--track); }
.r-loop .rn { color: var(--ink); }
.r-loop .rm, .r-case .rm { font-family: var(--f-sans); }
.r-case .rn { font-weight: 600; font-style: italic; color: var(--muted); font-size: .86rem; }
.r-gate .rn, .r-endev .rn { font-weight: 400; color: var(--muted); font-size: .8rem; }
.r-gate .rm { display: none; }
.r-start .rn, .r-end .rn { color: var(--muted); font-size: .8rem; font-weight: 600; }
.r-flow .rn { font-weight: 800; }
.r-loopEnd { min-height: 20px; padding: 0; cursor: default; }
.r-caseEnd { min-height: 14px; padding: 0; cursor: default; }
.rij.route .rn { font-weight: 800; }
.rij.stil .rt { opacity: .5; }
.rij.stil .gl { opacity: .45; }