/* A quiet wayfinding rail; the content, rather than the menu, carries the page. */
html:root { scroll-padding-top: calc(var(--mp-site-header-height, 84px) + 76px); }
body .mp-paginanav { display:flex; position:sticky; top:var(--mp-site-header-height, 84px); z-index:55; gap:4px; padding:4px 16px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--mp-lijn); background:var(--mp-bg); color:var(--mp-inkt); font-family:var(--mp-tekst); }
body .mp-paginanav a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:48px; padding:8px 12px; box-sizing:border-box; border-radius:6px; font-size:14px; line-height:1.3; font-weight:700; text-decoration:none; color:var(--mp-zacht); }
body .mp-paginanav a[aria-current] { background:transparent; color:var(--mp-blauw); box-shadow:none; font-weight:800; }
body .mp-paginanav a:hover { color:var(--mp-blauw); }
body .mp-paginanav a:focus-visible { outline:2px solid var(--mp-blauw); outline-offset:-2px; }
@media (min-width:1280px) {
  body > .mp, body > .mp.mp-parcours { width:auto; max-width:none; margin-left:192px; margin-right:32px; padding-inline:0; left:auto; }
  body .mp-paginanav { position:fixed; top:calc(var(--mp-site-header-height,84px) + 28px); left:24px; width:140px; padding:0; border:0; border-radius:0; flex-direction:column; gap:2px; }
  body .mp-paginanav a { width:100%; min-height:44px; padding:10px 12px; font-size:14px; }
  body .mp-paginanav[data-enhanced="true"][data-stuck="false"], body .mp-paginanav[data-finished="true"] { visibility:hidden; pointer-events:none; }
}
@media (min-width:1900px) { body > .mp, body > .mp.mp-parcours { max-width:1640px; margin-inline:auto; padding-left:160px; } }
@media print { body .mp-paginanav { display:none; } body > .mp, body > .mp.mp-parcours { margin-inline:0; padding-inline:0; } }

/* Stappen (versie A van de flow, 31-10-2026): het label boven elke stapkop, de knop naar de
   volgende stap, en de naslag zonder stapnummer in de rail. */
body .mp .mp-stap { margin: 0 0 6px; font-size: 15px; }
body .mp .mp-verder { display: flex; justify-content: flex-end; margin: 0; padding: 28px 0 8px; }
body .mp-parcours + .mp > .mp-verder { padding-top: 16px; }
@media (min-width: 1280px) {
  html body .mp-paginanav a[href="#naslag"] { counter-increment: none; margin-top: 8px; }
  html body .mp-paginanav a[href="#naslag"]::before { content: ""; }
}

/* Op een telefoon is de stappenstrook een duimdoel: 44 px, ook naast de 40 px uit apple-voorstel.css. */
@media (max-width: 1279px) { html body nav.mp-paginanav a { min-height: 44px; } }

/* Review 31-10-2026. De app als bijzin in de opening, niet als tweede knop. */
body .mp-opening-app { margin: 14px 0 0; font-size: 15px; line-height: 1.5; opacity: .92; }
body .mp-opening-app a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body .mp-opening-app a:hover { text-decoration-thickness: 2px; }

/* De uitleg per horloge klapt in: wie hem nodig heeft, opent hem. */
body .mp details.mp-uitleg > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
body .mp details.mp-uitleg > summary::-webkit-details-marker { display: none; }
body .mp details.mp-uitleg > summary h3 { margin: 0; }
body .mp details.mp-uitleg > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
body .mp details.mp-uitleg[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
body .mp details.mp-uitleg > summary:focus-visible { outline: 3px solid var(--mp-blauw, #024BB9); outline-offset: 4px; border-radius: 6px; }

/* Delen (31-10-2026): het deelmenu van het toestel, of op de laptop dit kleine menu. */
body .mp-deelmenu { position: fixed; z-index: 60; display: grid; min-width: 200px; padding: 6px; border-radius: 16px; background: var(--mp-wit, #FFFFFF); color: var(--mp-inkt); box-shadow: 0 0 0 1px rgba(10, 27, 61, .08), 0 18px 40px rgba(10, 27, 61, .18); }
body .mp-deelmenu[hidden] { display: none; }
body .mp-deelmenu > * { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: inherit; font: 600 16px/1.2 var(--mp-tekst, inherit); text-align: left; text-decoration: none; cursor: pointer; }
body .mp-deelmenu > *:hover, body .mp-deelmenu > *:focus-visible { background: var(--mp-vlak); outline: none; }
body .mp-deelmenu > *:focus-visible { box-shadow: inset 0 0 0 2px var(--mp-blauw); }
body .mp-deelmelding { position: fixed; z-index: 61; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: min(92vw, 460px); margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--mp-inkt); color: var(--mp-bg); font-size: 15px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 180ms ease, transform 180ms ease; }
body .mp-deelmelding.aan { opacity: 1; transform: translate(-50%, 0); }
body .mp-slotdeel { margin: 32px 0 0; }
body .mp-slotdeel .mp-knop svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { body .mp-deelmelding { transition: opacity 120ms ease; transform: translate(-50%, 0); } }

/* Snelheid (31-10-2026): het slot en de voet legt de browser pas op als ze in de buurt komen.
   Niet voor stap 3 en 4: die groeien anders tijdens een sprong uit het menu. Niet voor de naslag:
   daar las axe het contrast van een link verkeerd zolang de browser hem oversloeg. */
body > .mp-slot, body > .mp-plensvoet { content-visibility: auto; contain-intrinsic-size: auto 2400px; }