/* De loperkiezer: naam, figuur, shirt en broek (lopers.js). Gebruikt de tokens van de marathonpagina. */
.pl-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-houder { margin-top: clamp(20px, 3vw, 32px); }
.pl-loper { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }

/* podium: de loper op ware lengte, met een naambord zoals een startnummer */
.pl-podium { position: sticky; top: 96px; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: end; height: 440px; box-sizing: border-box; padding: 20px 16px 22px; border-radius: var(--mp-r); background: var(--mp-vertrekvlak); overflow: hidden; }
.pl-bord { z-index: 2; align-self: start; display: grid; justify-items: center; gap: 2px; min-width: 132px; max-width: 100%; margin: 0; padding: 10px 16px 9px; border-radius: 12px; background: #FFFFFF; color: #0A1B3D; box-shadow: 0 6px 18px -10px rgba(10, 27, 61, .5); text-align: center; }
.pl-bord b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 20px/1.1 var(--mp-kop); letter-spacing: -.01em; }
.pl-bord span { font: 700 12px/1.2 var(--mp-tekst); color: #4A5878; font-variant-numeric: tabular-nums; }
.pl-bord span:empty { display: none; }
.pl-figuur { position: relative; z-index: 1; height: calc(clamp(250px, 26vw, 300px) * min(1, var(--s, 1) * 0.92)); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.pl-grond { position: absolute; left: 50%; bottom: 18px; width: 52%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--mp-inkt) 12%, transparent); filter: blur(2px); }
.pl-podium--vast .pl-grond { display: none; }

.pl-keuzes { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pl-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 160px); gap: 12px; }
.pl-veld { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.pl-veld input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--mp-wit); color: var(--mp-inkt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mp-inkt) 18%, transparent); font: 700 17px var(--mp-tekst); }
.pl-veld--naam input { font: 800 20px var(--mp-kop); letter-spacing: -.01em; }
.pl-veld input::placeholder { color: color-mix(in srgb, var(--mp-zacht) 75%, transparent); font-weight: 400; }
.pl-veld input:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 2px; }

.pl-rij { min-width: 0; margin: 0; padding: 0; border: 0; }
.pl-rij legend { display: flex; align-items: baseline; gap: 8px; width: 100%; margin-bottom: 10px; padding: 0; font-weight: 700; font-size: 14px; }
.pl-rij legend b { font-weight: 400; color: var(--mp-zacht); font-variant-numeric: tabular-nums; }
.pl-kleding { display: grid; gap: 16px; }

/* figurenrij: twee rijen hoog, horizontaal te scrollen of te vegen, pijlen voor muis en toetsenbord */
.pl-carrousel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.pl-carrousel--vol .pl-pijl { visibility: hidden; }
.pl-figuren { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 62px; gap: 8px; margin: -4px; padding: 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 4px; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.pl-figuren::-webkit-scrollbar { display: none; }
.pl-fig { position: relative; display: grid; align-content: end; justify-items: center; height: 82px; padding: 6px 4px 4px; border-radius: 14px; background: var(--mp-wit); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-inkt) 12%, transparent); cursor: pointer; scroll-snap-align: start; transition: box-shadow .15s ease; }
.pl-fig input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pl-fig img { height: calc(70px * min(1, var(--s, 1) * 0.92)); width: auto; max-width: 52px; object-fit: contain; object-position: bottom; pointer-events: none; }
.pl-fig:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mp-blauw) 55%, transparent); }
.pl-fig:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--mp-inkt); background: color-mix(in srgb, var(--mp-geel) 30%, var(--mp-wit)); }
.pl-fig:has(input:focus-visible) { outline: 3px solid var(--mp-blauw); outline-offset: 2px; }
.pl-pijl { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--mp-wit); color: var(--mp-inkt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-inkt) 16%, transparent); cursor: pointer; }
.pl-pijl svg { width: 20px; height: 20px; }
.pl-pijl:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--mp-blauw); color: var(--mp-blauw); }
.pl-pijl:disabled { opacity: .35; cursor: default; }
.pl-pijl:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 2px; }

.pl-stalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); justify-items: center; gap: 6px; max-width: 400px; }
.pl-staal { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.pl-staal input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pl-staal i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-inkt) 18%, transparent); transition: transform .15s ease; pointer-events: none; }
.pl-staal:hover i { transform: scale(1.08); }
.pl-staal:has(input:checked) { box-shadow: 0 0 0 2px var(--mp-inkt); }
.pl-staal:has(input:focus-visible) { outline: 3px solid var(--mp-blauw); outline-offset: 2px; }
.pl-eigen i { background: conic-gradient(#D62828, #F5C400, #1F9D55, #5FA8E8, #024BB9, #6B3FA0, #F06BA8, #D62828); }
.pl-eigen.is-aan { box-shadow: 0 0 0 2px var(--mp-inkt); background: conic-gradient(#D62828, #F5C400, #1F9D55, #5FA8E8, #024BB9, #6B3FA0, #F06BA8, #D62828); }
.pl-eigen.is-aan i { background: var(--c); box-shadow: inset 0 0 0 3px var(--mp-wit); }
.pl-eigen input[type="color"] { padding: 0; border: 0; background: none; }
.pl-kleding--compact .pl-staal { width: 36px; height: 36px; }
.pl-kleding--compact .pl-staal i { width: 26px; height: 26px; }
.pl-vast { margin: 0; color: var(--mp-zacht); font-size: 15px; line-height: 1.45; }

.pl-zoek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; padding-top: 16px; border-top: 1px solid var(--mp-lijn); font-size: 15px; color: var(--mp-zacht); }
.pl-zoek b { font: 800 clamp(20px, 2.2vw, 24px)/1.15 var(--mp-kop); color: var(--mp-inkt); }
.pl-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.pl-acties .mp-klein { margin: 0; }

@media (max-width: 760px) {
  .pl-loper { grid-template-columns: 1fr; }
  .pl-podium { position: relative; top: auto; height: auto; padding: 14px 16px 14px; }
  .pl-stalen { max-width: none; }
  .pl-figuur { height: calc(200px * min(1, var(--s, 1) * 0.92)); }
  .pl-grond { bottom: 12px; }
  /* op een telefoon één rij om te vegen; de pijlen blijven voor wie liever tikt */
  .pl-figuren { grid-template-rows: auto; }
  .pl-pijl { width: 36px; height: 36px; }
}
@media (max-width: 420px) { .pl-velden { grid-template-columns: minmax(0, 1fr) 112px; } }
@media (prefers-reduced-motion: reduce) { .pl-staal i, .pl-fig { transition: none; } }

/* supporterkaart (A4): shirt en broek als stalen onder de herkentekst */
.mp-a4 .a4-kleding { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.mp-a4 .a4-kleding span { display: inline-flex; align-items: center; gap: 6px; }
.mp-a4 .a4-kleding i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 27, 61, .25); }
/* PDF-paneel: figuren zonder naam, op lengte */
.mp-figkeuze .mp-fignaamloos { width: 54px; padding: 8px 4px; align-content: end; }
.mp-figkeuze .mp-fignaamloos img { height: calc(54px * min(1, var(--s, 1) * 0.92)); }
/* even groter bekijken (lopers.js, vergroot): zwevend vlak boven de tegel waar de muis op staat */
.pl-zweef { position: fixed; z-index: 1000; display: grid; place-items: end center; width: 150px; height: 228px; padding: 12px 10px 10px; box-sizing: border-box; border-radius: 18px; background: var(--mp-wit, #fff); box-shadow: 0 18px 40px -14px rgba(10, 27, 61, .45), 0 0 0 1px rgba(10, 27, 61, .08); pointer-events: none; opacity: 0; transform: translateY(6px) scale(.92); transform-origin: 50% 100%; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .9, .3, 1.2); }
.pl-zweef.is-onder { transform-origin: 50% 0; transform: translateY(-6px) scale(.92); }
.pl-zweef.is-open { opacity: 1; transform: none; }
.pl-zweef img { display: block; height: 206px; width: auto; max-width: 130px; object-fit: contain; object-position: bottom; }
@media (prefers-reduced-motion: reduce) { .pl-zweef { transition: opacity .1s linear; transform: none; } }