/* Ontwerp 1 — Journey
 *
 * Onderweg zijn. Ruime marges, zachte rondingen, warme accenten tegen een indigo lucht.
 * Alles staat wat verder uit elkaar dan strikt nodig is: dat is wat het rustig maakt.
 * De kaart is hier het rijkst — een echte horizon met lagen diepte.
 */

/* --main-pad-x: de wereldkaart (leerpad.css) vloeit precies zo ver uit als deze zijpadding. */
:root[data-design="journey"] .main { --main-pad-x: var(--space-7); padding: var(--space-7) var(--main-pad-x) var(--space-8); }
:root[data-design="journey"] .sidebar { padding: var(--space-6) var(--space-4); }

/* Navigatie als pillen. Zachter dan de rechthoekige blokken, en het maakt de actieve
   plek duidelijker zonder een extra kleur nodig te hebben. */
:root[data-design="journey"] .nav button { border-radius: var(--radius-pill); padding: 0 var(--space-4); }
:root[data-design="journey"] .nav button.active {
  background: var(--accent-quiet);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
:root[data-design="journey"] .nav button.active .icon { color: var(--accent); }

/* De koptekst van het overzicht is het gezicht van het scherm en mag groot zijn. */
:root[data-design="journey"] .topbar { padding-bottom: var(--space-5); border-bottom: 0; }
:root[data-design="journey"] h1 { font-size: clamp(30px, 4vw, 42px); }
:root[data-design="journey"] .kicker { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

/* Kaarten krijgen lucht en een zachte rand in plaats van een harde lijn. */
:root[data-design="journey"] .lesson-card {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow: var(--shadow-2);
}
:root[data-design="journey"] .overview-group {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  background: var(--surface-soft);
}
:root[data-design="journey"] .skills,
:root[data-design="journey"] .profile-summary,
:root[data-design="journey"] .summary-metrics {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface-soft);
}
:root[data-design="journey"] .skill:first-child,
:root[data-design="journey"] .profile-metric:first-child,
:root[data-design="journey"] .summary-metric:first-child { padding-left: var(--space-5); }
:root[data-design="journey"] .skill:last-child,
:root[data-design="journey"] .profile-metric:last-child,
:root[data-design="journey"] .summary-metric:last-child { padding-right: var(--space-5); }

:root[data-design="journey"] .flashcard {
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow: var(--shadow-2);
}
:root[data-design="journey"] .choice { border-radius: var(--radius-m); min-height: 56px; }
:root[data-design="journey"] .primary-button,
:root[data-design="journey"] .secondary-button { border-radius: var(--radius-pill); min-height: 48px; padding: 0 var(--space-5); }

/* De lesomgeving mag hier het meest op reizen lijken: brede marges, grote titel. */
:root[data-design="journey"] .lesson-main { padding: var(--space-7) var(--space-8) var(--space-8); }
:root[data-design="journey"] .stage-title { font-size: clamp(36px, 5.4vw, 58px); }
:root[data-design="journey"] .step-item { border-radius: var(--radius-pill); }

/* Kaart: warme horizon, dikkere route, zichtbare zonnestand. */
:root[data-design="journey"] .world { border-radius: var(--radius-xl); }
:root[data-design="journey"] .world-sun { opacity: .16; }
:root[data-design="journey"] .world-band-far { opacity: .7; }
:root[data-design="journey"] .world-route-base { stroke-dasharray: 2 12; opacity: .55; }
:root[data-design="journey"] .world-route-done { stroke-width: 4.5; }
:root[data-design="journey"] .world-node-disc { stroke-width: 2.5; }
:root[data-design="journey"] .world-landmark-shape path,
:root[data-design="journey"] .world-landmark-shape circle { opacity: .38; stroke-width: 1.8; }
:root[data-design="journey"] .world-landmark-label { fill: var(--accent); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }

/* Beweging met iets meer uitloop: het voelt als aankomen in plaats van als verspringen. */
:root[data-design="journey"] { --dur-3: .56s; --dur-4: .86s; }