/* ============================================================
   MeerkatSkool · Primary School Maths
   Mobile-first app layout. Everything is block based and within
   thumb reach; a larger screen simply gets more columns.
   ============================================================ */

:root{
  --paper:#F5F7FA; --white:#FFFFFF; --ink:#042958; --soft:#5C7189; --line:#DDE5EE;
  --navy:#042958; --navy-dp:#18242C; --head-navy:#042958; --head-line:#3A4E5C; --orange:#F85528; --orange-dp:#AE4700; --orange-lt:#F85528; --orange-text:#AE4700;
  --sky:#5B7285; --fill:#FDEBDD;
  --right:#1B7A4B; --right-lt:#E4F3EA; --wrong:#B4342A; --wrong-lt:#FBEBE9;
  --head:'Zilla Slab',Georgia,serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:16px; --r-l:22px;
  --shadow:0 2px 0 rgba(4,41,88,.06), 0 10px 24px -18px rgba(4,41,88,.5);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t: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(--paper);color:var(--ink);font-family:var(--body);
  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(--orange);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

/* ══════════════ top bar ══════════════ */
.bar{
  position:sticky;top:0;z-index:60;background:var(--head-navy);color:#fff;
  border-bottom:1px solid var(--head-line);padding-top:var(--safe-t);
}
@supports (backdrop-filter:blur(1px)){
  .bar{background:#042958;backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px)}
}
.bar-in{max-width:940px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:20px;letter-spacing:-.015em}
.brand img{width:34px;height:34px;border-radius:9px}
/* wordmark in the top bar — the artwork's navy matches the bar exactly */
.bar .wordmark{height:30px;width:auto;border-radius:0}
@media(min-width:720px){ .bar .wordmark{height:34px} }
.grow{flex:1}
.back-btn{
  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;
}
.back-btn:active{background:rgba(255,255,255,.22);transform:scale(.94)}
.bar-title{font-family:var(--head);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}
.pill{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}
.pill:active{background:rgba(255,255,255,.24)}

/* ══════════════ bottom navigation ══════════════ */
.tabbar{
  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(--line);padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.tabbar a,.tabbar 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(--soft);letter-spacing:.01em;
}
.tabbar .icon{font-size:21px;line-height:1}
.tabbar .on{color:var(--navy)}
.tabbar .on .icon{color:var(--orange)}
body{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 8px)}
@media(min-width:720px){
  .tabbar{position:static;grid-template-columns:none;display:flex;justify-content:center;gap:8px;
    border-top:1px solid var(--line);background:transparent;margin-top:40px;padding:18px 0 40px}
  .tabbar a,.tabbar button{flex-direction:row;height:auto;padding:10px 18px;font-size:15px;border-radius:999px}
  .tabbar .on{background:var(--white);border:1.5px solid var(--line)}
  body{padding-bottom:0}
}

/* ══════════════ hero ══════════════ */
.hero,.held{position:relative;overflow:hidden;padding:26px 0 30px}
.hero::before,.held::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--line) 31px,var(--line) 32px)}
.hero>*,.held>*{position:relative}
.eyebrow,.oogbrou{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);display:flex;align-items:center;gap:9px;margin-bottom:12px}
.eyebrow::before,.oogbrou::before{content:"";width:22px;height:2px;background:var(--orange);flex:none}
h1{font-family:var(--head);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)}
.lede{margin-top:13px;font-size:17px;color:var(--soft);max-width:54ch}
.ticks{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px 15px;font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.ticks span{display:flex;gap:6px}
.ticks span::before{content:"\2713";color:var(--orange);font-weight:700}

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

/* ══════════════ grade blocks ══════════════ */
.gradegrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.gradegrid{grid-template-columns:repeat(4,1fr)}}
.gradeblock{
  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;
}
.gradeblock::after{
  content:"";position:absolute;right:-26px;top:-26px;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.gradeblock:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp), 0 6px 14px -12px rgba(4,41,88,.7)}
.gradeblock .name{font-family:var(--head);font-weight:700;font-size:clamp(24px,6.6vw,30px);line-height:1.05;
  letter-spacing:-.022em;position:relative}
.gradeblock .name em{font-style:normal;color:var(--orange-lt)}
.gradeblock .count{margin-top:auto;font-size:13.5px;line-height:1.4;color:#B7CDE1;position:relative}
.gradeblock .go{
  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(--orange-lt);
}
.gradeblock .go::after{content:"\2192";font-size:17px;line-height:1}
.gradeblock.current{box-shadow:0 0 0 3px var(--orange), 0 3px 0 var(--navy-dp)}

/* ══════════════ topic blocks ══════════════ */
.blockgrid{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:680px){.blockgrid{grid-template-columns:repeat(2,1fr)}}
.block{
  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;
}
.block::after{
  content:"";position:absolute;right:-22px;top:-22px;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.055);
}
.block:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp), 0 5px 12px -10px rgba(4,41,88,.7)}
/* the glyph is gone from topic blocks — the title gets all the room */
.block > .glyph{display:none}
.block 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}
.block 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}

/* the mixed tests: deep blue with orange lettering, so they don't get
   lost among the topics. No icon — the width already sets them apart. */
.block.wide{
  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;
}
.block.wide:active{transform:translateY(3px);box-shadow:0 0 0 #021B3B, 0 5px 12px -10px rgba(2,27,59,.7)}
.block.wide .glyph{display:none}
.block.wide b{font-size:16px;color:#F85528}
.block.wide small{margin-top:3px;color:#F8A98D}
.block.wide .in{display:flex;flex-direction:column;min-width:0;position:relative}

/* ══════════════ segmented controls ══════════════ */
.segment{display:flex;gap:6px;background:var(--white);border:1.5px solid var(--line);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(--soft);
  transition:background .13s,color .13s}
.segment button.on{background:var(--navy);color:#fff}
.choose-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.choose-row .label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-text)}
.choose-row .segment{flex:1;min-width:210px}

/* ══════════════ buttons ══════════════ */
.btn{
  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;
}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy-dp)}
.btn.full{width:100%}
.btn.oranje{background:var(--orange);box-shadow:0 3px 0 var(--orange-dp)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:active{background:var(--white);transform:scale(.97)}

/* ══════════════ quiz: full screen ══════════════ */
.quiz{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  display:none;flex-direction:column;
}
.quiz.open{display:flex}
body.busy{overflow:hidden}

.q-head{
  padding:calc(var(--safe-t) + 10px) 16px 10px;background:var(--head-navy);color:#fff;
  border-bottom:1px solid var(--head-line);flex:none;
}
.q-head-row{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto}
.q-title{flex:1;min-width:0}
.q-title b{display:block;font-family:var(--head);font-weight:700;font-size:16.5px;line-height:1.2;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-title small{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#9FBDD6}
.tally{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}
.track{height:6px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin:11px auto 0;max-width:720px}
.track i{display:block;height:100%;width:0;background:var(--orange);border-radius:999px;transition:width .32s ease}

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

.qcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 18px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.qcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);opacity:.8}
.stem{font-size:18.5px;line-height:1.5}
.stem b{font-weight:700}
.math{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}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:-.55em;line-height:1.06;margin:0 4px;font-family:var(--mono)}
.frac b{font-weight:600;padding:0 4px;font-size:.86em}
.frac i{font-style:normal;font-weight:600;border-top:1.7px solid currentColor;padding:0 4px;font-size:.86em}
.mini-table{border-collapse:collapse;margin:14px 0 3px;font-size:15px;width:100%}
.mini-table th,.mini-table td{border:1.5px solid var(--line);padding:8px 10px;text-align:left}
.mini-table th{background:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}

/* answers */
.choices{display:grid;gap:9px;margin-top:16px}
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:58px;padding:13px 15px;border-radius:14px;background:var(--white);
  border:1.5px solid var(--line);font-size:17px;box-shadow:var(--shadow);
  transition:transform .12s,border-color .12s,background .12s;
}
.choice:active:not(:disabled){transform:scale(.98)}
.choice:disabled{cursor:default}
.choice .let{
  width:30px;height:30px;border-radius:9px;flex:none;background:var(--paper);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--soft);
}
.choice.right{border-color:var(--right);background:var(--right-lt)}
.choice.right .let{border-color:var(--right);background:var(--right);color:#fff}
.choice.wrong{border-color:var(--wrong);background:var(--wrong-lt)}
.choice.wrong .let{border-color:var(--wrong);background:var(--wrong);color:#fff}

.typebox{
  margin-top:16px;background:var(--white);border:2px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);
}
.typebox 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;
}
.typebox input::placeholder{color:#B4C2D2;font-size:19px;font-weight:400}
.typebox.right{border-color:var(--right);background:var(--right-lt)}
.typebox.wrong{border-color:var(--wrong);background:var(--wrong-lt)}
.typebox .mark{font-size:22px;flex:none}

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

/* memo panel */
.memo{
  margin-top:16px;border-radius:16px;padding:16px 17px;border:1.5px solid var(--line);
  background:var(--white);display:none;
}
.memo.show{display:block;animation:risein .26s ease}
@keyframes risein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.memo.yes{border-color:var(--right);background:var(--right-lt)}
.memo.no{border-color:var(--wrong);background:var(--wrong-lt)}
.memo .verdict{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:17px;margin-bottom:7px}
.memo.yes .verdict{color:var(--right)}
.memo.no .verdict{color:var(--wrong)}
.memo .verdict .pip{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;flex:none}
.memo.yes .pip{background:var(--right)}
.memo.no .pip{background:var(--wrong)}
.memo p{font-size:16px;line-height:1.55;color:var(--ink)}
.memo p b{font-weight:700}

/* fixed bottom action */
.q-foot{
  flex:none;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:12px 16px calc(12px + var(--safe-b));
}
.q-foot-in{max-width:720px;margin:0 auto;display:flex;gap:10px}
.q-foot .btn{flex:1}

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

.review{margin-top:26px;text-align:left}
.review h3{font-family:var(--head);font-weight:700;font-size:18px;margin-bottom:11px}
.item{
  background:var(--white);border:1.5px solid var(--line);border-left-width:5px;border-radius:0 14px 14px 0;
  padding:14px 15px;margin-bottom:9px;
}
.item.reg{border-left-color:var(--right)}
.item.fout{border-left-color:var(--wrong)}
.item .head-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.item .v{font-size:16px}
.item .v .math{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(--soft);line-height:1.5}
.item .a b{color:var(--ink)}

/* ══════════════ grade picker sheet ══════════════ */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(4,41,88,.45);display:none;align-items:flex-end}
.overlay.open{display:flex;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;background:var(--white);border-radius:24px 24px 0 0;padding:8px 16px calc(20px + var(--safe-b));
  animation:slideup .26s cubic-bezier(.2,.8,.3,1);max-height:82vh;overflow-y:auto;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.grip{width:42px;height:5px;border-radius:999px;background:var(--line);margin:8px auto 16px}
.sheet h3{font-family:var(--head);font-weight:700;font-size:19px;margin-bottom:14px}
@media(min-width:720px){
  .overlay{align-items:center;justify-content:center}
  .sheet{max-width:520px;border-radius:22px;animation:none;padding-bottom:22px}
}

/* ══════════════ faq and footer ══════════════ */
.faqlist{border-top:1px solid var(--line);margin-top:14px}
details{border-bottom:1px solid var(--line)}
summary{padding:16px 2px;font-family:var(--head);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(--orange)}
details[open] summary::after{content:"\2212"}
details p{padding:0 2px 17px;color:var(--soft);font-size:16px}

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

.foot{background:var(--head-navy);color:#fff;padding:28px 0 26px;margin-top:34px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.foot .wordmark{height:34px;width:auto;border-radius:0;flex:none}
.langbtn{
  display:inline-flex;align-items:center;gap:9px;background:var(--white);color:var(--head-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;
}
.langbtn:active{transform:translateY(2px);box-shadow:none}
.langbtn .code{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  background:var(--head-navy);color:#fff;border-radius:5px;padding:3px 6px;
}
.langbtn .arrow{color:var(--orange-dp);font-size:17px}
/* footer grid: every grade, so a parent can reach any page from anywhere */
.foot .subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;margin:2px 0 22px}
.foot .subject-col h3{font-family:var(--head);font-size:15px;font-weight:700;margin:0 0 9px;letter-spacing:.01em}
.foot .subject-col h3 a{color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:2px}
.foot .subject-col ul{list-style:none;margin:0;padding:0}
.foot .subject-col li{margin:0 0 5px}
.foot .subject-col 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}
.foot .subject-col a:hover,.foot .subject-col a:focus-visible{color:#fff;text-decoration:underline}
.foot .subject-col a.here{color:var(--orange);font-weight:700}
.foot .subject-col .muted{color:rgba(255,255,255,.58);font-size:13px;line-height:1.4;display:block}
@media(min-width:720px){ .foot .subject-grid{grid-template-columns:repeat(4,1fr);gap:26px 20px} }

.foot .links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.foot .links 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}
.foot .links a:active{background:rgba(255,255,255,.22)}
.foot .note{font-family:var(--mono);font-size:11px;color:#9FBDD6;line-height:1.95}

/* install prompt */
.install{
  display:none;align-items:center;gap:12px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r);padding:13px 15px;margin-top:14px;box-shadow:var(--shadow);
}
.install.show{display:flex}
.install .in{flex:1;min-width:0}
.install b{font-family:var(--head);font-size:15.5px;display:block}
.install small{color:var(--soft);font-size:13px}
.install .btn{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}}

/* ══════════════ all-quizzes page ══════════════ */
.all-grade{margin:0 0 30px}
.all-grade h2{font-family:var(--head);font-size:22px;font-weight:700;color:var(--ink);
  margin:0 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.all-grade h2 .count{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--soft);
  letter-spacing:.04em;text-transform:uppercase}
.all-grade > p{margin:0 0 14px;color:var(--soft);font-size:15px;line-height:1.5}
.all-list{display:grid;grid-template-columns:1fr;gap:9px;list-style:none;margin:0;padding:0}

.all-list a:hover,.all-list a:focus-visible{border-color:var(--orange)}
.all-list a:active{transform:scale(.99)}

.all-list .what{flex:1;min-width:0}




@media(min-width:660px){ .all-list{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}

/* Nine in ten visitors are on a phone. Apple's guideline is 44px for a tap
   target and we hold to it for every primary control. The footer links are a
   dense list, so 40px with enough spacing between them. */
.pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.foot .subject-col a{min-height:40px;display:flex;align-items:center;padding:4px 0}
.foot .subject-col li{margin:0 0 2px}
.foot .subject-col h3 a{min-height:40px}
.foot .links a{min-height:44px;display:inline-flex;align-items:center}
.all-list a{min-height:56px}

/* ══════════════ length sheet ══════════════ */
.lengthsheet{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}
.lengthsheet.open{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} }

/* ══════════════ encouragement ══════════════ */
.encourage{margin:12px 2px 0;font-family:var(--head);font-size:16.5px;font-weight:600;
  line-height:1.4;color:var(--soft);display:flex;align-items:center;justify-content:center;gap:10px;
  opacity:0;transform:translateY(4px);transition:opacity .22s ease,transform .22s ease}
.encourage.show{opacity:1;transform:none}
.encourage.yes{color:var(--right)} .encourage.no{color:var(--ink)}
.encourage span{text-align:left}
.encourage-fox{width:auto;height:46px;flex:none}
.result-fox{display:block;margin:14px auto 2px;height:132px;width:auto;animation:foxIn .4s cubic-bezier(.2,.8,.3,1)}
@keyframes foxIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media(min-width:560px){ .encourage-fox{height:56px} .result-fox{height:150px} }
@media (prefers-reduced-motion:reduce){ .encourage,.result-fox{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}

/* ══════════════ dark hub cards ══════════════ */
/* The soft grey only reaches 2.57 against this navy and is unreadable; we
   therefore use a light blue-grey that reaches 6.69. */
.all-list a{display:flex;align-items:center;gap:12px;background:var(--head-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}
.all-list a:hover,.all-list a:focus-visible{border-color:var(--orange)}
.all-list a:active{transform:scale(.99)}
.all-list .glyph{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(--orange)}
.all-list .what{flex:1;min-width:0}
.all-list .what b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;color:#fff}
.all-list .what small{display:block;color:#A8BDD4;font-size:13px;line-height:1.4;margin-top:2px}
.all-list .arrow{flex:none;color:#A8BDD4;font-size:17px}
.all-list .ext{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}

.block .glyph .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:var(--fill);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(--line)}

/* 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(--line);background:var(--fill);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(--orange-lt)}

.kn{font-family:var(--body);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(--orange-lt);color:#fff}
.kn.vol:hover{background:var(--orange-dp)}
.kn.lyn{background:var(--fill);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:var(--fill);
  border-color:var(--line);color:#5C7189}
.kn.skakel{background:none;border:none;color:var(--orange-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:#C0392B}

.som{display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);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(--head);font-size:inherit;font-weight:700;width:2.6em;
  text-align:center;border:none;border-bottom:4px solid var(--orange-lt);
  background:transparent;color:var(--orange-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:#C0392B}

/* 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(--line);background:var(--fill);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(--head);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(--head);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(--orange-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(--body);font-size:14px;font-weight:600;padding:14px 6px;
  border:2px solid var(--line);background:var(--fill);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(--orange-lt)}
.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(--head);font-size:clamp(22px,4.6vw,30px);font-weight:700;
  text-align:center;margin:8px 0 4px}
.f-vraag b{color:var(--orange-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(--head);font-size:21px;font-weight:700;padding:20px 8px;
  border:2px solid var(--line);background:var(--fill);color:var(--ink);
  border-radius:14px;cursor:pointer;min-height:64px;transition:all .12s ease}
.f-kn:hover{border-color:var(--orange-lt)}
.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(--orange-lt);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(--head);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(--head);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(--head);font-size:30px;font-weight:700;width:5em;
  text-align:center;border:none;border-bottom:4px solid var(--orange-lt);
  background:transparent;color:var(--orange-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:#C0392B}
.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}


/* ── Paper cards ──
   White and wide, so they do not read as more navy topic tiles.
   A paper is a different thing from a quiz and should look like one. */
.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(--line);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(--orange)}
.vik{flex:0 0 40px;height:52px;border:1.5px solid var(--line);border-radius:5px;
  background:var(--paper);position:relative;overflow:hidden}
.vik::before{content:"";position:absolute;left:7px;right:7px;top:10px;height:2px;
  background:var(--line);box-shadow:0 6px 0 var(--line),0 12px 0 var(--line),0 18px 0 var(--line)}
.vik i{position:absolute;right:-1px;top:-1px;width:14px;height:14px;background:var(--orange);
  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}

.crumb{background:#fff;border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px}
.crumb a{color:#5C7189;text-decoration:none;font-size:14px}
.crumb a:hover{color:var(--orange);text-decoration:underline}
.crumb .sep{color:#C3D0DC;font-size:14px}
.crumb .here{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}

/* ── Plain topic list on the grade pages ──
   Real links in the page, so Google reads every topic. Each one opens
   that topic's quiz. */
.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 var(--line);border-radius:10px;
  background:#fff;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.topic-links a:hover{border-color:#F85528;color:#042958}
.topic-paper{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--sky);
  letter-spacing:.05em;text-transform:uppercase;margin-left:6px}

/* ── Topic-test pages (/grade-5-fractions-test) ── */
.topic-cta{margin:18px 0 6px}
.topic-cta .btn{display:inline-flex;text-decoration:none;color:#fff;padding:14px 22px;font-size:17px}
.topic-links.plain li{padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600}
.sample{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}
.sample .s-q{margin:0 0 8px}
.sample .s-opts{margin:0 0 8px 22px;padding:0}
.sample .s-opts li{margin:3px 0}
.sample details summary{cursor:pointer;color:#042958;font-weight:700}
.sample details p{margin:8px 0 0}
.sample .s-memo{color:var(--sky)}
.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}

/* Drill pages (times tables, word problems): helper text and intro line. */
.wenk{margin:12px 0 0;font-size:15px;color:var(--soft,#5C7189);line-height:1.5}
.inlei{margin-top:10px;font-size:17px;color:var(--soft,#5C7189);max-width:54ch}
.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}

/* On phones the bottom tab bar is fixed at the bottom and sat on top of the
   Share and Buy Tests buttons. Lift the buttons above it. */
@media(max-width:719px){
  body:has(.tabbar) .swewe-ry,
  body:has(.tabbar) > .koop-swewe{bottom:calc(var(--nav-h) + var(--safe-b,0px) + 12px)}
}

/* No bottom tab bar on phones (Nick, Sept 2026): the burger menu already has
   everything, and the bar only covered content and the Share / Buy buttons. */
@media(max-width:719px){
  .tabbar{display:none}
  body{padding-bottom:0}
  body:has(.tabbar) .swewe-ry,
  body:has(.tabbar) > .koop-swewe{bottom:16px}
}
@media(max-width:420px){
  body:has(.tabbar) .swewe-ry,
  body:has(.tabbar) > .koop-swewe{bottom:12px}
}