/* ==========================================================================
   Bediening van de 3D-kaart -- Apple-discipline, sinds 30 oktober 2026.

   Alleen de bediening: knoppen, segmenten, het menu Kaartopties, de
   tourbalk, de pijltjes en de kaartjes onderin. Niets hier raakt het canvas,
   de labels op de kaart (#labels, .sup) of hoe de kaart tekent.

   Waarom een eigen laag: de knoppen kregen hun vorm uit drie plekken (het
   stijlblok in de pagina, kaart/mobile-ui.css en de .compact-regels voor
   aanraakschermen), en die spraken elkaar tegen. De sluitknop van het menu
   was daardoor een uitgerekte pil en de pijltjes waren tekens die op de
   basislijn hingen. Elke regel hieronder begint met P (zie onder) en wint
   daarmee van alle drie, zonder !important.

   P = html body .mp #stage:not(#ap-kaart)
   ========================================================================== */

html body .mp #stage:not(#ap-kaart) {
  --kb-vlak: color-mix(in srgb, var(--mp-wit) 82%, transparent);
  --kb-vlak-vol: var(--mp-wit);
  --kb-inkt: var(--mp-inkt);
  --kb-zacht: var(--mp-zacht);
  --kb-rand: color-mix(in srgb, var(--mp-inkt) 10%, transparent);
  --kb-schaduw: 0 1px 2px rgba(10, 27, 61, .08), 0 6px 18px rgba(10, 27, 61, .12);
  --kb-schaduw-hoog: 0 2px 6px rgba(10, 27, 61, .08), 0 20px 48px rgba(10, 27, 61, .22);
  --kb-filter: blur(18px) saturate(180%);
  --kb-veer: cubic-bezier(0.22, 1, 0.36, 1);
  --kb-h: 44px;
}

/* --------------------------------------------------------------------------
   De knoppenbalk: zwevende pillen van één hoogte, in een materiaal
   -------------------------------------------------------------------------- */

html body .mp #stage:not(#ap-kaart) .tools { gap: 8px; }

html body .mp #stage:not(#ap-kaart) .replay,
html body .mp #stage:not(#ap-kaart) .kaartopties > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--kb-h);
  height: var(--kb-h);
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  color: var(--kb-inkt);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
  font: 600 15px/1 var(--mp-tekst);
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 420ms var(--kb-veer);
}
html body .mp #stage:not(#ap-kaart) .replay:hover,
html body .mp #stage:not(#ap-kaart) .kaartopties > summary:hover {
  background: var(--kb-vlak-vol);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
}
html body .mp #stage:not(#ap-kaart) .replay:active,
html body .mp #stage:not(#ap-kaart) .kaartopties > summary:active { transform: scale(.96); transition-duration: 90ms; }
html body .mp #stage:not(#ap-kaart) .replay svg { flex: none; width: 18px; height: 18px; }
html body .mp #stage:not(#ap-kaart) .replay:focus-visible,
html body .mp #stage:not(#ap-kaart) .kaartopties > summary:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 3px; }

/* Start tour: de ene gevulde knop op de kaart. */
html body .mp #stage:not(#ap-kaart) .tourstart,
html body .mp #stage:not(#ap-kaart) .tourstart:hover {
  background: var(--mp-blauw);
  color: var(--mp-blauw-inkt);
  box-shadow: 0 1px 2px rgba(10, 27, 61, .12), 0 6px 18px color-mix(in srgb, var(--mp-blauw) 34%, transparent);
}
html body .mp #stage:not(#ap-kaart) .tourstart:hover { background: color-mix(in srgb, var(--mp-blauw) 88%, #FFFFFF); }

/* Een knop die aan staat (Vergroten, Pauze): inkt gevuld. */
html body .mp #stage:not(#ap-kaart) .replay[aria-pressed="true"],
html body .mp #stage:not(#ap-kaart) .replay[aria-pressed="true"]:hover {
  background: var(--kb-inkt);
  color: var(--mp-bg);
}
html body .mp #stage:not(#ap-kaart) .tourstart[aria-pressed="true"] { background: var(--kb-inkt); color: var(--mp-bg); }

/* Zoomen: één pil met twee helften en een haarlijn ertussen. */
html body .mp #stage:not(#ap-kaart) .zoomseg {
  display: inline-flex;
  gap: 0;
  padding: 0;
  height: var(--kb-h);
  border-radius: 999px;
  overflow: hidden;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
}
html body .mp #stage:not(#ap-kaart) .zoomseg button {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: var(--kb-h);
  min-height: var(--kb-h);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kb-inkt);
  font: 500 22px/1 var(--mp-tekst);
  cursor: pointer;
  transition: background-color 160ms ease;
}
html body .mp #stage:not(#ap-kaart) .zoomseg button + button { box-shadow: inset 1px 0 0 var(--kb-rand); }
html body .mp #stage:not(#ap-kaart) .zoomseg button:hover { background: color-mix(in srgb, var(--kb-inkt) 6%, transparent); }
html body .mp #stage:not(#ap-kaart) .zoomseg button:active { background: color-mix(in srgb, var(--kb-inkt) 12%, transparent); }
html body .mp #stage:not(#ap-kaart) .zoomseg button:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: -3px; }

/* --------------------------------------------------------------------------
   Eén pijltje voor alles wat openklapt: getekend, niet getypt, en het draait
   mee als het open gaat
   -------------------------------------------------------------------------- */

html body .mp #stage:not(#ap-kaart) .kaartopties > summary,
html body .mp #stage:not(#ap-kaart) .map-symbols > summary,
html body .mp #stage:not(#ap-kaart) .foot > summary { list-style: none; }
html body .mp #stage:not(#ap-kaart) :is(.kaartopties, .map-symbols, .foot) > summary::-webkit-details-marker { display: none; }
html body .mp #stage:not(#ap-kaart) :is(.kaartopties, .map-symbols, .foot) > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 2px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 1px 0;
  transform: rotate(45deg);
  transition: transform 320ms var(--kb-veer), margin 320ms var(--kb-veer);
  opacity: .7;
}
html body .mp #stage:not(#ap-kaart) :is(.kaartopties, .map-symbols, .foot)[open] > summary::after {
  content: "";
  margin-top: 4px;
  transform: rotate(225deg);
}

/* Kaartopties open: de knop zelf staat aan. */
html body .mp #stage:not(#ap-kaart) .kaartopties[open] > summary {
  background: var(--kb-inkt);
  color: var(--mp-bg);
}

/* --------------------------------------------------------------------------
   Het menu Kaartopties: een vel dat vanuit zijn knop opkomt
   -------------------------------------------------------------------------- */

html body .mp #stage:not(#ap-kaart) .kaartopties-in {
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--mp-wit) 92%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--kb-inkt);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw-hoog);
  transform-origin: top right;
}
@media (prefers-reduced-motion: no-preference) {
  html body .mp #stage:not(#ap-kaart) .kaartopties[open] > .kaartopties-in { animation: kb-vel 300ms var(--kb-veer); }
}
@keyframes kb-vel { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

html body .mp #stage:not(#ap-kaart) .kaartopties-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  font: 700 19px/1.2 var(--mp-kop);
  letter-spacing: -.02em;
}

/* De sluitknop: een kleine ronde knop, het kruisje in het midden. */
html body .mp #stage:not(#ap-kaart) #kaartopties-dicht {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0 -4px 0 0;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kb-inkt) 8%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--kb-zacht);
}
/* Het tikvlak blijft 44 px, ook al is de knop kleiner. */
html body .mp #stage:not(#ap-kaart) #kaartopties-dicht::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
html body .mp #stage:not(#ap-kaart) #kaartopties-dicht svg { width: 14px; height: 14px; stroke-width: 2.6; }
html body .mp #stage:not(#ap-kaart) #kaartopties-dicht:hover { background: color-mix(in srgb, var(--kb-inkt) 14%, transparent); color: var(--kb-inkt); }
html body .mp #stage:not(#ap-kaart) #kaartopties-dicht:active { transform: scale(.9); }

/* Keuzes in het menu: segmented controls, gekozen = merkblauw. */
html body .mp #stage:not(#ap-kaart) .kaartopties-in .seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kb-inkt) 7%, var(--mp-wit));
  box-shadow: none;
}
html body .mp #stage:not(#ap-kaart) .kaartopties-in .seg button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kb-zacht);
  font: 600 15px/1 var(--mp-tekst);
  cursor: pointer;
  transition: background-color 220ms var(--kb-veer), color 220ms var(--kb-veer), box-shadow 220ms var(--kb-veer), transform 420ms var(--kb-veer);
}
html body .mp #stage:not(#ap-kaart) .kaartopties-in .seg button:hover { color: var(--kb-inkt); }
html body .mp #stage:not(#ap-kaart) .kaartopties-in .seg button:active { transform: scale(.96); transition-duration: 90ms; }
html body .mp #stage:not(#ap-kaart) .kaartopties-in .seg button[aria-pressed="true"] {
  background: var(--mp-blauw);
  color: var(--mp-blauw-inkt);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(10, 27, 61, .12), 0 3px 10px color-mix(in srgb, var(--mp-blauw) 26%, transparent);
}

/* Kaarttekens: een uitklapregel, geen knop. */
html body .mp #stage:not(#ap-kaart) .map-symbols { padding-top: 12px; box-shadow: 0 -1px 0 var(--kb-rand); }
html body .mp #stage:not(#ap-kaart) .map-symbols > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--kb-inkt);
  font: 600 15px/1.2 var(--mp-tekst);
  cursor: pointer;
}
html body .mp #stage:not(#ap-kaart) .map-symbols .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  padding: 0;
  background: none;
  box-shadow: none;
}
html body .mp #stage:not(#ap-kaart) .map-symbols .legend > span { font-size: 13px; color: var(--kb-zacht); }

/* --------------------------------------------------------------------------
   Tour: stapknoppen en de positiebalk
   -------------------------------------------------------------------------- */

html body .mp #stage:not(#ap-kaart) .tourbalk {
  padding: 10px 16px 6px;
  border-radius: 18px;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
  color: var(--kb-inkt);
  font: 600 14px/1.3 var(--mp-tekst);
}
html body .mp #stage:not(#ap-kaart) .tourbalk #tourkm { font-variant-numeric: tabular-nums; color: var(--kb-zacht); }
html body .mp #stage:not(#ap-kaart) .tourbalk input { min-height: 36px; accent-color: var(--mp-blauw); }

/* --------------------------------------------------------------------------
   Kaartjes op de kaart: tip, hoogteprofiel, legenda, tourpop
   -------------------------------------------------------------------------- */

html body .mp #stage:not(#ap-kaart) .hint {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  box-shadow: 0 0 0 1px var(--kb-rand);
  color: var(--kb-zacht);
  font: 500 13px/1.35 var(--mp-tekst);
}

html body .mp #stage:not(#ap-kaart) .foot > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
  color: var(--kb-inkt);
  font: 600 14px/1.2 var(--mp-tekst);
  cursor: pointer;
}
html body .mp #stage:not(#ap-kaart) .foot > summary #map-readout { color: var(--kb-zacht); font-variant-numeric: tabular-nums; font-weight: 500; }
html body .mp #stage:not(#ap-kaart) .foot > summary:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 3px; }
html body .mp #stage:not(#ap-kaart) .profile,
html body .mp #stage:not(#ap-kaart) .foot .legend {
  border-radius: 18px;
  background: var(--kb-vlak);
  -webkit-backdrop-filter: var(--kb-filter);
  backdrop-filter: var(--kb-filter);
  box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw);
}
html body .mp #stage:not(#ap-kaart) .tourpop { border-radius: 18px; box-shadow: 0 0 0 1px var(--kb-rand), var(--kb-schaduw-hoog); }

html body .mp #stage:not(#ap-kaart) .verken {
  min-height: 48px;
  padding: 0 22px;
  font: 600 16px/1 var(--mp-tekst);
  transition: transform 420ms var(--kb-veer);
}
html body .mp #stage:not(#ap-kaart) .verken:active { transform: translateX(-50%) scale(.96); transition-duration: 90ms; }

/* Nog niet bedienbaar (kaart laadt): rustig, niet half doorzichtig. */
html body .mp #stage:not(#ap-kaart) .tools:disabled { opacity: 1; }
html body .mp #stage:not(#ap-kaart) .tools:disabled :is(.replay, .zoomseg, .kaartopties > summary) { color: var(--kb-zacht); box-shadow: 0 0 0 1px var(--kb-rand); }

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body .mp #stage:not(#ap-kaart) :is(.replay, .kaartopties > summary, .kaartopties-in .seg button, #kaartopties-dicht, .verken) { transition-property: background-color, color, box-shadow; }
  html body .mp #stage:not(#ap-kaart) :is(.replay, .kaartopties > summary, .kaartopties-in .seg button, #kaartopties-dicht):active { transform: none; }
  html body .mp #stage:not(#ap-kaart) :is(.kaartopties, .map-symbols, .foot) > summary::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html body .mp #stage:not(#ap-kaart) { --kb-vlak: var(--mp-wit); }
  html body .mp #stage:not(#ap-kaart) :is(.replay, .zoomseg, .kaartopties > summary, .kaartopties-in, .tourbalk, .hint, .foot > summary, .profile, .foot .legend) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  html body .mp #stage:not(#ap-kaart) { --kb-vlak: var(--mp-wit); --kb-rand: var(--mp-inkt); }
}

/* Smal of aanraakscherm (.compact): de tourknoppen houden hun krappe
   opvulling, anders passen Vorige, Pauze en Volgende niet op één rij. */
@media (max-width: 1023px), (pointer: coarse) and (max-width: 1366px) {
  html body .mp #stage.compact:not(#ap-kaart) .tourbediening .replay { padding-inline: 10px; gap: 6px; font-size: 14px; }
  html body .mp #stage.compact:not(#ap-kaart) .replay,
  html body .mp #stage.compact:not(#ap-kaart) .kaartopties > summary { height: 48px; min-height: 48px; }
  /* Zoomen staat hier verticaal: één hoge pil, haarlijn ertussen. */
  html body .mp #stage.compact:not(#ap-kaart) .zoomseg { flex-direction: column; height: auto; border-radius: 24px; }
  html body .mp #stage.compact:not(#ap-kaart) .zoomseg button { height: 48px; min-height: 48px; }
  html body .mp #stage.compact:not(#ap-kaart) .zoomseg button + button { box-shadow: inset 0 1px 0 var(--kb-rand); }
  /* Overzicht en Vergroten zijn hier ronde icoonknoppen. */
  html body .mp #stage.compact:not(#ap-kaart) :is(#overview, #expand) { width: 48px; min-width: 48px; padding: 0; }
  html body .mp #stage.compact:not(#ap-kaart) :is(#overview, #expand) svg { width: 20px; height: 20px; }
  /* Tourstappen in de balk onderin: zonder pil, alleen het pijltje. */
  html body .mp #stage.compact:not(#ap-kaart) .tourstap { padding: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* In het menu staat het hoogteprofiel op het vel zelf: geen kaart in een
   kaart, maar een rustig vlak zonder schaduw. */
html body .mp #stage:not(#ap-kaart) .kaartopties-in .foot > summary,
html body .mp #stage:not(#ap-kaart) .kaartopties-in .profile,
html body .mp #stage:not(#ap-kaart) .kaartopties-in .foot .legend {
  background: color-mix(in srgb, var(--kb-inkt) 4%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html body .mp #stage:not(#ap-kaart) .kaartopties-in .foot > summary { border-radius: 12px; width: 100%; justify-content: flex-start; }
html body .mp #stage:not(#ap-kaart) .kaartopties-in .foot > summary::after { margin-left: auto; }
html body .mp #stage:not(#ap-kaart) .kaartopties-in .profile,
html body .mp #stage:not(#ap-kaart) .kaartopties-in .foot .legend { border-radius: 14px; }