/* Scope Compass - de rondleiding (ontwerp "Onboarding flow" 2d en 2e, claude.ai/design, 16 okt 2026).
   Eén taak: in negen korte stappen laten zien waar alles staat, en eindigen bij Mijn acties.
   Desktop: een venster van 900 x 600 met de stappen links en de uitleg met een bewegend beeld rechts.
   Telefoon (onder 640 px): het hele scherm, de stappenlijst wordt "Stap x van y" met een balk, en het
   beeld schaalt mee (src/rondleiding.js, schaal()). Maten en kleuren uit het ontwerp; waar de app een
   token heeft, staat het token. */

.rl-ov { position: fixed; inset: 0; z-index: 1250; background: rgba(16, 24, 40, .42); display: flex; align-items: center; justify-content: center;
  padding: 24px; overscroll-behavior: contain; animation: tv-fade 160ms ease both; }
/* Boven de melding "Wat is er nieuw" (1200), onder de bevestigingsvensters (1300). De melding over het
   wachtwoord (en straks "afgerond") hoort boven het venster te staan. */
body.rl-open .toast-wrap { z-index: 1260; }

.rl { width: 900px; max-width: 100%; height: 600px; max-height: 100%; background: #fff; border: 1px solid var(--border, #ECEDF0); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .18); display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; }

/* ---- links: de stappen ---- */
.rl-nav { background: #FAFAFC; border-right: 1px solid var(--border, #ECEDF0); padding: 16px 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.rl-merk { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #ECEDF0); }
.rl-mark { width: 28px; height: 28px; display: block; flex: none; }
.rl-merk > span { display: flex; flex-direction: column; line-height: 1.2; }
.rl-merknaam { font-family: Poppins, var(--font); font-weight: 600; font-size: 14px; color: #14105A; }
.rl-merksub { font-size: 11.5px; color: #8A8D98; }
.rl-voortgang { padding: 0 8px 12px; }
.rl-voortgang-titel { font-size: 14px; font-weight: 600; color: #1A1C23; letter-spacing: -.01em; }
.rl-voortgang-tel { font-size: 12px; color: #8A8D98; margin-top: 2px; }
.rl-bar { margin-top: 8px; }
.rl-bar .bar-fill { background: var(--pri, #4F46E5); transition: width .2s ease; }
.rl-hsts { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.rl-hst { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; color: #1A1C23; font: inherit; font-size: 13.5px;
  font-weight: 500; text-align: left; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .15s ease; touch-action: manipulation; }
.rl-hst:hover { background: #F3F4F6; }
.rl-hst:focus-visible { outline: 2px solid var(--pri, #4F46E5); outline-offset: -2px; }
.rl-hst.is-act { background: #EEF2FF; color: #4338CA; font-weight: 600; }
.rl-hst-nr { width: 22px; height: 22px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px;
  font-weight: 600; background: #fff; color: #5C5F6B; border: 1px solid #DADCE2; box-sizing: border-box; }
.rl-hst.is-act .rl-hst-nr { background: var(--pri, #4F46E5); color: #fff; border-color: var(--pri, #4F46E5); }
.rl-hst.is-klaar .rl-hst-nr { background: #DCFCE7; color: #15803D; border-color: #DCFCE7; font-size: 12px; }
.rl-nav-voet { margin-top: auto; display: flex; gap: 8px; align-items: flex-start; padding: 10px 8px 0; border-top: 1px solid var(--border, #ECEDF0); font-size: 12px;
  color: #8A8D98; line-height: 1.45; }
.rl-nav-voet .ic { flex: none; font-size: 14px; margin-top: 1px; }

/* ---- rechts: de uitleg ---- */
.rl-main { position: relative; min-width: 0; min-height: 0; padding: 22px 26px 18px; display: flex; flex-direction: column; }
.rl-sluit { position: absolute; top: 12px; right: 12px; }
.rl-mobielkop { display: none; }
.rl-inhoud { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.rl-kop { font-size: 12px; color: #8A8D98; margin-bottom: 4px; }
.rl-titel { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: #1A1C23; line-height: 1.25; text-wrap: pretty; }
.rl-tekst { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #5C5F6B; text-wrap: pretty; }
.rl-stapkop { padding: 14px 30px 0 0; }

/* De welkomststap: Vera zwaait, en eronder het klantlogo met wie je bent. */
.rl-welkom { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: start; }
.rl-welkom-tekst { padding-top: 18px; min-width: 0; }
.rl-welkom .rl-tekst { margin-top: 8px; }
.rl-vera { width: 170px; height: 170px; object-fit: contain; margin-top: 6px; }
.rl-punten { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--border, #ECEDF0); border-radius: 12px; }
.rl-punten-zonder-logo { grid-template-columns: minmax(0, 1fr); }
.rl-logo { width: 150px; height: 60px; display: flex; align-items: center; justify-content: center; }
.rl-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rl-puntlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rl-puntlijst li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1A1C23; }
.rl-punt-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; background: #EEF2FF; color: #4338CA; display: inline-flex; align-items: center;
  justify-content: center; font-size: 15px; }

/* Het bewegende beeld: ontworpen op 594 x 286; schaal() verkleint het als het vak smaller is. */
.rl-beeld { position: relative; flex: none; height: 286px; margin-top: 14px; background: #FAFAFC; border: 1px solid var(--border, #ECEDF0); border-radius: 12px;
  overflow: hidden; }
.rl-beeld-schaal { position: absolute; left: 0; top: 0; width: 594px; height: 286px; transform-origin: 0 0; }
.tv-wortel { position: relative; height: 100%; box-sizing: border-box; padding: 14px; overflow: hidden; font-family: var(--font); }
.rl-beeld-leeg { margin: 0; padding: 24px; font-size: 13px; color: #8A8D98; }
.tv-cursor { display: inline-block; width: 1.5px; height: 1em; vertical-align: -2px; background: #4F46E5; margin-left: 1px; }

.rl-knoppen { display: flex; align-items: center; gap: 8px; padding-top: 14px; }
.rl-ruimte { flex: 1; }
.rl-knoppen .btn .ic { font-size: 15px; }

/* ---- "Later verder": waar je stond, en verder kijken ---- */
.rl-pil { position: fixed; z-index: 1200; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); box-sizing: border-box; background: #1A1C23; color: #fff; border-radius: 10px; padding: 8px 8px 8px 14px; font-size: 13px;
  line-height: 1.4; box-shadow: 0 4px 16px rgba(16, 24, 40, .10); animation: tv-rise 260ms cubic-bezier(.4, 0, .2, 1) both; }
.rl-pil .btn { flex: none; }

/* Het item in het hulpmenu: de stand rechts. */
.rl-menu-tag { margin-left: auto; }

/* ---- de animaties van de beelden (namen uit het ontwerp) ---- */
@keyframes tv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tv-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px); } }
@keyframes tv-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes tv-pop { 0% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes tv-drop { 0% { opacity: 0; transform: translateY(-18px); } 70% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes tv-ring { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .35); } 100% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } }
@keyframes tv-scale { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tv-hl { 0% { background: transparent; } 30%, 100% { background: #EEF2FF; } }
@keyframes tv-ring-fill { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--to); } }
@keyframes tv-spark { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }
@keyframes tv-ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes tv-dots { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes tv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tv-sweep-y { from { top: 0; } to { top: 100%; } }
@keyframes tv-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rl-pil { animation-name: rl-pil-op; }
@keyframes rl-pil-op { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  [data-tv] *, .rl-ov, .rl-pil { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---- telefoon: het hele scherm, één kolom ---- */
@media (max-width: 640px) {
  .rl-ov { padding: 0; align-items: stretch; }
  .rl { width: 100%; height: 100%; max-height: none; border: none; border-radius: 0; grid-template-columns: minmax(0, 1fr); }
  .rl-nav { display: none; }
  /* Een geïnstalleerde app op een iPhone met notch (viewport-fit=cover) tekent tot onder de statusbalk:
     de kop en de sluitknop schuiven daarom mee met de veilige rand bovenin. */
  .rl-main { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rl-sluit { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; width: 44px; height: 44px; }
  .rl-mobielkop { display: block; font-size: 12px; color: #8A8D98; padding: 4px 52px 12px 0; }
  .rl-stapkop { padding: 4px 0 0; }
  .rl-titel { font-size: 20px; }
  /* Mobiele regels §5: broodtekst minstens 16 px, secundaire tekst 14 px; bijschriften (de kop, "Stap x van y") 12. */
  .rl-tekst { font-size: 16px; line-height: 1.5; }
  .rl-puntlijst li { font-size: 14px; }
  .rl-beeld-leeg { font-size: 14px; }
  .rl-pil { font-size: 14px; }
  .rl-welkom { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rl-welkom-tekst { padding-top: 4px; }
  .rl-vera { width: 120px; height: 120px; margin: 4px auto 0; order: -1; }
  .rl-punten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rl-logo { width: 120px; height: 48px; justify-content: flex-start; }
  .rl-knoppen { flex-wrap: wrap; gap: 8px; }
  .rl-knoppen .btn { min-height: 44px; }
  .rl-later { display: none; }
  /* De hoofdknop altijd op een eigen, volle regel onder opnieuw afspelen en vorige: één duimbeweging. */
  .rl-knoppen .btn-primary { flex: 1 0 100%; order: 3; justify-content: center; }
  .rl-pil { left: 16px; right: 16px; transform: none; bottom: calc(var(--bottomnav-h, 64px) + 16px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  @keyframes rl-pil-op { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .rl-pil .btn { min-height: 44px; }
}