/* ============================================================
   MeerkatSkool · Laerskool Wiskunde
   Mobiel-eerste app-uitleg. Alles is blokgebaseer en met die
   duim bereikbaar; die groot skerm kry net meer kolomme.
   ============================================================ */

:root{
  --papier:#F5F7FA; --wit:#FFFFFF; --ink:#042958; --sag:#5C7189; --lyn:#DDE5EE;
  --navy:#042958; --navy-dp:#18242C; --kop-navy:#042958; --kop-lyn:#3A4E5C; --oranje:#F85528; --oranje-dp:#AE4700; --oranje-lig:#F85528; --oranje-teks:#AE4700;
  --lug:#5B7285; --vul:#FDEBDD;
  --reg:#1B7A4B; --reg-sag:#E4F3EA; --fout:#B4342A; --fout-sag:#FBEBE9;
  --kop:'Zilla Slab',Georgia,serif;
  --lyf:'Karla',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:16px; --r-l:22px;
  --skad:0 2px 0 rgba(4,41,88,.06), 0 10px 24px -18px rgba(4,41,88,.5);
  --veilig-o:env(safe-area-inset-bottom,0px);
  --veilig-b:env(safe-area-inset-top,0px);
  --nav-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--papier);color:var(--ink);font-family:var(--lyf);
  font-size:17px;line-height:1.55;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--oranje);outline-offset:2px;border-radius:6px}
.weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.omhul{max-width:940px;margin:0 auto;padding:0 16px}
@media(min-width:720px){ .omhul{padding:0 28px} }

/* ══════════════ boonste balk ══════════════ */
.balk{
  position:sticky;top:0;z-index:60;background:var(--kop-navy);color:#fff;
  border-bottom:1px solid var(--kop-lyn);padding-top:var(--veilig-b);
}
@supports (backdrop-filter:blur(1px)){
  .balk{background:#042958;backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px)}
}
.balk-in{max-width:940px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:56px}
.merk{display:flex;align-items:center;gap:10px;font-family:var(--kop);font-weight:700;font-size:20px;letter-spacing:-.015em}
.merk img{width:34px;height:34px;border-radius:9px}
/* wordmerk in die kopbalk — die kunswerk se navy is dieselfde as die balk s'n */
.balk .wordmerk{height:30px;width:auto;border-radius:0}
@media(min-width:720px){ .balk .wordmerk{height:34px} }
.rek{flex:1}
.terug-kn{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex:none;
}
.terug-kn:active{background:rgba(255,255,255,.22);transform:scale(.94)}
.balk-titel{font-family:var(--kop);font-weight:700;font-size:19px;line-height:1.2;flex:1;min-width:0;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speld{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);
  border-radius:999px;padding:7px 13px;flex:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.speld:active{background:rgba(255,255,255,.24)}

/* ══════════════ onderste navigasie ══════════════ */
.onderbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--lyn);padding-bottom:var(--veilig-o);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.onderbalk a,.onderbalk button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);font-size:11.5px;font-weight:600;color:var(--sag);letter-spacing:.01em;
}
.onderbalk .ikoon{font-size:21px;line-height:1}
.onderbalk .aan{color:var(--navy)}
.onderbalk .aan .ikoon{color:var(--oranje)}
body{padding-bottom:calc(var(--nav-h) + var(--veilig-o) + 8px)}
@media(min-width:720px){
  .onderbalk{position:static;grid-template-columns:none;display:flex;justify-content:center;gap:8px;
    border-top:1px solid var(--lyn);background:transparent;margin-top:40px;padding:18px 0 40px}
  .onderbalk a,.onderbalk button{flex-direction:row;height:auto;padding:10px 18px;font-size:15px;border-radius:999px}
  .onderbalk .aan{background:var(--wit);border:1.5px solid var(--lyn)}
  body{padding-bottom:0}
}

/* ══════════════ held ══════════════ */
.held{position:relative;overflow:hidden;padding:26px 0 30px}
.held::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--lyn) 31px,var(--lyn) 32px)}
.held>*{position:relative}
.oog,.oogbrou{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oranje);display:flex;align-items:center;gap:9px;margin-bottom:12px}
.oog::before,.oogbrou::before{content:"";width:22px;height:2px;background:var(--oranje);flex:none}
h1{font-family:var(--kop);font-weight:700;font-size:clamp(28px,7.6vw,44px);line-height:1.06;letter-spacing:-.022em}
h1 em{font-style:normal;background:linear-gradient(to top,rgba(248,85,40,.3) 0 .34em,transparent .34em)}
.inlei{margin-top:13px;font-size:17px;color:var(--sag);max-width:54ch}
.vinkies{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px 15px;font-family:var(--mono);font-size:11.5px;color:var(--sag)}
.vinkies span{display:flex;gap:6px}
.vinkies span::before{content:"\2713";color:var(--oranje);font-weight:700}

/* ══════════════ afdelings ══════════════ */
.afd{padding:26px 0}
.afd-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
h2{font-family:var(--kop);font-weight:700;font-size:clamp(21px,5.2vw,28px);letter-spacing:-.016em;line-height:1.18}
.afd-kop small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sag)}
.prosa p{margin-top:13px;color:var(--sag);max-width:66ch}
.prosa p strong{color:var(--ink)}

/* ══════════════ graadblokke ══════════════ */
.graadgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.graadgrid{grid-template-columns:repeat(4,1fr)}}
.graadblok{
  background:var(--navy);border:none;border-radius:var(--r-l);padding:18px 16px 16px;color:#fff;
  display:flex;flex-direction:column;gap:6px;min-height:132px;text-align:left;
  box-shadow:0 3px 0 var(--navy-dp), 0 12px 26px -20px rgba(4,41,88,.75);
  transition:transform .13s ease,box-shadow .13s ease;position:relative;overflow:hidden;
}
.graadblok::after{
  content:"";position:absolute;right:-26px;top:-26px;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.graadblok:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp), 0 6px 14px -12px rgba(4,41,88,.7)}
.graadblok .naam{font-family:var(--kop);font-weight:700;font-size:clamp(24px,6.6vw,30px);line-height:1.05;
  letter-spacing:-.022em;position:relative}
.graadblok .naam em{font-style:normal;color:var(--oranje-lig)}
.graadblok .tel{margin-top:auto;font-size:13.5px;line-height:1.4;color:#B7CDE1;position:relative}
.graadblok .gaan{
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;gap:7px;position:relative;
  font-weight:700;font-size:14.5px;color:var(--oranje-lig);
}
.graadblok .gaan::after{content:"\2192";font-size:17px;line-height:1}
.graadblok.huidig{box-shadow:0 0 0 3px var(--oranje), 0 3px 0 var(--navy-dp)}

/* ══════════════ onderwerpblokke ══════════════ */
.blokgrid{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:680px){.blokgrid{grid-template-columns:repeat(2,1fr)}}
.blok{
  background:var(--navy);border:none;border-radius:var(--r);padding:13px 15px;color:#fff;
  text-align:left;display:flex;flex-direction:row;align-items:center;gap:12px;min-height:0;
  box-shadow:0 3px 0 var(--navy-dp), 0 10px 22px -18px rgba(4,41,88,.7);
  transition:transform .13s ease,box-shadow .13s ease;position:relative;overflow:hidden;
}
.blok::after{
  content:"";position:absolute;right:-22px;top:-22px;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.055);
}
.blok:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp), 0 5px 12px -10px rgba(4,41,88,.7)}
/* die glif is weg by die onderwerpblokke — die titel kry al die plek */
.blok > .glif{display:none}
.blok b{font-family:var(--head);font-weight:600;font-size:17px;line-height:1.3;display:block;
  color:#fff;position:relative;flex:1 1 auto}
.blok small{margin-top:0;margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:#B7CDE1;position:relative;flex:none;white-space:nowrap}

/* die gemengde toetse: oranje, sodat hulle nie tussen die onderwerpe wegraak nie */
.blok.groot{
  grid-column:1 / -1;min-height:96px;background:#042958;color:#F85528;
  box-shadow:0 3px 0 #021B3B, 0 10px 22px -18px rgba(2,27,59,.7);
  flex-direction:row;align-items:center;gap:13px;
}
.blok.groot:active{transform:translateY(3px);box-shadow:0 0 0 #021B3B, 0 5px 12px -10px rgba(2,27,59,.7)}
.blok.groot .glif{display:none}
.blok.groot b{font-size:16px;color:#F85528}
.blok.groot small{margin-top:3px;margin-left:0;color:#F8A98D}
.blok.groot .in{display:flex;flex-direction:column;min-width:0;position:relative}

/* ══════════════ segmentkiesers ══════════════ */
.segment{display:flex;gap:6px;background:var(--wit);border:1.5px solid var(--lyn);border-radius:999px;padding:5px}
.segment button{flex:1;border-radius:999px;min-height:44px;padding:11px 8px;font-weight:700;font-size:15px;color:var(--sag);
  transition:background .13s,color .13s}
.segment button.aan{background:var(--navy);color:#fff}
.kies-ry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.kies-ry .etiket{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--oranje-teks)}
.kies-ry .segment{flex:1;min-width:210px}

/* ══════════════ knoppe ══════════════ */
.kn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:15px 24px;border-radius:14px;font-weight:700;font-size:16.5px;
  background:var(--navy);color:#fff;box-shadow:0 3px 0 var(--navy-dp);transition:transform .12s,box-shadow .12s;
}
.kn:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp)}
.kn.vol{width:100%}
.kn.oranje{background:var(--oranje);box-shadow:0 3px 0 var(--oranje-dp)}
.kn.leeg{background:transparent;color:var(--ink);border:1.5px solid var(--lyn);box-shadow:none}
.kn.leeg:active{background:var(--wit);transform:scale(.97)}

/* ══════════════ vasvra: volskerm ══════════════ */
.vasvra{
  position:fixed;inset:0;z-index:90;background:var(--papier);
  display:none;flex-direction:column;
}
.vasvra.oop{display:flex}
body.besig{overflow:hidden}

.v-kop{
  padding:calc(var(--veilig-b) + 10px) 16px 10px;background:var(--kop-navy);color:#fff;
  border-bottom:1px solid var(--kop-lyn);flex:none;
}
.v-kop-ry{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto}
.v-titel{flex:1;min-width:0}
.v-titel b{display:block;font-family:var(--kop);font-weight:700;font-size:16.5px;line-height:1.2;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-titel small{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#9FBDD6}
.telling{font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 12px;flex:none}
.spoor{height:6px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin:11px auto 0;max-width:720px}
.spoor i{display:block;height:100%;width:0;background:var(--oranje);border-radius:999px;transition:width .32s ease}

.v-lyf{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 8px}
.v-in{max-width:720px;margin:0 auto}

.vraagkaart{
  background:var(--wit);border:1px solid var(--lyn);border-radius:var(--r-l);padding:20px 18px;
  box-shadow:var(--skad);position:relative;overflow:hidden;
}
.vraagkaart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--oranje);opacity:.8}
.stelling{font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:500}
.stelling b{font-weight:800;color:var(--ink)}
.wisk{font-family:var(--mono);font-size:23px;line-height:1.4;margin:15px 0 3px;letter-spacing:.01em;word-break:break-word}
.fig{margin:15px auto 3px;max-width:100%;height:auto}
.brk{display:inline-flex;flex-direction:column;align-items:center;vertical-align:-.55em;line-height:1.06;margin:0 4px;font-family:var(--mono)}
.brk b{font-weight:600;padding:0 4px;font-size:.86em}
.brk i{font-style:normal;font-weight:600;border-top:1.7px solid currentColor;padding:0 4px;font-size:.86em}
.mini-tabel{border-collapse:collapse;margin:14px 0 3px;font-size:15px;width:100%}
.mini-tabel th,.mini-tabel td{border:1.5px solid var(--lyn);padding:8px 10px;text-align:left}
.mini-tabel th{background:var(--papier);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sag)}

/* antwoorde */
.keuses{display:grid;gap:9px;margin-top:16px}
.keuse{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:58px;padding:13px 15px;border-radius:14px;background:var(--wit);
  border:1.5px solid var(--lyn);font-size:17px;box-shadow:var(--skad);
  color:var(--ink);font-weight:600;
  transition:transform .12s,border-color .12s,background .12s;
}
.keuse:active:not(:disabled){transform:scale(.98)}
.keuse:disabled{cursor:default}
.keuse .let{
  width:30px;height:30px;border-radius:9px;flex:none;background:var(--papier);border:1.5px solid var(--lyn);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);
}
.keuse.reg{border-color:var(--reg);background:var(--reg-sag)}
.keuse.reg .let{border-color:var(--reg);background:var(--reg);color:#fff}
.keuse.fout{border-color:var(--fout);background:var(--fout-sag)}
.keuse.fout .let{border-color:var(--fout);background:var(--fout);color:#fff}

.tikkas{
  margin-top:16px;background:var(--wit);border:2px solid var(--lyn);border-radius:14px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--skad);
}
.tikkas input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:.02em;
}
.tikkas input::placeholder{color:#B4C2D2;font-size:19px;font-weight:400}
.tikkas.reg{border-color:var(--reg);background:var(--reg-sag)}
.tikkas.fout{border-color:var(--fout);background:var(--fout-sag)}
.tikkas .merk{font-size:22px;flex:none}

/* syferbord */
.syferbord{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.syferbord button{
  min-height:56px;border-radius:14px;background:var(--wit);border:1.5px solid var(--lyn);
  font-family:var(--mono);font-size:23px;font-weight:600;box-shadow:var(--skad);
  transition:transform .1s,background .1s;
}
.syferbord button:active{transform:scale(.94);background:var(--papier)}
.syferbord .hulp{font-size:17px;color:var(--sag)}
@media(min-width:720px){ .syferbord{max-width:330px} }

/* memo-blad */
.memo{
  margin-top:16px;border-radius:16px;padding:16px 17px;border:1.5px solid var(--lyn);
  background:var(--wit);display:none;
}
.memo.wys{display:block;animation:opkom .26s ease}
@keyframes opkom{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.memo.ja{border-color:var(--reg);background:var(--reg-sag)}
.memo.nee{border-color:var(--fout);background:var(--fout-sag)}
.memo .uitslag{display:flex;align-items:center;gap:9px;font-family:var(--kop);font-weight:700;font-size:17px;margin-bottom:7px}
.memo.ja .uitslag{color:var(--reg)}
.memo.nee .uitslag{color:var(--fout)}
.memo .uitslag .bal{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;flex:none}
.memo.ja .bal{background:var(--reg)}
.memo.nee .bal{background:var(--fout)}
.memo p{font-size:16px;line-height:1.55;color:var(--ink)}
.memo p b{font-weight:700}

/* vaste onderste aksie */
.v-voet{
  flex:none;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--lyn);padding:12px 16px calc(12px + var(--veilig-o));
}
.v-voet-in{max-width:720px;margin:0 auto;display:flex;gap:10px}
.v-voet .kn{flex:1}

/* ══════════════ uitslag ══════════════ */
.uitslag-blad{text-align:center;padding-top:8px}
.ring{width:168px;height:168px;margin:0 auto 18px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .binne{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .punt{font-family:var(--kop);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.03em}
.ring .uit{font-family:var(--mono);font-size:13px;color:var(--sag);margin-top:3px}
.uitslag-blad h2{margin-bottom:8px}
.uitslag-blad .boodskap{color:var(--sag);max-width:38ch;margin:0 auto}
.uitslag-knoppe{display:grid;gap:10px;margin:22px 0 8px}
@media(min-width:520px){.uitslag-knoppe{grid-template-columns:1fr 1fr}}

.hersien{margin-top:26px;text-align:left}
.hersien h3{font-family:var(--kop);font-weight:700;font-size:18px;margin-bottom:11px}
.item{
  background:var(--wit);border:1.5px solid var(--lyn);border-left-width:5px;border-radius:0 14px 14px 0;
  padding:14px 15px;margin-bottom:9px;
}
.item.reg{border-left-color:var(--reg)}
.item.fout{border-left-color:var(--fout)}
.item .kop-ry{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sag);margin-bottom:7px}
.item .v{font-size:16px}
.item .v .wisk{font-size:18px;margin:7px 0 2px}
.item .v .fig{max-width:210px;margin:10px 0 2px}
.item .a{margin-top:8px;font-size:14.5px;color:var(--sag);line-height:1.5}
.item .a b{color:var(--ink)}

/* ══════════════ graadkieser-blad ══════════════ */
.oorlaag{position:fixed;inset:0;z-index:80;background:rgba(4,41,88,.45);display:none;align-items:flex-end}
.oorlaag.oop{display:flex;animation:vervaag .2s ease}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.blad{
  width:100%;background:var(--wit);border-radius:24px 24px 0 0;padding:8px 16px calc(20px + var(--veilig-o));
  animation:opskuif .26s cubic-bezier(.2,.8,.3,1);max-height:82vh;overflow-y:auto;
}
@keyframes opskuif{from{transform:translateY(100%)}to{transform:none}}
.greep{width:42px;height:5px;border-radius:999px;background:var(--lyn);margin:8px auto 16px}
.blad h3{font-family:var(--kop);font-weight:700;font-size:19px;margin-bottom:14px}
@media(min-width:720px){
  .oorlaag{align-items:center;justify-content:center}
  .blad{max-width:520px;border-radius:22px;animation:none;padding-bottom:22px}
}

/* ══════════════ vrae en voetstuk ══════════════ */
.vraelys{border-top:1px solid var(--lyn);margin-top:14px}
details{border-bottom:1px solid var(--lyn)}
summary{padding:16px 2px;font-family:var(--kop);font-weight:600;font-size:17px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:21px;color:var(--oranje)}
details[open] summary::after{content:"\2212"}
details p{padding:0 2px 17px;color:var(--sag);font-size:16px}

.winkelblok{background:var(--navy);color:#fff;border-radius:var(--r-l);padding:24px 20px;margin-top:8px}
.winkelblok h2{color:#fff;font-size:22px}
.winkelblok p{color:#C6D8E8;margin-top:10px;font-size:16px}
.winkelblok .kn{margin-top:18px;background:var(--lug);box-shadow:0 3px 0 var(--navy-dp)}
.winkelblok .fyn{font-family:var(--mono);font-size:10.5px;color:#9FBDD6;margin-top:12px;line-height:1.6}

.voet{background:var(--kop-navy);color:#fff;padding:28px 0 26px;margin-top:34px}
.voet-bo{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.voet .wordmerk{height:34px;width:auto;border-radius:0;flex:none}
.taalknop{
  display:inline-flex;align-items:center;gap:9px;background:var(--wit);color:var(--kop-navy);
  border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;flex:none;
  box-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .13s ease;
}
.taalknop:active{transform:translateY(2px);box-shadow:none}
.taalknop .kode{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  background:var(--kop-navy);color:#fff;border-radius:5px;padding:3px 6px;
}
.taalknop .pyl{color:var(--oranje-dp);font-size:17px}
/* voetrooster: elke graad met al sy vakke, sodat 'n ouer van enige
   bladsy af by enige ander vak kan uitkom */
.voet .vak-rooster{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;margin:2px 0 22px}
.voet .vak-kol h3{font-family:var(--kop);font-size:15px;font-weight:700;margin:0 0 9px;letter-spacing:.01em}
.voet .vak-kol h3 a{color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:2px}
.voet .vak-kol ul{list-style:none;margin:0;padding:0}
.voet .vak-kol li{margin:0 0 5px}
.voet .vak-kol a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;line-height:1.45;display:flex;align-items:center;padding:1px 0;min-height:44px}
.voet .vak-kol a:hover,.voet .vak-kol a:focus-visible{color:#fff;text-decoration:underline}
.voet .vak-kol a.hier{color:var(--oranje);font-weight:700}
@media(min-width:720px){ .voet .vak-rooster{grid-template-columns:repeat(4,1fr);gap:26px 20px} }

.voet .skakels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.voet .skakels a{border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  border-radius:999px;padding:9px 15px;font-weight:600;font-size:14.5px;color:#fff}
.voet .skakels a:active{background:rgba(255,255,255,.22)}
.voet .nota{font-family:var(--mono);font-size:11px;color:#9FBDD6;line-height:1.95}

/* installasie-wenk */
.installeer{
  display:none;align-items:center;gap:12px;background:var(--wit);border:1.5px solid var(--lyn);
  border-radius:var(--r);padding:13px 15px;margin-top:14px;box-shadow:var(--skad);
}
.installeer.wys{display:flex}
.installeer .in{flex:1;min-width:0}
.installeer b{font-family:var(--kop);font-size:15.5px;display:block}
.installeer small{color:var(--sag);font-size:13px}
.installeer .kn{min-height:44px;padding:10px 16px;font-size:14.5px;flex:none}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ══════════════ alle-vasvrae-bladsy ══════════════ */
.alles-graad{margin:0 0 30px}
.alles-graad h2{font-family:var(--kop);font-size:22px;font-weight:700;color:var(--ink);
  margin:0 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.alles-graad h2 .tel{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--sag);
  letter-spacing:.04em;text-transform:uppercase}
.alles-graad > p{margin:0 0 14px;color:var(--sag);font-size:15px;line-height:1.5}
.alles-lys{display:grid;grid-template-columns:1fr;gap:9px;list-style:none;margin:0;padding:0}
/* Donker kaarte, soos die onderwerpblokke op die graadbladsye. Die sagte
   grys (--sag) haal net 2,57 teen hierdie navy en is onleesbaar; ons gebruik
   dus 'n ligte blougrys wat 6,69 haal. */
.alles-lys a{display:flex;align-items:center;gap:12px;background:var(--kop-navy);
  border:1.5px solid rgba(255,255,255,.10);
  border-radius:14px;padding:13px 15px;text-decoration:none;color:#fff;
  transition:border-color .15s,transform .1s}
.alles-lys a:hover,.alles-lys a:focus-visible{border-color:var(--oranje)}
.alles-lys a:active{transform:scale(.99)}
.alles-lys .glif{flex:none;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;
  font-weight:700;color:var(--oranje)}
.alles-lys .wat{flex:1;min-width:0}
.alles-lys .wat b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;color:#fff}
.alles-lys .wat small{display:block;color:#A8BDD4;font-size:13px;line-height:1.4;margin-top:2px}
.alles-lys .pyl{flex:none;color:#A8BDD4;font-size:17px}
.alles-lys .uit{font-family:var(--mono);font-size:10.5px;color:#A8BDD4;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;padding:2px 5px;flex:none;letter-spacing:.03em}
@media(min-width:660px){ .alles-lys{grid-template-columns:repeat(2,1fr)} }

/* ══════════════ mobile guards ══════════════ */
/* Nine in ten visitors are on a phone. Nothing may scroll sideways, and no
   long word or unbroken string may push the layout wider than the screen. */
html,body{max-width:100%;overflow-x:hidden}
/* overflow-x:hidden op <html> maak van html ’n blaai-houer in Chrome en
   breek muiswiel-blaai op rekenaars. clip sny af sonder ’n blaai-houer. */
@supports (overflow:clip){html,body{overflow-x:clip}}
*{min-width:0}
p,li,h1,h2,h3,td,th,b,small,summary{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
img,svg,video,table{max-width:100%;height:auto}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Nege uit tien besoekers gebruik 'n foon. Apple se riglyn is 44px vir 'n
   raakteiken; ons hou daarby vir elke primêre kontrole. Die voetskakels is
   'n digte lys, daarom 40px met genoeg spasie tussenin. */
.speld{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.voet .vak-kol a{min-height:40px;display:flex;align-items:center;padding:4px 0}
.voet .vak-kol li{margin:0 0 2px}
.voet .vak-kol h3 a{min-height:40px}
.voet .skakels a{min-height:44px;display:inline-flex;align-items:center}
.alles-lys a{min-height:56px}

/* ══════════════ lengteblad ══════════════ */
/* Word oopgemaak wanneer 'n mens 'n onderwerp kies. Elke knoppie begin
   dadelik, dus bly dit een tik n\u00e1 die onderwerp. Op 'n foon skuif dit van
   onder af in, waar die duim is. */
.lengteblad{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(4,41,88,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  align-items:flex-end;justify-content:center;
}
.lengteblad.oop{display:flex;animation:lbIn .18s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-in{
  width:100%;max-width:520px;background:var(--wit);
  border-radius:22px 22px 0 0;padding:10px 18px calc(20px + var(--veilig-o));
  box-shadow:0 -8px 40px -12px rgba(4,41,88,.45);
  animation:lbOp .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes lbOp{from{transform:translateY(18px)}to{transform:translateY(0)}}
.lb-greep{width:40px;height:4px;border-radius:99px;background:var(--lyn);margin:0 auto 14px}
.lb-titel{font-family:var(--kop);font-size:20px;font-weight:700;color:var(--ink);margin:0 0 3px;text-align:center}
.lb-naam{font-size:15px;color:var(--sag);margin:0 0 16px;text-align:center;line-height:1.4}
.lb-knoppe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.lb-knoppe .kn{
  min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--kop);
}
.lb-knoppe .kn b{font-size:26px;font-weight:700;line-height:1}
.lb-knoppe .kn small{font-size:12px;font-weight:600;opacity:.75;letter-spacing:.02em}
@media(min-width:560px){
  .lengteblad{align-items:center}
  .lb-in{border-radius:22px;padding-bottom:20px}
}

/* ══════════════ aanmoediging ══════════════ */
/* Een reël onder die memo. Dit moet raakgesien word sonder om die memo te
   oorskadu \u2014 die memo leer, hierdie hou net die kind aan die gang. */
.praatjie{
  margin:12px 2px 0;font-family:var(--kop);font-size:16.5px;font-weight:600;
  line-height:1.4;color:var(--sag);
  display:flex;align-items:center;justify-content:center;gap:10px;
  opacity:0;transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease;
}
/* Klein en langs die reël, nie 'n plakker in die gaping nie: op 'n foon vul
   die memo en die wenk die skerm al, en 'n groot prent stoot die
   "Volgende vraag"-knoppie van die skerm af. */
.praatjie-vos{width:auto;height:46px;flex:none}
@media(min-width:560px){ .praatjie-vos{height:56px} }
.praatjie span{text-align:left}
.praatjie.wys{opacity:1;transform:none}
.praatjie.ja{color:var(--reg)}
.praatjie.nee{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .praatjie{transition:none}
}

/* ══════════════ uitslag-vos ══════════════ */
/* Net op die uitslagblad. Nie langs die memo nie \u2014 daar moet die kind die
   wenk lees, en 'n prent daarnaas trek die oog weg van die verduideliking. */
.uitslag-vos{
  display:block;margin:14px auto 2px;height:132px;width:auto;
  animation:vosIn .4s cubic-bezier(.2,.8,.3,1);
}
@keyframes vosIn{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}
@media(min-width:560px){ .uitslag-vos{height:150px} }
@media (prefers-reduced-motion:reduce){ .uitslag-vos{animation:none} }

/* ══════════════ deel met 'n maat ══════════════ */
/* WhatsApp se groen, want dis waar die knoppie heen lei. Vol breedte onder
   die ander twee, sodat dit duidelik 'n aparte aksie is en nie per ongeluk
   gedruk word in plaas van "Weer" nie. */
.kn.deel{
  width:100%;margin-top:10px;background:#25D366;color:#0B3D25;border:none;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;box-shadow:0 3px 0 #128C4A, 0 10px 22px -18px rgba(18,140,74,.8);
}
.kn.deel:active{transform:translateY(3px);box-shadow:0 0 0 #128C4A}
.deel-ikoon{font-size:18px;line-height:1}

/* die vosmerk in die hub-lys */
.alles-lys .glif img,.all-list .glyph img{width:22px;height:auto;display:block}
.alles-lys .glif,.all-list .glyph{padding:0}

.blok .glif .vosmerk{width:21px;height:21px;display:block}


/* ══════════════ maaltafels ══════════════
   Die maaltafel-oefening. Dit deel die werf se kleure en fonts; net
   die speelvlak, syferbord en meesterskap-rooster kom hier by. */
/* panele */
.paneel{background:#FFFFFF;border-radius:22px;padding:22px;
  box-shadow:0 2px 0 rgba(4,41,88,.06), 0 10px 24px -18px rgba(4,41,88,.5);border:1px solid var(--lyn)}

/* tafelkeuse */
.tafel-rooster{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}
@media(min-width:560px){.tafel-rooster{grid-template-columns:repeat(12,1fr)}}
.tafel-kn{font-family:var(--mono);font-size:16px;font-weight:600;padding:13px 0;
  border:2px solid var(--lyn);background:#FFFFFF;color:#5C7189;
  border-radius:12px;cursor:pointer;min-height:48px;transition:all .12s ease}
.tafel-kn.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.tafel-kn:hover{border-color:var(--oranje)}

.kn{font-family:var(--lyf);font-weight:600;font-size:16px;border-radius:12px;
  padding:13px 20px;cursor:pointer;border:2px solid transparent;min-height:48px}
.kn.vol{background:var(--oranje);color:#fff}
.kn.vol:hover{background:var(--oranje-dp)}
.kn.lyn{background:#FFFFFF;border-color:var(--navy);color:var(--navy)}
.kn.lyn:hover{background:var(--navy);color:#fff}
.kn.sag{background:transparent;color:#5C7189;font-size:13.5px;padding:8px 0;
  font-family:var(--mono);min-height:40px;text-align:left}
.kn.klein{padding:8px 14px;font-size:14px;min-height:40px;background:#FFFFFF;
  border-color:var(--lyn);color:#5C7189}
.kn.skakel{background:none;border:none;color:var(--oranje-dp);font-family:var(--mono);
  font-size:12.5px;padding:0;min-height:auto;text-decoration:underline;cursor:pointer}
.begin-ry{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* speel */
.speel-kop{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:20px}
.tellers{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);
  font-size:12.5px;color:#5C7189}
.tellers b{color:var(--ink);font-size:15px}
.klok-wrap{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--navy);
  min-width:60px;text-align:center}
#klok.laag{color:var(--fout)}

.som{display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--kop);font-size:clamp(38px,11vw,62px);font-weight:700;
  margin:10px 0 6px;flex-wrap:wrap}
.maal{color:#5C7189;font-weight:600}
#antwoord{font-family:var(--kop);font-size:inherit;font-weight:700;width:2.6em;
  text-align:center;border:none;border-bottom:4px solid var(--oranje);
  background:transparent;color:var(--oranje-dp);padding:0 4px;outline:none;
  -moz-appearance:textfield}
#antwoord::-webkit-outer-spin-button,#antwoord::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

.terugvoer{text-align:center;font-family:var(--mono);font-size:14px;
  min-height:26px;color:transparent}
.terugvoer.reg{color:#128C4A}
.terugvoer.fout{color:var(--fout)}

/* syferbord \u2014 die meeste kinders is op \u2019n foon, en die stelsel se
   eie sleutelbord verberg die som. Ons gee \u2019n eie een. */
.syferbord{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:280px;margin:16px auto 0}
.syfer{font-family:var(--mono);font-size:21px;font-weight:600;padding:15px 0;
  border:2px solid var(--lyn);background:#FFFFFF;border-radius:12px;
  cursor:pointer;min-height:54px;color:var(--ink)}
.syfer:active{background:var(--navy);color:#fff;border-color:var(--navy)}
.syfer.wyd{grid-column:span 2}

/* uitslag */
.uitslag-syfers{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.uitslag-syfers div{display:flex;flex-direction:column}
.uitslag-syfers b{font-family:var(--kop);font-size:38px;line-height:1;color:var(--navy)}
.uitslag-syfers span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:#5C7189;margin-top:4px}
.sleg h3{font-family:var(--kop);font-size:17px;margin-bottom:9px}
.skerp{display:flex;flex-wrap:wrap;gap:8px}
.skerp span{font-family:var(--mono);font-size:14px;background:#FFF1E6;
  color:var(--oranje-dp);padding:7px 12px;border-radius:9px}

/* meesterskap-rooster */
.rooster{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;max-width:520px}
.rr{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;border-radius:4px}
.rr.kop{color:#5C7189;font-weight:600}
.rr.hoek{background:transparent}
.rr.sel{background:#E7EDF3}

/* Die maaltafel-baan op die tuisblad. Dit staan bo die graadkaarte omdat
   tafels die een ding is wat elke graad se werk makliker maak. */
.tafel-baan{display:block;background:var(--navy);color:#fff;border-radius:22px;
  padding:20px 22px;text-decoration:none;margin-bottom:22px;position:relative;
  box-shadow:0 2px 0 rgba(4,41,88,.06), 0 10px 24px -18px rgba(4,41,88,.5);
  transition:transform .13s ease}
.tafel-baan:hover{transform:translateY(-2px)}
.tb-merk{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;background:#F85528;color:#fff;padding:3px 9px;border-radius:20px;
  margin-bottom:9px}
.tafel-baan b{display:block;font-family:var(--kop,var(--head));font-size:22px;
  font-weight:700;margin-bottom:5px}
.tb-wat{display:block;font-size:15px;color:#C9D8E6;margin-bottom:10px;line-height:1.45}
.tb-gaan{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:#F85528}

/* Keuse tussen maal, deel en albei. */
.bew-ry{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:6px}
.bew-kn{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--lyf);font-size:14px;font-weight:600;padding:14px 6px;
  border:2px solid var(--lyn);background:#FFFFFF;color:#5C7189;
  border-radius:12px;cursor:pointer;min-height:64px;transition:all .12s ease}
.bew-kn.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.bew-kn:hover{border-color:var(--oranje)}
.bew-teken{font-family:var(--mono);font-size:20px;line-height:1}
h2.tweede{margin-top:22px}

/* Faktor-modus: watter pare maak hierdie getal? */
.bew-ry{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:6px}
@media(min-width:520px){.bew-ry{grid-template-columns:repeat(4,1fr)}}
.f-vraag{font-family:var(--kop);font-size:clamp(22px,4.6vw,30px);font-weight:700;
  text-align:center;margin:8px 0 4px}
.f-vraag b{color:var(--oranje-dp);font-size:1.35em}
.f-wenk{text-align:center;font-family:var(--mono);font-size:12px;color:#5C7189;
  margin-bottom:16px}
.f-rooster{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:520px){.f-rooster{grid-template-columns:repeat(3,1fr)}}
.f-kn{font-family:var(--kop);font-size:21px;font-weight:700;padding:20px 8px;
  border:2px solid var(--lyn);background:#FFFFFF;color:var(--ink);
  border-radius:14px;cursor:pointer;min-height:64px;transition:all .12s ease}
.f-kn:hover{border-color:var(--oranje)}
.f-kn.gekies{background:var(--navy);border-color:var(--navy);color:#fff}
.f-kn.wysReg{background:#128C4A;border-color:#128C4A;color:#fff}
.f-kn.wysFout{background:#C0392B;border-color:#C0392B;color:#fff}
.f-gaan{width:100%}
.f-gaan:disabled{opacity:.45;cursor:default}

/* ══════════════ woordsomme ══════════════ */
.ws-rooster{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.ws-rooster{grid-template-columns:1fr 1fr}}
.ws-kaart{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  background:var(--navy);color:#fff;border:none;border-radius:16px;padding:16px 18px;
  cursor:pointer;text-align:left;min-height:92px;transition:transform .13s ease}
.ws-kaart:hover{transform:translateY(-2px)}
.ws-glif{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.95);
  color:var(--oranje);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:16px;font-weight:600;margin-bottom:3px}
.ws-kaart b{font-family:var(--kop);font-size:18px;font-weight:600;line-height:1.25}
.ws-tel{font-family:var(--mono);font-size:11px;color:#A8BDD4}
.ws-huidige{font-family:var(--kop);font-size:16px;font-weight:700;color:var(--ink)}
.ws-vraag{font-size:clamp(17px,2.7vw,21px);line-height:1.5;margin:14px 0 18px;
  max-width:600px}
.ws-antwoord{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#ws-invoer{font-family:var(--kop);font-size:30px;font-weight:700;width:5em;
  text-align:center;border:none;border-bottom:4px solid var(--oranje);
  background:transparent;color:var(--oranje-dp);padding:2px 6px;outline:none}
#ws-invoer:disabled{opacity:.7}
.ws-eenheid{font-family:var(--mono);font-size:16px;color:#5C7189}
.ws-vol{width:100%;max-width:320px}
.ws-terugvoer{margin-top:14px;font-size:15px;line-height:1.5;min-height:24px}
.ws-terugvoer.reg{color:#128C4A}
.ws-terugvoer.fout{color:var(--fout)}
.ws-terugvoer b{display:block;margin-bottom:3px}

.afd-h2{font-family:var(--kop,var(--head));font-size:clamp(20px,3.2vw,26px);
  font-weight:700;margin:0 0 8px}
.afd-in{color:#38506B;font-size:16px;line-height:1.5;max-width:620px;margin:0 0 20px}

/* Die huidige bladsy in die kopbalk. \u2019n Kind moet kan sien waar hy is
   sonder om die URL te lees. */
.speld.hier,.pill.here{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);
  font-weight:700}
/* Op \u2019n smal skerm is daar nie plek vir vier etikette nie. Die balk skuif
   sywaarts eerder as om te vou. */
@media(max-width:640px){
  .balk-in,.bar-in{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap}
  .balk-in::-webkit-scrollbar,.bar-in::-webkit-scrollbar{display:none}
  .speld,.pill{flex:none;white-space:nowrap}
  .wordmerk,.wordmark{flex:none}
}

/* ══════════════ hamburger-kieslys ══════════════
   Drie oranje strepe op die donker balk. Oop word dit 'n X.
   Die paneel val onder die balk uit en dek die volle breedte, want
   die meeste besoekers is op 'n foon. */

#kieslys-knop{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 10px;flex:none;
  background:transparent;border:none;cursor:pointer;border-radius:10px;
  -webkit-tap-highlight-color:transparent}
#kieslys-knop:hover{background:rgba(255,255,255,.10)}
#kieslys-knop:focus-visible{outline:2px solid #F85528;outline-offset:2px}
#kieslys-knop span{
  display:block;height:3px;width:26px;border-radius:2px;background:#F85528;
  transition:transform .18s ease, opacity .13s ease}

/* Oop: die boonste en onderste streep kruis, die middelste verdwyn. */
#kieslys-knop.oop span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#kieslys-knop.oop span:nth-child(2){opacity:0}
#kieslys-knop.oop span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

#kieslys{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:#042958;border-top:1px solid #3A4E5C;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
#kieslys ul{list-style:none;margin:0;padding:6px 0;
  max-width:940px;margin:0 auto}
#kieslys li{margin:0}
#kieslys a{
  display:flex;align-items:center;gap:12px;
  padding:15px 20px;min-height:52px;
  color:#fff;text-decoration:none;font-size:16.5px;
  border-bottom:1px solid rgba(255,255,255,.07)}
#kieslys li:last-child a{border-bottom:none}
#kieslys a:hover,#kieslys a:focus-visible{background:rgba(255,255,255,.09)}
#kieslys a::before{
  content:"";width:3px;height:20px;border-radius:2px;
  background:#F85528;opacity:0;flex:none;transition:opacity .12s ease}
#kieslys a:hover::before,#kieslys a[aria-current="page"]::before{opacity:1}
#kieslys a[aria-current="page"]{font-weight:700}

/* Die balk moet die paneel kan anker. */
.balk,.bar{position:sticky;position:-webkit-sticky}

/* Wanneer die kieslys oop is, moenie die bladsy daaragter laat blaai nie. */
html.kieslys-oop{overflow:hidden}

@media(min-width:720px){
  #kieslys{border-radius:0 0 16px 16px}
  #kieslys ul{padding:8px 0}
}

/* Die taalskakel in die kieslys. Dit staan apart, met 'n lyn bo, want dit
   is 'n ander soort keuse as die res: nie waarheen nie, maar in watter taal. */
#kieslys .taal-item{border-top:1px solid rgba(255,255,255,.18);margin-top:4px;padding-top:4px}
#kieslys .taal-item a{color:#C9D8E6;font-size:15px}
#kieslys .taalkode{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;border-radius:5px;
  background:#F85528;color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  flex:none}
#kieslys .taal-item a::before{display:none}


/* ── Vraestelkaarte op /wiskunde-toetse ──
   Wit en wyd, sodat hulle NIE soos die donkerblou onderwerp-blokkies
   lyk nie. 'n Vraestel is iets anders as 'n vasvra en moet so lyk. */
.gkop{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#5C7189;
  margin:22px 0 10px;font-weight:700}
.vgrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.vrst{display:flex;gap:13px;background:#fff;border:1px solid var(--lyn);border-radius:14px;
  padding:14px 15px;text-decoration:none;color:var(--navy);box-shadow:0 1px 3px rgba(36,53,65,.06)}
.vrst:hover{border-color:var(--oranje)}
.vik{flex:0 0 40px;height:52px;border:1.5px solid var(--lyn);border-radius:5px;
  background:var(--papier);position:relative;overflow:hidden}
.vik::before{content:"";position:absolute;left:7px;right:7px;top:10px;height:2px;
  background:var(--lyn);box-shadow:0 6px 0 var(--lyn),0 12px 0 var(--lyn),0 18px 0 var(--lyn)}
.vik i{position:absolute;right:-1px;top:-1px;width:14px;height:14px;background:var(--oranje);
  clip-path:polygon(100% 0,0 0,100% 100%)}
.vtk{flex:1;min-width:0}
.vtk b{display:block;font-size:16.5px;line-height:1.28;margin-bottom:3px}
.vpt{font-size:12.5px;color:#5C7189}
.vdk{display:block;margin-top:6px;font-size:12px;color:#5C7189;line-height:1.4}
.opPad{background:#FFF6EF;border:1px solid #F6D9C2;border-radius:11px;padding:13px 15px;
  margin:18px 0 0;font-size:14.5px;color:#8A4A16}


/* ── Kruimelpad ──
   Op 'n vlak werf help dit die leser min, maar dit dra die
   BreadcrumbList-skema wat Google se soekresultaat van 'n rou URL in
   'n leesbare pad verander. */
.kruimel{background:#fff;border-bottom:1px solid var(--lyn)}
.kruimel .omhul,.kruimel .wrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px}
.kruimel a{color:#5C7189;text-decoration:none;font-size:14px}
.kruimel a:hover{color:var(--oranje);text-decoration:underline}
.kruimel .skei{color:#C3D0DC;font-size:14px}
.kruimel .hier{color:var(--navy);font-weight:700;font-size:14px}

/* ── Swewende WhatsApp-knoppie ────────────────────────────────
   Regs onder, op elke blad BEHALWE terwyl die vasvra oop is.
   Die vasvra is ’n volskerm-vloei; ’n knoppie bo-oor die antwoorde
   sou in die pad wees en ’n kind se duim vang op ’n foon. */
.koop-swewe{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  background:#F85528;color:#042958;
  font-family:var(--head);font-weight:600;font-size:15px;
  padding:13px 19px;border-radius:999px;text-decoration:none;
  box-shadow:0 3px 0 #C23A15, 0 10px 26px -12px rgba(0,0,0,.55);
  transition:transform .13s ease,box-shadow .13s ease;
}
.koop-swewe:hover,.koop-swewe:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 5px 0 #C23A15, 0 14px 30px -12px rgba(0,0,0,.55);
}
.koop-swewe:active{transform:translateY(3px);box-shadow:0 0 0 #C23A15}
.koop-swewe svg{width:19px;height:19px;flex:none}
/* terwyl die vasvra loop, is die knoppie weg */
#quiz.open ~ .koop-swewe,
#vasvra.oop ~ .koop-swewe,
body:has(#quiz.open) .koop-swewe,
body:has(#vasvra.oop) .koop-swewe{display:none}
@media(max-width:420px){
  .koop-swewe{right:12px;bottom:12px;font-size:14px;padding:12px 16px}
}


/* ── Kieslys sonder JavaScript ──────────────────────────────
   Die merkblokkie doen die oopmaak, so die kieslys werk selfs
   wanneer 'n skrip nie laai nie. JavaScript voeg net Escape,
   buite-tik en die sleutelbord by. */
.kieslys-tik{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
#kieslys{display:none}
.kieslys-tik:checked ~ #kieslys{display:block}
#kieslys-knop{cursor:pointer}
.kieslys-tik:checked ~ .bar-in #kieslys-knop span:nth-child(1),
.kieslys-tik:checked ~ .balk-in #kieslys-knop span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.kieslys-tik:checked ~ .bar-in #kieslys-knop span:nth-child(2),
.kieslys-tik:checked ~ .balk-in #kieslys-knop span:nth-child(2){opacity:0}
.kieslys-tik:checked ~ .bar-in #kieslys-knop span:nth-child(3),
.kieslys-tik:checked ~ .balk-in #kieslys-knop span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.kieslys-tik:focus-visible ~ .bar-in #kieslys-knop,
.kieslys-tik:focus-visible ~ .balk-in #kieslys-knop{outline:2px solid #F85528;outline-offset:2px}


/* ── Tafelkeuse: gekies moet onmiskenbaar wees ──
   Kinders kon nie sê of donkerblou of wit "gekies" beteken nie. Nou is
   gekies oranje met 'n regmerkie; nie-gekies is dof grys met 'n
   stippelrand — dit lyk leeg, want dit is leeg. */
.tafel-kn,.bew-kn{background:#EEF2F7;border:2px dashed #C3CEDB;color:#7F91A6}
.tafel-kn.aan,.bew-kn.aan{background:#F85528;border:2px solid #F85528;color:#fff;
  font-weight:700;position:relative;box-shadow:0 3px 0 #C23A15}
.tafel-kn.aan::after,.bew-kn.aan::after{content:"\2713";position:absolute;top:4px;right:6px;
  font-size:11px;line-height:1;font-weight:700}
.tafel-kn:hover,.bew-kn:hover{border-color:#F85528}
.tafel-kn:focus-visible,.bew-kn:focus-visible{outline:3px solid #042958;outline-offset:2px}
.tafel-wenk{margin:-4px 0 12px;font-size:15px;color:#4A5D73}
.tafel-wenk b{color:#F85528}
.tafel-onder{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.tafel-tel{font-weight:700;color:#042958}

/* ── Die Koop-knoppie stap uit die pad terwyl 'n kind oefen ── */
body:has(#speel:not([hidden])) .koop-swewe,
body:has(#faktor:not([hidden])) .koop-swewe,
body:has(#ws-speel:not([hidden])) .koop-swewe,
body.in-toets .koop-swewe{display:none}

/* ── Gewone onderwerplys op die graadbladsye ──
   Regte skakels in die bladsy, sodat Google elke onderwerp lees. Elkeen
   maak daardie onderwerp se vasvra oop. */
.topic-links{list-style:none;padding:0;margin:8px 0 22px;display:grid;gap:8px;
  grid-template-columns:1fr}
@media(min-width:620px){.topic-links{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.topic-links{grid-template-columns:1fr 1fr 1fr}}
.topic-links li{margin:0}
.topic-links a{display:block;padding:10px 14px;border:1px solid #DDE4EC;border-radius:10px;
  background:#fff;color:#042958;text-decoration:none;font-weight:600;line-height:1.3}
.topic-links a:hover{border-color:#F85528}
.topic-paper{font-family:var(--mono);font-size:11px;font-weight:400;color:#5B7285;
  letter-spacing:.05em;text-transform:uppercase;margin-left:6px}

/* ── Onderwerp-toetsbladsye (/graad-5-breuke-toets) ── */
.topic-cta{margin:18px 0 6px}
.topic-cta .kn{display:inline-flex;text-decoration:none;color:#fff;padding:14px 22px;font-size:17px}
.topic-links.plain li{padding:9px 14px;border:1px solid #DDE4EC;border-radius:10px;background:#fff;font-weight:600}
.sample{background:#fff;border:1px solid #DDE4EC;border-radius:14px;padding:14px 16px;margin:12px 0}
.sample .s-q{margin:0 0 8px}
.sample .s-opts{display:flex;flex-wrap:wrap;gap:6px 30px;margin:0 0 10px;padding-left:20px}
.sample .s-opts li{display:list-item;margin:0}
.sample details summary{cursor:pointer;color:#042958;font-weight:700}
.sample details p{margin:8px 0 0}
.sample .s-memo{color:#5B7285}

/* Drilbladsye (maaltafels, woordsomme): wenkteks. */
.wenk{margin:12px 0 0;font-size:15px;color:var(--sag,#5C7189);line-height:1.5}
.held h1{margin-bottom:6px}
.afd .paneel{margin-top:6px}
.paneel>h2{margin-bottom:14px}
.paneel h2.tweede{margin-top:22px}

/* ── "Deel" / "Share": WhatsApp, next to Buy Tests ──
   Both sit in one row at the bottom right; the row steps out of the way
   while a child is doing a quiz or a drill, exactly like Buy Tests did. */
.swewe-ry{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:8px;align-items:center}
.swewe-ry .koop-swewe{position:static;right:auto;bottom:auto}
.deel-swewe{display:inline-flex;align-items:center;background:#042958;color:#fff;
  font-family:var(--kop,var(--head));font-weight:600;font-size:15px;
  padding:13px 18px;border-radius:999px;text-decoration:none;border:2px solid rgba(255,255,255,.22);
  box-shadow:0 3px 0 #021B3B, 0 10px 26px -12px rgba(0,0,0,.55);transition:transform .13s ease,box-shadow .13s ease}
.deel-swewe:hover,.deel-swewe:focus-visible{transform:translateY(-2px)}
.deel-swewe:active{transform:translateY(3px);box-shadow:0 0 0 #021B3B}
@media(max-width:420px){.swewe-ry{right:12px;bottom:12px;gap:6px}.deel-swewe{font-size:14px;padding:12px 14px}}
#quiz.open ~ .swewe-ry,#vasvra.oop ~ .swewe-ry,
body:has(#quiz.open) .swewe-ry,body:has(#vasvra.oop) .swewe-ry,
body:has(#speel:not([hidden])) .swewe-ry,body:has(#faktor:not([hidden])) .swewe-ry,
body:has(#ws-speel:not([hidden])) .swewe-ry,body.in-toets .swewe-ry{display:none}

/* ── Kieslys: Grade-groep met Graad 4 tot 7 as knoppies ── */
#kieslys .kl-groep{border-bottom:1px solid rgba(255,255,255,.07);padding:12px 20px 14px}
#kieslys .kl-kop{display:block;color:rgba(255,255,255,.62);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px 15px}
#kieslys .kl-sub{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0;margin:0;max-width:none}
@media(min-width:560px){#kieslys .kl-sub{grid-template-columns:repeat(4,1fr)}}
#kieslys .kl-sub a{justify-content:center;min-height:46px;padding:10px 12px;border:1px solid rgba(255,255,255,.2);
  border-radius:12px;font-weight:700}
#kieslys .kl-sub li:last-child a{border-bottom:1px solid rgba(255,255,255,.2)}
#kieslys .kl-sub a::before{display:none}
#kieslys .kl-sub a:hover,#kieslys .kl-sub a[aria-current="page"]{background:#F85528;border-color:#F85528}

/* Op fone staan die onderbalk vas onder en het die Deel- en Koop-knoppies
   bedek. Lig die knoppies bo die balk uit. */
@media(max-width:719px){
  body:has(.onderbalk) .swewe-ry,
  body:has(.onderbalk) > .koop-swewe{bottom:calc(var(--nav-h) + var(--veilig-o,0px) + 12px)}
}

/* Geen onderbalk op fone nie (Nick, Sept 2026): die hamburger-kieslys het
   alles, en die balk het net inhoud en die Deel- en Koop-knoppies bedek. */
@media(max-width:719px){
  .onderbalk{display:none}
  body{padding-bottom:0}
  body:has(.onderbalk) .swewe-ry,
  body:has(.onderbalk) > .koop-swewe{bottom:16px}
}
@media(max-width:420px){
  body:has(.onderbalk) .swewe-ry,
  body:has(.onderbalk) > .koop-swewe{bottom:12px}
}

/* ── "Deel webwerf met 'n vriend" in die kieslys ───────────────
   Dieselfde WhatsApp-deel as die swewende knoppie, maar as 'n
   duidelike knoppie onderaan die kieslys, waar 'n ouer daarna soek. */
#kieslys .deel-item{margin-top:8px;padding-top:2px}
#kieslys .deel-item a.kl-deel{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366;color:#06301A;font-weight:700;font-size:15px;
  border-radius:10px;padding:11px 12px;text-align:center;line-height:1.25}
#kieslys .deel-item a.kl-deel:hover,#kieslys .deel-item a.kl-deel:focus{background:#1FBA57}

.blok small.gaan{color:var(--oranje);font-size:11.5px;font-weight:700;letter-spacing:.08em}

/* Timetable inside a question */
.tt{border-collapse:collapse;margin:12px 0 4px;font-size:16px}
.tt th,.tt td{border:2px solid #16324F;padding:6px 18px;text-align:center}
.tt th{background:#16324F;color:#fff}

/* Home hero picture (Sept 2026): text left, picture right on wide screens */
.held-in{display:grid;gap:22px;grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.held-in{grid-template-columns:1.15fr .85fr;gap:36px}}
.held-pic{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 10px 30px rgba(4,41,88,.18)}
@media (max-width:859px){.held-pic{aspect-ratio:4/3;object-fit:cover;object-position:55% 40%;max-height:320px}}