/* ==========================================================================
   Hardloopdashboard — design system van romar.nathoe.nl, blauw accent
   Layers: reset → tokens → base → layout → components → sections → motion
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, motion;

/* -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  input, button { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; }
}

/* -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-gap: clamp(4rem, 9vw, 7rem);

    --accent: oklch(0.55 0.20 260);          /* blauw */
    --accent-ink: #fff;
    --accent-2: oklch(0.78 0.12 215);        /* licht cyaan */
  }

  [data-theme='dark'] {
    color-scheme: dark;
    --bg: #0a0a0b;
    --bg-elev: #111113;
    --surface: rgb(255 255 255 / .035);
    --surface-hover: rgb(255 255 255 / .06);
    --border: rgb(255 255 255 / .08);
    --border-strong: rgb(255 255 255 / .16);
    --fg: #ededec;
    --fg-muted: #8e8e93;
    --fg-faint: #55555a;
    --accent: oklch(0.68 0.17 260);          /* lichtere stap voor donkere achtergrond */
    --shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
    --grain-opacity: .06;
  }

  [data-theme='light'] {
    color-scheme: light;
    --bg: #f4f3ef;
    --bg-elev: #ffffff;
    --surface: rgb(0 0 0 / .025);
    --surface-hover: rgb(0 0 0 / .05);
    --border: rgb(0 0 0 / .08);
    --border-strong: rgb(0 0 0 / .18);
    --fg: #121214;
    --fg-muted: #66666c;
    --fg-faint: #a5a5aa;
    --shadow: 0 30px 60px -25px rgb(0 0 0 / .25);
    --grain-opacity: .035;
  }
}

/* -------------------------------------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--bg); }

  body {
    font-family: var(--font-sans);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    font-feature-settings: 'ss01', 'cv11';
  }

  ::selection { background: var(--accent); color: var(--accent-ink); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

  h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
  p { text-wrap: pretty; }

  .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
  .mono { font-family: var(--font-mono); font-size: .8125em; letter-spacing: 0; }
  .muted { color: var(--fg-muted); }
  .num { font-variant-numeric: tabular-nums; }

  .link {
    background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
    transition: background-size .5s var(--ease-out), color .2s;
    padding-bottom: 1px;
  }
  .link:hover { background-size: 100% 1px; color: var(--accent); }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .skip {
    position: fixed; left: 1rem; top: 1rem; z-index: 999;
    padding: .6rem 1rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    translate: 0 -200%; transition: translate .3s var(--ease-out);
  }
  .skip:focus { translate: 0 0; }
}

/* -------------------------------------------------------------------------- */
@layer layout {
  .container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

  .section { padding-block: var(--section-gap) 0; }
  .section__head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.25rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .section__head h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
  .section__index { color: var(--accent); }
  .section__meta { margin-left: auto; }
  /* Grid-kinderen mogen smaller worden dan hun inhoud (tabellen, lange labels), anders duwen ze de pagina breder */
  .hero__grid > *, .split > *, .calc > *, .stats > *, .detail__inner > * { min-width: 0; }
}

/* -------------------------------------------------------------------------- */
@layer components {
  .grain {
    position: fixed; inset: 0; z-index: 150; pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (pointer: coarse) { .grain { display: none; } }

  /* ---- Nav ---- */
  .nav {
    position: fixed; z-index: 100;
    top: 1rem; left: 50%; translate: -50% 0;
    width: min(100% - 2rem, 1100px);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: color-mix(in oklab, var(--bg) 80%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
  @media (pointer: coarse) {
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in oklab, var(--bg) 94%, transparent); }
  }
  .nav__logo { display: flex; align-items: center; gap: .65rem; font-weight: 600; letter-spacing: -.02em; }
  /* Logo = de favicon (4:15); in het donkere thema een dun randje zodat de tegel loskomt van de achtergrond */
  .nav__mark { width: 2rem; height: 2rem; border-radius: 8px; flex: none; }
  [data-theme='dark'] .nav__mark { box-shadow: 0 0 0 1px var(--border-strong); }
  .nav__links { display: flex; gap: .25rem; }
  .nav__links a {
    display: block; padding: .45rem .85rem; border-radius: 999px;
    font-size: .875rem; color: var(--fg-muted); transition: color .2s, background .2s;
  }
  .nav__links a:hover { color: var(--fg); background: var(--surface-hover); }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--fg-muted);
    transition: border-color .2s, color .2s, background .2s;
  }
  .icon-btn:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface); }
  .icon-btn svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  [data-theme='dark'] .icon-moon, [data-theme='light'] .icon-sun { display: none; }
  @media (max-width: 760px) { .nav__links { display: none; } }

  /* ---- Eyebrow + pulse ---- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .4rem .9rem .4rem .7rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface);
    font-size: .85rem; color: var(--fg-muted);
  }
  .pulse { position: relative; width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
  .pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit;
    animation: ping 2s var(--ease-out) infinite;
  }
  @keyframes ping { to { scale: 3.2; opacity: 0; } }

  /* ---- Kaart ---- */
  .panel {
    position: relative;
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
  .panel__title { display: grid; gap: .15rem; }
  .panel__title strong { font-weight: 600; letter-spacing: -.02em; }
  .panel__title span { font-size: .85rem; }

  /* ---- Segmentfilter ---- */
  .seg {
    display: inline-flex; gap: .2rem; padding: .25rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  }
  .seg button {
    padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; color: var(--fg-muted);
    transition: color .2s, background .2s;
  }
  .seg button:hover { color: var(--fg); }
  .seg button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

  /* ---- Label (kleine tekst: fg-muted, niet fg-faint, voor contrast op licht) ---- */
  .label {
    font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--fg-muted);
  }

  /* ---- Tooltip ---- */
  .tooltip {
    position: absolute; z-index: 5; left: var(--tx); top: var(--ty);
    translate: -50% calc(-100% - .6rem);
    padding: .5rem .7rem; border-radius: var(--radius-sm);
    background: var(--fg); color: var(--bg);
    width: max-content; max-width: min(260px, 80vw);
    font-size: .78rem; line-height: 1.45; white-space: pre-line; pointer-events: none;
    box-shadow: var(--shadow);
  }
  .tooltip[hidden] { display: none; }

  /* ---- Tabelweergave ---- */
  .table-toggle { margin-top: 1rem; font-size: .85rem; color: var(--fg-muted); }
  .table-toggle summary { cursor: pointer; width: max-content; }
  .table-toggle summary:hover { color: var(--fg); }
  .data-table { width: 100%; margin-top: .75rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
  .data-table th, .data-table td { padding: .4rem .5rem; text-align: right; border-bottom: 1px solid var(--border); }
  .data-table th:first-child, .data-table td:first-child { text-align: left; }
  .data-table th { font-weight: 500; color: var(--fg-muted); }
  .table-scroll { max-height: 18rem; overflow-y: auto; }
}

/* -------------------------------------------------------------------------- */
@layer sections {
  /* ================= HERO / AFTELLEN ================= */
  .hero { padding-top: 8rem; }
  .hero__grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background:
      radial-gradient(700px circle at 0% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
      var(--surface);
  }
  @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }
  .hero__goal { display: flex; flex-direction: column; gap: 1.25rem; }
  .hero__title { font-size: clamp(3rem, 8vw, 6.25rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; }
  .hero__time {
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* Negatieve letter-spacing laat de laatste 0 buiten het gradient-vak steken: ruimte erbij, opmaak gelijk */
    padding-right: .08em; margin-right: -.08em;
  }
  .hero__text { color: var(--fg-muted); max-width: 46ch; }

  .countdown { display: flex; gap: clamp(.35rem, 1.2vw, .75rem); }
  .countdown__unit {
    position: relative; flex: 1 1 0; min-width: 0; max-width: 8.5rem;
    display: grid; justify-items: center; gap: .35rem;
    padding: clamp(.75rem, 2vw, 1.1rem) .5rem clamp(.6rem, 1.6vw, .85rem);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: linear-gradient(var(--bg) 50%, color-mix(in oklab, var(--bg) 88%, var(--fg)));
    overflow: hidden;
  }
  .countdown__unit::after {
    content: ''; position: absolute; inset: 50% 0 auto; height: 1px;
    background: color-mix(in oklab, var(--border-strong) 60%, transparent);
  }
  .countdown__value {
    font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .countdown__unit:first-child .countdown__value { color: var(--accent); }

  /* ================= KERNCIJFERS ================= */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: .6rem; }
  .stat {
    display: grid; gap: .35rem; align-content: start;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
  }
  .stat__value {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stat__value small { font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); margin-left: .2em; }
  .stat__sub { font-size: .8rem; color: var(--fg-muted); }

  /* ================= WEEKKILOMETERS ================= */
  .weeks { position: relative; }
  .weeks svg { width: 100%; height: clamp(220px, 32vw, 320px); overflow: visible; }
  .weeks .grid line { stroke: var(--border); stroke-width: 1; }
  .weeks .grid text, .weeks .axis text { fill: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; }
  /* Intensiteit: één blauwe reeks, donkerder (licht thema) of lichter (donker thema) = harder. Gevalideerd. */
  .weeks { --int-rustig: #7faee9; --int-tempo: #3177dc; --int-hard: #0f3bb7; --int-onbekend: var(--fg-faint); }
  [data-theme='dark'] .weeks { --int-rustig: #345d9b; --int-tempo: #3d8fe4; --int-hard: #87d5ff; }
  .weeks .seg--rustig { fill: var(--int-rustig); }
  .weeks .seg--tempo { fill: var(--int-tempo); }
  .weeks .seg--hard { fill: var(--int-hard); }
  .weeks .seg--onbekend { fill: var(--int-onbekend); }
  .weeks .herstel { fill: url(#hatch); pointer-events: none; }
  .weeks .kolom { transition: opacity .15s; }
  .weeks [data-hover] .kolom:not([data-active]) { opacity: .45; }
  .weeks .avg { stroke: var(--fg-muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .weeks .avg-label { fill: var(--fg); font-family: var(--font-mono); font-size: 11px; }
  .weeks .hit { fill: transparent; }
  #hatch path { stroke: var(--bg); stroke-width: 1.6; opacity: .75; }

  .legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8rem; color: var(--fg-muted); }
  .legend span { display: inline-flex; align-items: center; gap: .45rem; }
  .legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
  .legend .sw-rustig { background: var(--int-rustig); }
  .legend .sw-tempo { background: var(--int-tempo); }
  .legend .sw-hard { background: var(--int-hard); }
  .legend .sw-herstel {
    background: repeating-linear-gradient(135deg, var(--fg-muted) 0 1.5px, transparent 1.5px 4px);
    box-shadow: inset 0 0 0 1px var(--fg-muted);
  }
  .legend .sw-avg { height: 0; border-top: 1.5px dashed var(--fg-muted); border-radius: 0; }

  /* ================= TEMPO PER AFSTAND ================= */
  .pace { --label-w: 7rem; position: relative; }
  .pace__plot { position: relative; display: grid; padding-top: 2rem; padding-bottom: 1.75rem; }
  .pace__axis { position: absolute; inset: 0 1.5rem 0 var(--label-w); pointer-events: none; }
  .pace__tick { position: absolute; top: 2rem; bottom: 1.75rem; left: var(--x); width: 1px; background: var(--border); }
  .pace__tick::after {
    content: attr(data-tick); position: absolute; top: calc(100% + .4rem); translate: -50% 0;
    font-family: var(--font-mono); font-size: .68rem; color: var(--fg-muted);
  }
  .pace__goal { position: absolute; top: 1.4rem; bottom: 1.75rem; left: var(--x); border-left: 1.5px dashed var(--fg); }
  .pace__goal::after {
    content: attr(data-label); position: absolute; bottom: 100%; translate: -50% -.2rem;
    padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg);
    font-family: var(--font-mono); font-size: .68rem; color: var(--fg); white-space: nowrap;
  }
  .pace__row {
    display: grid; grid-template-columns: var(--label-w) 1fr; align-items: center;
    min-height: 2.6rem; border-radius: 8px;
  }
  .pace__row:hover, .pace__row:focus-visible { background: var(--surface-hover); }
  .pace__label { font-size: .85rem; color: var(--fg-muted); padding-left: .5rem; }
  .pace__track { position: relative; height: 100%; margin-right: 1.5rem; }
  /* Lijn van doeltempo naar eigen tempo: laat zien hoeveel sneller of trager */
  .pace__gap {
    position: absolute; top: 50%; height: 2px; translate: 0 -50%;
    left: min(var(--x), var(--goal)); width: calc(max(var(--x), var(--goal)) - min(var(--x), var(--goal)));
    background: var(--border-strong);
  }
  .pace__dot {
    position: absolute; top: 50%; left: var(--x); translate: -50% -50%;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
  }
  .pace__row--slower .pace__dot { background: var(--bg); border: 2px solid var(--fg-muted); }
  .pace__value {
    position: absolute; top: 50%; right: calc(100% - var(--x) + .75rem); translate: 0 -50%;
    font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pace__row--slower .pace__value { right: auto; left: calc(var(--x) + .75rem); }
  @media (max-width: 560px) { .pace { --label-w: 4.75rem; } .pace__label { font-size: .75rem; padding-left: .25rem; } }

  /* ================= FITTER WORDEN ================= */
  .fit { position: relative; }
  .fit svg { width: 100%; height: clamp(200px, 28vw, 280px); overflow: visible; }
  .fit .grid line, .detail .grid line { stroke: var(--border); stroke-width: 1; }
  .fit .grid text, .fit .axis text, .detail .grid text {
    fill: var(--fg-muted); font-family: var(--font-mono); font-size: 11px;
  }
  .fit__lijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .fit__punt { fill: var(--accent); stroke: var(--bg); stroke-width: 2; transition: r .15s; }
  .fit__punt[data-active] { r: 6.5; fill: var(--accent-2); }
  .fit .hit { fill: transparent; }

  /* ================= REKENHULP ================= */
  .calc { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
  @media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .calc__table { font-size: .85rem; } .calc__table th, .calc__table td { padding-inline: .3rem; } }
  .calc__control { display: grid; gap: .5rem; }
  .calc__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
  .calc__status {
    padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
    background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent);
    transition: background .3s, color .3s;
  }
  .calc[data-boven-doel] .calc__status { background: var(--surface-hover); color: var(--fg-muted); }
  .calc__tempo {
    font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .calc__tempo small { font-size: .3em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); margin-left: .25em; }

  .calc__range {
    --fill: 30%;
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 2.25rem; margin-top: .25rem;
    background: transparent; cursor: pointer; touch-action: pan-y;
  }
  .calc__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) var(--fill), var(--border-strong) var(--fill));
  }
  .calc__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-strong); }
  .calc__range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
  .calc__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: var(--fg); border: 4px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border-strong), 0 4px 12px rgb(0 0 0 / .4);
  }
  .calc__range::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--fg); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--border-strong);
  }
  .calc__range:focus-visible { outline: none; }
  .calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }

  /* 4:15 ligt op 30% van de schaal (3:30 – 6:00) */
  .calc__scale { position: relative; height: 1rem; font-size: .7rem; }
  .calc__scale span { position: absolute; top: 0; }
  .calc__scale span:nth-child(1) { left: 0; }
  .calc__scale span:nth-child(2) { left: 30%; translate: -50% 0; color: var(--accent); }
  .calc__scale span:nth-child(3) { right: 0; }
  .calc__hint { font-size: .85rem; margin-top: .25rem; }

  .calc__table { margin-top: 0; font-size: .95rem; }
  .calc__table td { padding-block: .7rem; }
  .calc__table td:nth-child(2) { font-weight: 600; color: var(--fg); }
  .calc__table td[data-sneller='true'] { color: var(--accent); font-weight: 600; }

  /* ================= TWEE KOLOMMEN ================= */
  .split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
  @media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

  /* ================= HEATMAP ================= */
  .heatmap {
    --heat-kleur: oklch(0.50 0.22 260);
    --heat-actief: oklch(0.62 0.24 25);
    position: relative; z-index: 0; isolation: isolate;
    width: 100%; height: clamp(340px, 60vw, 560px);
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg); overflow: hidden;
    font-family: var(--font-sans);
  }
  [data-theme='dark'] .heatmap { --heat-kleur: oklch(0.75 0.14 225); --heat-actief: #fff; }
  /* Reset zet max-width: 100% op img/canvas; Leaflet-panes hebben geen breedte, dus dat knijpt alles weg */
  .heatmap img, .heatmap canvas { max-width: none; }
  /* OSM-tegels rustig grijs maken; in donker omkeren zodat wegen licht op donker staan */
  .heatmap .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.06); opacity: .9; }
  [data-theme='dark'] .heatmap .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.85) contrast(.9); opacity: .75; }
  .heatmap .leaflet-popup-content-wrapper, .heatmap .leaflet-popup-tip {
    background: var(--fg); color: var(--bg); box-shadow: var(--shadow);
  }
  .heatmap .leaflet-popup-content { margin: .6rem .8rem; font-size: .8rem; line-height: 1.45; }
  .heatmap .leaflet-control-attribution {
    background: color-mix(in oklab, var(--bg) 80%, transparent); color: var(--fg-muted); font-size: .65rem;
  }
  .heatmap .leaflet-control-attribution a { color: var(--fg-muted); }
  .heatmap .leaflet-bar a { background: var(--bg-elev); color: var(--fg); border-color: var(--border); }
  .heatmap .leaflet-bar a:hover { background: var(--surface-hover); }

  /* ================= WEDSTRIJDEN ================= */
  .race {
    display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: .15rem 1rem;
    padding-block: 1rem; border-bottom: 1px solid var(--border);
  }
  .race:first-child { border-top: 1px solid var(--border); }
  .race h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
  .race__meta { font-size: .82rem; color: var(--fg-muted); }
  .race__time { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
  .race__badge {
    grid-column: 2 / -1; justify-self: start;
    padding: .1rem .55rem; border-radius: 999px; font-size: .7rem;
    background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent);
  }
  @media (max-width: 560px) {
    .race { grid-template-columns: 1fr auto; }
    .race__date, .race__badge { grid-column: 1 / -1; }
  }

  /* ================= ALLE RUNS ================= */
  .runs__scroll { max-height: 34rem; }
  .runs__table { margin-top: 0; }
  .runs__table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
  .runs__table td { padding-block: .55rem; }
  .runs__open {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem;
    width: 100%; text-align: left; padding: .1rem 0; border-radius: 6px;
  }
  .runs__open time { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-muted); min-width: 6.5rem; }
  .runs__open span { color: var(--fg); }
  .runs__table tr:hover .runs__open span { color: var(--accent); }
  @media (max-width: 560px) {
    .runs__table { font-size: .82rem; }
    .runs__table th, .runs__table td { padding-inline: .25rem; }
    .runs__open time { min-width: 0; }
  }
  /* Type-label: één kleur, voller naarmate de training intensiever is (Herstel → Sprint) */
  .runs__type {
    --mix: 14%;
    display: inline-block; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
    font-size: .75rem; font-weight: 500;
    background: color-mix(in oklab, var(--accent) var(--mix), transparent); color: var(--fg);
  }
  .runs__type[data-type='Herstel'] { --mix: 8%; }
  .runs__type[data-type='Basis'] { --mix: 16%; }
  .runs__type[data-type='Tempo'] { --mix: 28%; }
  .runs__type[data-type='Drempel'] { --mix: 42%; }
  .runs__type[data-type='VO2max'], .runs__type[data-type='Anaeroob'], .runs__type[data-type='Sprint'] {
    --mix: 100%; color: var(--accent-ink);
  }
  .runs__table td:nth-child(2) { text-align: left; }
  .runs__table th:nth-child(2) { text-align: left; }
  .runs__meer { margin-top: 1rem; color: var(--fg-muted); font-size: .9rem; }
  .runs__meer:hover { color: var(--accent); }

  .kaart__knop {
    margin-top: .4rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 500;
  }

  /* ================= DETAIL ================= */
  .detail {
    margin: auto; width: min(100% - 1.5rem, 920px); max-height: min(92vh, 1100px);
    padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow);
    overflow: hidden;
  }
  .detail[open] { display: flex; flex-direction: column; }
  /* Pagina erachter niet laten scrollen zolang het venster open is */
  html:has(.detail[open]) { overflow: hidden; }
  .detail::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); }
  .detail[open] { animation: detail-in .35s var(--ease-out); }
  @keyframes detail-in { from { opacity: 0; translate: 0 12px; scale: .98; } }
  /* De binnenkant scrolt, niet het venster: dan blijft de scrollbalk binnen de afgeronde rand */
  .detail__inner {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; gap: 1.25rem; padding: 0 clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem);
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  .detail__inner::-webkit-scrollbar { width: 10px; }
  .detail__inner::-webkit-scrollbar-track { background: transparent; margin-block: var(--radius-lg); }
  .detail__inner::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg-elev);
  }
  .detail__head {
    position: sticky; top: 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: start; gap: 1rem;
    margin-inline: calc(-1 * clamp(1rem, 3vw, 1.75rem)); padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem) .75rem;
    background: var(--bg-elev);
  }
  .detail__head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: .2rem; }
  .detail__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
  .detail__stats li {
    display: grid; gap: .2rem; padding: .75rem .9rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  }
  .detail__stats b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .detail__kaart {
    --route-kleur: oklch(0.55 0.22 260);
    position: relative; z-index: 0; isolation: isolate;
    height: clamp(220px, 40vw, 340px); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden;
  }
  [data-theme='dark'] .detail__kaart { --route-kleur: oklch(0.78 0.14 220); }
  .detail__kaart img, .detail__kaart canvas { max-width: none; }
  .detail__kaart .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.06); opacity: .9; }
  [data-theme='dark'] .detail__kaart .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.85) contrast(.9); opacity: .75; }
  .detail__kaart .leaflet-control-attribution { background: color-mix(in oklab, var(--bg) 80%, transparent); color: var(--fg-muted); font-size: .65rem; }
  .detail__kaart .leaflet-control-attribution a { color: var(--fg-muted); }
  .detail__grafieken { display: grid; gap: .75rem; }
  .detail__grafieken figure { display: grid; gap: .25rem; }
  .detail__grafieken svg { width: 100%; height: 140px; overflow: visible; }
  .detail__lijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
  .detail__splits { margin-top: 0; }

  /* ================= FOOTER ================= */
  .footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-top: var(--section-gap);
    padding-block: 2rem 2.5rem; border-top: 1px solid var(--border);
    font-size: .85rem; color: var(--fg-muted);
  }
}

/* -------------------------------------------------------------------------- */
@layer motion {
  .weeks .bar { transition: fill .15s; }

  /* View Transitions: cirkel-reveal bij themawissel */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .grain { display: none; }
  }
}