/* Roadmap in de stijl van de Productscan en Winst berekenen (sessie roadmap-nieuwe-stijl).
   Kop: mono label in de paginakop, grote Sora-kop met blauw slotwoord (.vs-title / .vs-acc uit videostijl.css).
   De volgende les staat in de brede gloeiende kaart (.ts-stage.ts-card uit tool-start.css) met de grote knop (.ts-go).
   Op een laptop staan de fases links en de lessen van de gekozen fase rechts, zodat alles zonder scrollen past.
   Geladen na tool-start.css; body:not(#vs):not(#rm) wint van de oudere lagen. Alleen de voorkant: de markup-hooks blijven gelijk. */

/* ---------- Paginakop: alleen het label, zonder streep ---------- */
body:not(#vs):not(#rm)[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap { min-height: 44px; margin-bottom: 0; border-bottom: 0; }
body:not(#vs):not(#rm)[data-agent="roadmap"]:has(.rm-quiet) .center-head-roadmap .title { font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; color: var(--ice, #5b8bff); }

/* ---------- Grote kop ---------- */
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet { gap: 16px; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-title { margin: 0; font-size: clamp(34px, 3.4vw, 48px); }

/* ---------- Volgende les in de gloeiende kaart ---------- */
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary { display: block; padding: 0; border: 0; border-radius: 22px; background: none; box-shadow: none; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary::before { content: none; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary > .ts-aurora { position: absolute; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary .ts-phone { position: relative; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary .ts-spin { position: absolute; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: center; background: linear-gradient(180deg, #141d4a 0%, #0d1434 60%, #0a0f28 100%); }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-upcoming { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 28px; border: 0; background: none; box-shadow: none; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-quiet-kicker { display: block; margin: 0 0 10px; padding: 0; border-radius: 0; background: none; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: #9db6ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-upcoming h3 { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-next-goal { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #b9c2e4; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-quiet-meta { margin: 6px 0 0; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; letter-spacing: 0.06em; color: var(--muted, #8790b5); }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-go.ts-go { flex: 0 0 auto; width: auto; min-width: 200px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--ts-blue, #4f6fff); font: 700 17px "Sora", "IBM Plex Sans", sans-serif; gap: 10px; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-go.ts-go:hover:not(:disabled) { background: #6080ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-progress { display: flex; flex-direction: column; gap: 12px; padding: 22px 28px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); background: none; }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #8790b5); }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-progress strong { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: #ffffff; text-transform: none; }

/* ---------- Kop boven de fases ---------- */
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-route-heading h2 { font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted, #8790b5); }
body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-phase-pick { display: none; }

/* ---------- Laptop: fases links, lessen van de gekozen fase rechts ---------- */
@media (min-width: 1180px) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rm-phases, 8), auto) 1fr; grid-auto-flow: row dense; column-gap: 28px; row-gap: 4px; align-items: start; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases > .rm-quiet-phase { display: contents; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-phasehead { grid-column: 1; position: relative; margin: 0; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases > .rm-quiet-phase > div { grid-column: 2; grid-row: 1 / -1; align-self: start; min-width: 0; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-lessons { gap: 4px; padding: 0; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-lesson { min-height: 48px; padding-top: 5px; padding-bottom: 5px; border-radius: 12px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-phasehead.is-selected { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.07); }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-phasehead { min-height: 48px; padding: 4px 16px 4px 22px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-board-phasehead .rm-phase-number { width: 34px; height: 34px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-quiet-chevron { display: none; }
  /* De lichtlijn loopt nu langs de faseknoppen zelf; de lijn naar de lessen en de vonk vallen weg (die staan rechts). */
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phase::before, body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phase::after { content: none; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phase:not(:last-child) > .rm-board-phasehead::before { content: ""; position: absolute; z-index: 0; left: var(--rm-line-x, 39px); top: 50%; height: calc(100% + 4px); width: 2px; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phase.is-lit:not(:last-child) > .rm-board-phasehead::before { left: calc(var(--rm-line-x, 39px) - 1px); width: 4px; border-radius: 2px; background: var(--ice, #5b8bff); box-shadow: 0 0 8px rgba(91, 139, 255, 0.5); }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-quiet-phases .rm-spark, body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-board-lessons > li.is-lit::before { display: none; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-phase-pick { display: flex; grid-column: 2; grid-row: 1 / -1; align-self: start; min-height: 240px; align-items: center; justify-content: center; margin: 0; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 16px; font-size: 14px; color: var(--muted, #8790b5); }
}

@media (max-width: 760px) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-title { font-size: 30px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card { grid-template-columns: 1fr; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-upcoming { flex-direction: column; align-items: stretch; padding: 20px 18px 16px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-go.ts-go { width: 100%; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-progress { padding: 14px 18px 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .rm-board-progress strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-journey-summary .ts-spin, body:not(#vs):not(#rm) #roadmapCenter .rm-quiet .rm-hero-card .ts-go { animation: none; }
}

/* ======================= Lespagina ======================= */
/* Kop: mono label, grote Sora-titel met blauw slotwoord, voortgang van de fase eronder. */
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-sticky-meta .vs-title { font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -0.035em; line-height: 1.08; }

/* Leerdoel, voorbeeld en stappen in een rustige kolom; de hoofdactie is de knop naar de tool. */
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-learning-goal { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 22px; border: 1px solid rgba(91, 139, 255, 0.38); border-radius: 18px; background: linear-gradient(180deg, #141d4a 0%, #0d1434 100%); box-shadow: 0 16px 50px rgba(46, 90, 220, 0.18); }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-learning-goal::before { content: none; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-learning-kicker { margin: 0; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9db6ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-learning-goal > p:not(.rm-learning-kicker) { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: #ffffff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-updated-note { display: block; margin: 0; padding: 10px 12px; border: 1px solid rgba(255, 196, 92, 0.28); border-radius: 10px; background: rgba(255, 196, 92, 0.08); font-size: 13px; line-height: 1.45; color: #f3d9a6; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-tool-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font: 700 16px "Sora", "IBM Plex Sans", sans-serif; cursor: pointer; box-shadow: 0 10px 34px rgba(84, 120, 255, 0.4); }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-tool-link:hover:not(:disabled) { background: #6080ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-tool-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-outline { margin: 0; padding: 4px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-outline > summary { padding: 10px 0; font-size: 14px; color: var(--copy, #c3cadb); cursor: pointer; }

/* Video bovenaan de leskolom, met dezelfde rustige gloed. */
body:not(#vs):not(#rm) #roadmapCenter .rm-article > .rm-video { margin: 0 0 20px; border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 60px rgba(46, 90, 220, 0.16); }

/* Stappen als kaarten. */
body:not(#vs):not(#rm) #roadmapCenter .rm-md .rm-step { margin: 0 0 14px; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.025); }
body:not(#vs):not(#rm) #roadmapCenter .rm-md .rm-step > :is(h2, h3):first-child { margin-top: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; }

/* Eindcheck: dezelfde gloeiende rand, kop met blauw slotwoord. */
body:not(#vs):not(#rm) #roadmapCenter .rm-endcheck { padding: 24px; border: 1px solid rgba(91, 139, 255, 0.38); border-radius: 18px; background: linear-gradient(180deg, rgba(20, 29, 74, 0.7), rgba(13, 20, 52, 0.7)); box-shadow: 0 14px 50px rgba(46, 90, 220, 0.14); }
body:not(#vs):not(#rm) #roadmapCenter .rm-endcheck .rm-learning-kicker { font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9db6ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-endcheck h2 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }

/* Hoofdknop onderaan: groot en gloeiend, zoals .ts-go. */
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-footer .rm-footer-primary { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font: 700 16px "Sora", "IBM Plex Sans", sans-serif; box-shadow: 0 10px 34px rgba(84, 120, 255, 0.4); }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-footer .rm-footer-primary:hover:not(:disabled) { background: #6080ff; }
body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-footer .rm-footer-primary:disabled { background: #1c2650; color: #8892b0; box-shadow: none; }

/* Laptop: video en uitleg links, leerdoel en knop naar de tool rechts (blijft in beeld bij scrollen). */
@media (min-width: 1180px) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-article:has(> .rm-lesson-aside) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 28px; align-items: start; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-article:has(> .rm-lesson-aside) > * { grid-column: 1; min-width: 0; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-article:has(> .rm-lesson-aside) > .rm-lesson-aside { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 16px; }
}
@media (max-width: 1179px) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside { margin-bottom: 18px; }
}
@media (max-width: 760px) {
  body:not(#vs):not(#rm) #roadmapCenter .rm-lesson-aside .rm-learning-goal { padding: 18px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-md .rm-step { padding: 16px 18px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-endcheck { padding: 18px; }
  body:not(#vs):not(#rm) #roadmapCenter .rm-endcheck h2 { font-size: 22px; }
}