/* Huisstijl "veld": de kleuren zelf staan in kleuren.css; hier krijgen ze een rol. */
:root {
  --achtergrond: var(--veld-nacht);
  --paneel: var(--veld-paneel);
  --tekst: var(--veld-tekst);
  --zacht: var(--veld-tekst-zacht);
  --accent: var(--veld-bordgroen);   /* primaire knoppen */
  --actief: var(--veld-goud);        /* geselecteerde zet, actieve tab: altijd met donkere tekst */
  --kader: var(--veld-rand);
  --fout: #F87171;                   /* leesbaar rood op donker */
  --goed: #86C49A;                   /* leesbaar groen op donker */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--veld-font);
  background: var(--achtergrond);
  color: var(--tekst);
}

header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--kader);
}
header { background: var(--paneel); }
header h1 { margin: 0; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
header h1 img { width: 28px; height: 28px; }
nav { display: flex; gap: 0.3rem; }
nav button { background: none; border: 1px solid var(--kader); border-radius: 4px; }
nav button.actief { background: var(--actief); color: var(--veld-nacht); border-color: var(--actief); }
[hidden] { display: none !important; }

main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
}

.bordkolom { flex: 0 0 min(480px, 100%); }
#bord { width: min(480px, 100%); aspect-ratio: 1; }
.navigatie { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.navigatie button { flex: 1; }
.navigatie button.groot { flex: 2; }
.hint { font-size: 0.85rem; color: var(--zacht); }

.invoerkolom { flex: 1 1 320px; min-width: 0; }

#kop { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
#kop label { display: flex; flex-direction: column; font-size: 0.85rem; }
#kop input, #kop select { font-size: 1rem; padding: 0.2rem; }

.blok { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; }
textarea { width: 100%; font: 1rem/1.4 var(--veld-font-notatie); padding: 0.4rem; }

/* Velden en knoppen op een donkere achtergrond. */
input, select, textarea {
  background: var(--paneel); color: var(--tekst);
  border: 1px solid var(--kader); border-radius: 4px;
}
button {
  font-family: inherit; background: var(--paneel); color: var(--tekst);
  border: 1px solid var(--kader); border-radius: 4px;
}
button:hover:not(:disabled) { border-color: var(--zacht); }
#controleer, #bewaar, #boom-bewaar, #bewaar-alle { background: var(--accent); border-color: var(--accent); }
a { color: var(--veld-goud); }

.knoppen { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
button { font-size: 1rem; padding: 0.3rem 0.8rem; cursor: pointer; }
#zettenlijst, .boom, #upload-tabel td:nth-child(5) { font-family: var(--veld-font-notatie); }
button:disabled { cursor: default; opacity: 0.5; }

#melding { margin: 0.5rem 0; font-weight: 600; }
#melding.fout { color: var(--fout); }
#melding.goed { color: var(--goed); }

#voorstellen li { margin-bottom: 0.4rem; }
#voorstellen .uitleg { color: var(--zacht); font-size: 0.85rem; }
#voorstellen .rest { font-size: 0.8rem; }
#voorstellen .rest.ok { color: var(--goed); }
#voorstellen .rest.nok { color: var(--fout); }

#zettenlijst { line-height: 1.8; }
#zettenlijst .nr { color: var(--zacht); margin-left: 0.4rem; }
#zettenlijst .zet { cursor: pointer; padding: 0 0.2rem; border-radius: 3px; }
#zettenlijst .zet.actief { background: var(--actief); color: var(--veld-nacht); }
#zettenlijst .zet.fout { color: var(--fout); text-decoration: underline wavy; cursor: default; }

#partijen a { color: var(--tekst); }

.fotoknoppen { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.fotoknop { display: inline-block; margin-top: 0.5rem; cursor: pointer; color: var(--veld-goud); }
.fotokolom { flex: 1 1 320px; max-width: 520px; min-width: 0; }
.fotovak { position: relative; overflow: hidden; border: 1px solid var(--kader); border-radius: 4px; }
.fotovak img { display: block; width: 100%; }

.uploadkolom { flex: 1; max-width: 1000px; }
.sleepvak {
  display: block; padding: 2rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--kader); border-radius: 8px; background: var(--paneel);
}
.sleepvak.erboven { border-color: var(--actief); }
#upload-melding { margin: 0.5rem 0; font-weight: 600; }
#upload-tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
#upload-tabel th, #upload-tabel td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--kader); }
#upload-tabel .ok { color: var(--goed); }
#upload-tabel .nok { color: var(--fout); }
#upload-tabel .dubbel { color: var(--zacht); }

.fotokop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.6rem 0; font-size: 0.85rem; }
.fotokop label { display: flex; flex-direction: column; }
.wachtrij { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.wachtrij li { display: flex; gap: 0.8rem; align-items: center; background: var(--paneel); padding: 0.4rem; border: 1px solid var(--kader); border-radius: 6px; }
.wachtrij img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; }
.wachtrij .info { flex: 1; font-size: 0.9rem; }
.wachtrij .acties { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

.fotobalk { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.3rem; font-size: 0.9rem; }
.fotobalk button { padding: 0.15rem 0.5rem; font-size: 0.9rem; }
.concept { color: var(--fout); font-size: 0.8rem; border: 1px solid var(--fout); border-radius: 3px; padding: 0 0.2rem; }

.boom { line-height: 1.9; margin-bottom: 0.6rem; }
.boom .zet { cursor: pointer; padding: 0 0.2rem; border-radius: 3px; }
.boom .zet.actief { background: var(--actief); color: var(--veld-nacht); }
.boom .nr { color: var(--zacht); }
.boom .variant { color: var(--zacht); }
.boom .zet.twijfel { text-decoration: underline dotted; text-underline-offset: 3px; }
.twijfels { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0 0 0.4rem; }
.boom .commentaar { color: var(--goed); font-style: italic; font-family: var(--veld-font); }
.boomgereedschap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.boomgereedschap .nags { display: inline-flex; gap: 0.2rem; }
.boomgereedschap button { padding: 0.15rem 0.5rem; }
.boomgereedschap button.actief { background: var(--actief); color: var(--veld-nacht); border-color: var(--actief); }
#commentaar { width: 100%; font: inherit; padding: 0.3rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.filters select { padding: 0.2rem; }
#tornooi-tabel td { padding: 0.2rem 0.3rem; }
#tornooi-partijen { overflow-x: auto; }  /* gsm: de tabel schuift, niet de pagina */
table.tornooipartijen { border-collapse: collapse; }
table.tornooipartijen th, table.tornooipartijen td { padding: 0.2rem 0.5rem 0.2rem 0; text-align: left; }

/* ------------------------------------------------------------ gsm en tablet */

/* Knoppen die alleen zin hebben met een vinger (camera, vegen) verbergen we op een
   computer met muis; daar staat de gewone bestandskeuze al. */
@media (hover: hover) and (pointer: fine) {
  .alleen-aanraak { display: none; }
}

/* Op een aanraakscherm: tikdoelen van minstens 44 px (richtlijn van Apple en Google). */
@media (pointer: coarse) {
  /* Minstens 16px in velden: anders zoomt iOS in bij het aanraken (ook in landschap). */
  input, select, textarea { font-size: 16px; }
  /* Geen blauwe flits van de browser bij elke tik; de knoppen tonen zelf hun toestand. */
  button, label, a { -webkit-tap-highlight-color: transparent; }
  button, select, input:not([type="checkbox"]), .fotoknop {
    min-height: 44px;
  }
  input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; }
  .boom .zet, #zettenlijst .zet { padding: 0.15rem 0.35rem; }
}

/* Smal scherm (gsm, ca. 360-430 px): alles onder elkaar, het bord over de volle breedte. */
@media (max-width: 700px) {
  header { gap: 0.4rem; padding: 0.4rem 0.75rem; }
  header h1 { font-size: 1.2rem; }
  nav { flex: 1 1 100%; flex-wrap: wrap; }  /* zeven tabs passen niet op één rij */
  nav button { flex: 1; min-height: 44px; }
  .breed { display: none; }

  main { padding: 0.75rem; gap: 0.75rem; }
  /* Het scherm "ingeven" als één kolom in een vaste volgorde: bord, knoppen, de zetten
     meteen eronder, daarna pas de kopgegevens en de lijst. display: contents laat de
     kinderen van de invoerkolom meedoen in die volgorde zonder de HTML te wijzigen. */
  main#ingeven { flex-direction: column; flex-wrap: nowrap; }
  .invoerkolom { display: contents; }
  .bordkolom { flex: none; order: 1; width: 100%; }
  #melding { order: 2; margin: 0; }
  #tekstmodus, #boommodus { order: 3; }
  .fotokolom { order: 4; flex: none; max-width: none; }
  #kop { order: 5; }
  .invoerkolom > .knoppen { order: 6; }

  #bord { width: 100%; }
  .navigatie { gap: 0.4rem; }
  .navigatie button { min-height: 48px; font-size: 1.2rem; }
  .bordkolom .hint { margin: 0.4rem 0 0; }

  /* De zetten blijven in een eigen vak dat scrollt, zodat bord en knoppen in beeld blijven. */
  .boom, #zettenlijst { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }

  /* Kopgegevens in twee kolommen; velden vullen hun kolom. */
  #kop { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
  #kop input, #kop select { width: 100%; min-width: 0; }
  .knoppen { flex-wrap: wrap; }
  .knoppen button { flex: 1 1 auto; }
  .filters select { flex: 1 1 100%; }
  #partijen { padding-left: 1.2rem; }
  #partijen li { margin-bottom: 0.6rem; line-height: 1.5; }

  .uploadkolom { min-width: 0; }
  .sleepvak { padding: 1.2rem; }
  .sleepvak.camera { margin-top: 0.5rem; color: var(--veld-goud); font-weight: 600; }
  .fotokop > span { flex: 1 1 100%; }
  .fotokop label { flex: 1 1 40%; }
  .fotokop input { width: 100%; }
  .wachtrij li { flex-wrap: wrap; }
  .wachtrij img { width: 72px; height: 72px; }
  .wachtrij .info { flex: 1 1 60%; }
  .wachtrij .acties { flex: 1 1 100%; }
  .wachtrij .acties select { flex: 1 1 100%; }

  /* Tabellen als kaarten: elke rij een blok, elke cel met haar kolomnaam ervoor
     (data-label, gezet door de JavaScript). Zo hoeft er niets opzij te scrollen. */
  table.kaarten, table.kaarten tbody, table.kaarten tr, table.kaarten td { display: block; width: 100%; }
  table.kaarten thead { display: none; }
  table.kaarten tr {
    background: var(--paneel); border: 1px solid var(--kader); border-radius: 6px;
    padding: 0.4rem 0.6rem; margin-bottom: 0.6rem;
  }
  table.kaarten td { border: none !important; padding: 0.2rem 0 !important; }
  table.kaarten td[data-label]:not(:empty)::before {
    content: attr(data-label); display: block; font-size: 0.75rem; color: var(--zacht);
  }
  table.kaarten td:empty { display: none; }
  #upload-tabel td:first-child { display: none; }  /* volgnummer: op een kaart overbodig */
  table.kaarten input:not([type="file"]), table.kaarten select { width: 100%; }
  table.kaarten input[type="file"] { max-width: 100%; }
}

/* ------------------------------------------------------------ analysescherm (blok 2a) */

main#analyse {
  flex-direction: column; flex-wrap: nowrap; gap: 1.25rem;
  max-width: 1376px; margin: 0 auto; padding: 1.5rem 2rem 3rem;
}
.analysekop-smal, .huidige-zet, .zettenstrook { display: none; }
.mono { font-family: var(--veld-font-notatie); }
/* Alleen voor schermlezers (zichtbaar staat dezelfde info al op het scherm). */
.voor-schermlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vet { font-weight: 600; }
.goud { color: var(--veld-goud); }

.analysekop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.analysekop .titels { display: flex; flex-direction: column; gap: 0.4rem; }
.bovenregel { font-size: 0.8rem; color: var(--zacht); letter-spacing: 0.5px; text-transform: uppercase; }
#analyse-titel { margin: 0; font-size: 1.9rem; font-weight: 700; }
.uitslag { font-family: var(--veld-font-notatie); color: var(--veld-goud); margin-left: 0.3rem; white-space: nowrap; }
.speler { display: inline-flex; flex-direction: column; }
.speler small { font-size: 0.8rem; font-weight: 400; color: var(--zacht); }
.analysekop .knoppen { flex-wrap: wrap; align-items: center; margin: 0; }
.analysekop .knoppen button { min-height: 44px; border-radius: 8px; }
.analysemenu { position: relative; display: flex; gap: 0.5rem; align-items: center; }
#analyse-menu { min-height: 44px; min-width: 44px; border-radius: 8px; font-size: 1.3rem; line-height: 1; }
#analyse-knoppen {
  display: none; position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; flex-direction: column;
  align-items: stretch; min-width: 14rem; padding: 0.4rem; background: var(--paneel); border: 1px solid var(--kader);
  border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
#analyse-knoppen.open { display: flex; }
#analyse-knoppen button { text-align: left; }

.analysestatus {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  background: var(--paneel); border: 1px solid var(--kader); border-radius: 8px; padding: 0.6rem 0.9rem;
}
.analysestatus.fout { border-color: var(--fout); color: var(--fout); }
.analysestatus progress { flex: 1 1 160px; accent-color: var(--veld-bordgroen); }

.analyseraster { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.analysebord { flex: 0 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.bord-met-balk { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.6rem; }  /* de balk rechts van het bord */
#analyse-bord { flex: 1 1 0; min-width: 0; max-width: 576px; aspect-ratio: 1; }

/* Evaluatiebalk: licht = wit, donker = zwart; --wit is het witte deel (de winstkans van wit). */
.evalbalk { position: relative; flex: 0 0 22px; border-radius: 6px; overflow: hidden; background: var(--veld-licht); }
.evalbalk .zwartdeel {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--wit, 50%));
  background: var(--veld-diep); transition: height 0.3s, width 0.3s;
}
.evalbalk.zwart-onder .zwartdeel { top: auto; bottom: 0; }
/* Het getal staat tegen de grens wit/zwart, aan de kant van wie beter staat (het grootste deel,
   dus het past altijd), in de kleur die daar leesbaar is. */
.evalbalk .getal {
  position: absolute; left: 50%; top: calc(100% - var(--wit, 50%) + 2px);
  font: 600 14px var(--veld-font-notatie); color: var(--veld-licht);
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: top 0.3s, bottom 0.3s;
}
.evalbalk.getal-boven .getal { top: auto; bottom: calc(var(--wit, 50%) + 2px); }
.evalbalk.zwart-onder .getal { top: calc(var(--wit, 50%) + 2px); }
.evalbalk.zwart-onder.getal-boven .getal { top: auto; bottom: calc(100% - var(--wit, 50%) + 2px); }
.evalbalk.getal-donker .getal { color: var(--veld-nacht); }

.analysenavigatie { padding-right: calc(22px + 0.6rem); flex-wrap: wrap; justify-content: center; }
.analysenavigatie button { flex: 0 0 auto; min-height: 44px; min-width: 44px; border-radius: 8px; }
.analysenavigatie .volgende-fout, #a-partij { padding: 0 1rem; }

.analysezijkant { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.kaart { background: var(--paneel); border: 1px solid var(--kader); border-radius: 12px; padding: 1rem 1.1rem; }
.kaartkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.kaart h3, .kaarttitel { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--zacht); }

.lijnen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.lijnen li {
  display: flex; gap: 0.75rem; align-items: baseline; padding: 0.4rem 0.75rem; border-radius: 8px;
  border: 1px solid transparent; font-family: var(--veld-font-notatie); font-size: 0.9rem;
}
.lijnen .eval { min-width: 3.3rem; color: var(--zacht); font-weight: 600; }
.lijnen .lijn { flex: 1; min-width: 0; }
.lijnen li.beste {
  background: color-mix(in srgb, var(--veld-goud) 12%, transparent);
  border-color: color-mix(in srgb, var(--veld-goud) 45%, transparent);
}
.lijnen li.beste .eval { color: var(--veld-goud); }
/* Een zet uit een lijn: klikken zet die stelling op het bord. */
.lijnzet { font: inherit; color: inherit; background: none; border: 0; border-radius: 4px; padding: 0.1rem 0.2rem; cursor: pointer; }
.lijnzet:hover { background: var(--kader); }
.lijnzet.actief { background: var(--veld-goud); color: var(--veld-nacht); font-weight: 600; }
.label-beste {
  margin-left: auto; font: 700 0.75rem var(--veld-font); color: var(--veld-nacht);
  background: var(--veld-goud); border-radius: 4px; padding: 2px 6px;
}

.zettenraster {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; align-items: center;
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
}
.zettenraster .nr { font: 0.8rem var(--veld-font-notatie); color: var(--zacht); text-align: right; padding-right: 0.4rem; }
.zettenraster .zet, .zettenstrook .zet {
  font-family: var(--veld-font-notatie); font-size: 0.9rem; background: transparent; border: 0; border-radius: 6px;
  padding: 0.3rem 0.5rem; text-align: left; display: flex; align-items: center; gap: 0.4rem; min-height: 32px;
}
.zettenraster .zet:hover { background: var(--kader); }
.zettenraster .zet.actief, .zettenstrook .zet.actief { background: var(--veld-goud); color: var(--veld-nacht); font-weight: 600; }
.zettenraster .resultaat { grid-column: 2 / -1; color: var(--veld-goud); font-family: var(--veld-font-notatie); padding: 0.4rem 0.5rem; }

/* Symbolen van de fouten: altijd het teken zelf, de kleur helpt alleen. Donkere tekst
   (--veld-diep) haalt op elk van de drie kleuren minstens 4.5:1. */
.badge {
  display: inline-block; font: 700 0.75rem/1.3 var(--veld-font); color: var(--veld-diep);
  border-radius: 4px; padding: 0 0.3rem;
}
.soort-onnauwkeurig { background: var(--veld-onnauwkeurig); }
.soort-fout { background: var(--veld-fout); }
.soort-blunder { background: var(--veld-blunder); }

#notitiekaart { display: flex; flex-direction: column; gap: 0.5rem; }
#notitie { background: var(--achtergrond); border-radius: 8px; padding: 0.6rem; resize: vertical; font-family: var(--veld-font); }
/* ✎ achter een zet met een notitie; op de gouden (actieve) zet donker, nooit wit op goud. */
/* position: relative houdt de verborgen schermlezertekst erbinnen; anders telt ze, op haar
   plaats ver rechts in de scrollende gsm-strook, mee voor de breedte van de pagina. */
.notitieteken { position: relative; color: var(--veld-goud); font-size: 0.85em; line-height: 1; }
.zet.actief .notitieteken { color: var(--veld-nacht); }
.losse-notities { border-top: 1px solid var(--kader); padding-top: 0.6rem; }
.losse-notities h4 { margin: 0; font-size: 0.9rem; font-weight: 500; color: var(--zacht); }
.losse-notities p { margin: 0.2rem 0 0.4rem; }
.losse-notities ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.losse-notities .lostekst, .kantelnotitie { white-space: pre-wrap; overflow-wrap: anywhere; }
.losse-notities .knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.losse-notities button { min-height: 36px; border-radius: 8px; }

/* Tijd per zet (blok 2c). Tijdnood is altijd een klokje of het woord, nooit kleur alleen. */
#tijdkaart { display: flex; flex-direction: column; gap: 0.5rem; }
#tijdkaart .kaartkop { margin-bottom: 0; }
.tijdvelden { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tijdvelden label { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 8rem; font-size: 0.85rem; color: var(--zacht); }
.tijdvelden input, .tijd-tempo input {
  background: var(--achtergrond); border-radius: 8px; padding: 0.5rem 0.6rem; min-height: 40px;
  font-family: var(--veld-font-notatie); font-size: 0.95rem; min-width: 0;
}
.tijdvelden input::placeholder { color: var(--zacht); opacity: 0.8; }
/* Zoals ✎: position: relative houdt de schermlezertekst binnen het teken (gsm-strook). */
.tijdnoodteken { position: relative; display: inline-flex; align-items: center; color: var(--veld-fout); line-height: 1; }
.zet.actief .tijdnoodteken { color: var(--veld-nacht); }
.tijdnoodlabel {
  display: inline-flex; align-items: center; gap: 0.3rem; color: var(--veld-fout); font-size: 0.8rem;
  border: 1px solid var(--veld-fout); border-radius: 999px; padding: 0.1rem 0.5rem;
}
.zettijd { position: relative; margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--zacht); }
.zet.actief .zettijd { color: var(--veld-nacht); }
.tijd-twijfel { border-top: 1px solid var(--kader); padding-top: 0.5rem; }
.tijd-twijfel p { margin: 0 0 0.4rem; }
.tijd-twijfel .knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.tijd-twijfel button { min-height: 36px; border-radius: 8px; }
.tijd-tempo summary { cursor: pointer; color: var(--zacht); font-size: 0.85rem; padding: 0.2rem 0; }
.tijd-tempo label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.4rem 0 0.3rem; font-size: 0.85rem; color: var(--zacht); }
.tijd-tempo input { max-width: 10rem; }

.verloop .kaartkop h3 { font-size: 1.05rem; color: var(--tekst); }
.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8rem; color: var(--zacht); align-items: center; }
.legende .streep { display: inline-block; width: 2px; height: 12px; background: var(--veld-goud); vertical-align: middle; }
.grafiek { position: relative; height: 170px; border-radius: 8px; background: var(--veld-diep); cursor: pointer; }
.grafiek svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.grafiek .vlak { fill: var(--veld-licht); opacity: 0.88; }
.grafiek .nul { stroke: var(--zacht); stroke-width: 1; stroke-dasharray: 4 4; }
.grafiek .cursor { stroke: var(--veld-goud); stroke-width: 2; }
.grafiek .tijdnood { fill: url(#tijdnood-arcering); }
.grafiek .tijdnood-grond { fill: var(--veld-fout); opacity: 0.12; }
.grafiek .tijdnood-streep { stroke: var(--veld-fout); stroke-width: 3; opacity: 0.55; }
.legende .tijdnoodvak {
  display: inline-block; width: 14px; height: 10px; vertical-align: middle; border: 1px solid var(--veld-fout);
  background: repeating-linear-gradient(45deg, var(--veld-fout) 0 2px, transparent 2px 5px);
}
.tijdgrafiek { position: relative; height: 40px; margin-top: 0.4rem; cursor: pointer; }
.tijdgrafiek svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Wit en zwart verschillen in helderheid, niet alleen in tint. */
.tijdgrafiek .balk-wit { fill: var(--veld-licht); opacity: 0.85; }
.tijdgrafiek .balk-zwart { fill: var(--veld-tekst-zacht); opacity: 0.55; }
.grafiek .marker {
  position: absolute; transform: translate(-50%, -50%); min-width: 26px; min-height: 22px; padding: 0 3px;
  border: 2px solid var(--paneel); font-size: 0.7rem; cursor: pointer;
}
.grafieklabel {
  position: absolute; top: 8px; background: var(--veld-nacht); border: 1px solid var(--veld-goud); border-radius: 6px;
  padding: 2px 8px; font: 0.75rem var(--veld-font-notatie); white-space: nowrap; pointer-events: none;
}
.grafiek-as { position: relative; height: 1.2rem; margin-top: 0.3rem; font: 0.75rem var(--veld-font-notatie); color: var(--zacht); }
.grafiek-as span { position: absolute; transform: translateX(-50%); }

.samenvatting { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.speler .regel { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.speler .procent { font-size: 2rem; font-weight: 700; }
.speler .procent .hint { font-size: 1rem; }
.aantallen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.6rem; font-size: 0.9rem; }
.kantel.gevonden { border-color: var(--veld-goud); }
.kantel.gevonden h3 { color: var(--veld-goud); }
.kantel p { margin: 0.5rem 0; line-height: 1.5; }
button.link { background: none; border: 0; padding: 0; color: var(--veld-goud); text-decoration: underline; cursor: pointer; }

/* Gsm: kop met terugknop, balk boven het bord, kleine grafiek, de huidige zet, een strook
   met zetten, en onderaan altijd vorige / volgende / "Volgende fout". Zoals bij het
   ingeven: display: contents + order, dus geen aparte HTML voor de gsm. */
@media (max-width: 700px) {
  body.analyse-open > header { display: none; }
  main#analyse { padding: 0; gap: 0.75rem; max-width: none; }
  .analyseraster, .analysebord, .analysezijkant { display: contents; }

  .analysekop-smal {
    order: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem;
    background: var(--paneel); border-bottom: 1px solid var(--kader);
  }
  .analysekop-smal .ico {
    width: 44px; height: 44px; margin-left: -0.6rem; padding: 0; background: none; border: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .analysekop-smal .titels { display: flex; flex-direction: column; min-width: 0; }
  .analysekop-smal .titel { font-weight: 700; font-size: 1.05rem; }
  .analysekop-smal .hint { font-size: 0.75rem; }

  #analyse-status, #partij-voorstellen { order: 2; margin: 0 1rem; }
  .bord-met-balk { order: 3; flex-direction: column; gap: 0.5rem; padding: 0 1rem; }
  #analyse-bord { flex: none; width: 100%; max-width: none; }
  /* De balk ligt nu horizontaal boven het bord: wit links, zwart rechts. */
  .evalbalk { flex: 0 0 10px; border-radius: 5px; }
  .evalbalk .zwartdeel { left: auto; right: 0; top: 0; bottom: 0; height: auto; width: calc(100% - var(--wit, 50%)); }
  .evalbalk.zwart-onder .zwartdeel { left: 0; right: auto; }
  .evalbalk .getal { display: none; }

  .verloop { order: 4; margin: 0 1rem; padding: 0; background: none; border: 0; }
  .verloop .kaartkop, .grafiek-as, .grafiek .marker, .grafieklabel, .tijdgrafiek { display: none; }
  .grafiek { height: 64px; }

  .huidige-zet { order: 5; display: flex; flex-direction: column; gap: 0.3rem; margin: 0 1rem; padding: 0.75rem 0.9rem; }
  .huidige-zet .regel { display: flex; align-items: center; gap: 0.5rem; }
  .huidige-zet #huidig-label { font-size: 1rem; }
  .huidige-zet #huidig-badge { display: inline-flex; gap: 0.3rem; }
  .huidige-zet #huidig-eval { margin-left: auto; }
  .huidige-zet .label-beste { margin-left: 0; }
  #huidig-beste { font-size: 0.85rem; line-height: 2.2; }  /* de hele lijn: elke zet is aan te tikken */
  #huidig-tijd { font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

  .zettenstrook {
    order: 7; display: flex; gap: 6px; overflow-x: auto; padding: 0 1rem 2px;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .zettenstrook::-webkit-scrollbar { display: none; }
  .zettenstrook .zet { flex: 0 0 auto; background: var(--paneel); white-space: nowrap; min-height: 44px; min-width: 44px; justify-content: center; padding: 0.5rem 0.7rem; border-radius: 8px; }

  /* De notitie vlak onder de huidige zet: wat je dacht, naast wat de engine vindt. */
  #notitiekaart { order: 6; margin: 0 1rem; }
  /* De tijd onder de strook: zet kiezen in de strook, dan de klok van het formulier overnemen. */
  #tijdkaart { order: 8; margin: 0 1rem; }
  #lijnenkaart { order: 9; margin: 0 1rem; }
  #zettenkaart { display: none; }  /* de strook neemt het over */
  .samenvatting { order: 10; margin: 0 1rem; grid-template-columns: 1fr; }
  .analysekop { order: 11; margin: 0 1rem; }
  .analysekop .titels { display: none; }  /* staat al in de kop bovenaan */
  .analysekop .knoppen button { flex: 1 1 40%; }
  /* Op de gsm geen menu: de knoppen staan toch al onderaan. */
  .analysemenu { flex-wrap: wrap; width: 100%; }
  #analyse-menu { display: none; }
  #analyse-knoppen {
    display: flex; position: static; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  #analyse-knoppen button { text-align: center; }

  /* Altijd onder in beeld, met de duim bereikbaar; "Volgende fout" is dubbel zo breed. */
  .analysenavigatie {
    order: 12; position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--achtergrond); border-top: 1px solid var(--kader); margin-top: 0;
  }
  .analysenavigatie .breed-alleen { display: none; }
  .analysenavigatie button { min-height: 48px; }
  .analysenavigatie .volgende-fout { grid-column: span 2; background: var(--accent); border-color: var(--accent); font-size: 1rem; }
  #a-partij { grid-column: span 2; }
  #a-partij:not([hidden]) ~ .volgende-fout { display: none; }  /* in een lijn: ◀ ▶ Partij */
}

/* ------------------------------------------------------------ aanmelden, account, beheer (toegang.html, blok 3h) */

.toegang { display: block; max-width: 720px; margin: 0 auto; }
.toegang.tekst { line-height: 1.5; }
.toegang .kaart { background: var(--paneel); border: 1px solid var(--kader); border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.toegang .tabelkaart { overflow-x: auto; }
.toegang .kaart.gevaar { border-color: var(--fout); }
.toegang label.blok { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; margin-bottom: 0.6rem; }
.toegang input { font-size: 1rem; padding: 0.4rem; max-width: 100%; }
.toegang .rij { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.toegang .hoofdknop { background: var(--accent); border-color: var(--accent); }
.toegang .gevaarknop { border-color: var(--fout); color: var(--fout); }
.toegang .knop { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid var(--kader); border-radius: 4px; color: var(--tekst); text-decoration: none; }
.toegang .melding { font-weight: 600; }
.toegang .melding.fout { color: var(--fout); }
.toegang .melding.goed { color: var(--goed); }
.toegang .notatie { font-family: var(--veld-font-notatie); word-break: break-all; }
.toegang table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.toegang th, .toegang td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--kader); }
.toegang .acties { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.voet { padding: 1rem; text-align: center; font-size: 0.85rem; }
header .account { margin-left: auto; color: var(--zacht); text-decoration: none; }
header .account + .account { margin-left: 0; }
.toegang .meldtekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.toegang details summary { cursor: pointer; }
.toegang .filterknoppen { flex-wrap: wrap; }

/* ------------------------------------------------------------ fouten als oefeningen (blok 2d, oefenen.js) */

/* Witte tekst op bordgroen (#FFFFFF: #F4F4F5 haalt maar 4.3:1). */
.hoofd, .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.telbadge {
  font: 700 0.75rem/1.3 var(--veld-font); color: var(--veld-nacht); background: var(--veld-goud);
  border-radius: 999px; padding: 0 0.45rem; margin-left: 0.2rem;
}
.actief .telbadge { background: var(--veld-nacht); color: var(--veld-goud); }
.oefenknop { align-self: flex-start; min-height: 44px; border-radius: 8px; }
main#oefenen { display: block; max-width: 1376px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
.oefenblok { display: flex; flex-direction: column; gap: 1.25rem; }
.oefenkop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.oefenkop h2 { margin: 0 0 0.4rem; font-size: 1.9rem; }
.oefenkop .hint { margin: 0; }
.voortgang { display: flex; align-items: center; gap: 0.75rem; }
.voortgang progress { width: 220px; accent-color: var(--veld-bordgroen); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chip { border-radius: 999px; min-height: 36px; padding: 0 0.9rem; font-size: 0.85rem; }
.chip.label { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--kader); }
.oefenraster { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.oefenbord { flex: 0 1 576px; min-width: 0; }
#oefen-bord { width: 100%; aspect-ratio: 1; }
.oefenzijkant { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.oefentitel { font-size: 1.5rem; margin: 0.2rem 0; }
.oefenzijkant p { margin: 0.6rem 0; line-height: 1.5; }
.vak { padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--achtergrond); border: 1px solid var(--kader); white-space: pre-wrap; }
.oefenzijkant .knoppen button, .rij button, .beoordeling button, #naar-oefenen { min-height: 44px; border-radius: 8px; }
.beoordeling { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.beoordeling button { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-height: 64px; }
.beoordeling span { font-size: 0.75rem; }
.rij { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
#oefen-volgende, #venster-eerste { margin-right: auto; }
#oefen-ingepland #oefen-volgende { margin: 0 0 0 auto; }
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.cijfer { display: flex; flex-direction: column; gap: 0.2rem; }
.cijfer strong { font-size: 2rem; }
.ladder { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.trede { display: flex; flex-direction: column; min-width: 120px; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px solid var(--kader); }
.trede.eerste { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pertype { flex: 1 1 380px; min-width: 0; }
.type { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 3rem; gap: 0.75rem; align-items: center; min-height: 28px; }
.type .balk { height: 10px; border-radius: 5px; background: var(--achtergrond); overflow: hidden; }
.type .balk div { height: 100%; background: var(--veld-licht); }
.type .mono { text-align: right; }
.oefenlijst { flex: 999 1 640px; min-width: 0; overflow-x: auto; }
.oefenlijst table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.9rem; }
.oefenlijst th, .oefenlijst td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--kader); }
.oefenlijst th { font-weight: 500; color: var(--zacht); }
#oefen-venster {
  width: min(640px, calc(100% - 2rem)); background: var(--paneel); color: var(--tekst);
  border: 1px solid var(--kader); border-radius: 14px; padding: 1.5rem;
}
#oefen-venster::backdrop { background: rgb(9 9 11 / 0.85); }
#venster-formulier { display: flex; flex-direction: column; gap: 0.9rem; }
#venster-formulier h2, #venster-formulier p { margin: 0; }
#venster-doel { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
#venster-doel legend { color: var(--zacht); margin-bottom: 0.5rem; }
#venster-doel label { padding: 0.6rem 0.75rem; border: 1px solid var(--kader); border-radius: 8px; cursor: pointer; }
#venster-doel label:has(:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
#venster-doel input { accent-color: var(--accent); }
#venster-labels { margin: 0.5rem 0; }
#venster-eigen { flex: 1 1 10rem; min-height: 36px; padding: 0 0.6rem; }
.gevaar { border-color: var(--fout); color: var(--fout); }

/* Gsm: het bord bovenaan, de knoppen eronder (zoals het ontwerp "Oefenen op je gsm"). */
@media (max-width: 700px) {
  main#oefenen { padding: 0.75rem; }
  .oefenkop h2 { font-size: 1.4rem; }
  .cijfers { grid-template-columns: 1fr 1fr; }
  .voortgang progress { width: 120px; }
  .oefenbord, .oefenzijkant, .pertype, .oefenlijst { flex: 1 1 100%; }
  .type { grid-template-columns: 7rem minmax(0, 1fr) 2.5rem; }
}

/* Delen (blok 3b): het venster "Deel" en "gedeeld door" in de lijsten. */
#deelvenster, #aanvulvenster { color: var(--tekst); max-width: min(26rem, calc(100vw - 2rem)); }
#deelvenster::backdrop, #aanvulvenster::backdrop { background: rgb(0 0 0 / 0.6); }
#deelvenster label, #aanvulvenster label { display: block; margin: 0.4rem 0; }
/* Blok 3f: voorstellen bij een partij (aanvullen.js). */
.voorstellen { margin-bottom: 1rem; }
.voorstellen p { margin: 0.3rem 0; }
#deelvenster li button { padding: 0.1rem 0.5rem; font-size: 0.85rem; }
.gedeeld-door { color: var(--zacht); font-size: 0.85rem; }

/* ------------------------------------------------------------ de voorbereidingsfiche (blok 3d, fiche.js) */
main#tegenstanders, main#trends, main#lijst, main#tornooien { display: block; max-width: 1376px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
#fiche-zoek { width: min(22rem, 100%); min-height: 44px; padding: 0 0.75rem; }
.fiche-gevonden { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fiche-gevonden button { min-height: 44px; border-radius: 8px; }
.fiche { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
.fiche .kort { border-color: var(--accent); }
.fiche .kort ul { margin: 0.5rem 0 0; padding-left: 1.2rem; line-height: 1.5; }
.fiche-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.25rem; }
.fiche-opening { padding: 0.6rem 0; border-top: 1px solid var(--kader); display: flex; flex-direction: column; gap: 0.25rem; }
.wrv { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--achtergrond); max-width: 220px; }
.wrv .winst { background: var(--veld-licht); }
.wrv .remise { background: var(--zacht); }
.wrv .verlies { background: #52525B; }
.fiche-score strong { font-size: 2rem; }
.fiche-regels { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; margin-top: 0.6rem; }
.fiche .oefenlijst, .trends .oefenlijst { flex: none; }
.trends { display: flex; flex-direction: column; gap: 1.25rem; }  /* blok 4a, trends.js: de stijl van de fiche */
.trends td .mono { white-space: nowrap; }
#repertoire-zetten { flex: 1 1 16rem; }
.fiche-raster.vier { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
#fiche-partijen .mono { white-space: nowrap; }
.alleen-print { display: none; }

/* Gsm: de kaarten onder elkaar (het raster doet dat al), minder rand. */
@media (max-width: 700px) {
  main#tegenstanders, main#trends, main#lijst, main#tornooien { padding: 0.75rem; }
}

/* ------------------------------------------------------------ afdrukken voor het clubblad (blok 5c, afdrukken.js) */
/* Ook op het scherm een wit blad: zo zie je wat er op papier komt. Zwarte tekst op wit, een groene lijn bovenaan. */
main#afdrukken { display: block; max-width: 1376px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
.drukbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.drukbalk button, .drukbalk input[type=number] { min-height: 44px; border-radius: 8px; }
.drukbalk input[type=number] { width: 4.5rem; }
.drukblad { background: #FFFFFF; color: #18181B; max-width: 210mm; padding: 12mm; margin-top: 1rem; line-height: 1.6; }
.drukkop { display: flex; gap: 0.8rem; align-items: center; border-bottom: 2px solid var(--veld-bordgroen); padding-bottom: 0.5rem; }
.drukkop img { width: 40px; height: 40px; }
.drukkop h2 { margin: 0; white-space: pre-wrap; }
.drukkop p { margin: 0; color: #52525B; }
.drukzet { background: none; border: 0; border-radius: 3px; padding: 0 0.1rem; color: inherit; font: inherit;
  font-family: var(--veld-font-notatie); font-weight: 600; }
.drukzet.huidig { background: var(--veld-goud); }
.drukcommentaar { font-style: italic; }
.drukvariant { font-family: var(--veld-font-notatie); color: #3F3F46; }
.drukdiagram { margin: 0.5rem 0; width: min(70mm, 100%); break-inside: avoid; }
.drukdiagram img { display: block; width: 100%; }
.drukdiagram figcaption { font-size: 0.9em; color: #52525B; }
.drukdiagram .knoppen { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.drukdiagram .knoppen a, .drukdiagram .knoppen button { min-height: 44px; min-width: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px; }
.drukdiagram .knoppen a { color: #18181B; }
@media (max-width: 700px) {
  main#afdrukken { padding: 0.75rem; }
  .drukblad { padding: 1rem; }
}

/* Afdrukken (ontwerp "Fiche afgedrukt (A4)"): zwart op wit, zonder menu en filters, alles kleiner, de langste lijsten
   ingekort zodat de fiche op één blad past. */
@media print {
  @page { size: A4; margin: 10mm; }
  body, .kaart { background: #FFFFFF !important; color: #18181B !important; }
  header, footer, .geen-print, main:not(#tegenstanders):not(#afdrukken) { display: none !important; }
  main#afdrukken { padding: 0; max-width: none; }
  .drukblad { padding: 0; max-width: none; margin: 0; }
  .drukzet.huidig { background: none; }
  main#tegenstanders { padding: 0; max-width: none; }
  .fiche { gap: 0.35rem; margin: 0; font-size: 8.5pt; line-height: 1.3; }
  .fiche h2 { font-size: 16pt; margin: 0; }
  .fiche p { margin: 0.15rem 0; }
  .fiche .hint, .fiche .mono { font-size: 0.95em; }
  .kaart { border: 1px solid #A1A1AA; border-radius: 6px; padding: 0.3rem 0.5rem; break-inside: avoid; }
  .kaart h3 { font-size: 9pt; }
  .kaart h3, .hint { color: #52525B !important; }
  .fiche .kort ul { margin-top: 0.15rem; }
  .fiche-raster { grid-template-columns: 1fr 1fr; gap: 0.35rem; }
  .fiche-raster.drie { grid-template-columns: 1fr 1fr 1fr; }
  .fiche-opening { padding: 0.2rem 0; gap: 0.05rem; }
  .fiche-opening:nth-child(n + 5) { display: none; }
  .wrv { height: 6px; border: 1px solid #18181B; }
  .wrv .winst { background: #FFFFFF; }
  .wrv .remise { background: #A1A1AA; }
  .wrv .verlies { background: #18181B; }
  .type { min-height: 0; grid-template-columns: 6rem minmax(0, 1fr) 2rem; }
  .type .balk { height: 6px; border: 1px solid #18181B; background: #FFFFFF; }
  .type .balk div { background: #52525B; }
  .fiche-score strong { font-size: 1.3rem; }
  .fiche-regels { gap: 0 1rem; margin-top: 0.2rem; }
  .oefenlijst table { margin-top: 0.2rem; font-size: 8.5pt; }
  .oefenlijst th, .oefenlijst td { padding: 0.1rem 0.3rem; border-color: #D4D4D8; }
  #fiche-partijen tr:nth-child(n + 7) { display: none; }
  .alleen-print { display: block; }
  .plan { min-height: 30mm; }
  a { color: inherit; text-decoration: none; }
}