/* Kiteweer — warm, redactioneel, licht. Kleur betekent iets of hij staat er niet. */

:root{
  --papier:#FBF8F4;
  --kaart:#FFFFFF;
  --inkt:#17130F;
  --zacht:#6B6157;
  --flauw:#7A7167;
  --lijn:#E7DFD5;
  --lijn-2:#F1EBE3;

  /* vijf niveaus, één kleur per niveau */
  --perfect:#0E7A54;
  --goed:#3E9B6E;
  --matig:#C08315;
  --weinig:#A9A096;
  --aflandig:#CE4A1F;

  --perfect-v:#E3F3EC;
  --goed-v:#EAF5EF;
  --matig-v:#FBF0DA;
  --weinig-v:#F2EEE9;
  --aflandig-v:#FBE7DF;

  /* Dezelfde vijf oordelen, maar donker genoeg om LETTER te zijn. De kleuren hierboven zijn
     gekozen als vlak; als tekst op hun eigen lichte vlak haalden "goed" (3,07), "weinig" (2,22)
     en "hard" met wit erop (3,23) de norm van 4,5 niet. Vlakken houden de kleur hierboven,
     letters pakken deze. */
  --perfect-t:#0E7A54;
  --goed-t:#2C744F;
  --matig-t:#8A5D0D;
  --weinig-t:#6B6157;
  --aflandig-t:#B0491C;

  --r:16px; --r-s:10px; --r-pil:999px;
  --kop:"Bricolage Grotesque",Georgia,serif;
  --tekst:"Albert Sans",system-ui,-apple-system,sans-serif;
  --t:170ms cubic-bezier(.2,.8,.3,1);
  --schaduw:0 1px 2px rgba(23,19,15,.05), 0 8px 24px -12px rgba(23,19,15,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-weight:500;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--kop);font-weight:800;letter-spacing:-.025em;margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--inkt)}
:focus-visible{outline:2.5px solid var(--inkt);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:900px;margin:0 auto;padding:0 20px}
main{padding-bottom:64px}

/* ── kop ─────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 14px;
  border-bottom:1px solid var(--lijn)}
.merk{display:flex;align-items:center;gap:9px;margin-right:auto}
.merk h1{font-size:20px;letter-spacing:-.03em}
.mark{width:22px;height:22px;border-radius:50%;flex:none;border:2.5px solid var(--inkt);
  position:relative}
.mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--inkt)}

.seg{display:inline-flex;border:1px solid var(--lijn);border-radius:var(--r-pil);
  padding:3px;gap:2px;background:var(--kaart)}
.seg button{padding:7px 15px;border-radius:var(--r-pil);font-weight:700;font-size:14px;
  color:var(--zacht);transition:background var(--t),color var(--t);white-space:nowrap}
.seg button:hover{color:var(--inkt)}
/* Elke aanraakbare knop reageert op dezelfde manier: ingedrukt iets kleiner, en een zichtbare
   rand voor wie met het toetsenbord werkt. Nooit een hover die de hoogte verandert, dan springt
   de rij onder je cursor weg. */
.seg button:active,.invoer:active,.dagkaart:active,.wm:active,.uurtabel th .info:active{transform:scale(.98)}
:where(button,a,input,summary):focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.seg button.on{background:var(--inkt);color:var(--papier)}

/* ── nu gemeten ──────────────────────────────────── */
.nu{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--lijn-2)}
.nu-kop{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.nu-dot{width:8px;height:8px;border-radius:50%;background:var(--perfect);
  animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(14,122,84,0)}100%{box-shadow:0 0 0 0 rgba(14,122,84,0)}}
.nu-kop b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.nu-kop span{font-size:12.5px;color:var(--zacht);margin-left:auto}
.stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 18px}
.stn{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dotted var(--lijn-2)}
.stn:last-child{border-bottom:0}
.stn .snaam{font-size:13.5px;color:var(--zacht);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stn .swind{font-family:var(--kop);font-size:17px}
.stn .sdir{font-size:12px;color:var(--zacht);display:inline-flex;align-items:center;gap:3px}
.stn.hoofd .swind{color:var(--perfect)}

/* ── hero ────────────────────────────────────────── */
.hero{margin:16px 0 0;padding:26px;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--r);box-shadow:var(--schaduw);border-left:5px solid var(--tint,var(--lijn))}
.kicker{margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tint,var(--zacht))}
.verdict{font-size:clamp(30px,6vw,46px);line-height:1.02;margin-bottom:4px}
.onder-verdict{color:var(--zacht);font-size:15px}
.groot-rij{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.meet{min-width:0}
.meet .mv{font-family:var(--kop);font-size:34px;line-height:1;white-space:nowrap}
.meet .ml{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--zacht);margin-top:5px}
.meet .mv em{font-style:normal;font-size:17px;color:var(--zacht)}
.cta-rij{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.cta{display:inline-flex;align-items:center;gap:7px;background:var(--inkt);color:var(--papier);
  padding:12px 20px;border-radius:var(--r-pil);font-weight:700;font-size:14.5px;
  text-decoration:none;transition:opacity var(--t)}
.cta:hover{opacity:.86}
.cta.ghost{background:transparent;border:1px solid var(--lijn);color:var(--inkt)}
.cta.ghost:hover{background:var(--lijn-2);opacity:1}

/* ── secties ─────────────────────────────────────── */
.sec{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);
  margin:34px 0 12px;font-family:var(--tekst);font-weight:700}
/* De eerste sectie zit vlak onder de kiezers: daar was 34px lucht te veel (ijkrijder, 12-09). */
main.wrap>section:first-of-type>.sec{margin-top:18px}
/* Geen opacity meer maar de vaste kleur --flauw: doorzichtige tekst op papier kwam uit op een
   contrast van 4,09 terwijl de norm 4,5 is, en bij 12,5 px leest dat op het strand niet. */
.sec i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;color:var(--flauw)}

/* ── kit ─────────────────────────────────────────── */
.kit{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:18px}
.kitrij{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;
  padding-bottom:16px;border-bottom:1px solid var(--lijn-2);margin-bottom:16px}
.veld{display:flex;flex-direction:column;gap:7px}
.veld>span:first-child,.veld>label{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zacht)}
.invoer{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--lijn);
  border-radius:var(--r-pil);padding:7px 14px;background:var(--papier)}
.invoer input{width:46px;background:none;border:0;color:var(--inkt);font:700 16px var(--tekst)}
.invoer b{font-size:13px;color:var(--zacht);font-weight:700}
.kites{display:flex;gap:8px;flex-wrap:wrap}
.kitepil{border:1px solid var(--lijn);border-radius:var(--r-pil);padding:7px 14px;
  font-weight:700;font-size:14px;background:var(--papier);transition:all var(--t)}
.kitepil.aan{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.advies{display:flex;gap:12px;flex-wrap:wrap}
.kadvies{flex:1;min-width:140px;border:1px solid var(--lijn);border-radius:var(--r-s);
  padding:13px 15px;background:var(--tint-v);border-left:4px solid var(--tint)}
.kadvies b{font-family:var(--kop);font-size:24px;display:block}
.kadvies span{font-size:12.5px;color:var(--zacht);display:block;margin-top:2px}
.kadvies .kwan{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tint-t,var(--tint));margin-bottom:5px;display:block}

/* ── detail ──────────────────────────────────────── */
.sheet{position:fixed;inset:0;background:rgba(23,19,15,.42);display:flex;
  align-items:flex-end;justify-content:center;z-index:5000;padding:14px}
.sheet[hidden]{display:none}
.sheet-in{background:var(--kaart);border-radius:var(--r);padding:24px;max-width:420px;
  width:100%;position:relative;box-shadow:0 20px 60px -20px rgba(23,19,15,.4)}
.sheet h3{font-size:21px;margin-bottom:14px;padding-right:30px}
.sheet .x{position:absolute;right:14px;top:11px;font-size:26px;line-height:1;color:var(--zacht)}
.rij{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--lijn-2);font-size:14.5px}
.rij:last-child{border-bottom:0}
.rij span:first-child{color:var(--zacht)}
.rij span:last-child{font-weight:700;text-align:right}
/* Bovenaan vastgezet, ook op een breed scherm. Gecentreerd sprong het paneel omhoog zodra de inhoud groeide
   (een veld dat opengaat, voorstellen die verschijnen): gemeten 18-09, 26 px per keer. */
@media(min-width:600px){.sheet{align-items:flex-start;padding-top:9vh}}

/* Eén regel bovenin: hoe vers de twee dingen zijn waar de pagina op draait, de modellen en de
   meetpaal. Stroming en golven staan er bewust niet bij: die veranderen niet per bezoek. */
/* De tekst mag over twee regels lopen ("modellen van 3 uur geleden" past niet op een telefoon), maar de i-knop
   blijft rechts op zijn plek. Met flex-wrap viel hij los op een eigen regel eronder (ijkrijder, 18-09). */
.vers{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:var(--flauw);
  letter-spacing:.02em}
.vers #verstekst{min-width:0;flex:0 1 auto;line-height:1.5}
@media(max-width:600px){.vers{font-size:10.5px;letter-spacing:.01em}}
.vers b{color:var(--zacht);font-weight:700}
.vers .verspunt{color:var(--goed)}
.vers .verspunt.oud{color:var(--matig)}
.vers .info{font-style:normal;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--lijn);color:var(--flauw);display:inline-flex;align-items:center;justify-content:center;flex:none}
.vers .info:hover{border-color:var(--zacht);color:var(--zacht)}

/* Een zin die zegt wat dit is. Een vreemde die op "hoeveel wind kitesurfen" binnenkomt
   zag alleen cijfers en het woord Kiteweer, en wist niet waar hij was. */
.pitch{grid-column:1/-1;margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--zacht);max-width:52ch}
.pitch b{color:var(--inkt);font-weight:700}
@media(max-width:600px){.pitch{font-size:12.5px}}

.kicker-rider{color:var(--flauw);font-weight:500;text-transform:none;letter-spacing:.01em}
.kicker-rider b{color:var(--zacht);font-weight:700}
.kicker-zet{color:var(--perfect);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.rider.wijst{outline:2px solid var(--perfect);outline-offset:6px;border-radius:10px;
  transition:outline-color .3s}

/* ── de voet: vijf regels om te scannen, geen alinea's ── */
.voetlijst{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-width:62ch}
.voetlijst li{font-size:13.5px;line-height:1.45;color:var(--zacht)}
.voetlijst li b{color:var(--inkt)}

.voet{border-top:1px solid var(--lijn);padding:20px 0 40px;font-size:13px;color:var(--zacht)}
.voet p{margin:0 0 8px;max-width:70ch;line-height:1.5}
.voet .dank{font-size:14px;color:var(--inkt)}
.voet .disclaimer{color:var(--inkt)}
.uurtabel .tkite{font-weight:800;color:var(--tint-t,var(--tint));background:var(--tint-v);border-radius:4px;padding:5px 0}
.uurtabel .tkite b{font-size:15px;display:block}
.uurtabel .tkite small{display:block;font-size:10.5px;font-weight:700;color:var(--zacht)}
/* Absoluut tegen de rechterrand van de kop, niet achter de tekst aan: anders staat elke knop op
   een andere plek zodra het woord ervoor een letter langer is. */
.uurtabel th .info{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;background:none;cursor:pointer}
.uurtabel th .info:hover{border-color:var(--inkt);color:var(--inkt);background:var(--lijn-2)}
/* Rijkop met uitleg: tekst links, knop tegen de rechterrand. Alle knoppen staan zo onder elkaar. */
.uurtabel th .rk{display:block;padding-right:23px}
/* Kans per windsterkte in het uitlegvenster: drie kaartjes, één beslissing per kaartje. */
.drempels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
/* Te veel wind is geen kans om te gaan, dus geen kaartje: een regel eronder, en hij kleurt pas
   op zodra er echt kans op storm is. */
.tehard{font-size:12.5px;color:var(--zacht);margin:0 0 14px;line-height:1.45}
.tehard b{color:var(--inkt)}
.tehard.op{background:var(--matig-v);color:var(--inkt);border-radius:var(--r-s,8px);padding:8px 10px}
.tehard.op b{color:var(--matig)}
.dr{background:var(--tint-v);border-radius:var(--r-s,8px);padding:10px 8px;text-align:center}
.dr b{display:block;font-family:var(--kop);font-size:24px;line-height:1.05;color:var(--tint-t,var(--tint))}
.dr span{display:block;font-size:12px;font-weight:700;margin-top:2px}
.dr small{display:block;font-size:11px;color:var(--zacht);margin-top:1px}
.uitleg-dr{font-size:12.5px;color:var(--zacht);margin:0 0 14px}
.voet a{color:var(--zacht);text-decoration:underline;text-underline-offset:3px}
.voet .dot{margin:0 8px;opacity:.5}

@media(max-width:600px){
  /* Safari zoomt de pagina in bij een invoerveld onder 16px en zoomt niet terug: alle velden minimaal 16px */
  input{font-size:16px}
  .invoer input{font-size:16px}
  html,body{overflow-x:hidden}
  .voet{padding:20px 24px 40px}
  .groot-rij{gap:18px}
  .meet .mv{font-size:27px}
  .blok{min-width:42px}
}


/* ── week in één blik ────────────────────────────── */
.weekstrip{display:flex;flex-wrap:wrap;gap:8px}
.weekstrip .dagkaart{flex:1 1 112px}
.dagkaart{display:block;background:var(--tint-v);border:1px solid var(--lijn);border-radius:var(--r-s);
  padding:12px 12px 10px;text-decoration:none;border-top:4px solid var(--tint);transition:transform var(--t)}
.dagkaart:hover{transform:translateY(-2px)}
.dagkaart .dk{display:block;font-size:12px;font-weight:700;color:var(--zacht)}
.dagkaart .dv{display:block;font-family:var(--kop);font-size:22px;margin:4px 0 2px;color:var(--tint-t,var(--tint));white-space:nowrap}
.dagkaart .dv em{font-style:normal;font-size:12px;color:var(--zacht)}
.dagkaart .dn{display:block;font-size:12px;font-weight:700;color:var(--tint-t,var(--tint));line-height:1.3}
.ind{display:block;font-size:10.5px;color:var(--flauw);margin-top:5px}
.kans-ens{color:var(--zacht);font-weight:700;margin-top:2px}

/* ── uur voor uur, per dag een tabel ──────────────── */
.dagen{display:flex;flex-direction:column;gap:14px}
.dag{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.dagkop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px 8px;border-left:5px solid var(--tint)}
.dagkop b{font-family:var(--kop);font-size:18px}
.dagkop .dagv{font-size:13px;font-weight:700;color:var(--tint-t,var(--tint))}
.dagkop .ind{margin:0;width:100%}
.scroll{overflow-x:auto;padding:0 10px 10px}
.uurtabel{border-collapse:separate;border-spacing:3px 0;width:100%;min-width:640px;table-layout:fixed}
.uurtabel th{font-size:11px;font-weight:700;color:var(--zacht);text-align:left;white-space:normal;width:88px;line-height:1.2;padding-right:6px;position:relative}
/* Elke rij dezelfde hoogte, inhoud verticaal gecentreerd: anders is de windrij twee keer zo hoog
   als de golvenrij en loopt de tabel ongelijk. */
.uurtabel td,.uurtabel th{height:56px;vertical-align:middle}
.uurtabel td{text-align:center;padding:2px 0;font-size:13.5px;position:relative}
.uurtabel td.aan{background:var(--lijn-2)}
/* Het uur waar de klok nu in staat. Gekozen = inkt gevuld, nu = een dunne inktring met een
   lichte was erachter: allebei zichtbaar, en je verwart ze niet met elkaar. */
.uurtabel td.nuur::before{content:"";position:absolute;inset:0 -1px;
  border-left:1px solid var(--inkt);border-right:1px solid var(--inkt);pointer-events:none}
.uurtabel tr:first-child td.nuur::before{border-top:1px solid var(--inkt);border-radius:7px 7px 0 0}
.uurtabel tr:last-child td.nuur::before{border-bottom:1px solid var(--inkt);border-radius:0 0 7px 7px}
.uurtabel .tu.nuur button{color:var(--inkt);padding:4px 0}
.uurtabel .tu.nuur button small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;line-height:1;margin-top:2px;color:var(--zacht);text-transform:uppercase}
.uurtabel .tu.nuur.aan button small{color:var(--papier);opacity:.75}

/* Wat het meetstation echt mat, met eronder hoeveel dat van het model afwijkt. Kleur alleen als
   het verschil ertoe doet: onder 1,5 kn is het model gewoon raak. */
.uurtabel .tmeet{padding:5px 0}
.uurtabel .tmeet b{display:block;font-family:var(--kop);font-size:15px;line-height:1}
.uurtabel .tmeet small{display:block;font-size:10.5px;font-weight:700;color:var(--zacht)}
.uurtabel th small{font-weight:600;font-size:10px;color:var(--zacht);line-height:1.15;display:block;margin-top:1px;padding-right:23px;white-space:nowrap}
.uurtabel .tmeet small.meer{color:var(--perfect)}
.uurtabel .tmeet small.minder{color:var(--matig-t)}
.uurtabel .tmeet small.raak{color:var(--zacht)}
/* Twee feiten die niet op een sessiekaartje passen: liep het vandaag hoger of lager dan het model
   zei, en wanneer draait de stroom. Stonden als twee alinea's; nu twee regels om te scannen. */
.feiten{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.feiten li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.35}
.feiten .info{margin-left:auto;align-self:center;font-style:normal;font-size:10px;font-weight:700;
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--lijn);color:var(--flauw);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.feiten .info:hover{border-color:var(--zacht);color:var(--zacht)}
.feiten .fp{flex:none;font-weight:800;font-size:12.5px;padding:2px 8px;border-radius:var(--r-pil);
  background:var(--tint-v);color:var(--tint-t,var(--tint));white-space:nowrap}
.feiten .fx{min-width:0}
.feiten .fx b{font-weight:700}
.uurtabel .tu button{font-weight:700;font-size:13px;color:var(--zacht);padding:6px 0;width:100%;border-radius:6px}
.uurtabel .tu button:hover{background:var(--lijn-2);color:var(--inkt)}

/* De i-rondjes zijn 15 tot 20 px, en een vinger mikt op 24. Het rondje blijft even groot; alleen
   het gebied dat op een tik reageert groeit eromheen, zodat de indeling niets merkt. */
.vers .info, .feiten .info, .venster .info, .mkop .info, .sec .info{position:relative}
.vers .info::after, .uurtabel th .info::after, .feiten .info::after, .venster .info::after,
.mkop .info::after, .sec .info::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%}
.uurtabel .tu.aan button{background:var(--inkt);color:var(--papier)}
.uurtabel .tw{height:64px;vertical-align:bottom;padding-bottom:0}
.uurtabel .tw b{display:block;font-family:var(--kop);font-size:15px;line-height:1;margin-bottom:3px}
.uurtabel .tw .staaf{display:block;width:100%;border-radius:3px 3px 0 0;min-height:3px}
.uurtabel .tw small{display:block;font-size:10.5px;color:var(--flauw);line-height:1.1;white-space:nowrap}
.uurtabel .tw small.onzeker{color:var(--matig-t)}
/* Het plusje staat dicht onder de piek. De kleur komt uit app.js en loopt van grijs via oker naar
   rood, zodat je ziet aankomen dat het vlagerig wordt in plaats van dat het ineens omslaat. */
.uurtabel .tv small{display:block;font-size:10.5px;color:var(--flauw);font-weight:600;margin-top:1px;white-space:nowrap}
/* De vlaagkleur komt nu uit app.js en loopt van grijs via oker naar rood, want een schakelaar
   liet je niet zien dat het erger werd. Hier staat alleen nog de rustige stand. */
.uurtabel .tv small{transition:color var(--t)}
.uurtabel .tv .vp{display:inline-block;min-width:34px;background:var(--tint-v);color:var(--tint-t,var(--tint));font-weight:700;padding:5px 8px;border-radius:6px}
.uurtabel .wijzer{width:16px;height:16px}

.wijzer{width:14px;height:14px;flex:none;vertical-align:middle}
.wijzer path{fill:currentColor}
.oordeel li b{display:inline;font-size:inherit;margin:0;color:var(--inkt)}

/* ── het strand, echte luchtfoto, noorden boven ──── */
.scenekaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.scene{position:relative;aspect-ratio:900/480;background:#7A8A96}
#kaart{position:absolute;inset:0}
#pijlen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:500}
.scene-label{position:absolute;left:14px;top:14px;z-index:600;background:rgba(251,248,244,.94);border-radius:var(--r-s);
  padding:10px 14px;display:flex;flex-direction:column;line-height:1.3}
.scene-label b{font-family:var(--kop);font-size:28px}
.scene-label span{font-size:12.5px;color:var(--zacht);font-weight:700}
.leaflet-container{font-family:var(--tekst)}
.leaflet-control-attribution{font-size:9px;opacity:.7}
.scene-uitleg{padding:16px 18px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.oordeel{display:flex;gap:11px;align-items:flex-start}
.oordeel .bol{width:11px;height:11px;border-radius:50%;background:var(--tint);margin-top:5px;flex:none}
.oordeel b{display:block;font-size:14.5px}
.oordeel span{display:block;font-size:13px;color:var(--zacht);line-height:1.45}

@media(max-width:600px){.scene-label b{font-size:22px}}

.dagkaart{text-align:left;width:100%;cursor:pointer;border:1.5px solid var(--lijn);border-top:4px solid var(--tint)}
.dagkaart.aan{border-color:var(--inkt);box-shadow:0 0 0 1px var(--inkt)}
.uurtabel .ts small,.uurtabel .tx small{display:block;font-size:11px;color:var(--zacht);font-weight:700}
.uurtabel .ts{padding-top:6px}
.uurtabel .tx span{font-size:16px;line-height:1.1;display:block}
.schuifrij{display:flex;align-items:center;gap:12px;padding:12px 18px 10px;border-top:1px solid var(--lijn-2)}
.schuifuur{font-family:var(--kop);font-size:18px;min-width:52px}
.schuifkolom{flex:1;min-width:0}
.schuiflabels{display:flex;gap:2px;height:6px;margin:0 8px 4px}
.schuiflabels i{flex:1;border-radius:2px}
/* De schuif was een kale systeembalk: je zag niet dat je hem kon pakken. Nu een dikke greep in de
   huisstijl, met een hint eronder en een knop die de dag zelf afspeelt. */
#schuif{width:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;height:24px;cursor:grab}
#schuif:active{cursor:grabbing}
#schuif::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--lijn)}
#schuif::-moz-range-track{height:6px;border-radius:999px;background:var(--lijn)}
#schuif::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--inkt);border:3px solid var(--kaart);box-shadow:0 1px 6px rgba(23,19,15,.35)}
#schuif::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--inkt);
  border:3px solid var(--kaart);box-shadow:0 1px 6px rgba(23,19,15,.35)}
.schuifhint{display:block;font-size:11px;color:var(--flauw);margin:1px 0 0 8px}
.speel{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--lijn);
  background:var(--kaart);color:var(--inkt);font-size:13px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:var(--t)}
.speel:hover{border-color:var(--inkt);background:var(--lijn-2)}
.speel.aan{background:var(--inkt);color:var(--kaart);border-color:var(--inkt)}
.onder-verdict b{color:var(--tint-t,var(--tint))}
.flauw{color:var(--flauw);font-size:13px}
.uurtabel td{cursor:pointer}
.uurtabel td:hover{background:var(--lijn-2)}
.uurtabel .tb small,.uurtabel .tg small,.uurtabel .tk small{display:block;font-size:11px;color:var(--zacht);font-weight:700;line-height:1.25}
.uurtabel .tb .eens{background:linear-gradient(90deg,var(--goed) var(--p),var(--lijn) var(--p));background-size:100% 3px;background-repeat:no-repeat;background-position:bottom;padding-bottom:4px}
/* Elk getal in de tabel blijft op EEN regel. "0,8 m" brak af naar twee regels terwijl "0,7 m"
   ernaast op een regel paste, en dan staan de rijen niet meer op dezelfde hoogte (ijkrijder, 12-09). */
.uurtabel .tg span{font-weight:700;display:block;white-space:nowrap}
.uurtabel td{white-space:nowrap}
.uurtabel .tk{background:var(--tint-v);color:var(--tint-t,var(--tint));border-radius:4px;padding:5px 0}
.uurtabel .tk small{color:var(--tint-t,var(--tint));font-size:10.5px}
.dagkaart .dn{font-size:11.5px}

/* rider in de kop */
/* Twee eenvoudige controls in plaats van twee invulvelden: gewicht met min en plus, kitemaat uit
   een lijst. Zelfde hoogte, zelfde ronding, zelfde rand als de rest van de kop. */
/* De kitekiezer is EEN pil: de keuzelijst vult hem helemaal en heeft zelf geen rand, geen
   achtergrond en geen focusring. Zonder dit tekende Safari op de telefoon een zwarte afgeronde
   doos om de lijst heen, buiten de pil, omdat de algemene focusregel ook op een select slaat
   (ijkrijder, 12-09). Het pijltje hoort bij de pil, niet bij de lijst, anders staat het scheef zodra
   de hoogte verandert. */
.keuze{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);
  border-radius:var(--r-pil);background:var(--papier);padding:0 30px 0 14px;min-height:44px;transition:border-color var(--t)}
.keuze span{font-size:13px;font-weight:700;color:var(--zacht);white-space:nowrap}
.keuze select{appearance:none;-webkit-appearance:none;border:0;background:none;box-shadow:none;
  font:700 16px var(--tekst);color:var(--inkt);padding:8px 4px 8px 0;margin:0;cursor:pointer;text-align:right;
  flex:1;min-width:0;border-radius:0}
/* Geen ronding op de lijst zelf: de tekst staat rechts uitgelijnd, precies in de ronde hoek, en
   echte Safari (dus ook de webapp) knipte daar de staart van de "g" van "kg" en de "m" af
   (ijkrijder, 18-09). De ronding hoort bij de pil eromheen. De 4 px rechts is lucht voor de laatste letter. */
.keuze select:focus,.keuze select:focus-visible{outline:none}
/* Het pijltje: twee lijntjes die samen een v vormen, altijd midden rechts in de pil. */
.keuze::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:2px solid var(--zacht);border-bottom:2px solid var(--zacht);transform:rotate(45deg);pointer-events:none}
.keuze:hover{border-color:var(--inkt)}
/* De focusring hoort om de hele pil, niet om de lijst erin, en alleen als je met het toetsenbord
   navigeert. Op :focus-within sprong er een dikke zwarte ring om de pil zodra je hem op de
   telefoon aantikte, en dat ziet eruit als een foutmelding. */
.keuze:has(select:focus){border-color:var(--inkt);box-shadow:0 0 0 3px rgba(23,19,15,.16)}

/* Gewicht, grootste kite en board zijn drie even zware keuzes, dus drie identieke pillen naast
   elkaar. Op een breed scherm label links en waarde rechts; op een telefoon label klein boven de
   waarde, want anders past "Directional" er niet naast zijn eigen label. */
.rider{display:flex;align-items:stretch;gap:8px}
.rider .keuze{min-height:48px}
/* vensters onder elkaar */
.vensters{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}
/* Een sessie is een kaartje: cijfer linksboven, tijd ernaast, daaronder de feiten en de som.
   Dezelfde vorm op elke breedte, want met een aparte mobiele volgorde stond het cijfer ineens
   midden in het kaartje (ijkrijder, 12-09). Op een breed scherm staan ze naast elkaar. */
.venster{border:1px solid var(--lijn);border-left:5px solid var(--tint);border-radius:var(--r-s);background:var(--tint-v)}
.venster{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;grid-auto-rows:min-content;
  align-content:start;gap:4px 10px;padding:12px 14px;cursor:pointer;list-style:none}
.venster:hover{border-color:var(--inkt)}
.venster .vc{grid-row:1;grid-column:1;font-family:var(--kop);font-size:24px;background:var(--tint);color:#fff;border-radius:8px;padding:2px 10px;line-height:1.2;align-self:start}
.venster .vt{grid-row:1;grid-column:2;font-family:var(--kop);font-size:19px;white-space:nowrap;align-self:center}
/* Het beste uur binnen een sessie: zelfde kaartje, met een stippellijn zodat je ziet dat het
   ergens binnen valt en geen losse sessie is. */
.venster .vt small{display:block;font:700 10px var(--tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--tint-t,var(--tint));margin-top:1px}
.venster.topuur{border-style:dashed;border-left-style:solid}
.venster .info{grid-row:1;grid-column:3;font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;align-self:start}
/* De feiten als bullets: wind, kite, stroom, golven, en het beste stuk binnen die sessie. */
.venster .vlijst{grid-row:2;grid-column:1/-1;margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--inkt)}
.venster .vlijst li{padding-left:14px;position:relative}
.venster .vlijst li::before{content:"";position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--tint);opacity:.6}
/* De som. Zonder die regel kunnen twee sessies allebei op 6 uitkomen langs heel verschillende
   wegen, en dan lijkt het of de stroming niet meetelt (ijkrijder, 12-09). */
/* De som staat onder elkaar, een post per regel. Op EEN regel paste hij niet en viel het eind
   eraf met puntjes, en juist het eindcijfer stond daar (ijkrijder, 12-09). De woorden blijven kort:
   de volle uitleg staat in de bullets erboven en achter de i-knop. */
.venster .vsom{grid-row:3;grid-column:1/-1;margin-top:auto;padding-top:7px;border-top:1px solid var(--lijn-2);
  font-size:11.5px;color:var(--zacht);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.venster .vsom b{font-weight:700;color:var(--inkt)}
/* Plus groen, min rood, maar rustig: een lichte achtergrond in plaats van gekleurde letters, want
   rode tekst leest als een foutmelding (ijkrijder, 12-09). */
.venster .vsom .r{display:block}
.venster .vsom .tot{margin-top:1px}
.venster .vsom .op{background:var(--perfect-v);color:var(--perfect);border-radius:4px;padding:1px 5px;font-weight:600}
.venster .vsom .af{background:var(--aflandig-v);color:var(--aflandig);border-radius:4px;padding:1px 5px;font-weight:600}
.venster ul{margin:0;padding:0 14px 12px 34px;font-size:13.5px;color:var(--zacht)}
.venster li.p::marker{content:"+ ";color:var(--perfect)}
.venster li.m::marker{content:"\2212 ";color:var(--aflandig)}
@media(min-width:900px){.vensters{flex-direction:row;align-items:stretch}.venster{flex:1 1 0;min-width:0}}
/* scene-kaarten */
.scene-uitleg{gap:12px}
.oordeel{display:block;background:var(--tint-v);border-left:5px solid var(--tint);border-radius:var(--r-s);padding:12px 14px}
.oordeel .okop{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tint-t,var(--tint));margin-bottom:3px}
.oordeel b{font-size:15px;display:block;margin-bottom:6px}
.oordeel ul{margin:0;padding-left:18px;font-size:13px;color:var(--zacht);line-height:1.45}
.oordeel li::marker{color:var(--tint-t,var(--tint))}
/* regen */
.uurtabel .tr .drup{font-size:10px;letter-spacing:-2px;display:block;line-height:1.3}
.uurtabel .tr small{display:block;font-size:11px;font-weight:700;color:#41607A}
.uurtabel .tr .droog{color:var(--flauw);font-weight:500}

.venster{margin:0}
.sheet-een{font-size:15px;margin:0 0 10px}
.redenen{margin:0 0 12px;padding-left:22px;font-size:14px;color:var(--zacht)}
.redenen li.p::marker{content:"+ ";color:var(--perfect)}
.redenen li.m::marker{content:"− ";color:var(--aflandig)}
.nu-kop a{color:var(--perfect);font-weight:700}
/* venster-rij in de tabel */
.uurtabel .vrij td{padding:0 0 4px}
.vpil{display:block;background:var(--tint-t,var(--tint));color:#fff;font-size:11.5px;font-weight:700;border-radius:6px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* mobiel: eerste kolom blijft staan, kop wrapt netjes */
.uurtabel th{position:sticky;left:0;background:var(--kaart);z-index:1}
@media(max-width:600px){
  .top{gap:10px}
  .merk{width:100%}
  /* Drie even brede pillen op een regel. Label boven de waarde, want naast elkaar past het niet
     op 390 px. Elke pil even hoog en even breed, en niets binnenin mag afbreken. */
  .rider{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .rider .keuze{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    min-width:0;min-height:54px;padding:6px 22px 6px 11px;border-radius:14px}
  .rider .keuze span{font-size:10.5px;letter-spacing:.04em;color:var(--flauw)}
  .rider .keuze select{width:100%;text-align:left;font-size:15px;padding:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rider .keuze::after{right:9px;width:6px;height:6px;margin-top:-4px}
  .hero{padding:18px 16px}
  .verdict{font-size:28px}
  .venster .vt{font-size:19px}
  .scene-uitleg{grid-template-columns:1fr}
  .schuifrij{padding:10px 12px 4px}
}
.venster .vc{justify-self:start}

/* modellen */
.modellen{margin-top:14px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 16px}
.mkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mkop b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.mkop>span:not(.mknoppen){font-size:12px;color:var(--zacht);flex:1;min-width:200px}
.mknoppen{display:inline-flex;gap:4px}
.mknoppen button{font-size:12px;font-weight:700;color:var(--zacht);padding:5px 10px;border-radius:var(--r-pil);border:1px solid var(--lijn)}
.mknoppen button.on{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.mchips{display:flex;gap:6px;flex-wrap:wrap}
.mchip{border:1px solid var(--lijn);border-radius:var(--r-pil);padding:5px 12px;font-size:13px;font-weight:700;color:var(--flauw);background:var(--papier);display:inline-flex;gap:6px;align-items:baseline}
.mchip small{font-size:10.5px;font-weight:500}
.mchip.aan{background:var(--perfect-v);color:var(--perfect);border-color:var(--perfect)}
.voet a{color:var(--inkt)}
.uurtabel .tm small{white-space:nowrap}
/* De pil moet BINNEN zijn cel blijven: met 7px lucht links en rechts werd "29%" 39px breed in een
   cel van 36 en liep hij over de buurman heen (gemeten op 390px, 12-09). */
.uurtabel .tm .kans{display:inline-block;max-width:100%;background:var(--tint-v);color:var(--tint-t,var(--tint));font-weight:700;font-size:12.5px;border-radius:6px;padding:2px 5px}
.uurtabel .tm small{display:block;font-size:10.5px;color:var(--flauw);margin-top:2px}
.mkop>span:not(.mknoppen){line-height:1.4}
.mkop>span:not(.mknoppen) b{font-size:inherit;letter-spacing:0;text-transform:none;color:var(--inkt)}
.dagkaart.leeg{--tint:var(--lijn);--tint-v:var(--papier);color:var(--flauw);cursor:default}
.dagkaart[data-grof]{border-style:dashed}
.mkop .info{font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:4px}
.mkop>span:not(.mknoppen){min-width:0}
.dagkaart .dvl{display:block;font-size:11px;color:var(--zacht);margin:-1px 0 4px}
.venster .vk small{font-size:11.5px;color:var(--zacht);font-family:var(--tekst);font-weight:700;margin-left:4px}
.redenen li{margin-bottom:5px}
.redenen li b{color:var(--inkt)}
/* scheiding fijn/grof in de dagenrij: breed scherm een kopregel over de hele breedte */
.dsep{flex:1 0 100%;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht);padding-bottom:6px;border-bottom:1.5px dashed var(--lijn)}
.dsep.grof{margin-top:6px;color:var(--flauw)}
.dsep i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;color:var(--flauw);margin-left:6px}
.dsep.grof~.dagkaart{border-style:dashed}
/* mini-overzicht van de week: zelfde balk op telefoon en op breed scherm. Per dag een staafje per
   uur, zo zie je in één blik waar de wind zit; klik springt naar die dag. */
/* De uitleg onder de weekbalk is een venster achter de i-knop in de kop geworden. */
.sec .info{margin-left:8px;vertical-align:2px;font-style:normal;font-size:11px;font-weight:700;width:20px;height:20px;
  border-radius:50%;border:1.5px solid var(--zacht);color:var(--zacht);display:inline-flex;align-items:center;justify-content:center}
.sec .info:hover{border-color:var(--inkt);color:var(--inkt)}
.weekmini{display:flex;gap:2px;margin-bottom:14px;padding:10px 10px 8px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r-s)}
.wm{flex:1 1 0;min-width:0;padding:4px 4px 3px;border-radius:6px;cursor:pointer;background:none}
.wm:hover{background:var(--lijn-2)}
.wm.aan{background:var(--lijn-2);box-shadow:0 0 0 1.5px var(--inkt) inset}
.wm.grof{border-left:1.5px dashed var(--lijn);border-radius:0 6px 6px 0}
/* dagnaam links, hardste wind van die dag rechts */
/* De dagnaam had de kleur van het oordeel. Op 10 px kwam "weinig" uit op een contrast van 2,57
   waar 4,5 de norm is: lichtbeige letters op wit las niemand. De kleur zit nog wel in de balkjes
   eronder, dus het oordeel blijft zichtbaar; alleen de letters zijn nu gewoon zwart. */
.wmk{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:11.5px;font-weight:700;color:var(--inkt);margin-bottom:5px}
/* Alleen voor een schermlezer. Zonder dit moest de hele knopnaam in een aria-label, en dan klaagt
   elke toets dat de naam de zichtbare tekst niet bevat. */
.alleenvoorlezen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wmk em{font-style:normal;font-size:11px;color:var(--zacht)}
/* De streep op --grens staat op 12 kn: erboven kun je varen. */
.wmb{position:relative;display:flex;align-items:flex-end;gap:1px;height:62px}
.wmb::before{content:"";position:absolute;left:0;right:0;bottom:var(--grens,40%);border-top:1px dashed var(--lijn);pointer-events:none}
.wmb i{flex:1 1 0;border-radius:1.5px 1.5px 0 0;min-width:1px}

/* samenvatting onder de tabel */
.hero{padding:18px 18px 14px}
.hero .kicker{margin-bottom:10px}
.samenvatting{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.sv{margin:0;font-size:14.5px;line-height:1.45}
.sv.flauw{color:var(--flauw);font-size:13px}
.link{text-decoration:underline;text-underline-offset:3px;color:inherit;padding:0}
details.modellen summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline}
details.modellen summary::-webkit-details-marker{display:none}
details.modellen summary::before{content:"▸";color:var(--zacht);font-size:12px}
details.modellen[open] summary::before{content:"▾"}
details.modellen summary b{font-size:12px;letter-spacing:.13em;text-transform:uppercase}
details.modellen summary span{font-size:12.5px;color:var(--zacht)}
details.modellen>div{margin-top:12px}
.nu{margin:14px 0 0;padding:12px 16px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r)}
.dagen .dag{box-shadow:none;border:0;border-radius:0}
.dagen .dagkop{padding-left:0;border-left:0}
.dagen .scroll{padding:0 0 6px}
[hidden]{display:none!important}
.seg{flex-wrap:wrap}

/* Kopknoppen: één maat, één hoogte, en tekst die te lang is krijgt puntjes in plaats van over de
   rand te lopen. Op een telefoon liep "10 van 10 modellen" buiten zijn pil en was de kite-pil twee
   keer zo hoog als de kg-pil (gemeten op 402 px, iPhone 17 Pro-breedte). */
.filter{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  border:1px solid var(--lijn);border-radius:var(--r-pil);padding:6px 14px;background:var(--kaart);
  line-height:1.2;min-height:44px;overflow:hidden}
.filter b,.filter span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter b{font-size:13px}
.filter span{font-size:11px;color:var(--zacht)}
.filter:hover{border-color:var(--inkt)}
.filter:active{transform:scale(.98)}
.mixen{display:grid;gap:8px;margin-bottom:14px}
.mixknop{text-align:left;border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mixknop.aan{border-color:var(--perfect);background:var(--perfect-v)}
.mixknop b{font-size:15px}
.mixknop span{font-size:12.5px;color:var(--zacht)}
.sheet-in{max-width:520px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.rider{width:100%;border-top:1px solid var(--lijn-2);padding-top:10px}
.filter b{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spotzoek{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:var(--r-s);margin-bottom:10px;background:var(--papier);color:var(--inkt)}
#spotzoek:focus{outline:2px solid var(--inkt);border-color:var(--inkt)}
.spotlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;max-height:50vh;overflow:auto;margin-bottom:8px}
.spotkeus{text-align:left;border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:9px 11px;display:flex;flex-direction:column}
.spotkeus.aan{border-color:var(--perfect);background:var(--perfect-v)}
.spotkeus b{font-size:14px}
.spotkeus span{font-size:11.5px;color:var(--zacht)}
@media(max-width:600px){.filters{margin-left:0;width:100%;flex-wrap:nowrap}.filter{flex:1 1 0;min-width:0}}

/* label boven de kaart, niet erover */
.scene-label{position:static;background:var(--kaart);border-radius:0;padding:12px 18px 10px;flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--lijn-2)}
.scene-label b{font-size:24px}
/* paneel: kop blijft staan, alleen de inhoud scrolt; op mobiel bovenaan zodat het toetsenbord niets wegschuift */
.sheet-in{max-height:85dvh;display:flex;flex-direction:column;overflow:hidden}
/* 4 px lucht rondom, met een negatieve marge terug: anders snijdt dit schuifvak de focusrand van het zoekveld en
   van de kaarten aan de linker- en rechterkant af (ijkrijder, 18-09: "this left border falls out"). */
#sheet-b{overflow:auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px;margin:-4px}
/* Staat het paneel open, dan schuift de pagina erachter niet mee. Op een telefoon trok het toetsenbord anders
   de hele pagina omhoog zodra je in een veld tikte, en schoof het paneel mee. */
html:has(#sheet:not([hidden])),body:has(#sheet:not([hidden])){overflow:hidden}
@media(max-width:600px){.sheet{align-items:flex-start;padding:10px}.sheet-in{padding:18px 16px}}
#spotzoek{font-size:16px}
.spotlijst{max-height:none}
.laadtekst{padding:14px 0}
.filter{max-width:48%}
.filter b,.filter span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media(max-width:600px){
  .filters{gap:6px}.filter{flex:1 1 0;max-width:none;padding:6px 10px}
  .filter b{font-size:12.5px}.filter span{font-size:10.5px}
  /* dagkaarten: één rij, swipen, geen weeskaart */
  .weekstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .weekstrip .dagkaart{flex:0 0 44%;scroll-snap-align:start}
  .weekstrip .dsep{flex:0 0 auto;writing-mode:vertical-rl;padding:8px 0;border-bottom:0;border-left:1.5px dashed var(--lijn);font-size:10.5px;text-align:center}
  .weekstrip .dsep.eerste{display:none}
  .weekstrip .dsep i{display:none}
  .weekstrip .kans-ens{display:none}
  .weekmini{gap:2px;margin-bottom:10px;padding:7px 6px 5px}
  .wm{padding:3px 2px 2px}
  .wmk{font-size:10px;margin-bottom:3px}
  .wmk em{font-size:9.5px}
  .wmb{height:34px}
  .scene-label b{font-size:20px}
  /* Vast raster: het windgetal links, rechts vier vaste regels (wind, stroming, golven, oordeel) die nooit afbreken.
     Wat niet past krijgt puntjes in plaats van een extra regel, want een extra regel duwt de
     strandkaart omlaag en dan danst de hele pagina tijdens het afspelen. */
  .scene-label{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:repeat(4,18px);column-gap:14px;row-gap:2px;align-items:center}
  .scene-label>b{grid-row:1 / span 4;min-width:62px}
  .scene-label span{grid-column:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.sl-water{display:contents}

body.modal-open{overflow:hidden}
.scene{isolation:isolate;z-index:0}
.pk{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;border:1.5px solid rgba(23,19,15,.4)}
.pk.wit{background:#fff}.pk.blauw{background:#4FC3F7}.pk.geel{background:#F2D27A}
.scene-label span{font-weight:600}

.filter.meet{text-decoration:none;color:var(--inkt)}
.filter.meet b{color:var(--perfect)}
.sv a{color:var(--zacht)}

/* De legenda is een venster achter een i-knop geworden, geen muur tekst onder de tabel.
   De regel eronder is alleen nog de knop met zijn naam ernaast. */
.legenda-knop{margin-top:14px;border-top:1px solid var(--lijn-2);padding-top:12px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--zacht)}
.lgv{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:8px;vertical-align:-1px;flex:none}

/* Beste uren: het cijfer met de titel op een regel, de rest eronder als lijstje. Stond eerst
   als een lange zin achter elkaar met punten ertussen, en dat las niemand (ijkrijder, 12-09). */

/* Webcamknop. Op breed scherm een gewone pil naast "Nu op zee". Op een telefoon alleen het icoon,
   44 px breed aan het eind van dezelfde rij: een vierde volle pil paste niet en een tweede rij
   kostte 50 px hoogte boven de vouw. */
.filter.cam{flex-direction:row;align-items:center;gap:8px;display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;row-gap:0}
.filter.cam svg{grid-row:1 / span 2;color:var(--perfect)}
.filter.cam b,.filter.cam span{grid-column:2}
@media(max-width:600px){
  .filter.cam{flex:0 0 44px;width:44px;padding:0;display:inline-flex;justify-content:center;align-items:center}
  .filter.cam b,.filter.cam span{display:none}
}
.filter.cam{text-decoration:none;color:var(--inkt)}
.camlink{text-decoration:none;color:var(--inkt)}
.filter.cam.geen{opacity:.4;cursor:default}
.filter.cam.geen:hover{border-color:var(--lijn)}
.filter.cam.geen:active{transform:none}
.filter.cam.geen svg{color:var(--zacht)}

/* ── buren.js: de beste spots binnen je rijtijd, in de spotkiezer ─────────────────
   Kleur alleen waar het een oordeel is: het cijfer, de tip op de spotknop en "wind staat daar goed".
   De gekozen pil en een favoriete ster zijn inkt, zoals elke gekozen staat op deze pagina.
   Alles wat je aanraakt is 44 px hoog, maar het blok is klein gehouden: een kop met de pillen ernaast en een
   stille regel eronder. De eerste versie was een kop, een rij grote pillen, een regel en een vraagvak, en nam
   het halve scherm voordat er een spot stond (ijkrijder, 18-09: "too much info and too big"). */
.bu-blok{margin:12px 0 14px}
.bu-kop{display:flex;align-items:center;justify-content:space-between;gap:6px}
.bu-kop>b{font-family:var(--kop);font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bu-seg{display:inline-flex;flex:none;border:1px solid var(--lijn);border-radius:var(--r-pil);padding:2px;gap:0}
.bu-seg button{padding:0 9px;font-size:12px;min-height:44px;min-width:44px}
.bu-vanaf{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;margin:0;font-size:12px;color:var(--flauw)}
.bu-vanaf b{color:var(--zacht);font-weight:700}
.bu-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:12px;color:var(--zacht);text-decoration:underline;text-underline-offset:3px}
.bu-link:hover{color:var(--inkt)}
.bu-fout{color:var(--aflandig)}
.bu-loc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.bu-loc input{flex:1 1 0;min-width:0;height:44px;box-sizing:border-box;font:500 16px var(--tekst);border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:0 11px;background:var(--papier);color:var(--inkt)}
.bu-gps{flex:none;height:44px;box-sizing:border-box;border:1.5px solid var(--lijn);border-radius:var(--r-s);padding:0 11px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--kaart)}
#bu-plaatsen{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
#bu-plaatsen:empty{display:none}
.bu-plaats{min-height:44px;border:1.5px solid var(--lijn);border-radius:var(--r-pil);padding:0 14px;font-size:13px;background:var(--kaart)}
.bu-plaats span{color:var(--zacht);font-size:11.5px}
.bu-plaats:hover,.bu-gps:hover{border-color:var(--inkt)}
.bu-plaats:active,.bu-gps:active,.bu-ster:active,.bu-link:active{transform:scale(.98)}
.bu-geen{font-size:12px;color:var(--zacht);padding:4px 0 8px}
.bu-c{display:inline-block;min-width:30px;text-align:center;font-size:12.5px;font-weight:800;border-radius:var(--r-pil);padding:1px 6px;margin-right:2px}
.bu-beter{font-style:normal;font-size:10.5px;font-weight:800;color:var(--goed);background:var(--goed-v);border-radius:var(--r-pil);padding:1px 7px;white-space:nowrap}
.bu-lijst{max-height:none}
.bu-uitleg{font-style:normal;font-size:11px;margin-left:6px}
.bu-wrap{position:relative;display:flex;min-width:0}
.bu-wrap .spotkeus{flex:1;min-width:0;padding-right:46px}
/* Een naam die niet past krijgt puntjes. Breekt hij af, dan is die ene kaart hoger dan zijn buren en loopt het rooster scheef. */
.bu-wrap .spotkeus>b,.bu-wrap .spotkeus>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bu-ster{position:absolute;top:0;right:0;width:44px;height:100%;min-height:44px;font-size:17px;line-height:1;color:var(--zacht);border-radius:var(--r-s)}
.bu-ster.aan,.bu-ster:hover{color:var(--inkt)}
#spotknop.bu-tipt{border-color:var(--goed)}
.bu-tip{font-style:normal;font-weight:700;color:var(--goed)}

/* ── De uitlegpagina's in /uitleg/ ─────────────────────────────────────────
   Losse tekstpagina's zonder rekenwerk: ze vangen iemand die een vraag googelt en sturen hem
   door naar de rekenpagina. Alleen wat er hier nog niet stond; alles eromheen (.wrap, .top,
   .merk, .cta, .sec, .voetlijst, .voet, .scroll) is hergebruikt. */
.merk .merknaam{font-family:var(--kop);font-weight:800;font-size:20px;letter-spacing:-.03em}
.merk{text-decoration:none}
.uitleg{padding-bottom:40px}
.uitleg h1{font-size:clamp(28px,5.5vw,40px);line-height:1.05;margin:18px 0 14px}
.uitleg h2.sec{margin:34px 0 10px}
.uitleg p{margin:0 0 14px;max-width:62ch;line-height:1.6}
.uitleg .lead{font-size:17.5px;color:var(--zacht)}
.uitleg .lead b{color:var(--inkt)}
.uitleg .voetlijst{margin:0 0 16px}
.uitleg .voetlijst li{font-size:15px;line-height:1.55}
.uitleg a{text-decoration:underline;text-underline-offset:3px}
.uitleg .cta{text-decoration:none}
/* Het uitgelichte blok: het korte antwoord bovenaan en de doorstuur onderaan. */
.antwoord{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px;margin:0 0 20px;box-shadow:var(--schaduw)}
.antwoord p:last-child{margin-bottom:0}
.antwoord .cta-rij{margin-top:16px}
.formule{font-family:var(--kop);font-size:17px;line-height:1.35;
  background:var(--tint-v,var(--lijn-2));border-radius:var(--r-s);padding:12px 14px}
.klein{font-size:13.5px;color:var(--zacht)}
/* Tabellen in de tekst. In .scroll, dus de pagina zelf schuift nooit zijwaarts. */
.maattabel{border-collapse:collapse;width:100%;font-size:14px;background:var(--kaart)}
.tabelkop{margin:0 0 8px;max-width:62ch}
/* De gewichtkolom blijft staan terwijl je de tabel zijwaarts schuift. */
.maattabel th[scope="row"],.maattabel thead th:first-child{position:sticky;left:0;z-index:1}
.woordtabel th[scope="row"],.woordtabel thead th:first-child{position:static}
.maattabel th,.maattabel td{border:1px solid var(--lijn);padding:7px 9px;text-align:center;
  white-space:nowrap}
.maattabel thead th{background:var(--lijn-2);font-size:13px;color:var(--zacht)}
.maattabel tbody th{background:var(--lijn-2);font-weight:700}
.maattabel td{font-variant-numeric:tabular-nums}
/* Dezelfde tabel, maar met woorden erin: links uitlijnen en laten afbreken. */
.woordtabel th,.woordtabel td{text-align:left;white-space:normal}
.woordtabel{min-width:0}
.uitleg .scroll{padding:0 0 10px;margin:0 0 16px}

/* De drie uitlegpagina's onderaan. Een zoeker komt daar binnen, een bezoeker gaat er heen. */
.voetuitleg{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 14px;
  font-size:13px;line-height:1.6}
.voetuitleg b{color:var(--zacht);font-weight:700}
.voetuitleg a{color:var(--perfect);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.voetuitleg{font-size:12.5px;gap:4px 12px}}

/* Op een breed scherm was 900px een smalle kolom met veel wit ernaast. De weekstrip en de
   uurtabel hebben die ruimte nodig; op telefoon en tablet verandert er niets. */
@media(min-width:1100px){ .wrap{max-width:1180px} }
@media(min-width:1500px){ .wrap{max-width:1320px} }

/* ── brede schermen: tekst is een leeskolom, kaartjes zijn een dashboard ──────────
   De brede wrap hierboven is voor de weekstrip en de uurtabel. Een lap lopende tekst
   die diezelfde wrap volgt staat tegen de linkerrand met een half scherm wit ernaast
   (19-09). Daarom: de uitlegpagina's krijgen hun eigen, smalle wrap, en de twee
   tekstblokken op de voorpagina gaan naast elkaar staan zodat ze de breedte vullen. */
@media(min-width:1100px){
  body:has(main.uitleg) .wrap{max-width:820px}
}

/* De twee vragen onderaan de voorpagina: naast elkaar, elk een eigen leeskolom. */
@media(min-width:1000px){
  .vraagraster{display:grid;grid-template-columns:1fr 1fr;gap:4px 48px;align-items:start}
  .vraagraster h2.sec{margin-top:0}
  .vraagraster p{margin-bottom:0}
  .voet .voetlijst{grid-template-columns:1fr 1fr;gap:9px 44px;max-width:none}
}

/* ── strandkaart naast de uitleg ──────────────────────────────────────────────────
   De kaart vulde op een breed scherm de hele 1320 px en duwde de drie oordelen
   (wind, stroming, golven) onder de vouw: je zag het plaatje of de tekst, nooit
   allebei (19-09). Naast elkaar past het hele ding op één scherm, en de kaart wordt
   vanzelf kleiner omdat zijn kolom smaller is. De verhouding 900/480 blijft staan,
   dus de pijlen-SVG vervormt niet. */
@media(min-width:1000px){
  .scenekaart{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);align-items:stretch}
  .scene-kol{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--lijn-2)}
  .scene-kol .schuifrij{margin-top:auto}
  .scene-uitleg{grid-template-columns:1fr;align-content:start;gap:10px;
    max-height:none;overflow:auto;padding:14px 16px}
}

/* Afspeelsnelheid: ½×, 1×, 2×. Eén knop die rondloopt, want drie losse knoppen naast
   het ronde speelknopje maakten van de schuifrij een knoppenbalk. */
.speelsnel{flex:none;min-width:38px;height:28px;border-radius:var(--r-pil);
  border:1.5px solid var(--lijn);background:var(--kaart);color:var(--zacht);
  font-size:12px;font-weight:700;letter-spacing:.02em;transition:var(--t)}
.speelsnel:hover{border-color:var(--inkt);color:var(--inkt)}

/* Alle spots staan nu meteen in het paneel, niet pas na typen. Twee scrollvakken in
   één paneel worden een doolhof, dus de favorieten groeien mee en alleen de lange
   lijst schuift. */
.spotlijst.alles{max-height:38vh;border-top:1px solid var(--lijn-2);padding-top:8px}
.spotlijst.favs{max-height:none;overflow:visible}

/* Op een telefoon vraten het speelknopje, de snelheid en het uur zoveel van de rij dat de hint
   eronder op twee regels brak en de oordeelkaartjes een regel omlaag duwde. Kleiner, en de hint
   krijgt de hele breedte van de rij. */
@media(max-width:600px){
  .schuifrij{flex-wrap:wrap;column-gap:8px;row-gap:0;padding:10px 14px 8px}
  .speel{width:32px;height:32px}
  .speelsnel{min-width:34px;height:25px;font-size:11px}
  .schuifuur{font-size:16px;min-width:44px}
  .schuifkolom{flex:1 1 120px}
  .schuifhint{flex:1 0 100%;order:9;margin:2px 0 0}
}

/* De hint staat nu naast de schuif in plaats van erin, zodat hij de hele rij kan pakken
   en nooit in een smalle kolom afbreekt. Op elke breedte dus: eigen regel, onderaan. */
.schuifrij{flex-wrap:wrap;row-gap:0}
.schuifhint{flex:1 0 100%;order:9;margin:1px 0 0 8px}