/* =====================================================================
   CRACK THE MATHS CODE - GRADE 8 DIAGNOSTIC JOURNEY
   Visual identity inherited from the Grade 7 build so the two products
   read as siblings. Phone first. Works in greyscale and in print.
   ===================================================================== */
:root{
  color-scheme: light;
  --bg1:#22c3de; --bg2:#12aed0; --bg3:#0b93b4;
  --card:#ffffff; --ink:#0c3b45; --muted:#5b7a82;
  --brand:#0fa6c8; --brand-d:#0b8299;
  --good:#2fb344; --good-bg:#e9f9ec;
  --bad:#ef476f; --bad-bg:#ffedf1;
  --hint:#f59f00; --hint-bg:#fff8e6;
  --chip:#e2f6fb; --chip-ink:#0b8299;
  --ring:#dbeef2;
  --shadow:0 12px 34px rgba(6,60,72,.20);
  --pink:#ec3f8f; --purple:#8a4fe0; --orange:#ff8a3d; --yellow:#ffc93c; --green:#7ed957;
  --rag-g:#2fb344; --rag-a:#f59f00; --rag-r:#ef476f; --rag-x:#b9c9ce;
  --wa:#25d366;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid #0c3b45;outline-offset:2px;border-radius:10px}
html,body{margin:0;padding:0}
body{font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  background-attachment:fixed;min-height:100dvh;
  padding-inline:16px;padding-block:16px;display:flex;justify-content:center}
.wrap{width:100%;max-width:580px;margin:auto}
h1,h2,h3,h4{font-family:'Baloo 2','Trebuchet MS','Segoe UI',system-ui,sans-serif;margin:0;line-height:1.16}
a{color:var(--brand-d)}
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:20px 18px 22px;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.qnav{display:flex;gap:8px;margin:0 0 10px}
.navback{background:rgba(255,255,255,.92);border:none;color:var(--brand-d);font-weight:800;font-size:.9rem;padding:9px 14px;border-radius:12px;cursor:pointer;box-shadow:0 3px 8px rgba(6,60,72,.15);font-family:inherit}
.navback.home{background:#fff}
.navback:disabled{opacity:.45;cursor:default}
.navback:active{transform:scale(.97)}

/* brand */
/* ---------------------------------------------------- the header ---------- */
/* Two rows. The publisher's mark and the controls sit on top; the product
   name gets the full width underneath, so it stops breaking mid phrase. */
.brandbar{margin:2px 2px 14px;color:#fff}
.brandbar .bbtop{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.bbspace{flex:1 1 auto;min-width:4px}
.brandbar .bbmain{display:flex;align-items:center;gap:11px}
.brandbar .lockmini{flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.brandbar .bt{min-width:0;font-family:'Anton','Trebuchet MS',sans-serif;line-height:1;
              text-shadow:0 2px 6px rgba(0,0,0,.2)}
.brandbar .bt .btl{display:block;font-size:1.32rem;letter-spacing:.5px;text-transform:uppercase;
                   white-space:nowrap}
.brandbar .bt small{display:block;font-family:'Nunito',sans-serif;font-weight:800;
                    font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;
                    opacity:.95;margin-top:5px;white-space:nowrap}

/* The publisher's mark, on the white panel a two colour logo needs. */
.mml{display:inline-flex;align-items:center;background:#fff;border-radius:9px;
     padding:5px 9px;box-shadow:0 2px 7px rgba(6,60,72,.18);flex:none}
.mml img{display:block;height:auto}
.mml.big{border-radius:11px;padding:7px 12px}
/* The reversed mark sits straight on the brand blue: no panel, no shadow. */
.mml.rev{background:none;box-shadow:none;padding:0;border-radius:0}
.mml.rev.big{padding:0}
@media print{ .mml{box-shadow:none;padding:0} }
.herobrand{background:linear-gradient(158deg,#26c6e0,#0b93b4);border-radius:24px;box-shadow:var(--shadow);padding:22px 18px;color:#fff;position:relative;overflow:hidden;text-align:center}
/* The hero's top row: the publisher on the left, the curriculum badge on the
   right. Both were absolutely positioned before, which put them on top of
   each other once the logo was wider than a line of text. */
.herotop{display:flex;align-items:center;justify-content:space-between;gap:10px;
         position:relative;z-index:3;margin-bottom:4px;flex-wrap:wrap;min-width:0}
.caps{background:#fff;color:var(--brand-d);font-family:'Anton',sans-serif;font-size:.78rem;
      letter-spacing:1px;padding:5px 10px;border-radius:8px;flex:none;
      box-shadow:0 2px 7px rgba(6,60,72,.18)}
/* The wordmark had line-height .86 across both lines, which is a poster
   trick that only works while the font is short. Anton's capitals fill
   almost the whole em box and the text shadow sits below them, so at .86 the
   second line's box started inside the first line's glyphs and MATHS CODE
   printed over the bottom of CRACK THE. Each line now gets a line height of
   at least 1, which makes the collision impossible by construction rather
   than by luck with a particular font, and the tight stacked look is kept
   with a small negative margin that cannot eat into the glyphs. */
.wordmark{position:relative;z-index:2;color:#fff;font-family:'Anton','Trebuchet MS',sans-serif;text-transform:uppercase;line-height:1;margin:12px 0 0;text-shadow:0 3px 0 rgba(6,60,72,.18),0 8px 20px rgba(0,0,0,.22)}
.wordmark .l1{display:block;font-size:2.6rem;line-height:1.02;letter-spacing:1px}
.wordmark .l2{display:block;font-size:1.55rem;line-height:1.04;letter-spacing:1px;margin-top:4px}
/* 4px, not 1px: the first line carries a 3px drop shadow that sits below
   its own line box, so a gap of one pixel between the boxes still let the
   shadow touch the ascenders underneath it. */
.wmbox{position:relative;z-index:2;display:inline-block;border:3px solid #fff;border-radius:9px;padding:2px 13px;font-family:'Anton',sans-serif;font-size:1.2rem;letter-spacing:2px;color:#fff;margin-top:9px;text-transform:uppercase}
.ribbon{position:relative;z-index:2;display:inline-block;background:var(--pink);color:#fff;font-family:'Baloo 2','Trebuchet MS',sans-serif;font-size:1rem;padding:5px 18px;border-radius:22px;margin-top:12px;box-shadow:0 6px 14px rgba(236,63,143,.45)}
.lockhero{position:relative;z-index:2;display:block;margin:8px auto 0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}

/* generic */
.btn{margin-top:16px;width:100%;border:none;border-radius:15px;padding:15px;font-family:'Baloo 2','Trebuchet MS','Segoe UI',system-ui,sans-serif;font-size:1.1rem;color:#fff;background:linear-gradient(90deg,var(--brand),#0b93b4);cursor:pointer;box-shadow:0 8px 18px rgba(11,130,153,.35)}
.btn:active{transform:scale(.99)}
.btn.ghost{background:#fff;color:var(--brand-d);border:2px solid var(--ring);box-shadow:none}
.btn.pink{background:linear-gradient(90deg,#f5588f,#ec3f8f);box-shadow:0 8px 18px rgba(236,63,143,.35)}
.btn.sm{width:auto;display:inline-block;padding:10px 15px;font-size:.96rem;margin-top:8px;margin-right:8px}
.btn:disabled{opacity:.5;cursor:default}
.muted{color:var(--muted)}
.center{text-align:center}
.small{font-size:.86rem;font-weight:700}
label.fld{display:block;font-weight:800;font-size:.9rem;margin:12px 2px 5px}
input.ti,select.ti{width:100%;border:2px solid var(--ring);border-radius:13px;padding:13px;font-family:inherit;font-size:1.02rem;font-weight:700;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
select.ti{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b8299' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:13px;padding-right:40px}
input.ti:focus,select.ti:focus{outline:none;border-color:var(--brand)}
.consentrow{display:flex;gap:10px;align-items:flex-start;background:var(--chip);border-radius:14px;padding:12px;margin-top:12px;font-weight:700;font-size:.9rem;line-height:1.45}
.consentrow.opt{background:#f3e8ff}
.consentrow input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--brand)}
.legal{max-height:240px;overflow:auto;background:#f6fbfd;border:1px solid var(--ring);border-radius:14px;padding:14px;font-size:.84rem;font-weight:600;color:#3a5960;line-height:1.5}
.legal.tall{max-height:none}
/* A permission disclosure must never sit in its own little scroller. Inside
   the modal the parent scrolls the card, not a 240 pixel window inside it,
   because a consent the person could not read to the end is not informed
   consent. */
.modal .legal{max-height:none;overflow:visible}
.legal h4{margin:10px 0 3px;color:var(--brand-d);font-size:.92rem}
.legal p{margin:0 0 6px}
.sep{height:1px;background:var(--ring);margin:16px 0}

/* dashboard */
.dashhead{color:#fff;text-align:center;margin-bottom:14px}
.dashhead h2{font-size:1.5rem}
.dashhead p{font-weight:700;opacity:.95;margin:4px 0 0;font-size:.95rem}
.steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 4px}
.stepdot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-size:1rem;border:2px solid rgba(255,255,255,.6)}
.stepdot.done{background:var(--green);border-color:#fff;color:#0c3b45}
.stepdot.now{background:#fff;color:var(--brand-d)}
.stepline{width:26px;height:4px;border-radius:3px;background:rgba(255,255,255,.4)}
.stepline.done{background:var(--green)}
.tcard{background:#fff;border-radius:18px;padding:15px 15px 16px;margin-bottom:12px;box-shadow:0 6px 16px rgba(6,60,72,.12);position:relative;border-left:7px solid var(--brand)}
.tcard.locked{opacity:.78;border-left-color:#b9c9ce}
.tcard .tt{font-family:'Baloo 2';font-size:1.18rem;display:flex;align-items:center;gap:8px}
.tcard .when{font-weight:800;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.tcard .desc{font-weight:600;font-size:.89rem;color:#42606a;margin:8px 0 10px;line-height:1.45}
.tcard .lockmsg{font-weight:800;font-size:.84rem;color:#8a6d00;background:var(--hint-bg);border-radius:10px;padding:8px 10px}
.scorechip{position:absolute;top:14px;right:14px;background:var(--good-bg);color:var(--good);font-family:'Baloo 2';font-size:.98rem;padding:4px 11px;border-radius:14px}
.mininav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.navtile{background:#fff;border-radius:16px;padding:14px 10px;text-align:center;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(6,60,72,.12);border:2px solid transparent;font-size:.92rem;font-family:inherit;color:var(--ink);width:100%;display:block}
.navtile:active{transform:scale(.98)}
.navtile .ic{font-size:1.5rem;display:block;margin-bottom:3px}

/* language, draft notice and vocabulary */
.langmini{margin-left:auto}
.brandbar .langmini select.ti{background:rgba(255,255,255,.92)}
.langmini select.ti{width:auto;padding:8px 30px 8px 11px;font-size:.82rem;border-radius:12px;background-position:right 10px center;box-shadow:0 3px 8px rgba(6,60,72,.15);border-color:transparent}
.draftbar{background:#fff8e6;border:2px solid #ffd77a;border-radius:14px;padding:11px 12px;margin:10px 0;font-weight:700;font-size:.82rem;line-height:1.5;color:#7a5c00}
.draftbar b{display:block;color:#8a6d00;font-size:.74rem;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px}
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.vchip{background:#fff;border:2px solid var(--ring);border-radius:12px;padding:8px 12px;font-family:inherit;font-weight:800;font-size:.82rem;color:var(--ink);cursor:pointer}
.vchip.on{border-color:var(--brand);background:var(--chip);color:var(--chip-ink)}
.vchip b{color:var(--muted);margin-left:3px}
.wordcard{background:#fff;border:2px solid var(--ring);border-radius:16px;padding:13px;margin-bottom:10px}
.wordcard.gap{border-color:var(--pink)}
.wordcard.secure{background:var(--good-bg);border-color:#bde8c6}
.wordcard.shaky{background:var(--hint-bg);border-color:#ffd77a}
.wtop{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:7px}
.wen{font-family:'Baloo 2',system-ui,sans-serif;font-size:1.16rem;color:var(--ink)}
.wother{font-weight:800;font-size:1.02rem;color:var(--brand-d);background:var(--chip);border-radius:9px;padding:3px 10px}
.wgap{color:var(--pink);font-size:.7rem;vertical-align:middle}
.wrow{font-weight:700;font-size:.9rem;line-height:1.5;margin-top:5px}
.wrow.no{color:#8d1f3b}
.wlbl{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800}
.wrow.no .wlbl{color:var(--bad)}
.wfoot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.wbtn{border:2px solid var(--ring);background:#fff;border-radius:10px;padding:6px 11px;font-family:inherit;font-weight:800;font-size:.78rem;cursor:pointer;color:var(--ink)}
.wbtn.ok{border-color:#bde8c6;color:var(--good)}
.wbtn.no{border-color:#ffd77a;color:#8a6d00}

/* question */
.qtop{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.qbar{height:8px;border-radius:5px;background:var(--ring);margin:9px 0 14px;overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--pink));border-radius:5px;transition:width .3s}
.qtag{display:inline-block;background:var(--chip);color:var(--chip-ink);font-weight:800;font-size:.72rem;padding:4px 10px;border-radius:9px;margin:0 6px 8px 0;letter-spacing:.3px}
.qtag.type{background:#f3e8ff;color:#6b32c9}
.qtag.diff{background:var(--hint-bg);color:#8a6d00}
.stem{font-size:1.14rem;font-weight:700;line-height:1.5;margin:6px 0 12px}
.stem b{font-weight:800}
.dgmbox{background:#fbfeff;border:2px solid var(--ring);border-radius:16px;padding:12px;margin:10px 0 14px;text-align:center;overflow-x:auto}
.dgm{width:100%;height:auto;max-width:340px;display:block;margin:0 auto}
table.dgt{border-collapse:collapse;margin:0 auto;font-family:inherit}
table.dgt td,table.dgt th{border:2px solid var(--ink);padding:7px 13px;font-weight:800;font-size:.98rem;text-align:center}
table.dgt th.rh{background:var(--chip)}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:11px;align-items:center;background:#fff;border:2px solid var(--ring);border-radius:15px;padding:13px 14px;font-weight:800;font-size:1.04rem;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink)}
.opt:active{transform:scale(.995)}
.opt .k{flex:none;width:28px;height:28px;border-radius:9px;background:var(--chip);color:var(--chip-ink);display:flex;align-items:center;justify-content:center;font-size:.9rem}
.opt.sel{border-color:var(--brand)}
.opt.ok{border-color:var(--good);background:var(--good-bg)}
.opt.no{border-color:var(--bad);background:var(--bad-bg)}
.opt.dim{opacity:.6}
.fb{margin-top:13px;border-radius:15px;padding:13px 14px;font-weight:700;font-size:.95rem;line-height:1.5}
.fb.ok{background:var(--good-bg);color:#17692a}
.fb.no{background:var(--bad-bg);color:#8d1f3b}
.fb h4{font-size:1.02rem;margin-bottom:5px}
.fb .why{margin-top:7px;color:var(--ink);font-weight:600}
.fb .misc{margin-top:9px;background:#fff;border-radius:11px;padding:10px 11px;font-weight:700;color:var(--ink);border-left:5px solid var(--pink)}
.fb .misc .lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--pink);margin-bottom:3px}
.fb .fwd{margin-top:8px;font-size:.83rem;font-weight:700;color:var(--muted)}
.hintbox{background:var(--hint-bg);border-radius:13px;padding:11px 12px;margin-top:11px;font-weight:700;font-size:.93rem;color:#7a5c00;line-height:1.45}
.qfoot{display:flex;gap:9px;margin-top:14px}
.qfoot .btn{margin-top:0}

/* RAG + profile */
.ragrow{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;background:#fff;border:2px solid var(--ring);margin-bottom:8px;width:100%;text-align:left;font-family:inherit;color:var(--ink)}
button.ragrow{cursor:pointer}
.ragdot{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(0,0,0,.12)}
.ragdot.g{background:var(--rag-g)} .ragdot.a{background:var(--rag-a)}
.ragdot.r{background:var(--rag-r)} .ragdot.x{background:var(--rag-x)}
.ragrow .nm{flex:1;font-weight:800;font-size:.95rem;line-height:1.3}
.ragrow .nm small{display:block;font-weight:700;font-size:.76rem;color:var(--muted);margin-top:2px}
.ragrow .pc{font-family:'Baloo 2';font-size:1rem;color:var(--muted)}
.codebox{border-radius:18px;padding:16px;margin-bottom:12px;color:#fff}
.codebox.crack{background:linear-gradient(135deg,#2fb344,#7ed957)}
.codebox.near{background:linear-gradient(135deg,#f59f00,#ffc93c)}
.codebox.grow{background:linear-gradient(135deg,#ec3f8f,#f5588f)}
.codebox h3{font-size:1.12rem;margin-bottom:8px}
.codebox ul{margin:0;padding-left:20px;font-weight:800;font-size:.97rem;line-height:1.7}
.codebox .none{font-weight:700;opacity:.9;font-size:.92rem}
.finding{background:#fff;border-radius:16px;border:2px solid var(--pink);padding:14px;margin-bottom:11px}
.finding h4{color:var(--pink);font-size:1.02rem;margin-bottom:5px}
.finding p{margin:0;font-weight:700;font-size:.93rem;line-height:1.5}
.mission{background:#fff;border-radius:16px;padding:14px;margin-bottom:11px;border-left:7px solid var(--brand);box-shadow:0 6px 16px rgba(6,60,72,.1)}
.mission.done{border-left-color:var(--good);background:var(--good-bg)}
.mission h4{font-size:1.05rem}
.mission .why{font-weight:700;font-size:.88rem;color:var(--muted);margin:4px 0 8px;line-height:1.45}
.mission ol{margin:6px 0 0;padding-left:20px;font-weight:700;font-size:.9rem;line-height:1.65}
.mission .rank{display:inline-block;background:var(--pink);color:#fff;font-family:'Baloo 2';font-size:.8rem;padding:2px 9px;border-radius:9px;margin-bottom:5px}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.dim{background:#fff;border:2px solid var(--ring);border-radius:14px;padding:11px}
.dim .l{font-weight:800;font-size:.8rem;color:var(--muted);line-height:1.3}
.dim .v{font-family:'Baloo 2';font-size:1.5rem}
.bar{height:8px;background:var(--ring);border-radius:5px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:5px;background:var(--brand)}
.chain{background:var(--chip);border-radius:13px;padding:11px 12px;margin-bottom:9px;font-weight:800;font-size:.86rem;color:var(--chip-ink);line-height:1.6}
.chain b{color:var(--ink);display:block;margin-bottom:3px;font-size:.92rem}
.legendrow{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 12px;font-weight:800;font-size:.78rem;color:var(--muted)}
.legendrow span{display:flex;align-items:center;gap:5px}

/* tables and reports */
.rep{background:#fff;border-radius:16px;padding:14px;font-size:.88rem;font-weight:700;line-height:1.55}
.rep h4{margin:12px 0 4px;color:var(--brand-d)}
.rep table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:6px}
.rep table th,.rep table td{border:1px solid var(--ring);padding:5px 6px;text-align:left;vertical-align:top}
.rep table th{background:var(--chip);color:var(--chip-ink)}
.tag{display:inline-block;padding:2px 7px;border-radius:7px;font-size:.72rem;font-weight:800}
.tag.g{background:var(--good-bg);color:var(--good)}
.tag.r{background:var(--bad-bg);color:var(--bad)}
.status{border-radius:12px;padding:10px 12px;font-weight:800;font-size:.9rem;margin-top:10px}
.status.ok{background:var(--good-bg);color:#17692a}
.status.no{background:var(--bad-bg);color:#8d1f3b}
.status.info{background:var(--chip);color:var(--chip-ink)}
.acts{list-style:none;margin:8px 0 0;padding:0}
.acts li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ring);padding:8px 2px;font-weight:700;font-size:.87rem}
.acts li span:last-child{color:var(--muted);font-size:.78rem;white-space:nowrap}
.pill{display:inline-block;background:var(--chip);color:var(--chip-ink);border-radius:9px;padding:3px 9px;font-weight:800;font-size:.76rem;margin:0 5px 5px 0}

/* modal */
.modal{position:fixed;inset:0;background:rgba(6,60,72,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal .inner{background:#fff;border-radius:20px;padding:18px;max-width:520px;width:100%;max-height:88vh;overflow:auto}

@media (max-width:420px){
  .wordmark .l1{font-size:2.15rem}
  .wordmark .l2{font-size:1.3rem}
  .brandbar .bt .btl{font-size:1.06rem;letter-spacing:.1px}
  .brandbar .bt small{font-size:.55rem;letter-spacing:.9px}
  .brandbar .bbmain{gap:8px;padding-right:4px}
  .mml{padding:4px 7px}
  .navtile{font-size:.85rem;padding:12px 6px}
  .dims{grid-template-columns:1fr}
  .stem{font-size:1.06rem}
  .opt{font-size:.99rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

@media (max-width:330px){
  .mininav{grid-template-columns:1fr}
}

@media print{
  body{background:#fff;padding:0}
  .qnav,.btn,.mininav,.navtile{display:none !important}
  .card{box-shadow:none;border:1px solid #ccc}
}

/* ---------------------------------------- mission ladder: learn try check retry */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 4px}
.rung{background:#f2f8fa;border:1.5px solid #dcecf1;border-radius:12px;padding:8px 8px 9px;
      display:flex;flex-direction:column;gap:3px;min-width:0}
.rung .ri{font-size:15px;line-height:1}
.rung .rn{font-weight:800;font-size:11.5px;letter-spacing:.02em;color:#0c3b45}
.rung .rs{font-size:10.5px;line-height:1.35;color:#5b7a82}
.rung.done{background:#e9f9ec;border-color:#bfe9c9}
.rung.done .ri{color:#1f9d4d}
.rung.now{background:#fff6e2;border-color:#ffd88a;box-shadow:0 0 0 2px #ffeec2}
@media (max-width:560px){
  .ladder{grid-template-columns:repeat(2,1fr)}
  .rung .rs{display:none}
}

/* ------------------------------------------------ the year, skill by skill */
.tl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.tl .st{display:flex;align-items:center;gap:5px;background:#f6fafb;border:1.5px solid #e2eef2;
        border-radius:999px;padding:3px 10px 3px 6px;font-size:11.5px;font-weight:700;color:#0c3b45}
.tl .arw{color:#9db6bd;font-weight:800}
.dotr{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.dotr.g{background:#1f9d4d}.dotr.a{background:#ef9c22}.dotr.r{background:#e0474c}.dotr.x{background:#c3d1d6}
.vtag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
      padding:3px 9px;border-radius:999px;margin-bottom:5px}
.vtag.persist{background:#fbe3ec;color:#a31a48}
.vtag.fragile{background:#fff1cc;color:#8a5a00}
.vtag.newgap{background:#eaf2fb;color:#1c5a9c}
.vtag.secure{background:#e9f9ec;color:#1a7a3e}
.lifer{border:1.5px solid #e2eef2;border-radius:14px;padding:11px 13px;margin:9px 0;background:#fff}
.lifer h5{margin:0 0 3px;font-size:13.5px;color:#0c3b45}
.lifer .ev{font-size:11.5px;color:#5b7a82;line-height:1.5;margin-top:5px}
.lifer .ev b{color:#0c3b45}
.state{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
       padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.state.watch{background:#eaf2fb;color:#1c5a9c}
.state.priority{background:#fbe3ec;color:#a31a48}
.state.good{background:#fff1cc;color:#8a5a00}
.state.great{background:#e9f9ec;color:#1a7a3e}

/* -------------------------------------------------------- method capture */
.methodbox{margin-top:12px;border:1.5px dashed #cfe3e8;border-radius:14px;padding:12px 13px;background:#f8fcfd}
.methodbox h5{margin:0;font-size:13px;color:#0c3b45}
.methodbox p{margin:3px 0 9px;font-size:11.5px;color:#5b7a82;line-height:1.45}
.mopt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid #dcecf1;border-radius:11px;
      padding:9px 12px;margin-bottom:6px;font:inherit;font-size:12.5px;color:#0c3b45;cursor:pointer}
.mopt:hover{border-color:#12aed0}
.mopt.picked{border-color:#12aed0;background:#eefafd}
.mskip{background:none;border:none;color:#5b7a82;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:2px}

/* ------------------------------------------------ carry on anywhere ----- */
.syncpill{display:inline-flex;align-items:center;gap:6px;background:#f2f8fa;border:1.5px solid #dcecf1;
          border-radius:999px;padding:4px 11px 4px 8px;font:inherit;font-size:11.5px;font-weight:700;
          color:#0c3b45;cursor:pointer;white-space:nowrap}
.syncpill i{width:8px;height:8px;border-radius:50%;background:#c3d1d6;flex:none}
.syncpill.ok i{background:#1f9d4d}
.syncpill.wait i{background:#ef9c22;animation:sp 1.1s ease-in-out infinite}
.syncpill.err i{background:#e0474c}
.syncpill.off i{background:#c3d1d6}
@keyframes sp{0%,100%{opacity:1}50%{opacity:.25}}
.codebox{margin-top:14px;border:2px dashed #12aed0;border-radius:16px;padding:16px;background:#f2fbfd;text-align:center}
.codelabel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0b8299}
.codeval{font:800 30px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#0c3b45;
         letter-spacing:.07em;margin:8px 0 6px;word-break:break-all}
.codesay{font-size:12.5px;line-height:1.5;color:#5b7a82;margin-bottom:10px}
.codein{font:700 19px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;
        text-transform:uppercase}
ul.plain{margin:6px 0 0;padding-left:18px}
ul.plain li{font-size:12.5px;line-height:1.6;color:#33606b;margin-bottom:4px}
@media (max-width:560px){ .syncpill{font-size:0;padding:5px;gap:0} .syncpill i{width:9px;height:9px} }

/* ------------------------------------------ carry on where you stopped -- */
.resumecard{background:linear-gradient(135deg,#fff6e2,#ffeed0);border:2px solid #ffd88a;
            border-radius:16px;padding:13px 15px;margin:0 0 14px}
.resumecard .rt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a5a00}
.resumecard .rw{font-weight:800;font-size:15px;color:#0c3b45;margin-top:3px}
.resumecard .rp{font-size:12px;color:#6b5a2a;margin-top:2px}
.resumecard .qfoot{margin-top:9px}

/* ------------------------------------------------------ practice system -- */
.modes{display:grid;gap:11px;margin-top:14px}
.modecard{display:flex;gap:12px;background:#fff;border:2px solid #e2eef2;border-radius:16px;padding:13px 14px}
.modecard.locked{background:#f7fafb;border-style:dashed;border-color:#d7e5ea}
.modecard .mi{font-size:26px;line-height:1;flex:none}
.modecard .mb{min-width:0;flex:1}
.modecard .mt{font-weight:800;font-size:15.5px;color:#0c3b45}
.modecard .ms{font-size:12.5px;line-height:1.5;color:#5b7a82;margin-top:2px}
.modecard .mm{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0b8299;margin:6px 0 8px}
.modecard.locked .mt{color:#5b7a82}

.pset{border:1.5px solid #e2eef2;border-radius:16px;padding:12px 14px;margin:11px 0;background:#fff}
.pset.mastered{border-color:#bfe9c9;background:#f6fdf8}
.pset .ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pset .pt{font-weight:800;font-size:15px;color:#0c3b45}
.pset .pbadge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
              background:#e9f9ec;color:#1a7a3e;border-radius:999px;padding:3px 9px}
.pset .pw{font-size:12.5px;line-height:1.5;color:#33606b;margin-top:4px}
.pset .pw.why{color:#5b7a82;font-style:italic;font-size:11.5px}
.pset .pbar{background:#eef4f6;border-radius:5px;height:7px;overflow:hidden;margin:9px 0 5px}
.pset .pbar i{display:block;height:100%;background:linear-gradient(90deg,#12aed0,#0b8299)}
.pset .pmeta{font-size:11px;font-weight:700;color:#5b7a82;margin-bottom:8px}
.dchips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.dchip{font-size:10.5px;font-weight:700;background:#eef7fa;color:#0b6f85;border:1px solid #d6ebf1;
       border-radius:999px;padding:3px 9px}
.tierstrip{background:#f2f8fa;border-left:4px solid #12aed0;border-radius:0 10px 10px 0;
           padding:8px 12px;margin:10px 0 2px;font-size:12px;line-height:1.5;color:#33606b}
.tierstrip b{color:#0c3b45}
.hidetopic{background:#fff6e2;border:1.5px dashed #ffd88a;border-radius:12px;padding:9px 12px;
           margin:10px 0 2px;font-size:12px;font-weight:700;color:#8a5a00}
.scen{background:#f8fcfd;border:1.5px solid #dcecf1;border-radius:14px;padding:12px 14px;margin:10px 0 2px}
.scen .sl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0b8299;margin-bottom:5px}
.reveal{background:#eefafd;border:1.5px solid #bfe6f2;border-radius:12px;padding:10px 12px;margin-top:10px;
        font-size:12.5px;line-height:1.5;color:#0c3b45}
.reveal .lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
             color:#0b8299;margin-bottom:2px}


/* ------------------------------------------------- report letterhead ------- */
/* Two stacked rows, not a flexible three column row. The publisher and the
   product sit together on top; what kind of report this is, and who it is
   about, sit underneath. It behaves identically at 320 pixels, at 820 and on
   a printed page, which a row of three flexible columns never did. */
.rephead{padding-bottom:11px;margin-bottom:14px;border-bottom:2px solid #d9e7ec}
.repbrand{display:flex;align-items:center;gap:13px}
.repbrand .reptitle{min-width:0;font-weight:800;font-size:15px;line-height:1.15;color:#0c3b45}
.repbrand .reptitle small{display:block;font-weight:700;font-size:10.5px;letter-spacing:1.1px;
                          text-transform:uppercase;color:#5b7a82;margin-top:3px}
.repmeta{margin-top:10px;font-size:11.5px;line-height:1.55;color:#5b7a82;font-weight:700}
.repmeta b{display:block;font-size:13px;color:#0c3b45;margin-bottom:1px}
.repmeta span{display:block}
/* On a white card or a printed page the logo's own white ground is enough:
   the panel and its shadow would only add an edge that is not there. */
.mml.plain{background:none;box-shadow:none;padding:0;border-radius:0}
  .rephead .repmeta{text-align:left;flex:1 1 100%}
}
.rephead .reptitle small{display:block;font-weight:700;font-size:10.5px;letter-spacing:1.1px;
                         text-transform:uppercase;color:#5b7a82;margin-top:3px}

/* The parental approval gate. Deliberately calm rather than alarming: the
   learner has done nothing wrong, there is simply a grown up to ask. */
.gatebox{margin-top:14px;background:#f2f9fb;border:1px solid var(--ring);
         border-left:4px solid var(--brand);border-radius:12px;padding:11px 13px}
.gatebox b{display:block;color:var(--brand-d);font-size:.98rem;margin-bottom:3px}
.gatebox p{margin:0;font-size:.86rem;font-weight:700;line-height:1.5;color:var(--ink)}
@media print{ .gatebox{border-left-width:2px} }

/* A button that reads as a link, for the way into the language statement.
   It sits inside a paragraph of running text, so it must not look like a
   control that takes you out of the flow. */
.linkish{background:none;border:none;padding:0;margin:0;font:inherit;
         color:inherit;text-decoration:underline;cursor:pointer}
.linkish:active{opacity:.7}
/* The coverage bar. The figure used to be an adjective; this is harder to
   skim past than a sentence. */
.langbar{height:9px;border-radius:6px;background:var(--ring);overflow:hidden;margin-top:8px}
.langbar .lbfill{height:100%;background:linear-gradient(90deg,var(--brand),#74D4AF)}
@media print{ .linkish{text-decoration:none} .langbar{border:1px solid #999} }

/* ------------------------------------------------- the language layers --- */
/* Badges a learner or parent sees. Three words, never the editorial
   vocabulary, and each one earned by the register rather than asserted. */
.lbadge{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:800;
        padding:3px 8px;border-radius:20px;white-space:nowrap}
.lbadge.ok{background:var(--good-bg);color:#1c7a2c}
.lbadge.part{background:var(--hint-bg);color:#a06a00}
.lbadge.en{background:var(--chip);color:var(--chip-ink)}
/* One row of the what is translated list. */
.lwrow{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid var(--ring)}
.lwrow:last-child{border-bottom:none}
.lwm{flex:none;width:18px;text-align:center;font-weight:800;color:var(--brand-d)}
.lwl{flex:1 1 auto;min-width:0;font-weight:800;font-size:.9rem}
.lwp{flex:none;font-weight:800;font-size:.84rem;color:var(--muted)}
/* The five workstream cards on the admin dashboard. */
.twgrid{display:grid;gap:10px;margin-top:12px}
.twcard{border:1px solid var(--ring);border-radius:14px;padding:11px 13px;background:#fbfdfe}
.twh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.twh b{font-size:.82rem;letter-spacing:.4px}
.twp{font-size:.68rem;font-weight:800;letter-spacing:1px;padding:2px 7px;border-radius:5px}
.twp.critical{background:var(--bad-bg);color:#b3123c}
.twp.high{background:var(--hint-bg);color:#a06a00}
.twp.medium{background:var(--chip);color:var(--chip-ink)}
.twp.later{background:#eef2f4;color:#6b8288}
.twf{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:.74rem;font-weight:800;color:var(--muted)}
.gatebox.bad{background:var(--bad-bg);border-left-color:var(--bad)}
@media print{ .lbadge{border:1px solid #999} .twcard{break-inside:avoid} }

/* ===================== THE WORDS INSIDE A QUESTION =====================
   Help with the language of a question, opened by the learner and never
   opened for them. It sits under the stem and above the options, so it is
   read as part of the question rather than as a hint about the answer. */
.wordhelp { margin: 10px 0 2px; border: 1px solid var(--line, #e3eef1); border-radius: 12px; padding: 8px 12px; background: #fbfdfd; }
.wordhelp > summary { cursor: pointer; font-weight: 700; font-size: .84rem; color: var(--brand-d, #371350); list-style: none; }
.wordhelp > summary::-webkit-details-marker { display: none; }
.wordhelp > summary::after { content: ' \203A'; display: inline-block; transform: rotate(90deg); margin-left: 4px; }
.wordhelp[open] > summary::after { transform: rotate(-90deg); }
.wordhelp p.small { margin: 6px 0 0; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wchip { font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  background: #eef7f4; color: #14604a; border: 1px solid #bfe4d7;
  border-radius: 999px; padding: 5px 12px; }
.wchip b { font-weight: 500; opacity: .75; }
.wchip.cmd { background: #f3eefa; color: #4b1d70; border-color: #d8c9ea; }
.wchip:hover { filter: brightness(.97); }
.wrow { margin: 8px 0 0; line-height: 1.55; }
.wrow .lbl { display: block; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; opacity: .6; margin-bottom: 2px; }
@media print { .wordhelp { display: none; } }

/* ======================= TWO LANGUAGES, ON PURPOSE =====================
   MTbBE bilingual mode. The English line is the question; the support line
   underneath is the same meaning in the learner's language. The support
   line is visually secondary and fully readable - it is not a footnote and
   it is not a decoration, it is how the learner understands the English
   above it. Maths only options never get a second line, because a number
   is the same in every language. */
.bi-en { display: block; }
.bi-sup {
  display: block; margin-top: 3px;
  font-size: .92em; line-height: 1.5; font-weight: 500;
  color: #2a6b74; padding-left: 9px; border-left: 3px solid #bfe4d7;
}
.stem .bi-sup { font-size: .82em; margin-top: 7px; padding-left: 11px; }
.opt .bi-sup { font-size: .86em; font-weight: 600; border-left-color: #cfe3ea; }
.fb .bi-sup, .misc .bi-sup, .hintbox .bi-sup { border-left-color: rgba(255,255,255,.45); color: inherit; opacity: .92; }
.wrow .bi-sup { border-left-color: #d8c9ea; }
.wordcard .bi-sup { border: 0; padding-left: 0; }
.bimode {
  border: 1px solid #bfe4d7; background: #f2faf7; border-radius: 12px;
  padding: 11px 13px; margin: 10px 0;
}
.bimode b { display: block; margin-bottom: 3px; }
@media print { .bi-sup { color: #444; } }

/* ---------------------------------------------------------- going forward */
/* Forward sits beside Back and is dead more often than it is alive, so it
   has to read as available-or-not at a glance rather than as a button that
   quietly does nothing. It also must not wrap: three nav buttons and a
   language picker is already tight at 430px, and a two-line Forward makes
   the whole bar taller than Back and Home beside it. */
/* The row now carries three buttons and the language picker, which is more
   than 430px holds in a straight line. It wraps instead of overflowing, and
   the picker keeps its own line when it has to rather than being pushed off
   the side of the phone. */
.qnav{flex-wrap:wrap;align-items:center}
.qnav .langmini{margin-left:auto}
.qnav .navback{flex:0 0 auto}
.qnav .navback.fwd{white-space:nowrap}
.qnav .navback.fwd[disabled]{opacity:.32;cursor:default;pointer-events:none}
.qnav.fwdonly{justify-content:flex-end;margin-bottom:6px}