/* Tokens uit 01_ontwerp/stijl.md. Eén accent (IR-cyaan); statuskleuren alleen voor betekenis. */
:root{
  color-scheme:dark;
  --bg:#0a0d0f; --panel:#0e1215; --panel2:#12171b; --raise:#171e23;
  --line:#1f282e; --line2:#2b363d;
  --fg:#d3dbdf; --fg2:#8b979e; --fg3:#5a666d;
  --accent:#4fd2ee; --accent-dim:rgba(79,210,238,.13);
  --ok:#5db27a; --warn:#d8993c; --crit:#d75a4e;
  --ui:'Archivo','Arial Narrow',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg)}
body{color:var(--fg);font:13px/1.4 var(--ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:600 10px/1 var(--ui);font-stretch:85%;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.c-warn{color:var(--warn)}.c-dim{color:var(--fg3)}.c-ok{color:var(--ok)}.c-acc{color:var(--accent)}
.note{font-size:12px;line-height:1.5;color:var(--fg2);margin:0 0 10px}
.note.c-warn{color:var(--warn)}.note.c-ok{color:var(--ok)}

#app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}

/* Infobalk */
#bar{display:flex;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
#bar::-webkit-scrollbar{display:none}
.cell{flex:none;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:9px 16px;border-left:1px solid var(--line);white-space:nowrap}
.cell:first-child{border-left:0;padding-left:0}
.cell .val{font:500 13px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.cell .sub{font:400 11px/1.1 var(--mono);color:var(--fg2)}
.brand{font:700 15px/1 var(--ui);font-stretch:72%;letter-spacing:.2em}
.brand i{font-style:normal;color:var(--accent)}
.live{display:inline-flex;align-items:center;gap:6px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.live.uit::before{background:var(--fg3);box-shadow:none}

/* Layout */
#main{display:grid;grid-template-columns:300px minmax(0,1fr) 380px;min-height:0;position:relative}
#left,#right{background:var(--panel);overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
#left{border-right:1px solid var(--line);padding:14px 14px 0 max(16px,env(safe-area-inset-left))}
#right{border-left:1px solid var(--line);padding:0 max(16px,env(safe-area-inset-right)) 16px 16px}
#mapwrap{position:relative;min-width:0;min-height:0;background:#06090a}
#map{position:absolute;inset:0;background:#0b1012}

.phead{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 10px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2)}
.seg button{background:none;border:0;padding:7px 0;font:600 10.5px/1 var(--ui);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);cursor:pointer}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--raise);color:var(--fg)}
.melding{margin-top:12px;padding:8px 10px;border:1px solid var(--line2);border-left:2px solid var(--warn);font-size:12px;line-height:1.45;color:var(--fg2)}

/* Cameralijst */
.lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lijst li{border-bottom:1px solid var(--line)}
.lijst button{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;background:none;border:0;padding:9px 2px;text-align:left;cursor:pointer}
.lijst button:hover,.lijst button.on{background:var(--panel2)}
.lijst .nm{font:500 13px/1.25 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lijst button.on .nm{color:var(--accent)}
.lijst .tm{font:400 10.5px/1 var(--mono);color:var(--fg3)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--fg3)}
.dot.ok{background:var(--ok)}.dot.leeg{background:transparent;border:1px solid var(--fg3)}.dot.nieuw{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.lfoot{padding:16px 0 18px;font:400 10.5px/1.6 var(--mono);color:var(--fg3)}

/* Koppelkaarten */
.kk{border:1px solid var(--line2);border-left:2px solid var(--warn);background:var(--panel2);padding:10px;margin-bottom:10px;display:grid;gap:8px}
.kk-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start}
.kk-top img,.kk-top .geenbeeld{width:96px;aspect-ratio:16/9;object-fit:cover;background:#000;border:1px solid var(--line2);display:block}
.kk-naam{font:600 13px/1.25 var(--ui);overflow-wrap:anywhere}
.kk-sub{font:400 10.5px/1.4 var(--mono);color:var(--fg2);margin-top:3px}
.kk-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
select{background:var(--bg);border:1px solid var(--line2);padding:7px 8px;border-radius:1px;min-width:0;width:100%}
.knop{background:var(--raise);border:1px solid var(--line2);padding:7px 12px;font:600 10.5px/1 var(--ui);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:1px}
.knop.acc{border-color:var(--accent);color:var(--accent)}
.knop:disabled{opacity:.4;cursor:default}
.lnk{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font:500 11px/1.4 var(--mono);text-align:left}
.lnk.gevaar{color:var(--crit)}

/* Inspector */
.ins-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 0 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.ins-head h2{margin:6px 0 0;font:600 19px/1.15 var(--ui);font-stretch:78%;letter-spacing:.02em;text-wrap:balance}
.x{background:none;border:1px solid var(--line2);padding:6px 8px;font:600 9.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);cursor:pointer;flex:none}
.sec{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:9px}
.sec:last-child{border-bottom:0}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0}
.kv dt{color:var(--fg3);font:500 10.5px/1.5 var(--ui);font-stretch:88%;letter-spacing:.08em;text-transform:uppercase}
.kv dd{margin:0;font:400 12px/1.5 var(--mono);overflow-wrap:anywhere}
.frame{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;border:1px solid var(--line2)}
.frame-cap{display:flex;justify-content:space-between;gap:8px;font:400 11px/1.3 var(--mono);color:var(--fg2)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.thumbs button{padding:0;border:1px solid var(--line2);background:#000;cursor:pointer;display:block;line-height:0}
.thumbs button.on{border-color:var(--accent)}
.thumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.leeg-beeld{aspect-ratio:16/9;border:1px dashed var(--line2);display:grid;place-items:center;text-align:center;padding:12px;color:var(--fg3);font:400 11.5px/1.5 var(--mono)}

/* Kaart-HUD */
.hud{position:absolute;z-index:1000;background:rgba(10,13,15,.88);border:1px solid var(--line2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#zoomhud{right:12px;bottom:24px;display:grid}
#zoomhud button{background:none;border:0;width:34px;height:30px;cursor:pointer;font:500 15px/1 var(--mono)}
#zoomhud button+button{border-top:1px solid var(--line2)}
#zoomhud button.fit{font:600 9px/1 var(--ui);letter-spacing:.1em}
#mobbtn{display:none;top:12px;left:12px}
#mobbtn button{background:none;border:0;padding:9px 12px;font:600 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:6px}
.badge{background:var(--warn);color:#0a0d0f;font:700 10px/1 var(--mono);padding:2px 5px;border-radius:1px}

/* Leaflet aanpassingen */
.leaflet-container{font-family:var(--ui);background:#0b1012}
.leaflet-control-attribution{background:rgba(10,13,15,.7)!important;color:var(--fg3)!important;font:400 9.5px/1.4 var(--mono)!important}
.leaflet-control-attribution a{color:var(--fg2)!important}

/* Markers */
.mk{overflow:visible}
.mk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk rect{fill:rgba(8,11,13,.9);stroke:#e8eef0;stroke-width:1.4}
.mk circle{fill:#e8eef0}
.mk line{stroke:#e8eef0;stroke-width:1.4}
.mk.leeg rect{stroke:var(--fg3);stroke-dasharray:3 2}
.mk.leeg circle{fill:var(--fg3)}
.mk.nieuw rect{stroke:var(--accent)}
.mk.nieuw circle{fill:var(--accent)}
.mk .t{position:absolute;left:calc(100% + 5px);top:50%;transform:translateY(-50%);font:500 10.5px/1.2 var(--mono);letter-spacing:.03em;color:#e8eef0;white-space:nowrap;pointer-events:none;text-shadow:0 0 2px #000,0 0 5px #000,0 0 8px #000}
.mk .t small{display:block;font-size:9.5px;color:#a9b4ba}
.mk.leeg .t{color:#a9b4ba}
.mk.sel::before{content:"";position:absolute;inset:-6px;border:1.5px solid var(--accent)}

/* Smalle schermen: lijst als lade, details als paneel van onder */
@media (max-width:1100px){#main{grid-template-columns:260px minmax(0,1fr) 330px}}
@media (max-width:900px){
  #main{grid-template-columns:minmax(0,1fr)}
  #left,#right{position:absolute;z-index:1500;transition:transform .22s ease}
  #left{top:0;bottom:0;left:0;width:min(320px,88%);transform:translateX(-102%);box-shadow:8px 0 24px rgba(0,0,0,.5)}
  #left.open{transform:none}
  #right{left:0;right:0;bottom:0;max-height:70%;transform:translateY(102%);border-left:0;border-top:1px solid var(--line2);box-shadow:0 -8px 24px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
  #right.open{transform:none}
  #mobbtn{display:flex}
  .cell.optioneel{display:none}
}
@media (prefers-reduced-motion:reduce){#left,#right{transition:none}}
.mk.sel .t{left:calc(100% + 11px)}

/* Lagen */
.lys{list-style:none;margin:0 0 4px;padding:0;border-top:1px solid var(--line)}
.lys li{border-bottom:1px solid var(--line)}
.ly-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:6px;padding:9px 0;cursor:pointer}
.ly-row input{position:absolute;opacity:0;pointer-events:none}
.sw{width:22px;height:12px;border:1px solid var(--line2);position:relative;border-radius:1px}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;background:var(--fg3);transition:transform .15s,background .15s}
.ly-row input:checked+.sw{border-color:var(--accent)}
.ly-row input:checked+.sw::after{transform:translateX(10px);background:var(--accent)}
.ly-row input:focus-visible+.sw{outline:1.5px solid var(--accent);outline-offset:2px}
.ly-name{font:500 13px/1.2 var(--ui);color:var(--fg2)}
.ly-row input:checked~.ly-name{color:var(--fg)}
.ly-n{font-size:10.5px;color:var(--fg3)}

/* Wind-HUD */
#windhud{top:12px;right:12px;padding:10px 12px;display:grid;grid-template-columns:auto auto;gap:3px 12px;align-items:center;max-width:calc(100% - 24px)}
#windhud svg{grid-row:span 4;width:72px;height:72px}
#windhud .k{font:400 10.5px/1.3 var(--mono);color:var(--fg2)}
#windhud .k b{font-weight:600;color:var(--fg);font-size:15px;margin-right:4px}
#windhud .thm{grid-column:1/-1;border-top:1px solid var(--line);padding-top:6px;margin-top:4px;display:flex;justify-content:space-between;gap:10px;font:400 10.5px/1.3 var(--mono);color:var(--fg2)}
#windhud .thm .acc{color:var(--accent)}
#windhud.fout{grid-template-columns:auto;max-width:240px;font:400 11px/1.4 var(--mono);color:var(--fg2)}
.roos-ring{fill:none;stroke:var(--line2);stroke-width:1}
.roos-tick{stroke:var(--fg3);stroke-width:1}
.roos-txt{fill:var(--fg3);font:600 7px var(--ui);text-anchor:middle;dominant-baseline:central}
.roos-pijl{fill:var(--accent)}
.roos-uit{fill:var(--fg)}

/* Tijdbalk */
#timebar{left:12px;right:60px;bottom:12px;padding:8px 12px 6px;display:grid;gap:2px}
.tb-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tb-top .v{font:500 12px/1 var(--mono)}
#tbPijlen{display:grid;grid-template-columns:repeat(25,1fr);height:16px;align-items:center;justify-items:center}
#tbPijlen svg{width:12px;height:12px;overflow:visible}
#tbPijlen path{fill:var(--fg2)}
#tbPijlen .on path{fill:var(--accent)}
#tslider{width:100%;margin:0;accent-color:var(--accent);cursor:pointer}
.tb-ticks{position:relative;height:11px;font:400 9.5px/1 var(--mono);color:var(--fg3)}
.tb-ticks span{position:absolute;top:0;transform:translateX(-50%)}
#mapwrap.wind #zoomhud{bottom:96px}
@media (max-width:900px){
  #windhud{top:auto;bottom:100px;right:12px;padding:8px 10px}
  #windhud svg{width:52px;height:52px}
  #timebar{right:12px}
  #mapwrap.wind #zoomhud{bottom:auto;top:62px}
}

/* Kansels: driehoek in grijs, schootsveld als lichte taartpunt. Accent alleen bij selectie. */
.mk-k svg path{fill:rgba(8,11,13,.85);stroke:var(--fg2);stroke-width:1.4;stroke-linejoin:round}
.mk-k .t{font-size:9.5px;color:#a9b4ba}
.mk-k.sel svg path{stroke:var(--accent)}
.mk-k.sel::before{inset:-5px}
.ver .mk-k .t{display:none}
.schootsveld{fill:#d3dbdf;fill-opacity:.08;stroke:#8b979e;stroke-opacity:.6;stroke-dasharray:3 3}
.schootsveld.sel{fill-opacity:.14;stroke:#4fd2ee;stroke-opacity:.9}
.kdriehoek{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--fg3);display:inline-block}
#windhud .thm.bron{border-top:0;padding-top:0;margin-top:0;color:var(--fg3);font-size:9.5px}

/* Beelden bekijken (toegevoegd 30-10-2026): vegen, pijlen, alle beelden per dag, volledig scherm */
.frame{aspect-ratio:4/3}
.viewer{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.viewer:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.vpijl{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:56px;background:rgba(10,13,15,.6);border:1px solid var(--line2);color:var(--fg);font:400 26px/1 var(--ui);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;opacity:0;transition:opacity .15s}
.vpijl.links{left:6px}.vpijl.rechts{right:6px}
.vpijl:disabled{opacity:0!important;pointer-events:none}
.viewer:hover .vpijl,.viewer:focus-within .vpijl,.vpijl:focus-visible{opacity:1}
@media (hover:none){.vpijl{opacity:.85}}
.dagkop{font:600 10px/1 var(--ui);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);padding:12px 0 6px}
.dagkop:first-child{padding-top:2px}
.thumbs button{position:relative}
.thumbs img{aspect-ratio:4/3}
.thumbs button span{position:absolute;left:0;bottom:0;padding:1px 3px;background:rgba(10,13,15,.75);font:400 9.5px/1.3 var(--mono);color:var(--fg2)}
.thumbs button.on span{color:var(--accent)}
#lightbox{position:fixed;inset:0;z-index:3000;background:#000;display:grid;grid-template-rows:minmax(0,1fr) auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#lbImg{width:100%;height:100%;object-fit:contain;min-height:0;-webkit-user-drag:none}
#lightbox .vpijl{opacity:.85;top:calc(50% - 24px)}
.lb-cap{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--panel);border-top:1px solid var(--line);font:400 12px/1.3 var(--mono);color:var(--fg2)}
.lb-cap span:first-child{flex:1;color:var(--fg)}

/* Windroos rustig (toegevoegd 30-10-2026, wens van Pieter): doorzichtig en compact. Duidelijk is de oude stijl. */
.seg-klein{margin:8px 0 4px}
.seg-klein button{padding:6px 0;font-size:9.5px}
#windhud{transition:background .2s,border-color .2s}
#windhud.rustig{background:rgba(10,13,15,.42);border-color:rgba(43,54,61,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:6px 8px;gap:2px 8px}
#windhud.rustig svg{width:52px;height:52px;grid-row:span 2}
#windhud.rustig .roos-pijl{fill-opacity:.6}
#windhud.rustig .roos-uit{fill-opacity:.6}
#windhud.rustig .roos-ring{stroke-opacity:.5}
#windhud.rustig .k:nth-of-type(n+3),#windhud.rustig .thm{display:none}
#windhud.rustig .k b{font-size:13px}
#windhud.rustig .k{color:var(--fg)}
#timebar.rustig{background:rgba(10,13,15,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* Telefoon (toegevoegd 30-10-2026) */
@media (max-width:900px){
  #right{max-height:86%}
  #right .ins-head{padding-top:20px}
  #right .ins-head::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:3px;margin-left:-18px;background:var(--line2);border-radius:2px}
  .lijst button{padding:12px 2px}
  .ly-row{padding:12px 0}
  .x{padding:9px 12px}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  #windhud.rustig svg{width:44px;height:44px}
}
@media (max-width:900px){
  /* op de telefoon alleen de naam bij een camera; het tijdstip staat in de lijst en het paneel */
  .mk .t small{display:none}
  .ver .mk .t{font-size:9.5px}
}
.ik{padding:16px 0 0;font:400 11px/1.6 var(--mono);color:var(--fg2);display:flex;flex-wrap:wrap;gap:4px 10px}
.ik b{color:var(--fg);font-weight:500}
.ik a{text-decoration:none}

/* Afschot (toegevoegd 30-10-2026): kruisje op de kaart, formulier in het rechterpaneel */
.mk-a svg path{stroke:#e8eef0;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 2px #000)}
.mk-a.sel svg path{stroke:var(--accent)}
.mk-a.sel::before{inset:-5px}
.akruis{width:9px;height:9px;display:inline-block;background:linear-gradient(45deg,transparent 42%,var(--fg2) 42%,var(--fg2) 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--fg2) 42%,var(--fg2) 58%,transparent 58%)}
.knop.breed{width:100%;padding:10px 12px;margin-bottom:8px}
.knop.groot{padding:12px;font-size:11.5px}
.knoppen{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 0}
.form label{display:grid;gap:4px;font:500 10.5px/1.2 var(--ui);font-stretch:88%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.form label.ch{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font:400 12px/1.2 var(--ui);color:var(--fg2);align-self:end;padding-bottom:9px}
.form input[type=text],.form input[type=date],.form input[type=time],.form input[type=number],.form textarea{font:400 14px/1.3 var(--mono);color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:1px;padding:8px;min-width:0;width:100%;text-transform:none;letter-spacing:0}
.form textarea{font-family:var(--ui);resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent)}
.form select{font-size:14px;text-transform:none;letter-spacing:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#mapwrap.aanwijzen #map{cursor:crosshair}
#aanwijsHud{top:12px;left:50%;transform:translateX(-50%);padding:10px 14px;display:flex;gap:14px;align-items:center;font:500 12px/1.3 var(--ui);max-width:calc(100% - 24px);border-color:var(--accent)}
#btnSchotMob{border-left:1px solid var(--line2)!important}
@media (max-width:900px){
  .form input[type=text],.form input[type=date],.form input[type=time],.form input[type=number],.form textarea,.form select{font-size:16px}
  #aanwijsHud{top:auto;bottom:110px}
}
.form select{color:var(--fg)}

/* Gewassen (toegevoegd 30-10-2026): kleuren in 01_ontwerp/stijl.md */
.legenda{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 0 4px;font:400 10.5px/1.4 var(--mono);color:var(--fg2)}
.legenda i{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:-1px;border-radius:1px}
.legenda .note{flex-basis:100%;margin:4px 0 0}
.mk-a .aantal{position:absolute;left:9px;top:-9px;font:600 9.5px/1 var(--mono);color:#0a0d0f;background:#e8eef0;padding:1px 3px;border-radius:1px;pointer-events:none}
.mk-a.sel .aantal{background:var(--accent)}

/* Aanzit (toegevoegd 30-10-2026) */
#aanzitHud{top:12px;left:12px;padding:6px 6px 6px 12px;display:flex;align-items:center;gap:6px;border-color:var(--accent);max-width:calc(100% - 24px);font:500 12px/1.2 var(--ui)}
#aanzitHud .live{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;gap:6px}
#aanzitHud b{font-weight:500;color:var(--accent)}
#aanzitHud .knop{padding:9px 10px}
#btnAanzitMob{border-left:1px solid var(--line2)!important}
#btnAanzitMob.loopt{color:var(--accent)}
.lijst .nm small{display:block;font:400 10px/1.3 var(--mono);color:var(--fg3);overflow:hidden;text-overflow:ellipsis}
.soortknoppen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.soortknoppen button{background:var(--raise);border:1px solid var(--line2);padding:12px 4px;font:600 12px/1 var(--ui);cursor:pointer;border-radius:1px}
.soortknoppen button.on{border-color:var(--accent);color:var(--accent)}
.teller{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.teller button{width:48px;height:44px;background:var(--raise);border:1px solid var(--line2);font:500 20px/1 var(--mono);cursor:pointer;border-radius:1px}
.teller span{font-size:24px;min-width:40px;text-align:center}
.wlijst{list-style:none;margin:0;padding:0}
.wlijst li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.wlijst .nm{flex:1}
.wlijst .tm{font:400 11px/1 var(--mono);color:var(--fg3)}
.form input[type=datetime-local]{font:400 14px/1.3 var(--mono);color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:1px;padding:8px;min-width:0;width:100%}
@media (max-width:900px){
  #aanzitHud{top:60px;left:12px;right:58px}  /* rechts ruimte voor de zoomknoppen */
  .form input[type=datetime-local]{font-size:16px}
}
#mobbtn button{white-space:nowrap}
@media (max-width:400px){#mobbtn button{padding:9px 9px;letter-spacing:.08em}}

/* Labels en kaders van de dierherkenning (toegevoegd 30-10-2026) */
.kaders{position:absolute;inset:1px;pointer-events:none}
.kader{position:absolute;border:1px dashed rgba(232,238,240,.85)}
.kader span{position:absolute;left:-1px;top:-15px;background:rgba(10,13,15,.75);color:#e8eef0;font:400 9.5px/1.3 var(--mono);padding:0 3px;white-space:nowrap}
.labelregel{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:400 12px/1.4 var(--mono)}
.soortknoppen.klein button{padding:9px 2px;font-size:11px}

/* Uitkomst van een schot (toegevoegd 03-11-2026): kruisje raak, oranje kruisje aangeschoten, rondje mis */
.seg3{grid-template-columns:repeat(3,1fr)}
.seg3 button{padding:10px 0}
.mk-a svg circle{fill:none;stroke:#e8eef0;stroke-width:1.8;filter:drop-shadow(0 0 2px #000)}
.mk-a.aangeschoten svg path{stroke:var(--warn)}
.mk-a.sel svg circle{stroke:var(--accent)}
.akruis.aangeschoten{background:linear-gradient(45deg,transparent 42%,var(--warn) 42%,var(--warn) 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--warn) 42%,var(--warn) 58%,transparent 58%)}
.akruis.mis{background:none;border:1.5px solid var(--fg2);border-radius:50%}

/* Weer, licht en maan bij een beeld (toegevoegd 03-11-2026) */
.omst{display:grid;gap:3px;font:400 11.5px/1.45 var(--mono);color:var(--fg2)}
.omst b{font-weight:500;color:var(--fg)}
.omst .sep::before{content:"\00b7";margin:0 6px;color:var(--fg3)}
.omst .bron{font-size:10px;color:var(--fg3)}

/* Wind afspelen en verwachting per dag (toegevoegd 03-11-2026, wens van Pieter) */
.draai{transition:transform .32s linear}
@media (prefers-reduced-motion:reduce){.draai{transition:none}}
#windhud{cursor:pointer}
#windhud.fout{cursor:default}
.tb-speel{width:26px;height:22px;flex:none;background:var(--raise);border:1px solid var(--line2);border-radius:1px;cursor:pointer;display:grid;place-items:center;padding:0;align-self:center}
.tb-speel svg{width:11px;height:11px}
.tb-speel path{fill:var(--fg)}
.tb-speel.on{border-color:var(--accent)}
.tb-speel.on path{fill:var(--accent)}
.tb-top{align-items:center}
.tb-verw{margin-left:auto}
.tb-strook{height:3px;border-radius:1px}
#tbMaan{height:2px;margin-top:1px}
.tb-ticks span.dagstart{color:var(--fg);font-weight:600}
.dagdelen{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dagdeel{display:grid;gap:3px;text-align:left;background:var(--panel2);border:1px solid var(--line2);border-radius:1px;padding:8px;cursor:pointer;font:400 11px/1.4 var(--mono);color:var(--fg2)}
.dagdeel:hover{border-color:var(--fg3)}
.dagdeel.on{border-color:var(--accent)}
.dagdeel .eyebrow{color:var(--fg2)}
#windhud .thm#wLucht{border-top:0;padding-top:0;margin-top:0}
@media (max-width:900px){
  .tb-verw{font-size:10px}
  #timebar .eyebrow{display:none}
}

/* Logpagina (toegevoegd 03-11-2026): grote knoppen, weinig in beeld, voor op de kansel */
body.logbody{overflow:auto}
#log{max-width:480px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.log-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.log-kop .eyebrow{display:block;margin-top:5px}
.log-ik{font:400 12px/1.5 var(--mono);color:var(--fg2);text-align:right;display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:flex-end}
.log-ik a{text-decoration:none}
.log-sec{display:grid;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.log-sec:last-child{border-bottom:0}
.log-sec h1{margin:0;font:600 26px/1.1 var(--ui);font-stretch:78%;letter-spacing:.01em}
.log-plekken{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.log-plek{background:var(--panel);border:1px solid var(--line2);border-radius:1px;padding:14px 10px;font:500 14px/1.2 var(--ui);text-align:left;cursor:pointer;min-height:52px;overflow-wrap:anywhere}
.log-plek.on{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
#lGps{grid-column:1/-1;text-align:center}
.log-groot{width:100%;min-height:64px;background:var(--raise);border:1px solid var(--line2);border-radius:1px;font:700 16px/1 var(--ui);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.log-groot.acc{border-color:var(--accent);color:var(--accent)}
.log-groot.gevaar{border-color:var(--crit);color:var(--crit)}
.log-groot:disabled{opacity:.4;cursor:default}
.log-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.log-knoppen .log-groot{min-height:88px;font-size:18px}
.log-duur{margin:0;font:400 14px/1.4 var(--mono);color:var(--fg2)}
.log-duur b{font-size:22px;color:var(--fg);font-weight:500}
.log-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.log-lijst li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font:400 13px/1.4 var(--ui)}
.log-lijst small{display:block;font:400 11px/1.4 var(--mono);color:var(--fg3)}
.log-lijst .lnk{font-size:13px;padding:4px 0}
.log-soorten button{padding:16px 4px;font-size:14px}
.log-uitkomst button{padding:16px 0;font-size:12px}
.log-veld{display:grid;gap:4px;font:500 10.5px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.log-veld select{font-size:16px;padding:10px;color:var(--fg)}
.log-tijden{display:grid;grid-template-columns:1fr;gap:10px}
.log-tijden input{font-size:16px!important}
#log .melding{margin:14px 0 0}
#log .lnk{font-size:13px;justify-self:start}
/* een aanzit weghalen (een test of per ongeluk gestart) en de bevestiging daarvan */
.log-rechts{display:flex;align-items:baseline;gap:12px;text-align:right}
.log-lijst .log-rechts .lnk{flex:none}
.log-lijst [data-weg],.log-lijst [data-wegaanzit]{padding:12px 0 12px 16px;margin:-12px 0}
#log .log-info{margin:14px 0 0}