/* ============================================================
   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;-webkit-font-smoothing:antialiased;
  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{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{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}
.stelling b{font-weight:700}
.teksie{
  background:var(--papier);border-left:3px solid var(--oranje);border-radius:0 10px 10px 0;
  padding:13px 15px;margin:0 0 15px;font-size:16.5px;line-height:1.62;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);
  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:600;color:var(--sag);
}
.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 .teksie{
  background:var(--papier);border-left:3px solid var(--oranje);border-radius:0 10px 10px 0;
  padding:13px 15px;margin:0 0 15px;font-size:16.5px;line-height:1.62;color:var(--ink);
}
.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}

.alles-lys a:hover,.alles-lys a:focus-visible{border-color:var(--oranje)}
.alles-lys a:active{transform:scale(.99)}

.alles-lys .wat{flex:1;min-width:0}




@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 ══════════════ */
.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:lsIn .18s ease}
@keyframes lsIn{from{opacity:0}to{opacity:1}}
.ls-in{width:100%;max-width:520px;background:var(--wit,#fff);border-radius:22px 22px 0 0;
  padding:10px 18px calc(20px + var(--veilig-o, env(safe-area-inset-bottom)));
  box-shadow:0 -8px 40px -12px rgba(4,41,88,.45);animation:lsUp .22s cubic-bezier(.2,.8,.3,1)}
@keyframes lsUp{from{transform:translateY(18px)}to{transform:translateY(0)}}
.ls-grip{width:40px;height:4px;border-radius:99px;background:var(--lyn,var(--line,#DDE5EE));margin:0 auto 14px}
.ls-title{font-family:var(--kop,var(--head));font-size:20px;font-weight:700;margin:0 0 3px;text-align:center}
.ls-name{font-size:15px;color:var(--sag,var(--soft,#5C7189));margin:0 0 16px;text-align:center;line-height:1.4}
.ls-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ls-buttons button{min-height:76px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;font-family:var(--kop,var(--head))}
.ls-buttons button b{font-size:26px;font-weight:700;line-height:1}
.ls-buttons button small{font-size:12px;font-weight:600;opacity:.75}
@media(min-width:560px){ .lengteblad,.lengthsheet{align-items:center} .ls-in{border-radius:22px;padding-bottom:20px} }

/* ══════════════ aanmoediging ══════════════ */
.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}
.praatjie.wys{opacity:1;transform:none}
.praatjie.ja{color:var(--reg)} .praatjie.nee{color:var(--ink)}
.praatjie span{text-align:left}
.praatjie-vos{width:auto;height:46px;flex:none}
.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){ .praatjie-vos{height:56px} .uitslag-vos{height:150px} }
@media (prefers-reduced-motion:reduce){ .praatjie,.uitslag-vos{transition:none;animation:none} }

/* ══════════════ deel / share ══════════════ */
.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)}
.deel:active{transform:translateY(3px);box-shadow:0 0 0 #128C4A}
.deel-ikoon{font-size:18px;line-height:1}

/* ══════════════ donker hub-kaarte ══════════════ */
/* Die sagte grys 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}

/* 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}

/* Die vossiekop op elke onderwerpkaart. Die blokkie is 34px; die merk
   sit op 21px sodat daar ’n bietjie lug rondom bly. */
.blok .glif .vosmerk{width:21px;height:21px;display:block}

/* Die h2 direk onder die h1: dra die soekterm 'n tweede keer, en gee die
   bladsy 'n behoorlike opskrifstruktuur (h1 -> h2 -> onderwerpe). */
.afd-h2{font-family:var(--kop);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}

.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}


/* ── Opdragreël ──
   Staan bo die vraag, soos in 'n vraestel. Dit sê WAT om te doen
   voordat die kind lees WAAROOR. */
.opdrag{font-size:13.5px;line-height:1.45;color:#5C7189;background:#F5F7FA;
  border-left:3px solid var(--oranje);border-radius:0 8px 8px 0;
  padding:9px 13px;margin:0 0 14px;font-weight:600}

/* ── Waar of onwaar ──
   Twee breë knoppies. Die keuse is 'n oordeel oor één stelling,
   nie 'n soektog tussen vier opsies nie — dus moet dit anders voel. */
.keuses.wo{grid-template-columns:1fr 1fr;gap:12px}
.wo-kn{justify-content:center;text-align:center;font-weight:700;font-size:18px;
  letter-spacing:.04em;min-height:68px}

/* ── 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}

/* ── Laerskool-bladsye ── */
.topic-links{list-style:none;padding:0;margin:8px 0 18px;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.plain li{padding:9px 14px;border:1px solid #DDE4EC;border-radius:10px;background:#fff;font-weight:600;line-height:1.3}
.deel-kop{margin:14px 0 4px}
.eksamen-lys{padding-left:20px;margin:6px 0 16px}
.eksamen-lys li{margin:5px 0}
.kruimel{padding:14px 0 0;font-family:var(--mono);font-size:12px;color:#5B7285}
.kruimel a{color:#5B7285}
.kruimel .skei{margin:0 8px}
.kruimel .hier{color:#042958}

/* ── Graad-vraestelbladsy (herontwerp) ── */
.held-knoppe{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.held-knoppe a{text-decoration:none}
.sprong-rooster{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.sprong-rooster{grid-template-columns:repeat(4,1fr)}}
.sprong{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:#fff;
  border:1px solid #DDE5EE;text-decoration:none;color:#042958;transition:border-color .12s}
.sprong:hover{border-color:#F85528}
.sprong b{font-weight:700;line-height:1.25;font-size:15px;overflow-wrap:normal;word-break:normal;hyphens:auto}
.sprong small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#5C7189}
.koop-strook{display:grid;gap:10px;grid-template-columns:1fr;background:#042958;color:#fff;border-radius:16px;padding:18px}
@media(min-width:720px){.koop-strook{grid-template-columns:repeat(3,1fr);padding:22px}}
.koop-strook div{display:flex;flex-direction:column;gap:4px;padding-left:14px;border-left:3px solid #F85528}
.koop-strook b{color:#F85528;font-size:16px}
.koop-strook span{color:#DCE4EE;font-size:14.5px;line-height:1.45}
.koop-strook em{color:#fff;font-style:normal;font-weight:700}
.vak-kaart{background:#fff;border:1px solid #DDE5EE;border-radius:18px;padding:18px;margin:16px 0;
  scroll-margin-top:90px;box-shadow:0 10px 24px -22px rgba(4,41,88,.5)}
.vak-kaart header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  padding-bottom:12px;border-bottom:1px solid #EEF2F6;margin-bottom:14px}
.vak-kaart h3{margin:0;font-size:21px;color:#042958}
.vak-tel{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5C7189}
.vr-rooster{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.vr-rooster{grid-template-columns:1fr 1fr}}
.vr-deel{background:#F5F7FA;border-radius:12px;padding:14px}
.vr-etiket{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:#F85528;border-radius:999px;padding:3px 10px;margin:0 0 8px}
.vr-naam{font-weight:700;color:#042958;margin:0 0 8px;line-height:1.3}
.vr-lys{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vr-lys li{position:relative;padding-left:16px;line-height:1.4;font-size:15px}
.vr-lys li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:#F85528}
.vak-noot{margin:12px 0 0;color:#5C7189}
.vak-kaart footer{margin-top:14px}
.vak-kaart footer a{text-decoration:none;display:inline-flex}

/* ── "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}

/* "View" on a subject card is an invitation, so it carries the orange.
   The counts used to sit here; they belong on the subject page itself. */
.block small.count{color:var(--orange);font-weight:700;font-size:10.5px}

/* Same orange "Bekyk" on the laerskool cards. */
.block small.tel{color:var(--orange);font-weight:700;font-size:10.5px}

/* Match Column A to Column B */
.match{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;margin-top:6px}
.match .mcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.match .mhead{font:700 12px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--soft,#5C7189);margin-bottom:2px}
.match .mitem{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;text-align:left;padding:10px 12px;border:2px solid #D6E0EA;border-radius:12px;background:#fff;font:inherit;font-size:15px;line-height:1.35;cursor:pointer;color:inherit;min-height:52px}
.match .mkey{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#EEF3F8;font-weight:700;font-size:13px}
.match .mtext{flex:1;min-width:0;overflow-wrap:anywhere}
.match .mlink{flex:none;font-weight:700;color:#F85528}
.match .mitem.sel{border-color:#F85528;box-shadow:0 0 0 3px rgba(248,85,40,.18)}
.match .mitem.done{border-color:#16324F}
.match .mb.ready:not(.used){border-style:dashed;border-color:#F85528}
.match .mb.used{opacity:.55}
.match .mitem.right{border-color:#2E9E5B;background:#EAF7EF}
.match .mitem.wrong{border-color:#D64545;background:#FDECEC}
.match .mfix{flex-basis:100%;font-size:13px;color:#2E7D4F;font-weight:700}
@media (max-width:420px){.match .mitem{font-size:14px;padding:9px 9px;gap:6px}.match .mkey{width:20px;height:20px;font-size:12px}}

.tf-given{margin-top:12px;padding:10px 14px;border-left:4px solid #F85528;background:#FFF4EF;border-radius:8px;font-size:17px}

/* Matching: bolder, darker text and an orange check button under the columns */
.match .mitem{color:#0B2340;font-weight:600;font-size:16px;-webkit-user-select:none;user-select:none}
.match .mhead{color:#0B2340}
.match .mkey{color:#0B2340}
.match .mb.used{opacity:1;background:#EEF3F8;border-color:#9FB3C8}
.mcheck-row{margin-top:18px}
.mcheck-row:empty{display:none}
.mcheck{display:block;width:100%;padding:15px 18px;border:0;border-radius:14px;background:#1D4E89;color:#fff;font:inherit;font-weight:800;font-size:17px;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 0 #0F2A44}
.mcheck:active{transform:translateY(2px);box-shadow:0 2px 0 #0F2A44}
.mcheck:hover{background:#245C9E}
@media (max-width:420px){.match .mitem{font-size:15px}}

/* Instruction line: darker and bolder for easier reading */
#q-instruction,#v-opdrag{color:#0B2340;font-weight:700}

/* 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}}

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