/*!
 * MeerkatSkool HEADER + FOOTER only  v1.0 (6 Oct 2026)
 * For OLD pages that still use their old stylesheet. Everything is scoped to .ms-chrome,
 * so it does not restyle the rest of the page. Pages built on the full theme
 * (meerkatskool-theme.css) do NOT need this file.
 * Markup: wrap header+scrim+drawer in <div class="ms-chrome">…</div>, and use <footer class="ms-chrome">.
 */
.ms-chrome{
  --brand-blue:#102641; --brand-yellow:#E5A324; --chrome:#08162E;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --wrap:1120px;
}
div.ms-chrome{display:contents}
.ms-chrome, .ms-chrome *{box-sizing:border-box}
.ms-chrome .top, .ms-chrome .drawer, footer.ms-chrome{font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;letter-spacing:normal;text-align:left}
.ms-chrome img{max-width:100%;display:block;border:0;box-shadow:none;margin:0}
.ms-chrome ul{list-style:none;margin:0;padding:0}
.ms-chrome li{margin:0;padding:0}
.ms-chrome li::before{content:none}
.ms-chrome h3{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.02em}
.ms-chrome a{color:inherit}
.ms-chrome :focus-visible{outline:3px solid #2F5BD3;outline-offset:3px;border-radius:6px}
.ms-chrome .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:auto}
.ms-chrome summary{display:flex}
/* neutralise common legacy rules (header{}, footer{}, nav a{}, button{}) */
.ms-chrome .top{padding:0;margin:0;border:0;width:auto;height:auto}
footer.ms-chrome{text-align:left;border:0;width:auto}
.ms-chrome nav a{padding:0;margin:0;display:inline;font-size:inherit;text-transform:none;border:0;background:none}
.ms-chrome button{font:inherit;color:inherit;margin:0;box-shadow:none;text-transform:none;letter-spacing:normal}
.ms-chrome p{margin:0}
.ms-chrome .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--chrome);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.ms-chrome .top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.ms-chrome .top .brand img{height:46px;width:auto}
.ms-chrome .grades{display:flex;gap:6px;margin-left:auto}
.ms-chrome .grades a{display:grid;place-items:center;min-width:44px;height:40px;padding:0 10px;border-radius:12px;text-decoration:none;font:700 15px var(--display);color:#C9D4E3}
.ms-chrome .grades a:hover{background:rgba(255,255,255,.08);color:#fff}
.ms-chrome .grades a[aria-current]{background:#E5A324;color:#102641}
.ms-chrome .lang{font-weight:700;font-size:14px;text-decoration:none;color:#C9D4E3;padding:8px 10px}
@media (max-width:720px){
  .ms-chrome .grades{display:none}
  .ms-chrome .lang{margin-left:auto}
  .ms-chrome .top .brand img{height:32px}
}
footer.ms-chrome{background:var(--chrome);color:#B9C7DA;margin-top:72px;padding:48px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:15px}
footer.ms-chrome a{color:inherit}
.ms-chrome .ftop{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid #1E2F4D}
.ms-chrome .fbrand p{margin:12px 0 0;max-width:44ch;color:#B9C7DA}
footer.ms-chrome .logo-dark-f{height:48px;width:auto}
.ms-chrome .fen{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 8px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px #1E2F4D;text-decoration:none;color:#fff;font-weight:700}
.ms-chrome .fen b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#E5A324;color:#102641;font-size:13px}
.ms-chrome .fen:hover{box-shadow:inset 0 0 0 2px #E5A324}
.ms-chrome .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 28px;padding:32px 0}
.ms-chrome .fcol.extra{grid-column:1/-1;display:block;padding-top:20px;border-top:1px solid #1E2F4D}
.ms-chrome .fcol.extra ul{display:flex;flex-wrap:wrap;gap:4px 28px}
.ms-chrome .fcol summary{list-style:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ms-chrome .fcol summary::-webkit-details-marker{display:none}
.ms-chrome .fcol summary a,.ms-chrome .fcol summary .lbl{font:700 19px var(--display);color:#fff;text-decoration:none}
.ms-chrome .fcol summary a:hover{color:#E5A324}
.ms-chrome .fcol .tw{display:none}
.ms-chrome .fcol li.fall{display:none}
.ms-chrome .fcol li.fall a{color:#E5A324;font-weight:700}
.ms-chrome .fcol ul{list-style:none;margin:0;padding:0}
.ms-chrome .fcol li a{display:block;padding:5px 0;text-decoration:none;color:#DCE5F1;line-height:1.35;font-size:14.5px}
.ms-chrome .fcol li a .g{white-space:nowrap}
.ms-chrome .fcol li a .g{color:#7F93B0}
.ms-chrome .fcol li a:hover{color:#E5A324}
.ms-chrome .fcol li a:hover .g{color:#E5A324}
.ms-chrome .fcol li a.nov{margin-top:6px;color:#E5A324}
.ms-chrome .ftrust{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid #1E2F4D;display:flex;flex-wrap:wrap;gap:8px}
.ms-chrome .ftrust li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);font-size:14px;color:#DCE5F1}
.ms-chrome .ftrust li::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5A324}
.ms-chrome .fabout{margin:18px 0 0;max-width:70ch;font-size:14px;color:#8FA3BF}
.ms-chrome .fbottom{margin-top:24px;padding-top:20px;border-top:1px solid #1E2F4D;font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;color:#8FA3BF}
.ms-chrome .fbottom a{color:#DCE5F1}
.ms-chrome .fbottom a:hover{color:#E5A324}
.ms-chrome .fbottom .kids{margin-left:auto;color:#DCE5F1}
.ms-chrome .fbottom .kids span{color:#E5A324}
@media (max-width:1000px){
  .ms-chrome .fgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .ms-chrome .fgrid{grid-template-columns:1fr;gap:0;padding:16px 0 24px}
  .ms-chrome .fcol{border-bottom:1px solid #1E2F4D}
  .ms-chrome .fcol.extra{padding-top:0;border-top:0}
  .ms-chrome .fcol.extra ul{display:block}
  .ms-chrome .fcol summary{margin:0;min-height:56px;cursor:pointer}
  .ms-chrome .fcol summary a,.ms-chrome .fcol summary .lbl{pointer-events:none}
  .ms-chrome .fcol .tw{display:block;width:12px;height:12px;border-right:2.5px solid #E5A324;border-bottom:2.5px solid #E5A324;transform:rotate(45deg);margin:-6px 6px 0 0;transition:transform .2s}
  .ms-chrome .fcol[open] .tw{transform:rotate(225deg);margin-top:6px}
  .ms-chrome .fcol ul{padding-bottom:14px}
  .ms-chrome .fcol li.fall{display:block}
  .ms-chrome .fcol li a{padding:9px 0}
  .ms-chrome .ftop{flex-direction:column}
  .ms-chrome .fbottom .kids{margin-left:0}
}
.ms-chrome .topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ms-chrome .topic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-sm);background:var(--soft);text-decoration:none;border-left:5px solid var(--c,var(--s-wis));transition:background .12s}
.ms-chrome .topic:hover{background:var(--sky)}
.ms-chrome .topic b{font-weight:700;font-size:17px}
.ms-chrome .topic small{display:block;color:var(--ink-3);font-size:14px}
.ms-chrome .topic .score{margin-left:auto;font:700 14px var(--body);color:var(--ink-3);white-space:nowrap}
.ms-chrome .topic .score.done{color:var(--good)}
.ms-chrome .topic.hot{background:var(--surface);box-shadow:0 0 0 2px var(--brand-yellow)}
.ms-chrome .topic.hot .score{color:var(--brand-blue);background:var(--brand-yellow);padding:4px 12px;border-radius:999px}
.ms-chrome .langsw{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 2px var(--line);margin:0 0 22px}
.ms-chrome .langsw button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:700 15px var(--body);cursor:pointer}
.ms-chrome .langsw button[aria-pressed="true"]{background:#102641;color:#E5A324}
.ms-chrome .langsw a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;color:var(--ink-2);font:700 15px var(--body);text-decoration:none}
.ms-chrome .langsw a[aria-current="page"]{background:var(--brand-blue);color:var(--brand-yellow)}
.ms-chrome .drawer .dfoot a{text-decoration:none}
.ms-chrome .top .brand{display:flex;align-items:center;min-height:48px}
.ms-chrome .lang{display:inline-flex;align-items:center;min-height:44px}
.ms-chrome .burger{width:48px;height:48px;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;cursor:pointer;margin-right:-8px}
.ms-chrome .burger:hover{background:rgba(255,255,255,.08)}
.ms-chrome .burger span{display:block;width:24px;height:3px;border-radius:2px;background:#E5A324;box-shadow:0 -8px 0 #E5A324,0 8px 0 #E5A324}
.ms-chrome .scrim{position:fixed;inset:0;z-index:40;background:rgba(10,22,40,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.ms-chrome .drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(360px,88vw);background:var(--chrome);color:#fff;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 24px calc(env(safe-area-inset-bottom,0px) + 24px);
  transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow-y:auto}
body.menu-open .ms-chrome .scrim{opacity:1;pointer-events:auto}
body.menu-open .ms-chrome .drawer{transform:none}
body.menu-open{overflow:hidden}
.ms-chrome .drawer .dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.ms-chrome .drawer .dtop img{height:38px;width:auto;max-width:calc(100% - 64px)}
.ms-chrome .drawer .close{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
.ms-chrome .drawer nav a.main{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid #1E2F4D;text-decoration:none;color:#fff;font:700 24px var(--display);letter-spacing:-.01em}
.ms-chrome .drawer nav a.main[aria-current]{color:#E5A324}
.ms-chrome .drawer nav a.main::after{content:"›";color:#5C7395;font-size:28px;line-height:1}
.ms-chrome .drawer .gq{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 0 18px;border-bottom:1px solid #1E2F4D}
.ms-chrome .drawer .gq a{display:grid;place-items:center;height:52px;border-radius:12px;background:rgba(255,255,255,.07);text-decoration:none;color:#fff;font:800 20px var(--display)}
.ms-chrome .drawer .gq a:hover{background:#E5A324;color:#102641}
.ms-chrome .drawer .gq small{display:block;grid-column:1/-1;font-size:14px;color:#9FB2CC}
.ms-chrome .drawer .dfoot{margin-top:auto;padding-top:28px;font-size:15px;color:#9FB2CC}
.ms-chrome .drawer .dfoot a{color:#fff}
.ms-chrome .drawer .dlang{display:inline-block;margin-bottom:14px;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 2px #1E2F4D;text-decoration:none;font-weight:700}
@media (prefers-reduced-motion:reduce){
  .ms-chrome .drawer,.ms-chrome .scrim{transition:none}
}