/* ═══════════════════════════════════════════════════════════════════
   saam2.css — HERONTWERP (InteliGro-styl) vir die monitering-app.
   Selfstandig: GEEN afhanklikheid van saam.css nie. Fonte kom uit
   /lib/fonts/fonts.css (veranderlike Inter/Jost/JetBrains Mono).
   Klas-kontrakte (bevestig teen saam2.js):
     .on  = sigbaar/aktief vir: #slot #vg_slot .paneel #blad #fotoVol
            .ov #qr #touPil #opsom #stale #leegPil #toast #vg_toast
            .igl-lang button
     .aan = aktief vir: .seg button, #segPeriode button, .fchip,
            .mini-vlag, .vlag, .tchip (.ernsK/.stadK), .waarsku-knop
     toaste: "on g" / "on r" / "on gold"
     .tel.hit · .gps-knop.ok/.sleg · .foto-knop.sleg/.opneem ·
     .oorItem.kanWys · #slotFout.wag
   getCss()-tokens wat die JS lees en hier MOET bestaan:
     --green --red --orange --grey --blue --gold --text2 --border
   ═══════════════════════════════════════════════════════════════════ */

/* ══ 1. ONTWERP-TOKENS (§4 van die spek — die kontrak) ══ */
:root{
  /* merk-groen (InteliGro) */
  --green:#41B649; --green2:#2E9E3F; --green-hover:#4FCB59;
  --green-dim:rgba(65,182,73,.16); --green-glow:rgba(65,182,73,.30);
  --igl-green:#40B048; --igl-green-br:#5FD168; --igl-green-gl:rgba(64,176,72,.55);
  /* landing-glas */
  --igl-text:#eef3f1; --igl-text2:#9fb2ad;
  --igl-card:rgba(16,24,30,.55); --igl-card-br:rgba(120,150,140,.18);
  /* oppervlaktes */
  --bg:#0F1419; --panel:#1A1F26; --panel2:#22272F; --panel3:#2A3038;
  --border:#2A2F36; --border2:#363D45; --border3:#454C55;
  /* teks */
  --text:#E6E8EB; --text2:#9AA0A6; --text3:#6B7280; --text4:#4B5159;
  /* status (monitering-semantiek) */
  --gold:#F4B400; --gold-dim:rgba(244,180,0,.18); --gold-light:#FFD680;
  --red:#E07070; --red-dim:rgba(208,80,80,.18);
  --ok:#41B649;          /* skoon / binne limiet */
  --warn:#F4B400;        /* onder drempel / oorgeslaan */
  --alarm:#E85D5D;       /* bo drempel */
  --pes:#F08A3C;         /* waarneming: pes */
  --prob:#3A86B7;        /* waarneming: probleem */
  --wa:#25D366;
  /* getCss()-kontrak: die JS lees hierdie name direk (pin-kleure,
     waarneming-merkers, blok-poligone, grafiek-asse) */
  --orange:#F08A3C;      /* = --pes  (JS: wmerk/pin onder drempel) */
  --blue:#3A86B7;        /* = --prob (JS: probleem-merkers)        */
  --grey:#7A828C;        /* JS: oorgeslaan/geen-data pinne          */
  /* Groeistadium se blaargroen. Dit was tot 2026-08-17 NÊRENS verklaar nie en het
     net as `var(--bio,#9BCB3C)` in één stuk markup geleef. Die keuseblad word nou uit
     JS gebou en kan nie 'n letterlike terugval saamdra nie — sonder hierdie reël
     word die hele color-mix() ongeldig en die teël verloor sy kleur. */
  --bio:#9BCB3C;
  /* radius */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  /* spasiering */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  /* beweging */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-blad:cubic-bezier(.2,.8,.2,1);
  --t-fast:.14s ease; --t-med:.22s var(--ease);
  /* skaduwees */
  --shadow-sm:0 1px 2px rgba(0,0,0,.28),0 1px 1px rgba(0,0,0,.20);
  --shadow:0 2px 5px -1px rgba(0,0,0,.28),0 6px 16px -3px rgba(0,0,0,.34);
  --shadow2:0 6px 16px -4px rgba(0,0,0,.42),0 16px 36px -8px rgba(0,0,0,.5);
  --shadow-float:0 10px 28px -6px rgba(0,0,0,.55),0 4px 10px -3px rgba(0,0,0,.4);
  --glow-green:0 0 0 1px rgba(95,209,104,.35),0 8px 22px -5px rgba(65,182,73,.5);
  /* z-skaal */
  --z-kaart-el:500; --z-pmob:9000; --z-blad:9600; --z-oorlegsel:99980;
  --z-modaal:100000; --z-toast:100002;
  /* fonte */
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-kop:'Jost',var(--f-ui);
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ══ 2. BASIS ══ */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  background:var(--bg);color:var(--text);
  font-family:var(--f-ui);font-size:14px;line-height:1.5;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}
img{max-width:100%}
.mono{font-family:var(--f-mono)}
.wenk{font-size:11px;color:var(--text3);line-height:1.5;margin:4px 2px 8px}

/* iOS-outozoem: ALLE vorm-kontroles minstens 16px */
input,select,textarea{font-size:16px !important;font-family:inherit;color:var(--text)}

/* ══ 3. GEDEELDE KOP (#appKop, §2.1) ══ */
#appKop{
  flex:0 0 auto;height:auto;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;padding-top:env(safe-area-inset-top,0px);
  background:var(--panel);position:relative;z-index:120;
  box-shadow:0 1px 0 var(--border),0 6px 18px -8px rgba(0,0,0,.5);
}
.brand-mini{display:flex;align-items:center;gap:8px;font-family:var(--f-kop);
  font-weight:600;font-size:15px;color:var(--text);letter-spacing:.2px}
.brand-gogga-s{display:grid;place-items:center;color:var(--igl-green-br)}
.brand-gogga-s svg{display:block}
#saamTop{display:flex;align-items:center}
/* JS stel inline display:flex op #saamToggle — moenie display hier stel nie */
.seg{gap:2px;background:var(--panel2);border:1px solid var(--border2);
  border-radius:var(--r-pill);padding:3px;align-items:center}
/* ≥44px raakteiken op 'n foon (M2) — hoogte via padding/min-height, nie die
   font nie; #appKop se height:auto + min-height vang die effense groei op. */
.seg button{background:none;border:none;color:var(--text2);
  font:600 12px var(--f-ui);padding:6px 16px;min-height:44px;
  border-radius:var(--r-pill);transition:background var(--t-med),color var(--t-med)}
.seg button.aan{background:var(--green);color:#fff;box-shadow:0 2px 8px -2px var(--green-glow)}
.seg button:active{transform:scale(.96)}

/* ══ 4. MODUS-HOUERS ══ */
/* JS wissel met style.display="" — die CSS-waarde hieronder geld dan */
#mode-kyk,#mode-vang{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}

/* ══ 5. SUBKOP (ry 2, §2.2/§2.4) ══ */
.subkop{flex:0 0 auto;min-height:46px;display:flex;align-items:center;gap:8px;
  padding:4px 12px;background:var(--panel);border-bottom:1px solid var(--border);
  position:relative;z-index:110}
.subkop-akse{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr-pil{display:flex;align-items:center;gap:6px;max-width:60vw;min-height:38px;
  padding:0 12px;background:var(--panel2);border:1px solid var(--border2);
  border-radius:var(--r-pill);color:var(--text);font:600 13px var(--f-ui);
  overflow:hidden;transition:border-color var(--t-fast),color var(--t-fast)}
.hdr-pil #plaasNaam{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-pil .chev{flex:0 0 auto;color:var(--text3)}
.hdr-pil-s{font-family:var(--f-mono);font-size:11px;color:var(--text2);
  min-width:44px;justify-content:center}
/* Die terugpad na Moniteer — groen omdat dit 'n navigasie is, nie 'n keuse nie */
.hdr-terug{flex:0 0 auto;padding:0 13px 0 9px;background:var(--green-dim);
  border-color:var(--green);color:var(--green2)}
.hdr-terug svg{flex:0 0 auto}
.hdr-ikoon{width:44px;height:40px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:var(--r-md);color:var(--text2);transition:color var(--t-fast),border-color var(--t-fast)}
.hdr-ikoon:active,.hdr-pil:active{transform:scale(.95)}

/* tou-pil (vang): JS wys dit net met .on wanneer die tou nie leeg is nie
   (die JS herskryf nie die teks by 0 nie — dus MOET dit sonder .on weggesteek bly) */
#touPil{display:none;font-family:var(--f-mono);
  border-color:rgba(244,180,0,.45);color:var(--gold-light);background:var(--gold-dim)}
#touPil.on{display:flex}
#naamWys{max-width:44vw}
#naamWys span,#naamWys{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ 6. KYK: kaart + swewende pille ══ */
#kaartWrap{flex:1;min-height:0;position:relative;background:#0a0d10}
#map{position:absolute;inset:0;background:#0a0d10;z-index:1}
.leaflet-control-attribution{font-size:9px;opacity:.55;background:rgba(15,20,25,.6) !important;color:var(--text3) !important}

#opsom,#stale{position:absolute;left:8px;z-index:var(--z-kaart-el);display:none;
  max-width:calc(100% - 16px);padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(26,31,38,.88);border:1px solid var(--border2);color:var(--text);
  font:600 11px var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;box-shadow:var(--shadow-sm)}
#opsom{top:8px}
#opsom.on{display:block}
/* ⛔ #opsom MAG WEN — hy is die enigste plek waar 'n FEIT staan. Sedert die plaas se
   hektaar vooraan bygekom het (2026-09-08) is die reël op 'n 375 px-foon 367 px breed
   teen 'n houer van 357: die `nowrap`-ellips hierbo het "waarnemings" stil afgesny, en
   met driesyfer-tellings sou dit erger word. 'n Strook wat 'n getal wegsteek is erger
   as een wat twee reëls hoog is — die kaart daaronder is nie skaars nie.
   ⚠ #stale BLY nowrap (hy dra een kort sin) en skuif 8 px af sodat 'n tweereël-#opsom
     hom nie oorskryf nie. */
#opsom{white-space:normal;line-height:1.35;text-overflow:clip}
#stale{top:52px;color:var(--gold-light);border-color:rgba(244,180,0,.4)}
#stale.on{display:block}
#leegPil{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:var(--z-kaart-el);display:none;max-width:82%;padding:12px 18px;
  border-radius:var(--r-xl);background:rgba(26,31,38,.92);border:1px solid var(--border2);
  color:var(--text2);font:600 13px var(--f-ui);text-align:center;pointer-events:none;
  box-shadow:var(--shadow)}
#leegPil.on{display:block}
/* ── Plaasname ONDER die pinne op die oorsig-kaart (Jaco 2026-08-06) ──────────
   Was 'n hover-tooltip, en 'n foon het geen hover: elke naam was onsigbaar tot jy
   die pin raakgetik het. Nou 'n permanente etiket; `pasEtiketteAan()` in saam3.js
   verberg die wat bots, sodat 117 plase nie 'n mus van teks word nie. */
.leaflet-tooltip.plaas-etiket{background:rgba(15,20,25,.84);border:1px solid var(--border2);
  border-radius:var(--r-sm);box-shadow:var(--shadow-sm);color:var(--text);
  padding:2px 7px;max-width:136px;white-space:normal;text-align:center;
  font:600 11px/1.25 var(--f-ui);pointer-events:auto;cursor:pointer}
.leaflet-tooltip.plaas-etiket:before{display:none}          /* geen wysertjie */
.leaflet-tooltip.plaas-etiket b,.leaflet-tooltip.plaas-etiket i{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaflet-tooltip.plaas-etiket i{font:500 9.5px/1.25 var(--f-ui);font-style:normal;color:var(--text2)}
.leaflet-tooltip.plaas-etiket.weg{display:none}
/* Ver uitgezoem (zoem < 11, gestel deur pasEtiketteAan): net die naam, kleiner en
   nouer — so pas daar meer name op die skerm voor hulle begin bots. */
.leaflet-tooltip-pane.kort .plaas-etiket{max-width:104px;padding:1px 5px;font-size:10px}
.leaflet-tooltip-pane.kort .plaas-etiket i{display:none}

/* ══ BLOK-ETIKET ══ die bloknaam + sy hektaar, in die middel van sy poligoon
   (Jaco 2026-09-08: "ek wil die hektare en die blokgroottes sien").
   GOUD, want dit hoort by die goue poligoon — 'n neutrale etiket sou soos 'n
   los merker gelees het. GEEN agtergrondplaat nie: 'n blok is klein op die skerm
   en 'n gevulde blokkie per blok maak van 'n boord 'n mosaïek; die swart
   text-shadow hou hom leesbaar oor satellietbeeld én oor die kaartlaag.
   ⛔ pointer-events:none — die poligoon self is `interactive:false` sodat 'n
   lokval-pin daaronder klikbaar bly; 'n etiket wat klikke vang, sou daardie
   keuse stil ongedaan maak. */
.leaflet-tooltip.blok-etiket{background:none;border:0;box-shadow:none;
  padding:0;max-width:120px;white-space:normal;text-align:center;
  color:var(--gold-light);font:700 11px/1.2 var(--f-ui);pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.85)}
.leaflet-tooltip.blok-etiket:before{display:none}            /* geen wysertjie */
.leaflet-tooltip.blok-etiket b,.leaflet-tooltip.blok-etiket i{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaflet-tooltip.blok-etiket i{font:600 10px/1.2 var(--f-mono);font-style:normal;
  color:#fff;opacity:.92}
.leaflet-tooltip.blok-etiket.weg{display:none}

/* Die pad TERUG na al die plase saam (Jaco 2026-08-06). Sit links-onder: #filterPil
   is middel-onder en die Leaflet-erkenning regs-onder. */
#alleP{position:absolute;left:8px;bottom:14px;z-index:var(--z-kaart-el);
  display:none;align-items:center;gap:5px;max-width:calc(100% - 16px);min-height:38px;
  padding:0 14px 0 10px;border-radius:var(--r-pill);
  background:var(--green-dim);border:1px solid var(--green);color:var(--green2);
  font:600 12.5px var(--f-ui);white-space:nowrap;box-shadow:var(--shadow)}
#alleP.on{display:flex}
#alleP.hoog{bottom:60px}    /* die filter-pil staan onder — sien wysFilterPil() */
#alleP svg{flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none}
#alleP:active{transform:scale(.95)}

/* ══ STREEK-BALK ══ die kruis-plaas pes-kaart oor tyd (Jaco 2026-08-06).
   Sit heel onder oor die volle breedte; #alleP kry .hoog en skuif bo-op hom. */
#streekBalk{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-kaart-el);
  display:none;flex-direction:column;gap:7px;padding:9px 8px calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(14,17,22,.94) 62%,rgba(14,17,22,0));
  pointer-events:none}
#streekBalk.on{display:flex}
#streekBalk > *{pointer-events:auto}

/* Ry 1 — die pes-chips. Horisontaal skuifbaar: die lys kom uit WAT WERKLIK GEVIND
   IS, dus is die lengte data-afhanklik en mag nooit die kaart oorwoeker nie. */
#streekChips{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1px 0}
#streekChips::-webkit-scrollbar{display:none}
.schip{flex:0 0 auto;min-height:40px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--panel2);border:1px solid var(--border);color:var(--text2);
  font:600 12px var(--f-ui);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.schip.aan{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 4px 16px -3px var(--green-glow)}
.schip:active{transform:scale(.96)}
/* Die bron-ikoon is nie versiering nie: 'n motvangs uit 'n lokval en 'n oog-waarneming
   is TWEE VERSKILLENDE METINGS wat nooit saamgetel word nie, en die ikoon is die enigste
   plek waar die mens dit sien. */
.schip svg{flex:0 0 auto;width:12px;height:12px;stroke:currentColor;stroke-width:2;
  fill:none;opacity:.75}
.schip.aan svg{opacity:1}
/* FCM-X = steriele uitgelate motte. Dit is DOELBEWUS nie plaagdruk nie, en die chip
   moet anders lyk sodat niemand dit as druk lees nie. */
.schip.steriel{border-style:dashed;color:var(--text3)}
.schip.steriel.aan{background:var(--grey);border-color:var(--grey);color:#fff;box-shadow:none}

/* Ry 2 — die tyd-kontrole */
#streekTyd{display:flex;align-items:center;gap:9px}
#streekSpeelKnop{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green-dim);border:1px solid var(--green);color:var(--green2)}
#streekSpeelKnop svg{stroke:currentColor;stroke-width:2;fill:none}
#streekSpeelKnop.speel svg{fill:currentColor}
#streekSpeelKnop:active{transform:scale(.93)}
#streekSkuif{flex:1 1 auto;min-width:0;height:44px;background:none;accent-color:var(--green)}
/* ≥16px, anders zoem iOS in wanneer die kontrole fokus kry. */
#streekWeek{flex:0 0 auto;min-width:74px;text-align:right;
  font:600 16px var(--f-mono,var(--f-ui));color:var(--text2)}

/* Die drie EERLIKE toestande van 'n plaas-pin op die streekkaart.
   ⚠ Dit is die hele punt van die funksie: "nie besoek nie" en "besoek, niks gekry nie"
   MOET verskillend lyk, anders lieg die kaart. Geen kleur = geen data. */
.plaas-pin.st-ongekyk{background:transparent;border:1.5px dashed var(--grey);
  color:var(--grey);opacity:.55}
.plaas-pin.st-skoon{background:var(--green2);border-color:var(--green2);opacity:.9}
.plaas-pin.st-gevind{background:var(--orange);border-color:var(--orange)}
.plaas-pin.st-erg{background:var(--red);border-color:var(--red)}
/* "Nuwe front" — die pes duik hier vir die EERSTE keer op, op 'n plek waar vroeër
   gekyk is sonder 'n vonds. Dit is die enigste bewegings-maat wat by n=1 eerlik is. */
.plaas-pin.st-front{box-shadow:0 0 0 3px rgba(224,112,112,.85),0 0 12px 2px rgba(224,112,112,.5)}
.plaas-pin.st-eerste{box-shadow:0 0 0 2px rgba(240,138,60,.7)}
.plaas-pin .st-n{font:700 10px var(--f-ui);color:#fff;line-height:1}

/* Die "net hierdie pes"-pil (uit 'n ?pes=-skakel) — klik maak die filter skoon */
#filterPil{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:var(--z-kaart-el);max-width:88%;min-height:38px;padding:0 15px;
  border-radius:var(--r-pill);background:var(--green);border:1px solid var(--green);
  color:#fff;font:600 12.5px var(--f-ui);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;box-shadow:0 6px 20px -4px var(--green-glow)}

/* ══ 7. FILTER-CHIPS ══ (die KYK-DOCK self is 2026-07-29 verwyder — sien #verslag) */
.fchip{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--panel2);border:1px solid var(--border);color:var(--text2);
  font:600 12px var(--f-ui);display:inline-flex;align-items:center;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.fchip.aan{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 4px 16px -3px var(--green-glow)}
.fchip:active{transform:scale(.96)}
/* Klas-gebaseer, nie #segPeriode nie: die dock is weg en die Verslag-blad
   (#vsPeriode) gebruik dieselfde segment. */
/* WRAP, nie overflow-x nie (Jaco 2026-08-18: ses periodes i.p.v. vier). Ses knoppies
   is ~332px breed: op 360/375px pas hulle nog net-net in een ry, maar op 'n 320px-foon
   (SE, ou Android) nie meer nie. 'n Segment wat oorloop sonder om te wikkel of te rol,
   maak sy laaste opsies ONBEREIKBAAR — en dit sou juis "Seisoen" wees, die een wat 'n
   boer die meeste aflaai. Twee rye van 38px hou elke raakteiken heel.
   flex:0 0 auto, doelbewus SONDER grow: 0 verhoed krimp (white-space:nowrap +
   overflow:hidden sou die teks stilweg afsny), en géén grow verhoed die lelike geval
   waar 'n oorgeloopte "Seisoen" alleen op ry twee tot die volle 292px oopgerek word.
   Met grow=0 hou hy sy eie breedte en lyk die tweede ry soos 'n vervolg van die eerste. */
.seg-periode{display:flex;flex-wrap:wrap;background:var(--panel2);
  border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg-periode button{flex:0 0 auto;padding:8px 10px;min-height:38px;font:500 11px var(--f-ui);
  color:var(--text3);border:none;background:none;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast)}
.seg-periode button + button{border-left:1px solid var(--border)}
.seg-periode button.aan{background:var(--green);color:#fff;font-weight:600}

/* ══ 8. KAART-MERKERS (§3.14 — JS skryf kleur/rand inline) ══ */
/* divIcon-boks is 20×28 (anker 10,28): sentreer die 28px-sirkel daarop */
.pin{width:28px;height:28px;margin-left:-4px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pin .pin-n{font:700 11px var(--f-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* divIcon-boks 22×22 (anker middel) */
.wmerk{width:26px;height:26px;margin:-2px 0 0 -2px;border-radius:7px;
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.wmerk span{font-size:12px;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* P5 — die drie toestande van 'n waarneming-merker.
   SKOON: klein, rond, geen ikoon. "Hier is gekyk en dit is skoon" is 'n antwoord en
   hoort sigbaar te wees, maar dit mag nie om aandag meeding met 'n egte vonds nie. */
.wmerk.wskoon{width:14px;height:14px;margin:0;border-radius:50%;border-width:1.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.45)}
/* ONBEKEND: gesien, maar die erns is nie aangeteken nie (of 'n kas van voor P5). Die
   stippellyn se hele taak is om te se "ons weet nie hoe erg nie" — dit mag NOOIT soos
   'n graad lyk nie, want dan lees 'n mens 'n syfer wat nie bestaan nie. */
.wmerk.wonbekend{border-style:dashed;border-color:rgba(255,255,255,.7)}
/* GEGRADEER: grootte, randdikte en randhelderheid kom uit die graad en word inlyn
   gestel — hier bly net wat vir almal geld. */
.wmerk.wgraad{border-radius:7px}

/* Die legende. Sonder haar is 'n gegradeerde kaart 'n raaiskoot: 'n mens sien dat die
   kolle verskil en weet nie waarin nie. Sy sit ONDER die kaart se eie kontroles en vou
   op 'n klein skerm toe — die gradering is 'n PC-funksie (Jaco se versoek), en op 'n
   foon sou sy meer van die kaart wegvat as wat sy verklaar. */
.kaart-leg{position:absolute;left:10px;bottom:10px;z-index:620;max-width:250px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--border);border-radius:10px;padding:8px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);font-size:11px;color:var(--text2)}
.kaart-leg h4{margin:0 0 6px;font-size:11px;color:var(--text);font-weight:700}
.kaart-leg .leg-ry{display:flex;align-items:center;gap:7px;margin:3px 0;line-height:1.3}
.kaart-leg .leg-kol{flex:0 0 auto;border-radius:5px;border:2px solid rgba(255,255,255,.85)}
.kaart-leg .leg-kol.rond{border-radius:50%}
.kaart-leg .leg-kol.stippel{border-style:dashed}
.kaart-leg .leg-afd{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;
  padding-top:6px;border-top:1px solid var(--border)}
.kaart-leg .leg-afd span{display:inline-flex;align-items:center;gap:4px}
.kaart-leg .leg-afd i{width:10px;height:10px;border-radius:3px;display:inline-block}
.kaart-leg .leg-vou{display:none}
@media (max-width:700px){
  /* Op 'n foon vou sy toe tot 'n knoppie. ⚠ 700px, nie 820px nie: 'n laptopvenster
     van 800px is 'n PC en juis die geval waarvoor die gradering gebou is — by 820
     het die legende daar toegevou en die kolle sonder verklaring gelaat. `display:none` op die HELE legende sou die
     inligting op 'n tablet weggeneem het waar daar wel plek is. */
  .kaart-leg{max-width:none;left:auto;right:10px;bottom:10px;padding:6px 8px}
  .kaart-leg .leg-lyf{display:none}
  .kaart-leg.oop .leg-lyf{display:block}
  .kaart-leg .leg-vou{display:block;background:none;border:0;color:var(--text2);
    font-size:11px;cursor:pointer;padding:2px 4px;min-height:28px}
}
/* Die week se RONDE (Jaco 2026-08-12). Rond, nie 'n pin nie: dit is 'n gebied wat
   nagegaan is, nie 'n enkele vonds. Die syfer is die hoogste voorkoms, sodat 'n mens
   sonder om te klik kan sien of hierdie punt aandag verg. */
.rmerk{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;color:#fff;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(0,0,0,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
/* divIcon-boks 30×30 (anker 15,30) */
.plaas-pin{width:34px;height:34px;margin:-4px 0 0 -2px;border-radius:50%;
  background:var(--panel);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.plaas-pin span{font-size:15px;line-height:1}

/* ══ 9. AANMELD-SKERM (§1 — suiwer CSS-agtergrond, geen beeld/Ken Burns) ══ */
.aanmeld{position:fixed;inset:0;z-index:var(--z-oorlegsel);overflow-y:auto;
  -webkit-overflow-scrolling:touch;background:var(--bg);display:none}
.aanmeld.on{display:block}
.aanmeld-bg{position:fixed;inset:-1%;
  background:linear-gradient(165deg,#0a1018 0%,#0c1319 45%,#10181f 100%)}
.aanmeld-veil{position:fixed;inset:0;pointer-events:none}
.aanmeld-veil.v1{background:radial-gradient(120% 90% at 70% 18%,
  rgba(7,11,16,.10) 0%,rgba(7,11,16,.50) 55%,rgba(4,7,11,.74) 100%)}
.aanmeld-veil.v2{background:linear-gradient(180deg,rgba(6,10,15,.42) 0%,
  transparent 30%,rgba(6,10,15,.06) 60%,rgba(5,8,12,.68) 100%)}
.aanmeld-veil.v3{background:radial-gradient(80% 60% at 50% 120%,
  rgba(64,176,72,.16) 0%,transparent 60%)}
.aanmeld-mid{position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:clamp(28px,6vh,56px) 20px calc(env(safe-area-inset-bottom,0px) + 24px)}
.aanmeld-brand{display:flex;align-items:center;gap:12px;
  animation:igl-rise .8s var(--ease) .05s both}
.brand-gogga{display:grid;place-items:center;color:var(--igl-green-br);
  filter:drop-shadow(0 0 14px rgba(95,209,104,.35))}
.brand-naam{font-family:var(--f-kop);font-weight:600;font-size:clamp(30px,8vw,40px);
  color:var(--igl-text);letter-spacing:-.5px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.aanmeld-tag{font-size:12px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--igl-text2);text-align:center;animation:igl-rise .8s var(--ease) .18s both}
.aanmeld-paneel{width:100%;max-width:420px;background:var(--igl-card);
  border:1px solid var(--igl-card-br);border-radius:18px;padding:26px 22px;
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.7);animation:igl-rise .8s var(--ease) .32s both}
.aanmeld-voet{display:flex;align-items:center;gap:14px;
  animation:igl-rise .8s var(--ease) .55s both}
.aanmeld-powered{font-size:11px;color:var(--igl-text2)}
@keyframes igl-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* paneel-inhoud (§1.2) */
.aanmeld-h{font-family:var(--f-kop);font-weight:600;font-size:20px;
  color:var(--igl-text);margin:0 0 4px}
.aanmeld-sub{font-size:13px;color:var(--igl-text2);margin:0 0 16px;line-height:1.5}
.aanmeld-lbl{display:block;font-size:12px;font-weight:600;color:var(--igl-text2);
  margin-bottom:6px;letter-spacing:.3px}
.kode-in{width:100%;padding:14px 12px;border-radius:11px;margin-bottom:14px;
  background:rgba(4,8,12,.6);border:1px solid rgba(120,150,140,.22);color:#fff;
  font-family:var(--f-mono);font-size:24px !important;
  text-align:center;letter-spacing:.45em;text-transform:uppercase;text-indent:.45em;
  transition:border-color .25s,box-shadow .25s}
.kode-in::placeholder{color:#5d6f6a;letter-spacing:.2em;font-size:15px}
.kode-in:focus{outline:none;border-color:var(--igl-green);box-shadow:0 0 0 3px rgba(64,176,72,.18)}
.aanmeld-hulp{font-size:12px;text-align:center;color:var(--igl-text2);margin:14px 0 0}

/* fout/ok-boodskap (JS skryf net textContent in #slotFout) */
.igl-msg{font-size:13px;margin:0 0 14px;padding:10px 13px;border-radius:10px;line-height:1.45}
.igl-msg.err{background:rgba(224,90,90,.14);border:1px solid rgba(224,90,90,.4);color:#ffb4b4}
.igl-msg.ok{background:rgba(64,176,72,.14);border:1px solid rgba(64,176,72,.4);color:#aef0b4}
#slotFout:empty{display:none}
#slotFout{display:block}
#slotFout.wag{background:rgba(120,150,140,.12);border-color:rgba(120,150,140,.3);color:var(--igl-text2)}

/* primêre landing-knoppie */
.igl-btn{width:100%;padding:14px;border:none;border-radius:11px;
  font-family:var(--f-kop);font-weight:600;font-size:15px;color:#06210b;
  background:linear-gradient(135deg,var(--igl-green-br),var(--igl-green));
  box-shadow:0 10px 26px -8px var(--igl-green-gl);
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  transition:transform .2s,box-shadow .2s,filter .2s}
.igl-btn:active{transform:translateY(1px)}
.igl-btn[disabled]{opacity:.6;cursor:default;transform:none}

/* taal-pil (nuwe IIFE sit .on op die aktiewe knoppie) */
.igl-lang{display:inline-flex;gap:2px;background:rgba(10,16,20,.6);
  border:1px solid var(--igl-card-br);border-radius:var(--r-pill);padding:3px}
.igl-lang button{background:none;border:none;color:var(--igl-text2);
  font:600 12px var(--f-ui);padding:4px 11px;min-height:38px;min-width:48px;
  border-radius:var(--r-pill);transition:.2s}
.igl-lang button.on{background:var(--igl-green);color:#06210b}

/* vang-tokenslot (§1.3) */
.aanmeld-wabadge{width:48px;height:48px;border-radius:14px;margin-bottom:12px;
  display:grid;place-items:center;color:var(--wa);
  background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3)}
.aanmeld-stappe{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.stap{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--igl-text)}
.stap-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--green-dim);color:var(--green2);
  font:600 11px var(--f-mono)}

/* ══ 10. VOLSKERM-PANEEL-SKULP (.paneel, §3.0) ══ */
.paneel{position:fixed;inset:0;z-index:var(--z-blad);background:var(--bg);
  display:none;flex-direction:column}
.paneel.on{display:flex;animation:paneelIn .26s var(--ease)}
@keyframes paneelIn{from{opacity:.45;transform:translateX(10px)}to{opacity:1;transform:none}}
.paneel-kop{flex:0 0 auto;min-height:52px;display:flex;align-items:center;gap:8px;
  padding:4px 10px;padding-top:calc(env(safe-area-inset-top,0px) + 4px);
  background:var(--panel);border-bottom:1px solid var(--border)}
.paneel-terug{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:none;border-radius:var(--r-md);color:var(--text2)}
.paneel-terug:active{background:var(--panel2);transform:scale(.94)}
.paneel-ttl{flex:1;min-width:0}
.paneel-ttl .t1{font-family:var(--f-kop);font-weight:600;font-size:16px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paneel-ttl .t1.mono{font-family:var(--f-mono);font-weight:600}
.paneel-ttl .t2{font-size:11px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paneel-ttl .t2.mono{font-family:var(--f-mono)}
.paneel-aksie{flex:0 0 auto;background:none;border:none;min-height:44px;padding:0 12px;
  color:var(--green2);font:600 14px var(--f-ui);border-radius:var(--r-md)}
.paneel-aksie:active{background:var(--green-dim)}
.paneel-aksie-waarsku{flex:0 0 auto;min-height:38px;padding:0 10px;
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.4);
  border-radius:var(--r-md);color:var(--gold-light);font:600 11px var(--f-ui)}
.paneel-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 20px)}
/* flex-wrap + `safe flex-end`: 'n voet mag NOOIT horisontaal uitloop nie. Sonder wrap
   stoot flex-end die oorloop by die LINKERkant uit die viewport uit, en omdat .paneel
   position:fixed is, is daar geen rol om dit terug te haal nie — die knoppie bestaan
   dan wel, maar niemand kan hom druk nie. Dieselfde klas fout as align-items:center
   sonder overflow. `safe` vang die geval waar een kind alleen wyer as die voet is. */
.paneel-voet{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:9px;row-gap:8px;
  justify-content:safe flex-end;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:var(--panel);border-top:1px solid var(--border)}
.paneel-voet .btn-main{flex:1 1 60%;min-width:48%}
.paneel-voet .btn-cancel{flex:0 1 auto}

/* ══ 11. KNOPPIES ══ */
.btn-main{display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:8px 18px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--green-hover),var(--green));
  color:#fff;border:1px solid var(--green);font:600 14px var(--f-ui);white-space:nowrap;
  box-shadow:0 2px 8px -2px rgba(65,182,73,.45);transition:.2s var(--ease)}
.btn-main:active{transform:translateY(1px) scale(.985)}
.btn-main:disabled,.btn-main[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn-main.goud{background:linear-gradient(135deg,#FFD680,var(--gold));
  border-color:var(--gold);color:#241a00;box-shadow:0 2px 8px -2px rgba(244,180,0,.4)}
.btn-cancel{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:9px 18px;border-radius:9px;background:transparent;
  border:1px solid var(--border2);color:var(--text2);font:600 13px var(--f-ui);white-space:nowrap;
  transition:border-color var(--t-fast),color var(--t-fast)}
.btn-cancel:active{transform:translateY(1px) scale(.985)}
.btn-ok{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:9px 18px;border-radius:9px;background:var(--green-dim);
  border:1px solid var(--border3);color:var(--green2);font:600 13px var(--f-ui);white-space:nowrap;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.btn-ok:active{transform:translateY(1px) scale(.985)}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:8px 13px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  font:500 13px var(--f-ui);white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn-sec:active{transform:translateY(1px) scale(.985)}
.btn-sec.donker{background:rgba(15,20,25,.88);border-color:var(--border3);color:#fff}
.teks-skakel{background:none;border:none;min-height:44px;padding:6px 8px;
  color:var(--green2);font:600 13px var(--f-ui);border-radius:var(--r-sm)}
.teks-skakel:active{background:var(--green-dim)}
.kmz-knop{display:flex;width:100%;margin:0 0 12px;min-height:52px;
  border:1px dashed var(--green);background:var(--green-dim);color:var(--green2);
  font:600 14px var(--f-ui)}

/* ══ 12. LYSTE (.lys/.lr, §3.1/§3.5) ══ */
.lys{display:flex;flex-direction:column;gap:8px}
.lr{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;
  width:100%;text-align:left;background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--text);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast)}
.lr:active{background:var(--panel3)}
.lr .lr-info{flex:1;min-width:0}
/* Die openingskerm se plaas-lys gebruik <span> binne 'n <button> (die ou lyste
   gebruik <div>). Sonder dit loop die naam en die onderskrif op EEN reël inmekaar. */
.lr .lr-naam,.lr .lr-meta{display:block}
.lr .lr-naam{font:600 14px var(--f-ui);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .lr-meta{font:400 11px var(--f-ui);color:var(--text3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .lr-pyl{margin-left:auto;flex:0 0 auto;color:var(--text4);font-size:16px;line-height:1}
.lr .lr-merk{margin-left:auto;flex:0 0 auto;font:600 11px var(--f-mono);
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.35)}
/* Die "Alle plase"-ry bo-aan die kieser (Jaco 2026-08-06). Groen omdat dit 'n
   NAVIGASIE is, nie nog 'n plaas in die lys nie — dieselfde taal as .hdr-terug. */
.lr.lr-alle{background:var(--green-dim);border-color:var(--green);margin-bottom:10px}
.lr.lr-alle .lr-naam{color:var(--green2)}
.lr .lr-ik{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--r-md);background:rgba(0,0,0,.22);color:var(--green2)}
.lr .lr-ik svg{stroke:currentColor;stroke-width:2;fill:none}
.lr-skakel{margin-top:14px;color:var(--green2);font:600 13px var(--f-ui)}
.lr-skakel svg{flex:0 0 auto;color:var(--green2)}
.puntHeen{color:var(--green2);font-weight:600;text-decoration:none}
.leeg{text-align:center;color:var(--text3);font-size:13px;padding:40px 20px;line-height:1.6}

/* krummel-balk (vang-lys #lysHdr) */
.krummel{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.krummel .paneel-terug{background:var(--panel2);border:1px solid var(--border2)}
.krummel .t1{font-family:var(--f-kop);font-weight:600;font-size:15px}

/* afdeling-titels + veld-etikette */
.sek-ttl{font:700 10px var(--f-ui);text-transform:uppercase;letter-spacing:1px;
  color:var(--text3);margin:18px 2px 8px}
.paneel-body > .sek-ttl:first-child{margin-top:4px}

/* ══ 13. ONDERSTE VEL #blad (§3.4) ══ */
#blad{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-blad);
  max-width:640px;margin:0 auto;
  max-height:min(72dvh,560px);max-height:min(72vh,560px);
  background:var(--panel);border:1px solid var(--border2);border-bottom:none;
  border-radius:16px 16px 0 0;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .28s var(--ease-blad);
  box-shadow:0 -10px 32px rgba(0,0,0,.55)}
#blad.on{transform:translateY(0)}
#bladHdr{flex:0 0 auto;padding:8px 14px 10px;border-bottom:1px solid var(--border);
  touch-action:none;cursor:grab}
#bladGreep{width:36px;height:4px;border-radius:2px;background:var(--border3);margin:0 auto 8px}
#bladHdr .bh-r{display:flex;align-items:center;gap:10px}
#bladHdr .bh-ttl{flex:1;min-width:0}
#bladHdr .t1{font-family:var(--f-kop);font-weight:600;font-size:16px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bladHdr .t2{font:400 11px var(--f-mono);color:var(--text2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bladHdr .bh-x{flex:0 0 auto;width:44px;height:44px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);font-size:15px}
#bladBody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 16px)}

/* blad-inhoud */
.spark-wrap{background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:10px;margin-bottom:12px}
.spark-wrap svg{width:100%;height:52px;display:block}
.spark-et{font-size:10px;color:var(--text3);font-weight:600;margin-top:4px}
.bes{background:var(--panel2);border:1px solid var(--border);
  border-left:3px solid var(--border3);border-radius:var(--r-lg);
  padding:10px 12px;margin-bottom:8px}
.bes .b-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font:600 13px var(--f-ui)}
.bes .b-kop .bd{color:var(--text)}
.bes .b-kop .bt{flex:0 0 auto;padding:2px 9px;border-radius:var(--r-sm);
  background:var(--panel3);font-family:var(--f-mono);font-weight:700}
.bes .b-sub{font-size:11.5px;color:var(--text2);margin-top:4px;line-height:1.5}
/* ── Oorskryf + bewys (Jaco 2026-08-06) ──────────────────────────────────────
   'n Oorskryf was 'n oranje woordjie tussen die metadata. Nou dra die hele kaart
   'n goue kantlyn en die bewys staan in sy eie blok — DAT hy oorskryf het, hoe ver
   die GPS hom gehad het, en wanneer die foto geklik het. Geen oordeel, net feite. */
.bes.bes-oorskryf{border-left-color:var(--gold)}
.oorskryf-blok{margin-top:8px;padding:8px 10px;border-radius:var(--r-md);
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.35)}
.oorskryf-blok .ob-kop{display:flex;align-items:center;gap:6px;
  font:700 11.5px var(--f-ui);color:var(--gold-light);margin-bottom:3px}
.oorskryf-blok .ob-kop svg{flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none}
.oorskryf-blok .ob-r{font-size:11px;color:var(--text2);line-height:1.55}
.tel-tab{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.tel-tab .tt{background:var(--panel3);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:5px 9px;
  font:600 15px var(--f-mono);color:var(--text)}
.tel-tab .tt .k{display:block;font:700 10px var(--f-ui);text-transform:uppercase;
  letter-spacing:.5px;color:var(--text3);margin-bottom:1px}
.vlae-et{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.vlae-et .ve{background:var(--panel3);border:1px solid var(--border2);color:var(--text2);
  border-radius:var(--r-pill);padding:3px 10px;font:600 10px var(--f-ui)}
.thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--border2);cursor:pointer;background:#000}

/* ══ 14. FOTO-VOLSKERM ══ */
#fotoVol{position:fixed;inset:0;z-index:var(--z-modaal);background:rgba(0,0,0,.95);
  display:none;align-items:center;justify-content:center;padding:14px}
#fotoVol.on{display:flex}
#fotoVol img{max-width:100%;max-height:100%;border-radius:var(--r-md)}
#fotoVol .fv-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;
  width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--border2);
  background:var(--panel);color:#fff;font-size:17px}

/* ══ 15. VERSLAG-BLAD (Jaco 2026-07-29 — vervang die ou #graf en die dock) ══ */
.vs-perry{flex:0 0 auto;display:flex;padding:10px 12px 0}
#vsChips{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--border)}
#vsChips::-webkit-scrollbar{display:none}
#vsSvg{background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:10px;overflow-x:auto}
#vsSvg svg{width:100%;height:auto;display:block;min-width:280px}
.graf-nota{font-size:11px;color:var(--text3);margin-top:10px;line-height:1.5}
.vs-afd{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.vs-h{font-family:var(--f-kop);font-weight:600;font-size:15px;color:var(--text);
  flex:1;min-width:0}
.vs-afd select.kies{flex:0 0 auto;width:auto;min-width:132px;min-height:38px}
/* Die blok-tabel: dieselfde vorm as die PDF s'n, maar rolbaar op 'n foon.
   Die tabel self mag horisontaal rol; die BLAD mag dit nooit doen nie. */
.vs-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--r-xl);background:var(--panel2)}
.vs-t{border-collapse:collapse;width:100%;font-size:12px}
.vs-t th,.vs-t td{padding:7px 9px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--border)}
.vs-t thead th{position:sticky;top:0;background:var(--panel3);color:var(--text2);
  font:600 11px var(--f-ui);z-index:1}
.vs-t tbody tr:last-child td{border-bottom:none}
.vs-t .vs-blok{font-weight:700;color:var(--text)}
.vs-t .vs-kv{font-weight:400;color:var(--text3);margin-left:5px}
.vs-t .vs-sel{text-align:center;font-weight:700;color:#20242a;border-radius:4px}
.vs-t .vs-nie{color:#f0c074}
.vs-t .vs-skoon{color:#8fe6b0}
.vs-leeg{padding:22px 14px;text-align:center;color:var(--text3);font-size:13px}
/* Die lokval-matriks (weke af, blokke oor) — Jaco 2026-09-08.
   Hergebruik .vs-tw/.vs-t; net die week-kolom en die totaal-ry kom by.
   ⚠ Die week-kolom is `position:sticky` sodat 'n mens op 'n foon weet WATTER
     week hy lees terwyl hy oor tien blokke rol. Sonder dit is 'n horisontaal
     gerolde matriks 'n muur van getalle sonder etikette. */
#vsValTabel{margin-bottom:12px}
.vs-t.vs-vt td,.vs-t.vs-vt th{padding:6px 8px}
.vs-t.vs-vt th:first-child,.vs-t.vs-vt .vs-wk{position:sticky;left:0;z-index:2;
  background:var(--panel3);font-weight:700;color:var(--text)}
.vs-t.vs-vt thead th{text-align:center}
.vs-t.vs-vt thead th:first-child{text-align:left}
/* Nagegaan, niks gevang. Dit MOET van 'n leë sel verskil — 'n leë sel beteken
   "nie nagegaan", en die twee wat dieselfde lyk, is die duurste verwarring op
   hierdie blad. Grys en sag, maar sigbaar. */
.vs-t.vs-vt .vs-nul{color:var(--text3);font-weight:400}
.vs-t.vs-vt .vs-rytot{background:var(--panel3);color:var(--text)}
.vs-t.vs-vt tfoot td{border-top:1px solid var(--border);font-weight:700}

/* ══ 16. OORSIG-BLAD (§3.2 — inhoud grotendeels JS-inline) ══ */
.oorItem{border-top:1px solid var(--border)}
.oorItem.kanWys{cursor:pointer;border-left:3px solid var(--green);
  padding-left:8px !important;border-radius:2px}
.oorItem.kanWys:active{background:var(--panel2)}

/* ══ 17. VANG: hoof-lys + dok (§2.4/§3.5) ══ */
/* V1: was 76px vir die dok; die dok is weg (B4). */
#hoof{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 16px)}
.dok{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-pmob);
  max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--panel);border-top:1px solid var(--border2);
  padding:6px 4px calc(env(safe-area-inset-bottom,0px) + 6px);
  box-shadow:0 -10px 32px rgba(0,0,0,.45)}
.dok-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:52px;background:none;border:none;color:var(--text3);
  font:600 10px var(--f-ui);border-radius:var(--r-md);
  transition:color var(--t-fast)}
.dok-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dok-i{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;flex:0 0 auto}
.dok-item:active{transform:scale(.94);color:var(--green2)}

/* ══ 18. VANG: meta-kaarte + vorm-boustene (§3.6/§3.7) ══ */
.vang-meta{background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:12px 14px;margin-bottom:12px}
.vang-meta .vm-r{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:3px 0}
.vang-meta .vm-r .k{color:var(--text3);font-weight:600}
.vang-meta .vm-r .v{color:var(--text);font-weight:600;text-align:right;font-family:var(--f-mono);font-size:12px}
/* 0033: die gewas-kieser sit IN die meta-strook. 44px hoog want dit word met 'n
   handskoen in die boord gedruk; die nota daaronder sê of dit geërf of gestel is. */
.gewas-sel{background:var(--panel2);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:6px 8px;font:inherit;font-size:12px;min-height:32px;max-width:150px}
.gewas-nota{display:block;color:var(--text3);font-weight:500;font-size:11px;margin-top:2px}

/* ── DIE GEWAS-STROOK (2026-09-07) ──
   Watter gewas se peslys nou geld, plus "Wissel gewas". Staan bo elke lys peste:
   die Verkenning se stap 1 en die week se ronde se "Waarvoor kyk jy?".
   ⚠ `:empty` gee 'n leë plekhouer NUL hoogte. Sonder dit sou 'n bladsy wat laai (of 'n
   ou service-worker-skil sonder die nuwe JS) 'n leë gekleurde balk wys — 'n strook wat
   niks sê nie, lyk soos 'n stukkende app. */
.gewas-strook{margin:0 0 10px;padding:9px 10px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border);
  font:600 12.5px/1.4 var(--f-ui);color:var(--text2)}
.gewas-strook:empty{display:none}
.gewas-strook .gs-ry{display:flex;align-items:center;gap:8px}
.gewas-strook .gs-et{flex:1;min-width:0}
.gewas-strook .gs-et b{color:var(--text);font-weight:800}
.gewas-strook .gs-bron{color:var(--text3);font-weight:500}
/* 40px hoog en flex:none — dit word met 'n handskoen in die boord gedruk, en die etiket
   langsaan mag dit nooit dunner druk nie (dieselfde rede as .gewas-sel se 44px-nota). */
.gewas-strook .gs-knop{flex:none;min-height:40px;padding:6px 13px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  font:800 12px var(--f-ui);cursor:pointer}
.gewas-strook .gs-uit{margin-top:8px}
.gewas-strook .gs-uit .gs-knop{width:100%}
.gewas-strook .gewas-sel{flex:1;max-width:none}
/* Botsing: sy keuse verskil van wat die plek sê. Dieselfde oranje as .lig-strook — die
   moniteerder ken die kleur reeds as "kyk hierna", nie as "fout" nie. */
.gewas-strook.bots{color:var(--gold-light);background:var(--gold-dim);
  border-color:rgba(244,180,0,.42)}
.gewas-strook.bots .gs-et b{color:var(--gold-light)}
.gewas-strook.bots .gs-knop{background:rgba(0,0,0,.22);border-color:rgba(244,180,0,.42);
  color:var(--gold-light)}
.anker-kaart{border-left:3px solid var(--gold);background:var(--panel2);
  color:var(--text2);font-size:12.5px;line-height:1.55}
.info-kaart{font-size:13px;line-height:1.55;color:var(--text)}
.info-kaart b{font-family:var(--f-kop);font-weight:600}

/* tellings (JS bou .tel-selle met .lbl + .stepper + .onderhoud-ry) */
.tel-grid{display:grid;grid-template-columns:1fr;gap:8px}
.tel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;background:var(--panel2);border:1px solid var(--border);
  border-radius:var(--r-md);transition:background var(--t-fast),border-color var(--t-fast)}
.tel .lbl{flex:1 1 auto;min-width:0;font:600 13px var(--f-ui);color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel.hit{background:var(--red-dim);border-color:rgba(224,112,112,.45)}
.tel.hit .lbl{color:var(--text)}
.stepper{flex:0 0 auto;display:flex;align-items:center;gap:0;
  border:1px solid var(--border2);border-radius:var(--r-md);overflow:hidden;
  background:var(--panel3)}
.stepper button{width:44px;height:44px;background:var(--panel3);border:none;
  color:var(--text);font-size:20px;line-height:1}
.stepper button:active{background:var(--border2)}
.stepper input{width:56px;height:44px;text-align:center;background:var(--panel2);
  border:none;border-left:1px solid var(--border2);border-right:1px solid var(--border2);
  color:var(--text);font-family:var(--f-mono);font-weight:600}
.stepper input:focus{outline:none;background:var(--panel)}
.onderhoud-ry{width:100%;display:flex;gap:6px;padding:2px 0 4px}
.mini-vlag{flex:1;min-width:0;min-height:38px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--panel3);border:1px solid var(--border2);color:var(--text3);
  font:600 11px var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.mini-vlag.aan,.mini-vlag[data-aan="1"]{background:var(--green-dim);
  border-color:var(--green);color:var(--green2)}

/* Die boer se "reeds behandel" in die Oorsig se blokkelys (fase 6c) */
.kbeh-knop{margin-top:7px;min-height:38px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--panel3);border:1px solid var(--border2);color:var(--text2);
  font:600 12px var(--f-ui);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.kbeh-knop:active{background:var(--green-dim);border-color:var(--green);color:var(--green2)}
.kbeh-knop:disabled{opacity:.5}
.kbeh-hot{font-size:12px;color:#f0a0a0;margin-top:4px}
.kbeh-hot.stil{color:#8fe6b0}

/* besoek-vlae (SAN / 🏁) */
.vlae{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.vlag{flex:1;min-width:130px;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;border-radius:var(--r-md);border:1px solid var(--border2);
  background:var(--panel2);color:var(--text2);font:600 13px var(--f-ui);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.vlag .vk{flex:0 0 auto;width:18px;height:18px;border-radius:5px;
  border:2px solid currentColor;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1}
.vlag.aan{background:var(--green-dim);border-color:var(--green);color:var(--green2)}

/* foto/gps/stem/waarsku-knoppies (JS herskryf className — hou variante volledig) */
.foto-knop,.gps-knop{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;margin-top:2px;border-radius:var(--r-md);
  border:1px solid var(--border2);background:var(--panel2);color:var(--text);
  font:600 14px var(--f-ui);padding:0 10px;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.foto-knop:active,.gps-knop:active{transform:scale(.99)}
.gps-knop.ok{border-color:var(--green);color:var(--green2);background:var(--green-dim)}
.gps-knop.sleg{border-color:var(--red);color:#ffb4b4;background:var(--red-dim)}
.foto-knop.sleg{border-color:var(--red);color:#ffb4b4;background:var(--red-dim)}
.foto-knop.opneem{border-color:var(--red);color:#ffb4b4;animation:opneemPols 1.6s infinite}
@keyframes opneemPols{0%,100%{box-shadow:0 0 0 0 rgba(224,112,112,.45)}50%{box-shadow:0 0 0 7px rgba(224,112,112,0)}}
.ikoon-knop svg{flex:0 0 auto}
.ikoon-knop span{white-space:normal;text-align:left;line-height:1.3}
.waarsku-knop{display:block;width:100%;margin-top:8px;min-height:48px;
  border-radius:var(--r-md);border:1px solid rgba(244,180,0,.5);
  background:var(--gold-dim);color:var(--gold-light);font:600 13px var(--f-ui);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.waarsku-knop.aan{border-color:var(--green);color:var(--green2);background:var(--green-dim)}
/* "Bedoel jy …?" — die val waarby die mens WERKLIK staan (2026-08-06). Groen, want
   dit is die regmaak-pad; "Aanvaar tog" bly geel, want dit is die noodluik. Hy staan
   BO die geel knoppie sodat die maklike regstelling eerste gelees word. */
.nader-knop{display:block;width:100%;margin-top:8px;min-height:48px;padding:8px 12px;
  border-radius:var(--r-md);border:1px solid var(--green);
  background:var(--green-dim);color:var(--green2);font:600 13px var(--f-ui);
  text-align:left;line-height:1.35}
.nader-knop b{display:block;font-weight:700}
.nader-knop i{display:block;font-style:normal;font-weight:500;font-size:11.5px;color:var(--text2);margin-top:2px}
/* Die rede agter 'n oorskryf (0070). Geel soos "Aanvaar tog" — dit hoort by die noodluik,
   nie by die groen regmaak-pad nie — en die invoer haal 48 px sodat 'n duim in 'n boord
   hom tref. Hy verskyn NET wanneer daar iets te verklaar is; sien wysOorskryfRede(). */
.oorskryf-rede{margin-top:8px;padding:10px 12px;border-radius:var(--r-md);
  border:1px solid var(--gold);background:var(--gold-dim)}
.oorskryf-rede label{display:block;font:600 12px var(--f-ui);color:var(--text2);margin-bottom:6px}
.oorskryf-rede input{width:100%;min-height:44px;padding:8px 10px;border-radius:var(--r-sm);
  border:1px solid var(--border2);background:var(--panel2);color:var(--text);
  font:500 14px var(--f-ui);box-sizing:border-box}
.oorskryf-rede input:focus{outline:none;border-color:var(--gold)}

.stem-status{font-size:12px;color:var(--text2);margin:8px 2px 0;line-height:1.5}

/* foto-rooster */
.foto-rooster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.foto-rooster:empty{display:none}
.foto-item{position:relative;border:1px solid var(--border2);border-radius:var(--r-md);overflow:hidden}
.foto-item img{width:100%;height:92px;object-fit:cover;display:block}
.foto-item .fx{position:absolute;top:4px;right:4px;width:28px;height:28px;
  border-radius:var(--r-sm);border:none;background:rgba(0,0,0,.65);color:#fff;
  font-size:13px;font-weight:600}

/* ══ 19. VORM-INSETTE ══ */
.f-in,.stel-inp{display:block;width:100%;min-height:48px;padding:12px;
  margin-bottom:8px;border-radius:var(--r-md);background:var(--panel2);
  border:1px solid var(--border2);color:var(--text);
  transition:border-color .2s,box-shadow .2s}
.f-in::placeholder,.stel-inp::placeholder,textarea.notas::placeholder{color:var(--text4)}
.f-in:focus,.stel-inp:focus,textarea.notas:focus,select.kies:focus{outline:none;
  border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)}
.f-in.mono{font-family:var(--f-mono)}
select.kies{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea.notas{display:block;width:100%;min-height:72px;padding:12px;
  border-radius:var(--r-md);background:var(--panel2);border:1px solid var(--border2);
  color:var(--text);resize:vertical;transition:border-color .2s,box-shadow .2s}
.twee{display:flex;gap:8px}
.twee .f-in{flex:1;min-width:0}

/* glyer (erns % / stadium %) */
.glyer-ry{display:flex;align-items:center;gap:12px;margin:6px 2px 10px}
.glyer-ry input[type=range]{flex:1;min-height:44px}
input[type=range]{accent-color:var(--green)}
.glyer-w{flex:0 0 auto;min-width:52px;text-align:right;
  font:600 15px var(--f-mono);color:var(--text)}

/* ══ 20. CHIPS (tipes / erns / stadiums / redes) ══ */
.tipe-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
/* V7: 48px is die kleinste teiken wat 'n handskoen-vinger in 'n boord betroubaar tref
   (was 44). Die tik-terugvoer is nou een gedeelde animasie — sien §27. */
.tchip{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:9px 15px;
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--panel2);
  color:var(--text);font:600 13.5px var(--f-ui);text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.tchip.aan{background:var(--green-dim);border-color:var(--green);color:var(--green2)}
.redes-rooster{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.redes-rooster .tchip{width:100%;justify-content:center;text-align:center;white-space:normal}
#probErns .tipe-chips .tchip{flex:1 1 46%}
#stadWaarskynlik .tchip,#stadAlmal .tchip{width:100%;justify-content:flex-start;white-space:normal}

/* Die boom-nommer bly BO sigbaar terwyl die pes-lys rol (Jaco 2026-08-12:
   "bo aan sy skerm sigbaar bly by watter boom hy is sodat hy nie deurmekaar word
   nie"). Sticky, nie 'n knoppie nie — dit vat geen ekstra ruimte en die man sien
   altyd waar hy is. Die negatiewe kantlyn laat die strook van rand tot rand loop
   sodat niks daaronder deurskyn nie. */
#rdBoomTtl{position:sticky;top:0;z-index:5;margin:0 -14px 6px;padding:9px 14px;
  background:var(--panel);border-bottom:1px solid var(--border2);
  /* Die skadu laat die rye wat daaronder DEURSKUIF soos rye lyk wat verbygaan,
     nie soos afgesnyde inhoud nie — sonder dit lyk 'n half-sigbare pes-ry stukkend. */
  box-shadow:0 6px 10px -6px rgba(0,0,0,.55);
  font:800 14.5px var(--f-ui);color:var(--text)}

/* ══ 20b. METINGS — grondvog se voeltoets (0038) ══
   Vyf vlakke, elk met sy betekenis daarby: 'n kaal 1-5 is niks werd nie, want
   twee moniteerders lees dit verskillend (spek §29). Volle breedte en die
   48px-handskoenteiken soos die res van die veldknoppies. */
.vog-rooster{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.vog-knop{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:9px 13px;border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--panel2);color:var(--text);text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.vog-knop.aan{background:var(--green-dim);border-color:var(--green);color:var(--green2)}
.vog-nr{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel3);border:1px solid var(--border2);
  font:700 15px var(--f-mono);color:var(--text2)}
.vog-knop.aan .vog-nr{background:var(--green);border-color:var(--green);color:#fff}
.vog-teks{display:flex;flex-direction:column;gap:2px;min-width:0}
.vog-teks b{font:600 13.5px var(--f-ui)}
.vog-teks i{font:400 11.5px/1.35 var(--f-ui);color:var(--text3);font-style:normal;
  white-space:normal}
.vog-knop.aan .vog-teks i{color:var(--green2);opacity:.85}

/* ══ 21. QR-OORLEG (§3.12) ══ */
#qr{position:fixed;inset:0;z-index:99000;background:#000;display:none}
#qr.on{display:block}
#qrVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#qrRaam{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(64vw,240px);height:min(64vw,240px);border-radius:18px;
  border:2px solid rgba(95,209,104,.55);
  box-shadow:0 0 0 4000px rgba(0,0,0,.45);
  animation:cmpWag 1.8s infinite;
  background:
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) left 0 top 0/26px 3px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) left 0 top 0/3px 26px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) right 0 top 0/26px 3px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) right 0 top 0/3px 26px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) left 0 bottom 0/26px 3px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) left 0 bottom 0/3px 26px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) right 0 bottom 0/26px 3px,
    linear-gradient(var(--igl-green-br),var(--igl-green-br)) right 0 bottom 0/3px 26px;
  background-repeat:no-repeat}
@keyframes cmpWag{0%,100%{box-shadow:0 0 0 4000px rgba(0,0,0,.45),0 0 0 0 rgba(95,209,104,.55)}
  50%{box-shadow:0 0 0 4000px rgba(0,0,0,.45),0 0 0 7px rgba(95,209,104,0)}}
#qrWenk{position:absolute;left:0;right:0;top:calc(42% + min(34vw,132px) + 16px);
  text-align:center;color:#fff;font:600 13px var(--f-ui);
  text-shadow:0 1px 4px #000;padding:0 20px}
#qrX{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;
  width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--border3);
  background:rgba(15,20,25,.85);color:#fff;font-size:18px}
#qrOnder{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 14px)}
#qrOnder .btn-sec{flex:1;min-height:50px}

/* ══ 22. MODALE (.ov, §3.13) ══ */
.ov{position:fixed;inset:0;z-index:var(--z-modaal);background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:18px}
.ov.on{display:flex}
.ov .card{width:100%;max-width:400px;max-height:92dvh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--border2);border-radius:var(--r-xl);
  padding:20px;box-shadow:var(--shadow2);animation:modaalIn .2s ease}
.ov .card.card-b{max-width:440px}
@keyframes modaalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ov .card h3{margin:0 0 6px;font-family:var(--f-kop);font-weight:600;font-size:17px;color:var(--text)}
.ov .card label{display:block;font:600 12px var(--f-ui);color:var(--text2);margin:10px 0 5px}
.ov .card .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.ov .card .acts button{flex:1}
.stem-bev{font-size:13px;line-height:1.55;color:var(--text)}
.stem-bev b{font-family:var(--f-mono);font-weight:600}

/* ══ 23. TOASTE (kontrak: className = "on g"/"on r"/"on gold") ══ */
#toast,#vg_toast{position:fixed;left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 118px);
  transform:translateX(-50%) translateY(14px);
  max-width:min(440px,90vw);padding:11px 18px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--border2);color:var(--text);
  font:600 13px/1.4 var(--f-ui);box-shadow:var(--shadow-float);
  z-index:var(--z-toast);opacity:0;pointer-events:none;text-align:center;
  transition:opacity .25s,transform .25s var(--ease)}
#toast.on,#vg_toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.g,#vg_toast.g{border-color:rgba(65,182,73,.55);color:#aef0b4}
#toast.r,#vg_toast.r{border-color:rgba(208,80,80,.55);color:#ffb4b4}
#toast.gold,#vg_toast.gold{border-color:rgba(244,180,0,.55);color:var(--gold-light)}

/* ══ 24. TERUGVALLE + BEWEGING-VOORKEURE ══ */
@supports not (backdrop-filter:blur(1px)){
  .aanmeld-paneel{background:rgba(16,24,30,.92)}
  .ov{background:rgba(0,0,0,.85)}
}
@media (hover:hover){
  .igl-btn:hover{transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 14px 32px -8px var(--igl-green-gl)}
  .btn-main:hover{transform:translateY(-2px);box-shadow:var(--glow-green);filter:brightness(1.04)}
  .btn-main:disabled:hover{transform:none;box-shadow:none;filter:none}
  .btn-sec:hover{border-color:var(--border3);color:var(--green2)}
  .btn-cancel:hover{border-color:var(--border3);color:var(--text)}
  .btn-ok:hover{background:var(--green-dim);border-color:var(--green);color:var(--green)}
  .hdr-ikoon:hover,.hdr-pil:hover{border-color:var(--border3);color:var(--text)}
  .dok-item:hover{color:var(--green2)}
  .lr:hover{background:var(--panel3);border-color:var(--border2)}
  .fchip:hover{border-color:var(--border3);color:var(--text)}
  .fchip.aan:hover{border-color:var(--green);color:#fff}
  .tchip:hover{border-color:var(--border3)}
  .paneel-terug:hover{background:var(--panel2);color:var(--text)}
  .teks-skakel:hover{background:var(--green-dim)}
  .igl-lang button:hover{color:var(--igl-text)}
  .mini-vlag:hover,.vlag:hover{border-color:var(--border3)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;
    transition-duration:.01ms !important}
  .aanmeld [class^="aanmeld"],.aanmeld .brand-naam,.aanmeld .brand-gogga{opacity:1 !important}
  #blad{transition:none}
}

/* ══ 25. GROTER SKERMS (tablet) ══ */
@media (min-width:700px){
  .paneel-body{max-width:640px;margin:0 auto;width:100%}
  .paneel-kop,.paneel-voet{padding-left:calc((100vw - 640px)/2 + 12px);
    padding-right:calc((100vw - 640px)/2 + 12px)}
  #vsChips,.vs-perry{padding-left:calc((100vw - 640px)/2 + 12px);
    padding-right:calc((100vw - 640px)/2 + 12px)}
  #hoof{max-width:640px;margin:0 auto;width:100%}
  .tel-grid{grid-template-columns:1fr 1fr}
  .tel .onderhoud-ry{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════
   25. VLOEI-LAAG (geleide vloeie, plan 03) — saam3-kanarie.
   Alles hieronder is ADDITIEF. Sonder die klas .vloei-aan op <body>
   gedra die app presies soos saam2 (die ?vloei=0-noodluik).
   Taakkleur kom uit --taak, gestel deur die .tk-*-klasse.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 25.1 Taak-identiteit (kleur + dim + teks-op-kleur) ── */
.tk-groen {--taak:var(--green);  --taak-dim:var(--green-dim);      --taak-tks:#0d1a10}
.tk-oranje{--taak:var(--orange); --taak-dim:rgba(240,138,60,.18);  --taak-tks:#1c1005}
.tk-blou  {--taak:var(--blue);   --taak-dim:rgba(58,134,183,.20);  --taak-tks:#f2f8fc}
.tk-grys  {--taak:var(--grey);   --taak-dim:rgba(122,130,140,.20); --taak-tks:#f2f4f6}

/* ── 25.2 Tuisskerm ── */
/* V1: die onderste 84px was ruimte vir die vang-dok. Die dok is weg (B4), dus eis
   ons die skerm terug — dit was dooie spasie onder elke tuisskerm. */
#tuis{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 20px)}
@media(min-width:641px){ #tuis{max-width:640px;margin:0 auto;width:100%} }

.taak-rooster{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.taak-kaart{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;
  padding:14px 16px;border-radius:var(--r-xl);text-align:left;
  background:var(--panel2);border:1px solid var(--border2);
  border-left:5px solid var(--taak,var(--green));color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast)}
.taak-kaart:active{transform:scale(.985);background:var(--panel3)}
.tk-ikoon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;background:var(--taak-dim);color:var(--taak)}
.tk-ikoon svg{stroke:currentColor;stroke-width:1.8;fill:none}
.tk-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tk-naam{font-family:var(--f-kop);font-weight:600;font-size:17px;color:var(--text);
  line-height:1.2}
.tk-hulp{font-size:12.5px;color:var(--text2);line-height:1.35}
.tk-pyl{flex:0 0 auto;stroke:var(--text3);stroke-width:2;fill:none}

/* hervat-kaart (§2.2.2) */
.hervat-kaart{border-radius:var(--r-xl);padding:14px 16px;margin-bottom:10px;
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.45)}
.hervat-kaart .hk-t{font:600 13.5px var(--f-ui);color:var(--gold-light);line-height:1.45}
.hervat-kaart .hk-akts{display:flex;gap:8px;margin-top:12px}
.hervat-kaart .hk-akts button{flex:1;min-height:48px;border-radius:var(--r-md);
  font:600 13px var(--f-ui);border:1px solid var(--border3);
  background:var(--panel2);color:var(--text)}
.hervat-kaart .hk-akts .hk-weg{color:var(--text2)}
.hervat-kaart .hk-akts .hk-gaan{background:var(--gold);border-color:var(--gold);
  color:#1a1403;font-weight:700}

/* Vandag-strook (§5.5) */
.vandag-strook{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  padding:11px 14px;margin-bottom:10px;border-radius:var(--r-lg);
  background:var(--panel2);border:1px solid var(--border)}
.vandag-strook .vd-k{font:700 10px var(--f-ui);text-transform:uppercase;
  letter-spacing:1px;color:var(--text3)}
.vandag-strook .vd-i{display:inline-flex;align-items:baseline;gap:5px;
  font:600 12.5px var(--f-ui);color:var(--text2)}
.vandag-strook .vd-i b{font-family:var(--f-mono);font-size:15px;font-weight:700;
  color:var(--text)}

/* Punte-telling (P3, 2026-08-18) — die EEN reël wat van die twee punte-lyste oorbly.
   Doelbewus klein en NIE tikbaar nie: die linkerhelfte tel wat op die kaart staan, en
   die regterhelfte noem die punte wat nêrens op 'n kaart kan verskyn nie (geen
   koördinate of geen blok). 'n Tik wat na die kaart zoem, sou juis vir daardie tweede
   helfte 'n leuen wees — hulle is nie daar om na toe te zoem nie. */
.punt-tel-strook{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;width:100%;
  padding:8px 12px;margin:-4px 0 10px;border-radius:var(--r-lg);text-align:left;
  background:var(--panel2);border:1px solid var(--border);
  color:var(--text2);font:600 12px var(--f-ui)}
.punt-tel-strook .pts-d{display:inline-flex;align-items:center;gap:6px}
.punt-tel-strook .pts-geen{color:var(--gold-light)}

/* sekondêre skakels (kaart / admin) */
.tuis-sek{display:flex;gap:8px;margin-top:14px}
.tuis-sek-knop{flex:1;min-height:48px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  font:600 13px var(--f-ui)}
.tuis-sek-knop:active{background:var(--panel3)}

/* sync-strook (§5.4 — mensetaal) */
.sync-strook{margin-top:14px;padding:11px 14px;border-radius:var(--r-lg);
  background:var(--panel2);border:1px solid var(--border);
  font:600 12.5px/1.5 var(--f-ui);color:var(--text2);text-align:center}
.sync-strook.wag{border-color:rgba(244,180,0,.45);color:var(--gold-light);
  background:var(--gold-dim)}
.sync-strook.sleg{border-color:rgba(208,80,80,.5);color:#ffb4b4;background:var(--red-dim)}
.sync-strook .ss-wys{display:block;margin-top:6px;text-decoration:underline;
  color:inherit;background:none;border:none;font:inherit;width:100%;min-height:32px}

/* ── 25.3 Stap-wikkels: net aktief wanneer die vloei aan is ── */
.vloei-aan .stap-wikkel{display:none}
.vloei-aan .stap-wikkel.stap-aktief{display:block;animation:stapIn .18s var(--ease)}
@keyframes stapIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
/* die oorspronklike kop/voet word deur die taakbalk + vloei-voet vervang.
   Hulle bly in die DOM sodat elke ID en sy bedrading behoue bly. */
.vloei-aan .paneel.vloei-paneel > .paneel-kop,
.vloei-aan .paneel.vloei-paneel > .paneel-voet{display:none}

/* ── 25.4 Taakbalk (§3.1) ── */
.taakbalk{flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0px)}
.taakbalk .tb-streep{height:4px;background:var(--taak,var(--green))}
.taakbalk .tb-ry{display:flex;align-items:center;gap:10px;padding:8px 12px 2px}
.taakbalk .tb-ikoon{flex:0 0 auto;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;background:var(--taak-dim);color:var(--taak);
  font-size:16px;line-height:1}
.taakbalk .tb-naam{font-family:var(--f-kop);font-weight:600;font-size:15px;
  color:var(--text);white-space:nowrap}
.taakbalk .tb-stap{font:600 11.5px var(--f-ui);color:var(--text2);white-space:nowrap}
.taakbalk .tb-kol{flex:1;display:flex;align-items:center;gap:5px;justify-content:flex-end;
  padding-right:2px}
.taakbalk .tb-kol i{width:8px;height:8px;border-radius:50%;background:var(--border3);
  display:block;transition:background var(--t-fast)}
.taakbalk .tb-kol i.vol{background:var(--taak)}
.taakbalk .tb-kol i.nou{background:var(--taak);box-shadow:0 0 0 3px var(--taak-dim)}
.taakbalk .tb-x{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);
  background:none;border:none;color:var(--text2);font-size:17px;line-height:1}
.taakbalk .tb-x:active{background:var(--panel2)}
/* P2 — die wissel-ikoon ("iets anders opgemerk"). Hy dra die taak se kleur sodat 'n
   oog hom van die grys ✕ langs hom onderskei: die een gooi jou werk weg, die ander
   hou dit — daardie verskil mag nooit op posisie alleen berus nie. */
.taakbalk .tb-wissel{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--taak-dim);border:none;
  color:var(--taak);transition:background var(--t-fast)}
.taakbalk .tb-wissel:active{background:var(--panel2)}
.taakbalk .tb-konteks{padding:0 12px 9px;font:600 12px var(--f-ui);color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taakbalk .tb-konteks:empty{display:none}

/* ── 25.5 Vloei-voet: primêr regs, ≥56px (§3.1) ── */
.vloei-voet{flex:0 0 auto;display:flex;gap:9px;align-items:stretch;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:var(--panel);border-top:1px solid var(--border)}
.vloei-voet .vv-terug{flex:0 0 auto;min-width:96px;min-height:56px;padding:0 16px;
  border-radius:var(--r-md);background:var(--panel2);border:1px solid var(--border2);
  color:var(--text);font:600 14px var(--f-ui)}
.vloei-voet .vv-terug:active{background:var(--panel3)}
.vloei-voet .vv-terug[disabled]{opacity:.35}
.vloei-voet .vv-gaan{flex:1;min-height:56px;border-radius:var(--r-md);border:none;
  background:var(--taak,var(--green));color:var(--taak-tks,#0d1a10);
  font:700 16px var(--f-ui);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;gap:8px}
.vloei-voet .vv-gaan:active{transform:translateY(1px) scale(.99)}
.vloei-voet .vv-gaan[disabled]{opacity:.45}

/* ── 25.6 Progressiewe onthulling (§3.5) ── */
.meer{margin-top:12px;border:1px solid var(--border2);border-radius:var(--r-md);
  background:var(--panel2);overflow:hidden}
.meer > summary{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:52px;padding:0 14px;cursor:pointer;list-style:none;
  font:600 13.5px var(--f-ui);color:var(--text2)}
.meer > summary::-webkit-details-marker{display:none}
.meer > summary::after{content:"\25BE";flex:0 0 auto;color:var(--text3);
  transition:transform var(--t-fast)}
.meer[open] > summary::after{transform:rotate(180deg)}
.meer[open] > summary{border-bottom:1px solid var(--border);color:var(--text)}
.meer > *:not(summary){margin-left:12px;margin-right:12px}
.meer > *:last-child{margin-bottom:12px}
.meer-et{flex:1;min-width:0}
.meer-tel{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--green-dim);color:var(--green2);
  font:700 11px var(--f-mono);display:none;align-items:center;justify-content:center}
.meer-tel.wys{display:inline-flex}

/* ── 25.7 "Skoon"-kortpad (V1) ── */
.skoon-knop{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:60px;margin-bottom:12px;border-radius:var(--r-lg);
  background:var(--green-dim);border:1px solid var(--green);color:#aef0b4;
  font:700 15px var(--f-ui)}
.skoon-knop:active{transform:scale(.99)}
.skoon-knop.aan{background:var(--green);color:#0d1a10}
.onbereik-skakel{display:block;width:100%;margin-top:14px;color:var(--text3)}

/* 0061 — 'n klein INLYN-knoppie binne 'n vm-r-ry (die val se punt regstel).
   Al die ander knoppie-klasse is volle breedte; hierdie een moet langs 'n waarde
   pas sonder om die ry te breek. */
.vm-mini{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;
  border-radius:var(--r-sm,8px);background:var(--gold-dim,#3a3116);
  border:1px solid var(--gold,#d9b54a);color:var(--gold,#d9b54a);
  font:600 12px var(--f-ui)}
.vm-mini:active{transform:scale(.97)}

/* ── 25.8 Keuse-knoppe (soekblad / kanselleer / S0) ── */
.keuse-knop{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;
  margin-top:9px;padding:0 16px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);color:var(--text);
  font:600 14.5px var(--f-ui);text-align:left}
.keuse-knop:active{transform:scale(.99);background:var(--panel3)}
.keuse-rooi{border-color:rgba(208,80,80,.55);color:#ffb4b4;background:var(--red-dim)}

/* ── 25.9 S0 GPS-soek-skerm (§4.1) ── */
/* Oorleg-slagyster (staande kontrole): align-items:flex-start + overflow-y:auto,
   met margin:auto op die middelblok — sentreer wanneer daar plek is, bly rolbaar
   in landskap of met groot stelsel-fonte wanneer nie. */
#gpsSoek{position:fixed;inset:0;z-index:var(--z-oorlegsel);background:var(--bg);
  display:none;align-items:flex-start;justify-content:center;padding:24px;
  overflow-y:auto}
#gpsSoek.on{display:flex}
.gs-mid{width:100%;max-width:420px;margin:auto;text-align:center}
.gs-ring{width:96px;height:96px;margin:0 auto 22px;border-radius:50%;
  border:3px solid var(--border2);display:grid;place-items:center}
.gs-ring span{width:16px;height:16px;border-radius:50%;background:var(--green);
  animation:gsPols 1.8s infinite}
@keyframes gsPols{0%,100%{box-shadow:0 0 0 0 var(--green-glow)}
  50%{box-shadow:0 0 0 22px rgba(65,182,73,0)}}
.gs-ttl{font-family:var(--f-kop);font-weight:600;font-size:19px;color:var(--text);
  line-height:1.35}
.gs-sub{margin-top:8px;font:600 13px var(--f-mono);color:var(--text2);min-height:20px}
.gs-keuses{margin-top:24px;text-align:left}
.gs-x{margin-top:22px;width:100%}

/* ── 25.10 Kwitansie (§3.6) ── */
/* Selfde oorleg-slagyster-patroon as #gpsSoek hierbo — die ✓-merk en titel
   moet bereikbaar bly wanneer die skerm korter as die inhoud is. */
#kwit{position:fixed;inset:0;z-index:var(--z-modaal);background:var(--bg);
  display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
#kwit.on{display:flex}
.kw-mid{width:100%;max-width:420px;margin:auto;text-align:center}
.kw-merk{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;font-size:44px;line-height:1;
  background:var(--taak-dim);color:var(--taak);animation:kwIn .3s var(--ease)}
@keyframes kwIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.kw-ttl{font-family:var(--f-kop);font-weight:600;font-size:21px;color:var(--text);
  line-height:1.3}
.kw-ops{margin-top:12px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--panel2);border:1px solid var(--border);
  font:600 13.5px/1.7 var(--f-ui);color:var(--text2);text-align:left}
.kw-ops b{color:var(--text);font-family:var(--f-mono)}
.kw-sync{margin-top:12px;font:600 13px/1.5 var(--f-ui);color:var(--gold-light)}
.kw-sync.klaar{color:#aef0b4}
.kw-akts{margin-top:24px;display:flex;flex-direction:column;gap:9px}
.kw-akts button{width:100%;min-height:56px;border-radius:var(--r-md);
  font:700 15px var(--f-ui);border:1px solid var(--border2);
  background:var(--panel2);color:var(--text)}
.kw-akts button.kw-primer{background:var(--taak,var(--green));border-color:transparent;
  color:var(--taak-tks,#0d1a10)}

/* ── 25.11 Opsomming-kaart (bevestig-stap) ── */
.ops-kaart{border-radius:var(--r-lg);background:var(--panel2);
  border:1px solid var(--border);padding:6px 14px}
.ops-kaart .op-r{display:flex;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border)}
.ops-kaart .op-r:last-child{border-bottom:none}
.ops-kaart .op-k{font:600 12.5px var(--f-ui);color:var(--text3);flex:0 0 auto}
.ops-kaart .op-v{font:600 13.5px var(--f-ui);color:var(--text);text-align:right;
  word-break:break-word}
.ops-kaart .op-v.mono{font-family:var(--f-mono)}
.ops-kaart .op-leeg{padding:14px 0;color:var(--text3);font-size:13px;text-align:center}

/* ── 25.12 Stasie: die stem-knop is die grootste element (§4.1 S1).
   Op ID geteiken, want wysStemKnop() herskryf className. ── */
.vloei-aan #stasieStemBtn{min-height:76px;font-size:16.5px;font-weight:700;
  border-width:2px;border-color:var(--green);color:#aef0b4;background:var(--green-dim)}
.vloei-aan #stasieStemBtn.opneem{border-color:var(--red);color:#ffb4b4;
  background:var(--red-dim)}
.stem-hulp{margin:8px 2px 0;font-size:12.5px;color:var(--text3);text-align:center}
.vloei-aan #stasieLys .lr{min-height:64px}

/* ── 25.13 Kontras-verharding vir die son (§5.2) ── */
.vloei-aan .tel .stepper input{font-size:17px}
.vloei-aan .sek-ttl{color:var(--text2)}

/* ── 25.14 Dok: etikette bly, teiken ≥64px (§2.2) ── */
.vloei-aan .dok-item{min-height:64px;font-size:10.5px;color:var(--text2)}

/* ── 25.15 Beweging-voorkeure ── */
@media(prefers-reduced-motion:reduce){
  .vloei-aan .stap-wikkel.stap-aktief{animation:none}
  .gs-ring span{animation:none}
  .kw-merk{animation:none}
}

/* ── 25.16 Tuis-knop in die lys-kop (nie 'n terug-knop nie) ── */
.tuis-terug{flex:0 0 auto;min-height:44px;padding:0 12px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  font:600 13px var(--f-ui);white-space:nowrap}
.tuis-terug:active{background:var(--panel3)}
/* ── 25.17 Forseer-modaal: die app waarsku, hy blok nie ── */
.fors-rede{margin:6px 0 2px;font:600 15px/1.45 var(--f-ui);color:var(--gold-light)}
.fors-nota{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--text2)}
.keuse-goud{border-color:rgba(244,180,0,.55);color:var(--gold-light);
  background:var(--gold-dim)}

/* ── 25.18 Ikoon-roosters (InteliGro-afdelingstyl) vir die keuses ──
   Die vang-IIFE bou .tchip-knoppies in .tipe-chips-houers. Hier word daardie
   houers 'n rooster van ikoon-kaarte i.p.v. 'n ry chips. Die vloei-laag spuit
   die .ik-/.et-spans in; sonder hulle val 'n chip terug op gewone teks. */
.vloei-aan #probTipes,
.vloei-aan #stadWaarskynlik .tipe-chips,
.vloei-aan #stadAlmal .tipe-chips,
.vloei-aan #probErns .tipe-chips{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:8px}
@media(min-width:520px){
  .vloei-aan #probTipes,
  .vloei-aan #stadWaarskynlik .tipe-chips,
  .vloei-aan #stadAlmal .tipe-chips{grid-template-columns:repeat(3,1fr)}
}
.vloei-aan #probTipes .tchip,
.vloei-aan #stadWaarskynlik .tchip,
.vloei-aan #stadAlmal .tchip,
.vloei-aan #probErns .tchip{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;width:100%;min-height:104px;padding:14px 8px 12px;
  border-radius:var(--r-xl);border:1px solid var(--border2);
  border-top:3px solid var(--kkleur,var(--border3));
  background:var(--panel2);color:var(--text);
  font:600 12.5px/1.3 var(--f-ui);text-align:center;white-space:normal}
.vloei-aan #probTipes .tchip:active,
.vloei-aan #stadWaarskynlik .tchip:active,
.vloei-aan #stadAlmal .tchip:active,
.vloei-aan #probErns .tchip:active{transform:scale(.97);background:var(--panel3)}
.vloei-aan .tchip.aan{background:var(--kdim,var(--green-dim));
  border-color:var(--kkleur,var(--green));border-top-color:var(--kkleur,var(--green))}
.vloei-aan .tchip .ik{flex:0 0 auto;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:var(--kdim,var(--panel3))}
/* V4/B1: teks-eerste. Waar daar geen chemiese simbool is nie, dra die chip 'n
   kategorie-KOLLETJIE i.p.v. 'n emoji — die kleur sê pes/siekte/ander/predator, en
   die naam doen die res. Kleiner blokkie, want dit hoef nie 'n prent te hou nie. */
.vloei-aan .tchip .ik.ik-kol{width:26px;height:26px;border-radius:50%;
  background:transparent;border:2px solid var(--kkleur,var(--green));
  box-shadow:inset 0 0 0 4px var(--kdim,transparent)}
.vloei-aan .tchip .et{display:block;width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.vloei-aan .tchip .bbch{display:block;font:700 10px var(--f-mono);
  color:var(--text3);letter-spacing:.5px}
.vloei-aan .tchip.aan .bbch{color:var(--kkleur,var(--green2))}

/* ── 25.19 "My dag"-blad ── */
.vd-ops{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
.vd-ops .vo{padding:12px 14px;border-radius:var(--r-lg);
  background:var(--panel2);border:1px solid var(--border)}
.vd-ops .vo b{display:block;font:700 22px var(--f-mono);color:var(--text);line-height:1.1}
.vd-ops .vo span{display:block;margin-top:3px;font:600 11.5px var(--f-ui);color:var(--text2)}
.vd-lys{display:flex;flex-direction:column;gap:9px}
.vd-r{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border-radius:var(--r-lg);background:var(--panel2);border:1px solid var(--border);
  border-left:4px solid var(--kkleur,var(--border3))}
.vd-r .vd-ik{flex:0 0 auto;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;line-height:1;
  background:var(--kdim,var(--panel3))}
.vd-r .vd-in{flex:1;min-width:0}
.vd-r .vd-t1{font:600 14px var(--f-ui);color:var(--text);line-height:1.35;
  word-break:break-word}
.vd-r .vd-t2{margin-top:3px;font-size:12px;color:var(--text2);line-height:1.4}
.vd-r .vd-regs{flex:0 0 auto;text-align:right}
.vd-r .vd-tyd{font:700 12px var(--f-mono);color:var(--text2)}
.vd-r .vd-merk{display:inline-block;margin-top:5px;padding:2px 7px;
  border-radius:var(--r-pill);font:700 9.5px var(--f-ui);letter-spacing:.4px;
  text-transform:uppercase}
.vd-r .vd-merk.bot{background:rgba(37,211,102,.16);color:#7fe3a3;
  border:1px solid rgba(37,211,102,.4)}
.vd-r .vd-merk.app{background:var(--green-dim);color:var(--green2);
  border:1px solid rgba(65,182,73,.4)}
.vd-r .vd-merk.wag{background:var(--gold-dim);color:var(--gold-light);
  border:1px solid rgba(244,180,0,.45)}
.vd-leeg{padding:28px 16px;text-align:center;color:var(--text3);
  font-size:13.5px;line-height:1.6}
.vd-kop{margin:16px 0 8px;font:700 10px var(--f-ui);text-transform:uppercase;
  letter-spacing:1px;color:var(--text3)}
.vd-kop:first-child{margin-top:0}

/* ── 25.20 Teks-ikoon (chemiese simbool vir die voedingstekorte) ── */
.vloei-aan .tchip .ik.ik-teks{font:800 17px var(--f-mono);letter-spacing:.5px;
  color:var(--kkleur,var(--green));font-feature-settings:"tnum"}

/* ═══════════════════════════════════════════════════════════════════
   26. SCOUTING-EERSTE HERONTWERP (plan §4.1–§4.3, fase 1+2).
   Steeds ADDITIEF: sonder .vloei-aan bly alles hieronder ongebruik,
   want die JS wys die nuwe elemente eers in vloeiBoot().
   ═══════════════════════════════════════════════════════════════════ */

/* ── 26.1 Mini-kaart bo-op die tuisskerm (§4.1/§4.2) ── */
.tuis-kaart-wrap{position:relative;margin-bottom:10px;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--border2);background:var(--panel2);
  box-shadow:var(--shadow-sm)}
.tuis-mini-kaart{height:190px;width:100%;background:var(--panel3)}
@media(min-height:760px){ .tuis-mini-kaart{height:225px} }
/* Leaflet se eie kontroles sit op z-index 800 — die pille moet bo hulle wees. */
.tkw-pille{position:absolute;top:8px;left:8px;right:8px;z-index:801;
  display:flex;gap:6px;pointer-events:none}
.tkw-pil{pointer-events:auto;min-height:44px;padding:0 12px;border-radius:var(--r-pill);
  background:rgba(14,18,22,.82);border:1px solid var(--border3);color:var(--text);
  font:600 12px var(--f-ui);backdrop-filter:blur(6px);
  max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkw-pil:active{background:rgba(14,18,22,.95)}
.tkw-pil-s{flex:0 0 auto;min-width:34px;padding:0 9px;margin-left:auto}
.tkw-ligging{position:absolute;left:0;right:0;bottom:0;z-index:801;
  padding:7px 12px;background:linear-gradient(to top,rgba(10,13,16,.92),rgba(10,13,16,.55));
  font:600 11.5px var(--f-ui);color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkw-ligging.ok{color:var(--green2)}
.tkw-ligging.sleg{color:var(--gold-light)}
/* Die attribusie is wettig nodig, maar mag nie 'n 190px-kaart oorheers nie. */
.tuis-mini-kaart .leaflet-control-attribution{font-size:8.5px;padding:0 4px;
  background:rgba(10,13,16,.6);color:var(--text3)}
.tuis-mini-kaart .leaflet-control-attribution a{color:var(--text3)}
/* "Jy is hier" — 'n pols wat sonder beweging steeds leesbaar bly. */
.mk-ek{width:16px;height:16px;border-radius:50%;background:var(--blue);
  border:2.5px solid #fff;box-shadow:0 0 0 3px rgba(58,134,183,.45)}
.mk-plaas{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--green);border:2px solid #fff;color:#0d1a10;
  font:800 12px var(--f-ui);box-shadow:var(--shadow-sm)}

/* ── V2: die ligging-strook ── wat die app self uit die GPS afgelei het.
   Oranje (verstek) = kyk hierna; groen = binne die blok met 'n goeie sein. */
.lig-strook{margin:0 0 9px;padding:9px 12px;border-radius:var(--r-md);
  font:600 12.5px/1.45 var(--f-ui);color:var(--gold-light);
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.42)}
.lig-strook.seker{color:#aef0b4;background:var(--green-dim);
  border-color:rgba(65,182,73,.45)}

/* ── 26.1b OPENINGSKERM (Jaco 2026-07-29) ── */
/* V1: sygoot bygevoeg — die twee groot knoppies het voorheen albei skermrande geraak
   (#begin het `padding:6px 0`, anders as #tuis se 12px), en op 'n tablet het hulle oor
   die volle vensterwydte gerek. Dieselfde maksimum as #tuis. */
#begin{padding:6px 12px 20px}
@media(min-width:641px){ #begin{max-width:640px;margin:0 auto;width:100%} }
.begin-h{font-family:var(--f-kop);font-weight:600;font-size:22px;color:var(--text);
  margin:10px 0 2px}
.begin-sub{font:500 13px var(--f-ui);color:var(--text3);margin-bottom:6px}
/* "Ingeteken as: Jaco (Admin)" — V0. Dieselfde reël op die openingskerm (#beginWie,
   waar hy ook .begin-sub dra) en bo-aan die tuisskerm (#tuisWie, waar hy alleen staan
   en dus sy eie spasiëring nodig het). Rustig, nie 'n waarskuwing nie: die rooi
   ligging-strook direk daaronder moet die oog eerste vang. */
.wie-strook{font:500 13px var(--f-ui);color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tuisWie{margin:8px 0 4px}
/* (.begin-afd — die twee afdeling-opskrifte "Plaas" en "Wat doen jy vandag?" — is by V1
   uit die markup verwyder: die opskrif self sê nou wat die skerm vra en die twee groot
   knoppies het geen etiket nodig nie. Die reël is saam met sy laaste gebruiker weg.) */
/* V1: die plaas is nou 'n KOMPAKTE PIL onder die twee groot keuses. Dit bly 'n
   knoppie (besluit B6) en onthou die laaste keuse, maar dit oorheers nie meer die
   skerm nie — Jaco: "die eerste skerm moet slegs twee groot knoppies hê". */
.begin-plaas{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;
  margin-top:14px;padding:9px 13px;border-radius:var(--r-pill);background:var(--panel2);
  border:1px solid var(--border2);text-align:left}
.begin-plaas:active{transform:scale(.99)}
.begin-plaas .bp-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.begin-plaas .bp-naam{font-family:var(--f-kop);font-weight:600;font-size:15px;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.begin-plaas .bp-sub{font:500 11.5px var(--f-ui);color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.begin-plaas .bp-wissel{flex:0 0 auto;padding:6px 11px;border-radius:var(--r-pill);
  background:var(--panel3);border:1px solid var(--border2);
  font:600 11px var(--f-ui);color:var(--text2)}
/* Nog geen plaas gekies — nooi, moenie blokkeer nie (die keuse open self die lys). */
.begin-plaas.leeg{border-color:var(--gold);background:var(--gold-dim)}
.begin-plaas.leeg .bp-naam{color:var(--gold-light)}

/* V1: die twee keuses is die skerm. Groter teiken, groter ikoon, groter naam. */
.begin-keuse{width:100%;display:flex;align-items:center;gap:15px;min-height:104px;
  padding:16px 16px;margin-bottom:11px;border-radius:var(--r-xl);
  background:var(--panel2);border:1px solid var(--border2);text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),opacity var(--t-fast)}
.begin-keuse:active{transform:scale(.99);background:var(--green-dim);border-color:var(--green)}
.begin-keuse .bk-ik{flex:0 0 auto;width:60px;height:60px;display:grid;place-items:center;
  border-radius:16px;background:var(--panel3);font-size:29px}
.begin-keuse .bk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.begin-keuse .bk-t b{font-family:var(--f-kop);font-weight:600;font-size:21px;color:var(--text)}
.begin-keuse .bk-t i{font:400 13px var(--f-ui);color:var(--text3);font-style:normal;
  overflow:hidden;text-overflow:ellipsis}
.begin-keuse .tk-pyl{flex:0 0 auto;color:var(--text3)}
.begin-gps{display:flex;align-items:center;gap:10px;margin-top:20px;padding:11px 13px;
  border-radius:var(--r-md);background:var(--red-dim,rgba(200,70,70,.14));
  border:1px solid rgba(200,70,70,.45);font:600 12.5px var(--f-ui);color:#f0a0a0}
.begin-gps #beginGpsT{flex:1;min-width:0}
.bg-knop{flex:0 0 auto;min-height:44px;padding:0 13px;border-radius:var(--r-pill);
  background:rgba(200,70,70,.22);border:1px solid rgba(200,70,70,.5);
  color:#f7c9c9;font:600 11.5px var(--f-ui)}
/* Die gekose plaas + werkmodus bo-aan die tuisblad; 'n tik vat jou terug */
.werk-strook{width:100%;display:flex;align-items:center;gap:8px;min-height:40px;
  margin-bottom:10px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--panel2);border:1px solid var(--border2);
  font:600 12.5px var(--f-ui);color:var(--text2);text-align:left}
.werk-strook b{color:var(--text);font-weight:700}
.werk-strook .ws-wissel{margin-left:auto;flex:0 0 auto;color:var(--green2);font-weight:600}
/* ── V1: LOKVALLE EN MONITERING IS VOLLEDIG GESKEI ──────────────────────────────
   Jaco: "Wanneer Monitering gekies word mag geen lokvalle verskyn nie."
   Die klas sit op <body>, nie op #tuis nie: die lokval-paaie lê oor die HELE
   dokument. Voorheen het net twee knoppies (#tkStasie, #tkSoek) verdwyn en SES
   ander paaie het oopgebly — die dok, die aanteken-keuse, die Verkenning-paneel se
   uitgang en die S0-skerm se QR-knoppe. Elke nuwe lokval-ingang moet HIER bykom. */
body.werk-monitor #tkStasie,        /* tuiskaart: "Stasie"            */
body.werk-monitor #tkSoek,          /* tuiskaart: "Soek 'n val"       */
body.werk-monitor #tkoLokval,       /* aanteken-keuse: "Lokval"       */
body.werk-monitor #naStasieBtn,     /* Verkenning stap 1: "dis 'n lokval" */
body.werk-monitor #gsQr,            /* S0-skerm: QR                   */
body.werk-monitor #gsKode{display:none !important}   /* S0-skerm: kode */
body.werk-valle #tkStasie{background:var(--green-dim);border-color:var(--green)}
/* Die primêre kaart se hulpteks noem self "lokval" — dit is teks, nie 'n knoppie, en
   die versteek-lys hierbo kon dit nie bereik nie. Twee spans, een per modus. */
.tkh-mon{display:none}
body.werk-monitor .tkh-alles{display:none}
body.werk-monitor .tkh-mon{display:inline}

/* B4: die vang-dok is weg. Jaco het die kyker se onderste balk laat verwyder en
   hierdie een dupliseer die tuisskerm se knoppies én was lekplek #1 vir lokvalle.
   ⚠ Die KNOPPIES bly in die DOM: 13 plekke in saam3.js roep klik("dProb"),
   klik("dStasie"), klik("dQr") en klik("dSync") — hulle is die bedradingsnaaf.
   Ons versteek die HOUER; die sync-aksie leef voort op #tuisSync se "ss-wys".
   ⚠⚠ Geskoop tot `.vloei-aan`: met `?vloei=0` (die gedokumenteerde noodluik) bou die
   vloei-laag NIE die tuisskerm nie, en dan is die dok die ENIGSTE navigasie wat oorbly.
   'n Onvoorwaardelike reël sou die terugval self stukkend gemaak het. */
body.vloei-aan #vg_dock{display:none !important}

/* ── 26.2 Die primêre aanteken-kaart (§4.3) ── */
.taak-kaart.tk-primer{min-height:92px;background:var(--taak-dim);
  border:1px solid var(--taak);border-left-width:5px}
.taak-kaart.tk-primer .tk-naam{font-size:19px}
.taak-kaart.tk-primer .tk-ikoon{width:54px;height:54px;background:var(--taak);
  color:var(--taak-tks)}
.taak-kaart.tk-primer:active{background:var(--taak-dim);transform:scale(.985)}
.taak-sek-ttl{margin:18px 0 8px;font:700 10px var(--f-ui);text-transform:uppercase;
  letter-spacing:1px;color:var(--text3)}
/* Die vier bestaande kaarte bly presies wat hulle is — net kompakter, want
   hulle is nou kortpaaie en nie meer die hoofpad nie. */
.taak-rooster-sek{gap:8px;margin-top:0}
.taak-rooster-sek .taak-kaart{min-height:62px;padding:10px 14px}
.taak-rooster-sek .tk-ikoon{width:38px;height:38px;border-radius:11px}
.taak-rooster-sek .tk-ikoon svg{width:20px;height:20px}
.taak-rooster-sek .tk-naam{font-size:15px}
.taak-rooster-sek .tk-hulp{font-size:11.5px}

/* ── 26.3 Sagte kategorie-filter op die term-chips (§4.3) ── */
.kat-almal{width:100%;min-height:40px;margin-top:8px;border-radius:var(--r-md);
  background:transparent;border:1px dashed var(--border3);color:var(--text2);
  font:600 12px var(--f-ui)}
.kat-almal:active{background:var(--panel2)}

/* ── 26.4 Volskerm-kaart + stop-leiding (fase 4b, plan §4.3) ── */
/* Dieselfde Leaflet-instansie word klein én groot gebruik — geen tweede kaart,
   geen sinkronisasie. invalidateSize() loop ná elke toggle. */
.tuis-kaart-wrap.kaart-vol{position:fixed;inset:0;z-index:var(--z-modaal);
  margin:0;border:0;border-radius:0;box-shadow:none}
.tuis-kaart-wrap.kaart-vol .tuis-mini-kaart{height:100dvh}
.tuis-kaart-wrap.kaart-vol .tkw-ligging{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
/* ⚠ #kaartToe staan BUITE .tkw-pille (hy is 'n direkte kind van die wrap). Met
   net `margin-left:auto` was hy position:static, en in volskerm — waar die kaart
   100dvh word — is hy tot NET onder die skerm gestoot: sigbaar volgens die DOM,
   onbereikbaar vir 'n vinger. Volskerm was dus 'n lokval. Hy word nou absoluut
   geplaas, bo Leaflet se kontroles (z-index 800) en binne die veilige gebied. */
.tkw-toe{position:absolute;top:8px;right:8px;z-index:802;margin:0;
  min-width:40px;min-height:40px;display:grid;place-items:center;
  padding:0;font-size:15px;line-height:1}
.tuis-kaart-wrap.kaart-vol .tkw-toe{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  right:calc(env(safe-area-inset-right,0px) + 10px)}
.tuis-kaart-wrap.kaart-vol .tkw-pille{top:calc(env(safe-area-inset-top,0px) + 10px)}

.stop-strook{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;
  padding:10px 14px;margin:-4px 0 10px;border-radius:var(--r-lg);text-align:left;
  background:var(--panel2);border:1px solid var(--border2);color:var(--text);
  font:600 13px var(--f-ui);line-height:1.35}
.stop-strook:active{background:var(--panel3)}
.stop-strook .ss-ik{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:var(--green-dim);color:var(--green2);
  font-size:16px}
.stop-strook .ss-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stop-strook .ss-t1{color:var(--text)}
.stop-strook .ss-t2{font-weight:500;font-size:11.5px;color:var(--text2)}
.stop-strook .ss-t2 b{font-family:var(--f-mono);font-weight:700;color:var(--text)}
.stop-strook.klaar .ss-ik{background:var(--green);color:#0d1a10}
.stop-strook .ss-pyl{flex:0 0 auto;color:var(--text3);font-size:16px}

/* Punt-merkers. Sedert 2026-08-17 (besluit 1) is dit NET 'n mens se eie punte: 'n
   handmatige punt kry sy nommer in goud, 'n opdrag (uit 'n waarneming) 'n rooi
   uitroep. Die neutrale groen basis-styl bly staan omdat hy die vorm dra — die
   .hand/.opdrag-variante oorskryf net die kleur. */
.mk-stop{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(14,18,22,.85);border:2px solid var(--green2);color:var(--green2);
  font:800 12px var(--f-ui);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.mk-stop.hand{border-color:var(--gold);color:#1a1403;background:var(--gold)}
.mk-stop.opdrag{border-color:var(--red);color:#fff;background:var(--red)}
.mk-stop.sleep{border-style:dashed}

/* DIE WEEK SE KOL — die enigste plek waarheen die STELSEL 'n moniteerder stuur.
   Doelbewus groter en anders as die punt-merkers: dit is nie 'n punt tussen ander
   nie, dit is DIE punt. Die wit ring lig hom van 'n satellietbeeld af. */
.mk-kol{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--green);border:2.5px solid #fff;color:#0d1a10;
  box-shadow:0 0 0 3px rgba(65,182,73,.3), 0 2px 7px rgba(0,0,0,.55)}
.mk-kol svg{stroke:currentColor;stroke-width:2.2;fill:none}
/* Klaar = geen opdrag meer; hy bly sigbaar (waar was ek hierdie week?) maar tree terug. */
.mk-kol.klaar{background:var(--panel3);border-color:var(--border3);color:var(--text2);
  box-shadow:0 2px 6px rgba(0,0,0,.45)}

#puntOv .keuse-knop{text-decoration:none}
#sitOv .f-in{margin-top:10px}

/* ── 26.5 Hotspot-leiding (fase 5, plan §4.5) ── */
/* Die stelsel het self 'n kol opgetel — dit is 'n WAARSKUWING, nie 'n taak nie,
   dus die rooi-oranje toon en nie die neutrale paneel-agtergrond nie. */
.hot-strook{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;
  padding:10px 14px;margin:-4px 0 10px;border-radius:var(--r-lg);text-align:left;
  background:rgba(208,80,80,.16);border:1px solid rgba(208,80,80,.5);
  color:var(--text);font:600 13px var(--f-ui);line-height:1.35}
.hot-strook:active{background:rgba(208,80,80,.24)}
.hot-strook.stil{background:var(--panel2);border-color:var(--border2);color:var(--text2)}
.hot-strook .hs-ik{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:rgba(208,80,80,.28);font-size:16px}
.hot-strook.stil .hs-ik{background:var(--panel3)}
.hot-strook .hs-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hot-strook .hs-t2{font-weight:500;font-size:11.5px;color:var(--text2)}
.hot-strook .hs-t2 b{font-family:var(--f-mono);font-weight:700;color:var(--text)}
.hot-strook .hs-pyl{flex:0 0 auto;color:var(--text3);font-size:16px}

/* ── 26.6 Predator-loslaatpunte (fase 7) ── */
/* Groen: dit is die GOEIE goed wat losgelaat word, nie 'n probleem nie. */
.mk-los{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--green);border:2px solid #fff;color:#0d1a10;
  font:800 11px var(--f-ui);box-shadow:0 1px 4px rgba(0,0,0,.5)}
#losOv .seg{margin-top:6px}
#losOv #losNota,#losOv #losPunte{margin-top:6px;line-height:1.45}

/* ═══ 27. V7 — MODERNE POETS ══════════════════════════════════════════════════
   Jaco punt 13: minder klikke, groter knoppies, duideliker uitleg, mooier tipografie,
   beter spasiëring, konsekwente kleure. Suiwer visueel: geen selektor hier verander
   gedrag, en niks nuuts word bygevoeg wat die JS moet ken nie.
   Die donker tema bly die verstek — dit is 'n veld-app wat in die son gelees word en
   die kontras-afdeling (§25.13) is daarvoor gebou. */

/* 27.1 EEN tik-terugvoer vir die hele app.
   Jaco punt 9: "wanneer die gebruiker op 'n opsie klik moet die knoppie DADELIK wys
   dat dit gekies is." Voorheen het party knoppies geskaal, party niks gedoen nie, en
   die skale het gewissel (.94 / .97 / .985 / .99). Een reël, een gevoel. */
.tchip:active,.keuse-knop:active,.taak-kaart:active,.begin-keuse:active,
.begin-plaas:active,.btn-main:active,.btn-sec:active,.btn-ok:active,
.btn-cancel:active,.gps-knop:active,.werk-strook:active,.lr:active{
  transform:scale(.975);
  transition:transform .06s var(--ease)}

/* 27.2 Tik-teikens. Alles wat 'n mens in die veld met een hand tref, is ≥48px; die
   primêre aksie van 'n skerm is ≥56px. Klein kop-kontroles bly klein — hulle is
   navigasie, nie werk nie. */
.keuse-knop{min-height:60px}
.btn-cancel,.btn-ok,.btn-sec{min-height:52px}
.lr{min-height:56px}

/* 27.3 Tipografie-hiërargie: die naam van 'n ding is groter as sy metadata, en
   koppe gebruik konsekwent die kop-font. */
.paneel-ttl .t1{font-family:var(--f-kop);font-weight:600}
.sek-ttl{font-family:var(--f-kop);font-weight:600;letter-spacing:.1px}
.card h3{font-family:var(--f-kop);font-weight:600;font-size:17.5px}

/* 27.4 Asemruimte om die primêre besluite. Die tuisskerm was die digste plek in die
   app en dit is juis waar 'n moniteerder onder tydsdruk kyk. */
.taak-rooster{gap:12px}
#tuis .taak-sek-ttl{margin-top:22px}
.stap-wikkel .sek-ttl{margin-top:2px}

/* 27.5 Kleur-dissipline: die vyf taak-temas (§25.1) bly die ENIGSTE bron van
   aksentkleur. Hierdie twee was ad-hoc hex-waardes wat buite daardie stelsel geval het. */
#kaartWrap,#map{background:var(--bg)}

/* 27.6 Fokus is sigbaar vir wie met 'n sleutelbord of skermleser werk. Die app is
   'n foon-app, maar admin gebruik hom op 'n skerm en 'n onsigbare fokus is 'n val. */
.tchip:focus-visible,.keuse-knop:focus-visible,.taak-kaart:focus-visible,
.begin-keuse:focus-visible,.btn-main:focus-visible,.btn-sec:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}

/* 27.7 Wie "minder beweging" gekies het, kry dit — insluitend ons nuwe tik-animasie. */
@media(prefers-reduced-motion:reduce){
  .tchip:active,.keuse-knop:active,.taak-kaart:active,.begin-keuse:active,
  .begin-plaas:active,.btn-main:active,.btn-sec:active,.btn-ok:active,
  .btn-cancel:active,.gps-knop:active,.werk-strook:active,.lr:active{transform:none}
}

/* ═══ 28. INTELIGRO-HERONTWERP (Jaco 2026-07-31: "dieselfde styl en ikone as die
   inteligro app") ═══════════════════════════════════════════════════════════════
   Die tokens was reeds InteliGro s'n (§1). Hierdie afdeling bring die KOMPONENT-
   resepte oor, woordeliks uit die InteliGro-app se stylstelsel:
   · die ikoon-teël met sy kleur-tint (die rail-kaart-resep)
   · die 3D-diepte-oorlaag op kaarte (lig bo, skadu onder, inset-liglyn)
   · die profiel-chip (voorletter-avatar + naam + rol)
   · die groen gradient-hoofknoppie met gloed
   · sink-chips, die modaal-intree-animasie, skuifbalke
   · hover NET waar 'n muis bestaan (@media hover:hover) — die veld-app is touch. */

/* ── 28.1 Die ikoon-teël-resep. Elke teël lees sy kleur uit 'n lokale veranderlike
   (--bk-kleur op die beginskerm, --kk-kleur op die keuseblad, --taak op die
   tuiskaarte) — presies InteliGro se per-afdeling-tint:
   kleur K · agtergrond linear-gradient(165deg, K@26, K@9 72%) op panel2 ·
   rand K@45 · inset-liglyn + sagte kleur-skadu. */
.begin-keuse .bk-ik{
  color:var(--bk-kleur,var(--green));
  background:linear-gradient(165deg,
      color-mix(in srgb, var(--bk-kleur,var(--green)) 26%, transparent),
      color-mix(in srgb, var(--bk-kleur,var(--green)) 9%, transparent) 72%),
    var(--panel2);
  border:1px solid color-mix(in srgb, var(--bk-kleur,var(--green)) 45%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
    0 2px 6px -1px color-mix(in srgb, var(--bk-kleur,var(--green)) 30%, transparent)}
.begin-keuse .bk-ik svg{stroke-width:2}

.keuse-knop .kk-ik{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--kk-kleur,var(--green));
  background:linear-gradient(165deg,
      color-mix(in srgb, var(--kk-kleur,var(--green)) 26%, transparent),
      color-mix(in srgb, var(--kk-kleur,var(--green)) 9%, transparent) 72%),
    var(--panel2);
  border:1px solid color-mix(in srgb, var(--kk-kleur,var(--green)) 45%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
    0 2px 6px -1px color-mix(in srgb, var(--kk-kleur,var(--green)) 30%, transparent)}
/* Die aanteken-keuseblad se teëls dra sedert 2026-08-17 'n EMOJI i.p.v. 'n SVG: 'n
   afdeling wat 'n admin byvoeg, bring sy eie emoji saam maar kan nooit 'n nuwe
   SVG-simbool in die skil se sprite kry nie. Die teël en sy kleur bly presies. */
.keuse-knop .kk-ik.emoji{font-size:19px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--f-ui)}

/* ── Die aanteken-keuseblad staan in TWEE KOLOMME (Jaco, 2026-08-17) ──────────
   Die blad het van ses na agt inskrywings gegroei toe die afdelings hom begin vul,
   en 'n admin kan môre nog een byvoeg. In één kolom het dit op 'n 375×667-skerm
   (iPhone SE/8 — die foon wat die meeste moniteerders dra) onder die vou geloop:
   die kaart het binne-in gerol, dus was "Terug" net ná 'n rol bereikbaar. Twee
   kolomme laat die hele keuse weer in een oogopslag lees, met ruimte vir groei.

   Die teël draai vertikaal (ikoon bo, naam onder): 'n kolom is ±150px, en 'n naam
   soos "Voordelige insekte" pas nie langs 'n 36px-ikoon in daardie breedte nie.

   ⚠ NET binne #tkoLys. `.keuse-knop` leef ook in #puntOv en op die soekblad, waar
     'n vol-breedte-ry die regte vorm is — 'n globale rooster sou hulle breek. */
/* ── P1 (2026-08-18): die keuseblad IS die beginskerm ──────────────────────────
   Ná die modus-keuse maak die blaai vanself oop, dus is die tuisskerm se
   "Teken aan wat jy sien"-kaart en sy "Of gaan direk na"-rooster dubbelop — 'n mens
   sien hulle net nog wanneer hy Terug druk, en dan is die blaai reeds die pad.
   ⚠ Hulle word VERSTEEK, nie verwyder nie: bedraad() roep
   `byId("tkStasie").addEventListener(...)` SONDER 'n null-toets, en 'n ontbrekende
   element gooi 'n TypeError wat die HELE vloei-laag in sy catch afskakel. Die DOM
   bly dus heel; net die oë sien dit nie. */
#tkTeken, .taak-sek-ttl, .taak-rooster-sek{display:none}

/* Die tweede groep in die blaai: bestemmings, nie aantekeninge nie. Kleiner teëls,
   want dit is die minder gereelde pad — en met ±12 inskrywings moet die blad op 'n
   375x667-skerm nog sonder rol lees. */
.tko-groep-ttl{grid-column:1 / -1;margin:14px 0 -2px;font:800 11.5px var(--f-ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
#tkoLys .tko-gaan{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:9px}
#tkoLys .tko-gaan .keuse-knop{min-height:66px;padding:9px 8px;gap:5px;font-size:12.5px}
#tkoLys .tko-gaan .kk-ik{width:28px;height:28px}
/* Dieselfde modus-reël as #tkSoek en #tkoLokval: 'n val-pad hoort nie in Monitering. */
body.werk-monitor #tkoLys .kk-valle{display:none}

/* ══ P2 — VINNIGE KRUIS-AANTEKENING (2026-08-18) ══════════════════════════════
   Die kategorieblaai in SY-MODUS. Die inskrywings self word in JS gefiltreer (net
   dié met 'n `kode`); hierdie klas doen die OOG se werk: 'n dun groen rand sê "dit
   is 'n uitstappie, jou vorm wag nog onder". */
#tekenOv.tko-sy .card{border-color:color-mix(in srgb, var(--green) 55%, transparent);
  box-shadow:var(--shadow2), 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent)}

/* Die sy-vorm self. Hy is 'n gewone .ov/.card, dus erf hy die modaal-reëls (rol,
   maks-hoogte, animasie) en die NAV-stapel tel hom vanself op. */
.sy-kop{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.sy-kop .sy-ik{flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--f-ui);
  background:linear-gradient(165deg,
      color-mix(in srgb, var(--kk-kleur,var(--green)) 26%, transparent),
      color-mix(in srgb, var(--kk-kleur,var(--green)) 9%, transparent) 72%),
    var(--panel2);
  border:1px solid color-mix(in srgb, var(--kk-kleur,var(--green)) 45%, transparent)}
.sy-kop .sy-kop-t{min-width:0}
.sy-kop h3{margin:0}
.sy-sub{font:600 11.5px var(--f-ui);color:var(--text3);margin-top:1px}
/* ⛔ GEEN EIE ROLGEBIED HIER. Die chips WRAP en die KAART rol — `.ov .card` dra reeds
   `max-height:92dvh; overflow-y:auto`. 'n Tweede vertikale rolgebied binne 'n
   rollende modaal is die staande slaggat wat 'n oorleg op 'n foon onsluitbaar maak:
   die vinger vang die binneste gebied, die kaart self skuif nooit, en die knoppies
   onderaan bly buite bereik. Twaalf chips wrap na ±5 rye; die kaart hanteer dit. */
.sy-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px}
.sy-chips .tchip{min-height:42px;padding:7px 12px;font-size:13px}
#syErns{display:flex;flex-wrap:wrap;gap:7px}
#syErns .tchip{min-height:42px;padding:7px 12px;font-size:13px}
#syErns > div{width:100%}
.sy-gps{margin-top:10px;font:600 11.5px var(--f-ui);color:var(--text2);
  padding:8px 10px;border-radius:var(--r-md);background:var(--panel2);
  border:1px solid var(--border2);line-height:1.4}
.sy-gps.ok{border-color:color-mix(in srgb, var(--green) 50%, transparent);color:var(--green2)}
.sy-gps.swak{border-color:color-mix(in srgb, var(--gold) 50%, transparent);color:var(--gold-light)}

/* ══ P4 — DIE SCOUT SE EIE DAG OP DIE KAART + DIE WYSIG-VORM (2026-08-18) ═══════

   Die MERKER. Klein (20 px) en doelbewus anders as alles wat reeds op hierdie kaart
   staan: .mk-stop (26 px, goud/rooi) is 'n OPDRAG, .mk-kol (32 px, wit ring) is die
   week se teiken, die hotspot-kringe is 'n waarskuwing. Hierdie een sê net "hier was
   JY" en moet dus die stilste van almal wees — hy mag nooit soos werk lyk nie.
   Die soort se kleur kom deur --ek in die style-attribuut (dieselfde patroon as
   --kk-kleur op die keuse-teëls); die basis bly donker sodat 'n emoji op 'n
   satellietbeeld leesbaar bly. */
/* Die TIKGEBIED. Leaflet se klikvlak is presies iconSize, dus is 'n 20 px merker 'n
   20 px knoppie — te klein vir 'n duim in 'n boord. Die houer is 30 px en deursigtig:
   die oog sien die klein merker, die vinger kry die groter teiken. */
.mk-eie-vat{display:grid;place-items:center;width:30px;height:30px}
.mk-eie{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(14,18,22,.88);border:1.5px solid var(--ek,var(--text3));
  font-size:10px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.55);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--f-ui)}
/* 'n WAARNEMING kry 'n effense gloed — dit is die enigste soort wat 'n mens hier kan
   wysig, en die oog moet die klikbare een eerste vind. */
.mk-eie.w{box-shadow:0 0 0 2px color-mix(in srgb, var(--ek,var(--orange)) 26%, transparent),
  0 1px 3px rgba(0,0,0,.55)}
/* ROF = die merker staan op die VAL se registerpunt, nie op 'n eie GPS-fix nie
   (/api/vang/vandag se terugval). Die stippellyn sê dit sonder woorde: hierdie
   koördinaat is 'n benadering. */
.mk-eie.rof{border-style:dashed;opacity:.82}
/* WAG = die mens het dit gewysig en die wysiging le nog in die aflyn-tou. Die merker wys
   reeds sy NUWE waarde, dus moet iets se dat die kantoor dit nog nie het nie. 'n Blou
   ring, want dit is 'n TOESTAND van die sinkronisering — dieselfde taal as die ⇪-pil in
   die taakbalk — en nie 'n erns-vlak, wat die goud/rooi-skaal beteken. Die ring staan
   BUITE .w se gloed sodat die twee kan saamstaan. */
/* P6 — die kyker se "kyk as agent"-balk. 'n Hulpmiddel vir EEN mens (die oorhoofse
   admin), dus visueel rustig en nie deel van die boer se skerm nie.
   ⛔ ABSOLUUT OP DIE KAART, nie in die plaas-kieser nie. In die blaaier gevang: #kieser
   is `display:none` sodra die oorsig-kaart wys — en die kaart is presies waar hierdie
   kieser hoort te wees. Die balk het 0×0 gemeet: gebou, ontplooi, en heeltemal
   onbereikbaar. Regs-bo is die enigste rustige hoek — #opsom beset links-bo tot ~205px
   van regs af, #kaartLeg is links-onder, en die streekbalk sit heel onder. */
.ka-balk{position:absolute;top:8px;right:8px;z-index:610;max-width:260px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 10px;border:1px solid var(--border);border-radius:10px;
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.ka-balk label{margin:0;font-size:12px;color:var(--text2)}
.ka-balk select{flex:1 1 150px;min-width:130px;min-height:38px}
.ka-balk .ka-wenk{flex:1 1 100%;font-size:11.5px;line-height:1.35;color:var(--blue)}

.mk-eie.wag{box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--blue),
  0 1px 3px rgba(0,0,0,.55)}

/* Die oorlegsel se opsomming: die AANGETEKENDE waardes, links die veld, regs die
   waarde. Dieselfde leesritme as .op-r in die bevestig-stap. */
.eie-ops{display:flex;flex-direction:column;gap:1px;margin:6px 0 2px}
.eie-ops:empty{display:none}
.eie-r{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border2)}
.eie-r:last-child{border-bottom:0}
.eie-r span{flex:0 0 38%;font:600 11.5px var(--f-ui);color:var(--text3)}
.eie-r b{flex:1;min-width:0;font:700 13px var(--f-ui);color:var(--text);
  word-break:break-word}

/* DIE ROU VELDTEKS. Sy lyk soos 'n aanhaling en NIE soos 'n invoerveld nie — dit is
   die hele punt (0006 se reël 1: rou veldteks verander nooit). 'n Blokkie wat na 'n
   toe invoerveld lyk, laat 'n mens daarin tik en wonder hoekom niks gebeur nie. */
.eie-rou{margin:10px 0 4px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);
  border-left:3px solid var(--border3)}
.eie-rou-et{font:700 10px var(--f-ui);text-transform:uppercase;letter-spacing:1px;
  color:var(--text3)}
.eie-rou-t{margin-top:3px;font:600 14px var(--f-ui);color:var(--text);line-height:1.35;
  word-break:break-word}
.eie-rou-w{margin-top:5px;font:600 11px var(--f-ui);color:var(--text3);line-height:1.35}

/* DIE STEMNOTA (v124). Sy deel die rou-teks se gesig, want sy antwoord dieselfde
   vraag ("wat het ek gesê?") — net met 'n goue rand, want hier IS iets om te doen.
   ⚠ Die knoppie is 44 px hoog: dit word met 'n handskoen in 'n boord gedruk. */
.eie-stem{margin:10px 0 4px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--panel2);border:1px solid var(--border2);
  border-left:3px solid var(--gold)}
.eie-stem-k{display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  min-height:44px;padding:0 16px;border-radius:var(--r-md);cursor:pointer;
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.35);
  color:var(--gold-light);font:700 13px var(--f-ui)}
.eie-stem-k:active{transform:scale(.97)}
.eie-stem-ik{font-size:12px;line-height:1}
/* Die <audio> self bly weg — die knoppie IS die kontrole. 'n Blaaier se eie
   spelerbalkie is op 'n foon 'n derde stel knoppies wat almal anders lyk. */
#eieStem{display:none}
/* 'n Klikbare dag-ry moet SÊ dat sy klikbaar is. Net die bediener se rye kry dit;
   'n tou-ry bly stom, want daar is nog niks om oop te maak nie. */
.vd-r.oop{cursor:pointer}
.vd-r.oop:active{background:var(--panel2)}

/* DIE SLOT. Ná middernag verdwyn die vorm nie stil nie — hierdie strook staan in sy
   plek en sê waarom. Goud: dit is 'n let-op, nie 'n fout — die aantekening self is
   heeltemal reg, sy is net klaar. */
.eie-slot{margin:10px 0 2px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.35);
  color:var(--gold-light);font:600 12.5px var(--f-ui);line-height:1.4}
/* Die keuser en die nota erf .f-in; net die ritme tussen die afdelings kort hulp. */
#eieOv .sek-ttl{margin-top:14px}
#eieOv #eieBlok,#eieOv #eieNota{margin-top:2px}
#eieOv #eieErns{display:flex;flex-wrap:wrap;gap:7px}
#eieOv #eieErns .tchip{min-height:42px;padding:7px 12px;font-size:13px}
#eieOv #eieErns > div{width:100%}
/* ⛔ DIESELFDE REËL AS BY DIE SY-VORM: geen tweede vertikale rolgebied. `.ov .card`
   dra reeds max-height + overflow-y, en 'n binneste roller maak 'n oorleg op 'n foon
   onsluitbaar (die staande mobiele slaggat). Die aksie-ry anker onderaan sodat
   "Terug" en "Stoor" bereikbaar bly wanneer die chips en die opsomming saam rol. */
#eieOv .card .acts{position:sticky;bottom:0;margin:14px -20px -20px;padding:12px 20px;
  background:linear-gradient(to top, var(--panel) 72%, transparent);
  backdrop-filter:blur(2px)}

/* ⛔ TERUG MOET ALTYD BEREIKBAAR WEES. Hierdie blad is sedert P1 die EERSTE ding wat
   'n moniteerder sien, en met 12 inskrywings rol die kaart reeds op 'n 375x667-skerm.
   'n Vaste hoogte per teël is nie 'n oplossing nie: 'n admin kan môre nog 'n afdeling
   byvoeg en dan is die uitgang weer weg. Ons anker die aksie-ry dus onderaan die
   kaart — die LYS rol, die uitgang nie. (Dieselfde gees as die staande kontrole dat
   'n oorleg wat nie kan rol nie, opsies onbereikbaar maak.) */
#tekenOv .card .acts{position:sticky;bottom:0;margin:0 -20px -20px;padding:12px 20px;
  background:linear-gradient(to top, var(--panel) 72%, transparent);
  backdrop-filter:blur(2px)}

#tkoLys{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
#tkoLys .keuse-knop{
  margin:0;                        /* die `gap` doen nou die spasiëring */
  flex-direction:column;justify-content:center;gap:7px;
  /* Hoër as die 60px-reël vereis: die naam vat twee reëls, en 'n vinger met 'n
     handskoen moet steeds die hele teël tref. */
  min-height:92px;padding:12px 8px;
  text-align:center;font-size:13.5px;line-height:1.25;
  overflow-wrap:break-word;        /* 'n lang enkele woord breek eerder as om uit te steek */
  hyphens:auto}

/* Die tuiskaarte se teëls het reeds --taak; hulle kry dieselfde tint i.p.v. die ou
   plat --taak-dim-vulling. Die primêre kaart hou sy vol-kleur teël (dis die anker). */
.taak-kaart:not(.tk-primer) .tk-ikoon{
  background:linear-gradient(165deg,
      color-mix(in srgb, var(--taak) 26%, transparent),
      color-mix(in srgb, var(--taak) 9%, transparent) 72%),
    var(--panel2);
  border:1px solid color-mix(in srgb, var(--taak) 45%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
    0 2px 6px -1px color-mix(in srgb, var(--taak) 30%, transparent)}
.tk-ikoon svg{stroke-width:2}

/* ── 28.2 Die 3D-diepte-oorlaag (InteliGro se rail-kaart-resep, woordeliks):
   'n ligte gradient bo-op die paneelkleur, 'n inset-liglyn, en gestapelde skadu's.
   Op :active druk die kaart IN (inset-skadu) — die "regte knoppie"-gevoel. */
.taak-kaart,.begin-keuse,.begin-plaas,.keuse-knop,.lr{
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 45%,rgba(0,0,0,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 4px -1px rgba(0,0,0,.3), 0 7px 18px -5px rgba(0,0,0,.38)}
.taak-kaart:active,.begin-keuse:active,.begin-plaas:active,.keuse-knop:active,.lr:active{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.25)}

/* ── 28.3 Die profiel-chip — InteliGro se #nr-profiel-patroon, woordeliks:
   36px-chip, voorletter-avatar (24px groen sirkel), naam, rol-etiket. */
.wie-strook{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--border2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.25);
  font:700 12.5px var(--f-ui);color:var(--text);
  overflow:hidden;white-space:nowrap;max-width:100%}
.wie-strook .wie-init{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--green);color:#fff;display:flex;align-items:center;
  justify-content:center;font:800 10.5px var(--f-ui)}
.wie-strook .wie-naam{overflow:hidden;text-overflow:ellipsis}
.wie-strook .wie-rol{color:var(--text2);font:600 11px var(--f-ui);flex:0 0 auto}
#beginWie{margin:2px 0 14px}

/* ── 28.4 Die groen gradient-hoofknoppie met gloed (InteliGro se .btn-main): */
.btn-main{
  background:linear-gradient(135deg,var(--green-hover),var(--green));
  border:1px solid var(--green);
  box-shadow:0 2px 8px -2px rgba(65,182,73,.45)}
.btn-main:active{transform:translateY(1px) scale(.985)}
.vloei-voet .vv-gaan{
  background:linear-gradient(135deg,var(--green-hover),var(--green));
  border:1px solid var(--green);
  box-shadow:0 2px 8px -2px rgba(65,182,73,.45)}

/* ── 28.5 Hover NET op 'n regte muis (InteliGro se aanpassing #2 vir touch):
   op die foon is die rustoestand die leesbare een en net :active gee terugvoer. */
@media (hover:hover){
  .taak-kaart:hover,.begin-keuse:hover,.lr:hover{
    transform:translateY(-1px);border-color:var(--green);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
      0 4px 9px -2px rgba(0,0,0,.35), 0 14px 28px -8px rgba(0,0,0,.5)}
  .keuse-knop:hover{background:var(--green-dim);border-color:var(--green)}
  .btn-main:hover,.vloei-voet .vv-gaan:hover{
    transform:translateY(-2px);box-shadow:var(--glow-green);filter:brightness(1.04)}
  .btn-sec:hover{border-color:var(--border3);color:var(--green2);
    transform:translateY(-1px);box-shadow:var(--shadow-sm)}
  .wie-strook:hover{border-color:var(--green)}
}

/* ── 28.6 Sink-chips (InteliGro se .ig-md-sink ok/wag/vas — die drie toestande van
   'n vanlyn-eerste veld-app): kleur@15%-agtergrond met 'n ligter hue-teks. */
.sync-strook{border-radius:var(--r-md);padding:8px 12px;font:600 12px var(--f-ui);
  background:rgba(82,168,112,.15);color:#78c894;border:1px solid transparent}
.sync-strook.wag{background:rgba(224,168,46,.15);color:#e0be6a}
.sync-strook.sleg{background:rgba(200,90,80,.15);color:#e09a90;
  border-color:rgba(200,90,80,.35)}

/* ── 28.7 Die modaal-intree-animasie (InteliGro se nrModalIn, deur die hele app): */
@keyframes nrModalIn{from{opacity:0;transform:translateY(8px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}}
.ov.on .card{animation:nrModalIn .22s var(--ease)}
#kwit.on .kw-mid{animation:nrModalIn .22s var(--ease)}

/* ── 28.8 Skuifbalke (InteliGro se 7px-duim): */
.paneel-body::-webkit-scrollbar,#tuis::-webkit-scrollbar,#hoof::-webkit-scrollbar,
.lys::-webkit-scrollbar{width:7px}
.paneel-body::-webkit-scrollbar-thumb,#tuis::-webkit-scrollbar-thumb,
#hoof::-webkit-scrollbar-thumb,.lys::-webkit-scrollbar-thumb{
  background:var(--border2);border-radius:4px}

/* ── 28.10 Reduced motion dek ook die nuwe animasies: */
@media(prefers-reduced-motion:reduce){
  .ov.on .card,#kwit.on > div{animation:none}
}

/* ── 28.11 Die uitvoer se taalkeuse (Jaco 2026-07-31: "daar moet n keuse wees om
   in afrikaans of engels te export"). 'n Segment-kontrole, nie 'n derde knoppie
   nie: die taal is 'n EIENSKAP van die aflaai, nie 'n aparte aksie nie. */
.paneel-voet .uit-taal{display:inline-flex;flex:0 0 auto;margin-right:auto;
  border:1px solid var(--border2);border-radius:var(--r-md);overflow:hidden;
  background:var(--panel2)}
.paneel-voet .uit-taal button{min-width:40px;height:36px;padding:0 9px;border:0;
  background:transparent;color:var(--text3);font:700 12px var(--f-ui);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)}
.paneel-voet .uit-taal button.aan{background:var(--green);color:#fff}
.paneel-voet .btn-sec,.paneel-voet .btn-main{display:inline-flex;align-items:center;gap:7px}
.paneel-voet .btn-sec svg,.paneel-voet .btn-main svg{stroke:currentColor;stroke-width:2;fill:none}

/* ── 28.12 Ikoon + teks in 'n knoppie (2026-08-01, die emoji-omskakeling).
   Elke knoppie wat 'n emoji-voorvoegsel gehad het, dra nou 'n <svg> langs sy
   teks. Die emoji het sy eie spasie saamgebring; 'n SVG nie, dus kom die uitleg
   hier. Dit geld die knoppie-families wat werklik verander het — nie 'n blinde
   `button svg`-reël wat elke bestaande knoppie sou herposisioneer nie. */
.foto-knop,.gps-knop,.waarsku-knop,.stem-knop,.tuis-sek-knop,.tuis-terug,
.skoon-knop,.onbereik-skakel,.kmz-knop,.hdr-pil,.btn-ok,.paneel-aksie-waarsku{
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.foto-knop svg,.gps-knop svg,.waarsku-knop svg,.stem-knop svg,.tuis-sek-knop svg,
.tuis-terug svg,.skoon-knop svg,.onbereik-skakel svg,.kmz-knop svg,.hdr-pil svg,
.btn-ok svg,.paneel-aksie-waarsku svg,.keuse-knop svg,.btn-main svg,.btn-sec svg,
.bh-x svg,.fv-x svg,.tkw-toe svg,.paneel-aksie svg,#qrX svg{
  flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none}
/* Die maak-toe-knoppies was 'n ✕-karakter gewees: hulle het dus geen sentrering. */
.bh-x,.fv-x,.tkw-toe,#qrX,.paneel-aksie{display:inline-flex;align-items:center;justify-content:center}
/* Die kwitansie se merk was 'n 34px-karakter; nou 'n SVG van dieselfde hoogte. */
.kw-merk{display:flex;align-items:center;justify-content:center}
.kw-merk svg{stroke:currentColor;stroke-width:2.4;fill:none}
/* Kaartspelde: 'n <svg> in 'n divIcon moet self sentreer. */
.plaas-pin,.wmerk{display:flex;align-items:center;justify-content:center}
.plaas-pin svg,.wmerk svg{stroke:currentColor;stroke-width:2.2;fill:none}
.ss-ik svg,.bt svg{stroke:currentColor;stroke-width:2;fill:none;vertical-align:-2px}
/* Die stem-knoppie se opneem-toestand het 'n eie kleur — die ikoon volg dit. */
.foto-knop.opneem svg{stroke:currentColor}

/* ── 28.13 "Klaar met plaas" (Jaco 2026-08-01). Dit is die enigste knoppie op die
   tuisskerm wat iets NA BUITE stuur, dus lyk hy anders as die taakkaarte: 'n vol
   groen rand en 'n eie ikoon-teël, sodat niemand hom per ongeluk druk terwyl hy
   na "Stasie" mik nie. */
.klaar-knop{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;
  margin-top:14px;padding:10px 14px;border-radius:var(--r-lg);
  background:var(--panel2);border:1.5px solid var(--green);color:var(--text);
  text-align:left;cursor:pointer;
  background-image:linear-gradient(180deg,rgba(65,182,73,.10),rgba(65,182,73,.03) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px -1px rgba(65,182,73,.28)}
.klaar-knop:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.klaar-knop .kl-ik{flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;color:#fff;background:var(--green)}
.klaar-knop .kl-ik svg{stroke:currentColor;stroke-width:2.4;fill:none}
.klaar-knop .kl-teks{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.klaar-knop .kl-teks b{font:700 14.5px var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klaar-knop .kl-teks i{font:500 11.5px var(--f-ui);font-style:normal;color:var(--text2)}
.klaar-knop .tk-pyl{flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none;color:var(--text3)}

/* ── 28.14 Die "Ander"-keuse in die term-lys (Jaco 2026-08-01). Hy lyk anders as
   'n term-blokkie omdat hy NIE 'n term is nie — hy maak die tikveld oop. 'n Stippel-
   rand sê "hier is nog plek", sonder om soos 'n twaalfde pes te lyk. */
.tchip.tchip-ander{
  border:1px dashed var(--border3);background:transparent;color:var(--text2);
  font-weight:700}
.tchip.tchip-ander::before{content:"+";margin-right:5px;font-weight:800;color:var(--green)}
@media (hover:hover){ .tchip.tchip-ander:hover{border-color:var(--green);color:var(--green)} }

/* ── 28.15 DIE WEEK SE RONDE (Jaco 2026-08-01) ────────────────────────────────
   Een punt per blok per week; 10 bome by die punt; 10 plekke per boom. Die UI
   se hele werk is om die mens te LEI: waar is ek, hoeveel bome oor, en een
   vraag per boom. Vandaar die boom-strook — jy sien jou vordering sonder om te
   lees. */
.rd-punt{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:2px 0 12px;
  padding:10px 12px;border-radius:var(--r-md);background:var(--green-dim);
  border:1px solid var(--green);color:var(--text);font:600 12.5px var(--f-ui)}
.rd-punt svg{flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none;color:var(--green)}
.rd-punt .rd-heen{margin-left:auto;color:var(--green2);font-weight:800;text-decoration:underline}

/* Die tien bome. 'n Gedoene boom is groen en gemerk; die huidige een het 'n ring. */
.rd-bome{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rd-bome .rd-boom{width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  font:800 13px var(--f-ui);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.rd-bome .rd-boom.gedoen{background:var(--green);border-color:var(--green);color:#fff}
.rd-bome .rd-boom.nou{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim);color:var(--text)}
.rd-bome .rd-boom.gedoen.nou{color:#fff}

/* Die teller per ding: − 3 / 10 +  — die EEN vraag per boom. */
.rd-tel{display:flex;align-items:center;gap:9px;margin-top:9px;padding:8px 11px;
  border-radius:var(--r-md);background:var(--panel2);border:1px solid var(--border2)}
.rd-tel .rd-tel-naam{flex:1 1 auto;min-width:0;font:600 13.5px var(--f-ui);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-tel .rd-min,.rd-tel .rd-plus{flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  background:var(--panel3);border:1px solid var(--border2);color:var(--text);
  font:800 17px var(--f-ui);cursor:pointer;line-height:1}
.rd-tel .rd-plus{background:var(--green);border-color:var(--green);color:#fff}
.rd-tel .rd-getal{flex:0 0 auto;min-width:22px;text-align:center;font:800 17px var(--f-ui)}
.rd-tel .rd-uit{flex:0 0 auto;color:var(--text3);font:600 12px var(--f-ui)}

/* 0039 — 'n pes-ry by 'n boom. Die wikkel hou die teller EN (waar die term dit
   vra) die aparte erns-skaal bymekaar. ⚠ NIE .rd-ry genoem nie: dié klas behoort
   reeds aan die bloklys se rye hieronder. */
.rd-pesry{margin-top:9px}
.rd-pesry .rd-tel{margin-top:0}
/* §18 — 'n boom-gebaseerde plaag kry ja/nee, nie 'n teller nie. "Nee" is 'n EGTE
   antwoord (gekyk, niks gekry), daarom kan dit gemerk wees. */
.rd-tel .rd-jn{flex:0 0 auto;min-width:56px;height:36px;padding:0 12px;border-radius:10px;
  background:var(--panel3);border:1px solid var(--border2);color:var(--text2);
  font:700 13px var(--f-ui);cursor:pointer;line-height:1}
.rd-tel .rd-jn.aan{background:var(--text3);border-color:var(--text3);color:#fff}
.rd-tel .rd-jn.ja.aan{background:var(--green);border-color:var(--green);color:#fff}
/* §23 — erns is 'n APARTE skaal onder die voorkoms, doelbewus visueel geskei
   sodat niemand dit as deel van die telling lees nie. */
.rd-erns{display:flex;align-items:center;gap:6px;padding:7px 11px 2px;
  border-left:2px solid var(--border2);margin:2px 0 0 11px}
.rd-erns-et{flex:0 0 auto;font:600 11.5px var(--f-ui);color:var(--text3);margin-right:2px}
.rd-erns .rd-e{flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  font:700 13px var(--f-mono);cursor:pointer;line-height:1}
.rd-erns .rd-e.aan{background:var(--gold);border-color:var(--gold);color:#1a1400}
/* Die keuse-skerm se "/boom"-merkie op 'n chip. */
.rd-mrk{font-style:normal;font-size:10.5px;opacity:.6;font-weight:600}
.rd-kies-gekies{margin-top:4px}
/* Die ronde is aflyn uit 'n afskrif gelaai — eerlik, nie stil nie. Goud, want
   dit is 'n let-op, nie 'n fout: die mens kan volle werk doen. */
.rd-aflyn{margin:0 0 10px;padding:8px 11px;border-radius:var(--r-md);
  background:var(--gold-dim);border:1px solid rgba(244,180,0,.35);
  color:var(--gold-light);font:600 12px var(--f-ui)}

/* Die bloklys se ry: naam, kultivar, en die vordering regs. */
.rd-ry .rd-kv{color:var(--text3);font-weight:600;font-size:12px}
.rd-ry .rd-merk{flex:0 0 auto;min-width:44px;text-align:right;
  font:800 12.5px var(--f-ui);color:var(--text2)}
.rd-ry .rd-merk.ok{color:var(--green)}
.rd-ry .rd-merk svg{stroke:currentColor;stroke-width:2.6;fill:none}
.rd-ry.klaar{opacity:.72}
.rd-ry[disabled]{opacity:.45;cursor:not-allowed}

/* P7 — die kennisgewing-strook op die tuisskerm. Sy sit langs die sync-strook omdat sy
   dieselfde soort ding is: 'n toestand van die app se verbinding met die buitewêreld, nie
   'n taak nie. Sy bly heeltemal versteek tot die JS bevestig die rol EN die blaaier kan
   dit — 'n knoppie wat niks doen nie, is hoe 'n mens leer om die vraag weg te klik. */
.push-strook{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel)}
.push-strook .push-t{flex:1 1 auto;display:flex;align-items:baseline;gap:8px;min-width:120px}
.push-strook .push-t > span:first-child{font-weight:700;color:var(--text)}
.push-strook .push-stand{font-size:12px;color:var(--text2)}
.push-strook .push-wenk{flex:1 1 100%;font-size:12px;line-height:1.4;color:var(--text2)}
.push-strook .bg-knop{flex:0 0 auto;min-height:40px}

/* P8 punt 7 — "wat het van my werk geword?" op die scout se tuisskerm.
   ⚠ Die REDE by 'n verwerping is die prominentste ding hier en word nooit afgekap nie:
   dit is die enigste stuk inligting wat die scout kan gebruik om iets reg te maak. 'n
   Verwerping sonder sigbare rede is vir hom net 'n muur. */
.in-strook{margin:10px 0 0;padding:10px 12px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel)}
.in-strook .in-kop{font-weight:700;color:var(--text);margin:0 0 8px;font-size:13px}
.in-strook .in-ry{display:flex;align-items:flex-start;gap:9px;padding:6px 0}
.in-strook .in-ik{flex:0 0 auto;width:20px;text-align:center;font-size:14px;line-height:1.4}
.in-strook .in-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.in-strook .in-t b{font-size:14px;color:var(--text)}
.in-strook .in-st{font-size:12px;color:var(--text2)}
.in-strook .in-wie{opacity:.8}
.in-strook .in-ry.g .in-ik{color:var(--green)}
.in-strook .in-ry.b .in-ik{color:var(--blue)}
.in-strook .in-ry.w .in-ik{color:var(--orange)}
.in-strook .in-ry.r .in-ik{color:var(--red)}
.in-strook .in-rede{margin:0 0 8px 29px;padding:8px 10px;border-radius:8px;
  background:color-mix(in srgb, var(--red) 14%, transparent);
  border-left:3px solid var(--red);color:var(--text);font-size:13px;line-height:1.45}

/* Monique (2026-08-19): 'n SPESIFIEKE dag of week se verslag. Die datum-veld anker die
   bestaande tydperk-knoppies; leeg = die ou "relatief tot nou"-gedrag. */
.vs-datum{display:inline-flex;align-items:center;gap:6px;padding:0 8px;
  border:1px solid var(--border);border-radius:10px;min-height:38px;
  background:var(--panel2);font-size:12px;color:var(--text2)}
.vs-datum input[type=date]{border:0;background:transparent;color:var(--text);
  font:inherit;font-size:13px;padding:4px 0;min-width:120px}
.vs-datum button{border:0;background:transparent;color:var(--text2);cursor:pointer;
  font-size:14px;line-height:1;padding:4px 2px;min-height:30px}

/* ── Verslag-voet: vyf kontroles pas nie op EEN ry op 'n foon nie ──────────────
   Gemeet op 'n 740px-toestel: uit-taal 82 + datum 206 + Seisoen 100 + Excel 86 +
   PDF 296 (min-width:48%) + gapings 36 = ~806px teen 616px beskikbaar. Die
   @media(min-width:700px)-reël behandel so 'n foon boonop as 'n tablet en vat nog
   62px sypadding elke kant. Die datum-veld (Monique, hierbo) was die kind wat die
   som oor die rand gestoot het.
   Oplossing: die datum kry sy EIE ry bo-aan; die drie aflaaie deel ry twee met die
   taal-kontrole. PDF se min-width:48% (saam3.css:474) word hier oorskryf — 'n
   primêre knoppie wat die helfte van die balk eis, is wat die res uitgedruk het. */
/* ── 0055: materiaal uitgeboek ────────────────────────────────────────────────
   Die rye hergebruik #ronde se .rd-tel/.rd-min/.rd-getal/.rd-plus (die "10 bome"-
   teller) sodat die moniteerder net EEN gebaar hoef te ken. Hier net wat kortkom:
   die "iets is gekies"-merk, 'n rolvenster as die katalogus lank word, en die
   byvoeg-invoer. */
#matLys{max-height:46dvh;overflow-y:auto;margin:4px 0 10px}
#matLys .rd-pesry.hit .rd-tel-naam{color:var(--text);font-weight:600}
#matLys .rd-pesry.hit .rd-getal{color:var(--green)}
#matNuutWrap{margin:8px 0 4px}
#matNuutWrap input{width:100%;padding:10px 12px;min-height:44px;box-sizing:border-box;
  border:1px solid var(--border2);border-radius:var(--r-md);
  background:var(--panel2);color:var(--text);font:inherit;font-size:15px}
#matOv .acts{flex-wrap:wrap}
/* Die eenheid-kursief in die vasvang-vorm se voorraad-rooster het nooit 'n reël gehad. */
.tel-eh{font-style:normal;color:var(--text2);font-size:11px}

#verslag > .paneel-voet{align-items:center}
#verslag > .paneel-voet .vs-datum{order:-1;flex:1 1 100%;min-width:0}
#verslag > .paneel-voet .vs-datum input[type=date]{flex:1 1 auto;min-width:0}
#verslag > .paneel-voet .btn-sec{flex:0 1 auto}
#verslag > .paneel-voet .btn-main{flex:1 1 auto;min-width:110px}

/* ══ DIE KIESER SE SOEK EN TERUG-STAP (Jaco §3, 2026-08-26) ══════════════════════════
   Twee kontroles bo die lys: 'n soekveld en 'n terug-na-produsente. Albei is
   VELD-teikens, dus 48px hoog en vol breedte — 'n moniteerder tik dit met handskoene
   aan, in die son, met een hand.
   ⚠ Die rye self was reeds 56px (reël 519 + 1600); hierdie fase raak nie daaraan nie. */
.kieser-soek{
  width:100%;min-height:48px;margin:0 0 10px;padding:0 14px;
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--r-lg);
  color:var(--text);font:400 16px var(--f-ui);   /* 16px: kleiner laat iOS INZOEM by fokus */
  -webkit-appearance:none;appearance:none;
}
.kieser-soek::placeholder{color:var(--text3)}
.kieser-soek:focus{outline:none;border-color:var(--gold)}
/* Die native X van type="search" is in WebKit onsigbaar op 'n donker agtergrond. */
.kieser-soek::-webkit-search-cancel-button{-webkit-appearance:none;height:20px;width:20px;
  background:var(--text3);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/14px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/14px no-repeat;
  cursor:pointer}

.kieser-terugprod{
  display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:0 0 10px;
  padding:0 12px;background:transparent;border:1px dashed var(--border);
  border-radius:var(--r-lg);color:var(--text2);font:600 13.5px var(--f-ui);
  text-align:left;cursor:pointer;font-family:inherit;
}
.kieser-terugprod:active{background:var(--panel2)}

.kieser-leeg{padding:22px 14px;text-align:center;color:var(--text2);font:400 14px var(--f-ui)}

/* ══ KAARTMODUS · VALLAAG · STREEK-HITTEKAART (Jaco 2026-09-02) ════════════════════
   Alles hier is `position:absolute` BINNE die kaarthouer en `pointer-events:none` op die
   omhulsel, met `auto` op die kinders — dieselfde patroon as #streekBalk. 'n Balk wat die
   kaart se sleep vang, laat die kaart dood voel sonder enige fout.
   ⚠ align-items:center sonder overflow is die staande mobiele slagyster: 'n oorleg wat
     nie kan rol nie, is 'n dooie app op 'n foon. Elke ry hieronder kan rol. */
#kaartModus{position:absolute;left:50%;transform:translateX(-50%);top:8px;
  z-index:var(--z-kaart-el);display:none;gap:2px;padding:3px;border-radius:10px;
  background:var(--paneel);box-shadow:0 2px 10px rgba(0,0,0,.35)}
#kaartModus.on{display:flex}
#kaartModus button{border:0;background:transparent;color:var(--text2);cursor:pointer;
  font:600 12px var(--f-ui);padding:6px 12px;border-radius:8px;white-space:nowrap}
#kaartModus button.aan{background:var(--green-dim);color:var(--green2)}

#valBalk,#streekVBalk{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-kaart-el);
  display:none;flex-direction:column;gap:4px;padding:6px 8px 8px;
  background:linear-gradient(to top,rgba(12,16,20,.92),rgba(12,16,20,0));
  pointer-events:none}
#valBalk.on,#streekVBalk.on{display:flex}
#valBalk > *,#streekVBalk > *{pointer-events:auto}
#valChips,#valTipes,#streekVChips{display:flex;gap:5px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.v-onder{display:flex;gap:6px;align-items:center;overflow-x:auto}
.v-chip{flex:0 0 auto;border:1px solid var(--border);background:var(--paneel);
  color:var(--text2);border-radius:14px;padding:5px 10px;cursor:pointer;
  font:600 11.5px var(--f-ui);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  text-decoration:none}
.v-chip.klein{font-size:11px;padding:4px 9px}
.v-chip.aan{border-color:var(--green2);background:var(--green-dim);color:var(--green2)}
/* ⛔ Gestippel = 'n reeks wat NIE plaagdruk is nie (FCM-X, XSIT se steriele motte). */
.v-chip.stippel{border-style:dashed}
.v-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.v-chip b{color:var(--text);font-weight:700}
.v-tel,.v-let{color:var(--text2);font:600 11px var(--f-ui);white-space:nowrap}
#streekVWeke{background:var(--paneel);color:var(--text);border:1px solid var(--border);
  border-radius:8px;font:600 11.5px var(--f-ui);padding:4px 6px}

/* Die val-pin. Klein en vas — hy dra 'n IDENTITEIT, nie 'n gewig nie, dus mag hy nie
   met zoem skaal soos 'n hittevlek nie. */
.val-pin{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 8.5px var(--f-ui);border:1.5px solid rgba(255,255,255,.85);
  box-sizing:border-box;letter-spacing:-.2px}

/* Die streekverslag-tabel. Rol horisontaal in sy EIE houer sodat die bladsy nooit
   sywaarts rol nie. */
#streekVTabel{position:absolute;left:8px;right:8px;bottom:96px;max-height:38vh;
  overflow:auto;z-index:var(--z-kaart-el);display:none;background:var(--paneel);
  border:1px solid var(--border);border-radius:10px;padding:8px}
#streekVTabel.on{display:block}
table.sv{width:100%;border-collapse:collapse;font:12px var(--f-ui)}
table.sv th{text-align:left;color:var(--text2);font-weight:600;padding:3px 6px;
  border-bottom:1px solid var(--border);white-space:nowrap}
table.sv td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.sv-kol{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;
  vertical-align:middle}
.sv-let{color:var(--text2);font:11px var(--f-ui);margin:6px 2px 0}