/* DK Lap Viewer. Alles valt onder .dklv, zodat het thema (Astra/Elementor) niet wordt geraakt. */
.dklv{
  --dk-bg:#070a10;--dk-panel:#0e131c;--dk-panel2:#121925;--dk-line:#1c2432;
  --dk-lime:#c8ff00;--dk-cobalt:#2f6bff;--dk-brake:#ff4060;--dk-purple:#b46bff;
  --dk-txt:#e8edf6;--dk-mut:#8a95a8;
  --dk-disp:'Barlow Condensed','Arial Narrow','Roboto Condensed',Arial,sans-serif;
  --dk-body:'Barlow','Segoe UI',Roboto,Arial,sans-serif;
  --dk-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  color-scheme:dark;
  background:var(--dk-bg);color:var(--dk-txt);font-family:var(--dk-body);font-size:16px;line-height:1.5;
  border-radius:18px;padding:clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:18px;
  width:100%;max-width:1280px;margin-inline:auto;text-align:left;
  container-type:inline-size;container-name:dklv;
  overflow-anchor:none; /* live bijgewerkte cijfers mogen de scrollpositie niet verschuiven */
}
.dklv *{box-sizing:border-box}
.dklv p{margin:0}
.dklv button{font:inherit;line-height:1;letter-spacing:0;text-transform:none;box-shadow:none;min-height:0;min-width:0;margin:0;text-shadow:none}
.dklv .dklv-eyebrow{font:600 13px/1.3 var(--dk-body);letter-spacing:.18em;text-transform:uppercase;color:var(--dk-lime)}
.dklv .dklv-title{font:italic 800 clamp(34px,5.5vw,64px)/.95 var(--dk-disp);text-transform:uppercase;margin:6px 0 8px;letter-spacing:-.01em;color:var(--dk-txt);text-wrap:balance}
.dklv .dklv-lede{color:var(--dk-mut);max-width:70ch}
.dklv .dklv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.dklv .dklv-panel{background:var(--dk-panel);border:1px solid var(--dk-line);border-radius:14px;padding:16px}
.dklv .dklv-stat .v{font:italic 800 clamp(28px,3.4vw,40px)/1.05 var(--dk-disp);font-variant-numeric:tabular-nums;margin-top:4px}
.dklv .dklv-stat .v small{font-size:17px;color:var(--dk-mut);font-style:normal;font-weight:600}
.dklv .dklv-stat .s{font-size:13px;color:var(--dk-mut)}
.dklv button.dklv-stat{color:var(--dk-txt);text-align:left;cursor:pointer;width:100%;display:block;background:var(--dk-panel);border:1px solid var(--dk-line);border-radius:14px;padding:16px}
.dklv button.dklv-stat:hover{border-color:var(--dk-lime)}
.dklv .dklv-lbl{font:600 12px var(--dk-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dk-mut)}
.dklv .dklv-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px}
/* Reageert op de breedte van de viewer zelf, niet van het scherm: werkt ook in een smalle contentkolom. */
@container dklv (max-width:860px){.dklv .dklv-grid{grid-template-columns:1fr}}
@container dklv (max-width:380px){.dklv .dklv-duo{grid-template-columns:1fr}}
.dklv .dklv-lapbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.dklv .dklv-lapnav{display:flex;align-items:center;gap:8px}
.dklv .dklv-lapnav button{background:var(--dk-panel2);border:1px solid var(--dk-line);color:var(--dk-txt);width:34px;height:34px;border-radius:8px;cursor:pointer;font:700 16px var(--dk-mono);padding:0}
.dklv .dklv-lapnav button:hover{border-color:var(--dk-lime)}
.dklv [data-k="lapname"]{font:700 24px var(--dk-disp);text-transform:uppercase;min-width:8ch;text-align:center}
.dklv [data-k="lapdriver"]{font:600 13px var(--dk-body);letter-spacing:.06em;text-transform:uppercase}
.dklv [data-k="lapbadge"]{font:600 12px var(--dk-body);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(180,107,255,.16);color:var(--dk-purple)}
.dklv [hidden]{display:none!important}
.dklv svg{display:block;max-width:100%;overflow:visible}
.dklv [data-k="track"]{width:100%;height:auto}
.dklv .dklv-controls{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.dklv button.dklv-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--dk-lime);color:#081000;cursor:pointer;display:grid;place-items:center;flex:none;padding:0;transition:transform .15s}
.dklv button.dklv-play:hover{transform:scale(1.06);background:var(--dk-lime)}
.dklv button:focus-visible,.dklv input:focus-visible,.dklv [tabindex]:focus-visible{outline:2px solid var(--dk-cobalt);outline-offset:3px}
.dklv [data-k="scrub"]{flex:1;min-width:140px;accent-color:var(--dk-lime);cursor:pointer;background:transparent;border:0;padding:0;margin:0;height:auto;box-shadow:none}
.dklv .dklv-clock{font:700 22px var(--dk-mono);font-variant-numeric:tabular-nums;text-align:right;min-width:15ch;white-space:nowrap}
/* Smal: vaste indeling in twee rijen, zodat de hoogte niet verspringt terwijl de tijd loopt. */
@container dklv (max-width:560px){
  .dklv .dklv-controls{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;gap:10px 14px}
  .dklv [data-k="scrub"]{min-width:0;width:100%}
  .dklv .dklv-clock{grid-column:1 / -1;text-align:left;min-width:0;font-size:19px}
  .dklv .dklv-rate{grid-column:1 / -1;justify-self:start}
}
@container dklv (min-width:561px) and (max-width:860px){.dklv .dklv-clock{min-width:0}}
.dklv .dklv-clock small{color:var(--dk-mut);font-weight:500;font-size:14px}
.dklv .dklv-rate{display:flex;border:1px solid var(--dk-line);border-radius:8px;overflow:hidden}
.dklv .dklv-rate button{background:transparent;color:var(--dk-mut);border:0;border-radius:0;font:500 13px var(--dk-mono);padding:8px 10px;cursor:pointer}
.dklv .dklv-rate button[aria-pressed="true"]{background:var(--dk-panel2);color:var(--dk-lime)}
.dklv .dklv-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--dk-mut);margin-top:6px}
.dklv .dklv-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.dklv .dklv-side{display:flex;flex-direction:column;gap:14px}
.dklv .dklv-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dklv .dklv-big{font:italic 800 clamp(46px,5vw,66px)/1 var(--dk-disp);font-variant-numeric:tabular-nums;margin-top:4px}
.dklv .dklv-big small{font-size:20px;color:var(--dk-mut);font-style:normal;font-weight:600;margin-left:4px}
.dklv .dklv-meter{height:6px;background:var(--dk-panel2);border-radius:3px;margin-top:10px;overflow:hidden}
.dklv .dklv-meter i{display:block;height:100%;background:var(--dk-lime);width:0;transition:width .08s linear}
.dklv .dklv-delta{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:6px;font:500 13px var(--dk-mono);color:var(--dk-mut)}
.dklv [data-k="delta"]{font:700 19px var(--dk-mono);font-variant-numeric:tabular-nums}
.dklv [data-k="gball"]{width:100%;max-width:170px;margin:6px auto 0}
.dklv .dklv-gvals{display:flex;justify-content:space-between;gap:6px;font:500 13px var(--dk-mono);color:var(--dk-mut);margin-top:4px}
.dklv .dklv-gvals span{white-space:nowrap}
/* Vaste hoogte: een minteken of extra cijfer mag de indeling niet laten verspringen. */
@container dklv (max-width:560px){.dklv .dklv-gvals{flex-direction:column;gap:2px;font-size:12px}}
.dklv .dklv-big,.dklv .dklv-delta,.dklv .dklv-sec,.dklv .dklv-laprow{white-space:nowrap}
.dklv .dklv-gvals b{color:var(--dk-txt)}
.dklv .dklv-sec{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px solid var(--dk-line);font:700 21px var(--dk-disp)}
.dklv .dklv-sec .t{font:700 18px var(--dk-mono);font-variant-numeric:tabular-nums;margin-left:auto}
.dklv .dklv-sec .d{font:500 12px var(--dk-mono);color:var(--dk-mut);min-width:6ch;text-align:right}
.dklv .dklv-sec.best .t{color:var(--dk-purple)}.dklv .dklv-sec.done .t{color:var(--dk-txt)}.dklv .dklv-sec.live .t{color:var(--dk-mut)}
.dklv .dklv-laprow{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px}
.dklv .dklv-laprow .v{font:italic 800 40px var(--dk-disp);color:var(--dk-lime);font-variant-numeric:tabular-nums}
.dklv .dklv-sponsor{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(200,255,0,.10),rgba(200,255,0,0) 70%);border:1px solid rgba(200,255,0,.35);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--dk-mut);text-decoration:none}
.dklv a.dklv-sponsor:hover{border-color:var(--dk-lime)}
.dklv .dklv-sponsor img{max-height:52px;max-width:180px;width:auto;height:auto;display:block;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.dklv .dklv-sponsor.logo-light img{background:#fff;border-radius:6px;padding:6px 10px}
.dklv .dklv-sponsor b{color:var(--dk-txt)}
.dklv .dklv-scroll{overflow:visible}
.dklv [data-k="speed"]{width:100%;height:auto;cursor:crosshair;touch-action:pan-y}
.dklv [data-k="laps"]{width:100%;height:auto}
.dklv [data-k="laps"] .dot{cursor:pointer}
.dklv .dklv-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.dklv .dklv-msg{color:var(--dk-mut);padding:40px 0;text-align:center}
.dklv .dklv-foot{color:var(--dk-mut);font-size:13px}
@media (prefers-reduced-motion:reduce){.dklv *{transition:none!important}}

/* Overzicht [dk_racedata_lijst] */
.dklv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.dklv-card{display:flex;flex-direction:column;gap:6px;background:#0e131c;border:1px solid #1c2432;border-radius:14px;padding:18px;color:#e8edf6;text-decoration:none;font-family:'Barlow','Segoe UI',Roboto,Arial,sans-serif}
.dklv-card:hover{border-color:#c8ff00;color:#e8edf6}
.dklv-card .d{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c8ff00;font-weight:600}
.dklv-card .n{font:italic 800 26px/1.05 'Barlow Condensed','Arial Narrow',Arial,sans-serif;text-transform:uppercase}
.dklv-card .b{font:700 15px ui-monospace,Consolas,monospace;color:#b46bff}
.dklv-card .m{font-size:14px;color:#8a95a8}

/* Racekaart met uitgelichte afbeelding */
.dklv-card{position:relative;overflow:hidden;isolation:isolate}
.dklv-card.has-img{min-height:220px;justify-content:flex-end}
.dklv-card .img{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transition:transform .5s ease}
.dklv-card.has-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,16,.15) 0%,rgba(7,10,16,.92) 72%)}
.dklv-card:hover .img{transform:scale(1.05)}
.dklv-card .go{font-size:13px;font-weight:600;color:#c8ff00;margin-top:4px}

/* Overzichtspagina /racedata/ */
body.dklv-archive-page .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0;display:block}
body.dklv-archive-page .site-content{padding-top:0!important}
.dklv-archive{--dk-bg:#070a10;background:var(--dk-bg);color:#e8edf6;font-family:'Barlow','Segoe UI',Roboto,Arial,sans-serif;width:100%}
/* Geen overflow op de hele pagina (dat maakt er op iOS een eigen scrollvlak van); alleen de kop knipt de baanlijn af. */
.dklv-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;min-height:clamp(340px,52vh,560px);display:flex;align-items:flex-end;
  background:radial-gradient(120% 90% at 85% 20%,rgba(47,107,255,.22) 0%,rgba(7,10,16,0) 60%),radial-gradient(90% 80% at 10% 100%,rgba(200,255,0,.10) 0%,rgba(7,10,16,0) 55%),#070a10}
.dklv-hero.has-img{background:var(--dklv-hero) center/cover no-repeat,#070a10}
.dklv-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,16,.94) 0%,rgba(7,10,16,.70) 45%,rgba(7,10,16,.25) 100%),linear-gradient(180deg,rgba(7,10,16,0) 55%,#070a10 100%)}
.dklv-hero:not(.has-img)::after{background:linear-gradient(180deg,rgba(7,10,16,0) 60%,#070a10 100%)}
.dklv-hero-track{position:absolute;z-index:0;right:-4%;top:50%;transform:translateY(-50%) rotate(-8deg);width:min(62vw,820px);height:auto;pointer-events:none;opacity:.9}
.dklv-hero-track path{fill:none;stroke:#c8ff00;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;opacity:.5;filter:drop-shadow(0 0 12px rgba(200,255,0,.45));stroke-dasharray:1;stroke-dashoffset:0;animation:dklv-draw 2.6s ease-out both}
.dklv-hero.has-img .dklv-hero-track path{opacity:.6}
@keyframes dklv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.dklv-hero-inner{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(40px,8vw,96px) clamp(16px,4vw,48px) clamp(28px,4vw,48px)}
.dklv-hero-eyebrow{font:600 13px/1.3 'Barlow',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#c8ff00}
.dklv-hero-title{font:italic 800 clamp(52px,10vw,120px)/.9 'Barlow Condensed','Arial Narrow','Roboto Condensed',Arial,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#fff;margin:10px 0 14px;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.dklv-hero-intro{max-width:56ch;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#c9d1de;margin:0}
.dklv-hero-stats{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,48px);margin:28px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.dklv-hero-stats div{margin:0}
.dklv-hero-stats dt{font:600 12px 'Barlow',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a95a8;margin:0}
.dklv-hero-stats dd{font:italic 800 clamp(30px,3.6vw,42px)/1.05 'Barlow Condensed','Arial Narrow',Arial,sans-serif;color:#fff;margin:2px 0 0;font-variant-numeric:tabular-nums}
.dklv-hero-stats dd small{font-size:16px;font-style:normal;font-weight:600;color:#8a95a8}
.dklv-archive-body{max-width:1280px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px) clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:20px}
.dklv-section-title{font:italic 800 clamp(26px,3vw,36px)/1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;text-transform:uppercase;color:#fff;margin:16px 0 0;display:flex;align-items:center;gap:14px}
.dklv-section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#1c2432,transparent)}
.dklv-archive .dklv{padding-inline:0;background:transparent}
.dklv-empty{background:#0e131c;border:1px dashed #2a3345;border-radius:14px;padding:28px;color:#8a95a8}
.dklv-empty strong{color:#e8edf6}
.dklv-empty p{margin:0 0 6px}
.dklv-archive .dklv-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.dklv-archive .dklv-pagination a,.dklv-archive .dklv-pagination span{color:#e8edf6;border:1px solid #1c2432;border-radius:8px;padding:6px 12px;text-decoration:none}
.dklv-archive .dklv-pagination .current{border-color:#c8ff00;color:#c8ff00}
@media (prefers-reduced-motion:reduce){.dklv-hero-track path{animation:none}.dklv-card .img{transition:none}}
@media (max-width:700px){.dklv-hero-track{width:88vw;right:-38%;top:38%;opacity:.45}}

.dklv-hero-back{display:inline-block;margin-bottom:14px;font:600 13px 'Barlow',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c9d1de;text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 14px;background:rgba(7,10,16,.45)}
.dklv-hero-back:hover{color:#c8ff00;border-color:#c8ff00}
.dklv-card.is-current{border-color:#c8ff00}

/* Telefoon: kop zonder zware effecten. */
@media (max-width:700px),(pointer:coarse){.dklv-hero-track path{filter:none;animation:none}.dklv-card:hover .img{transform:none}}

/* Kop van de racelijst met knop "Naar boven" */
.dklv-section-head{display:flex;align-items:center;gap:14px;margin-top:16px}
.dklv-section-head .dklv-section-title{flex:1;margin:0;min-width:0}
.dklv-totop{flex:none;display:inline-flex;align-items:center;gap:8px;font:600 13px 'Barlow',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c9d1de;text-decoration:none;border:1px solid #2a3345;border-radius:99px;padding:8px 14px;background:#0e131c;transition:border-color .15s,color .15s}
.dklv-totop:hover,.dklv-totop:focus-visible{color:#c8ff00;border-color:#c8ff00}
.dklv-totop:focus-visible{outline:2px solid #2f6bff;outline-offset:3px}
@media (max-width:480px){.dklv-totop span{display:none}.dklv-totop{padding:10px;border-radius:50%}}