/* SelectiveCoach Maths — the look from the owner's Plaito theme (tools/render-screen.py):
   a sky-to-mint background, white cards with big rounded corners, navy and gold, Quicksand,
   and chunky buttons with a coloured edge underneath. */
@font-face{font-family:"Quicksand"; src:url("fonts/Quicksand-Regular.ttf") format("truetype"); font-weight:400; font-display:swap}
@font-face{font-family:"Quicksand"; src:url("fonts/Quicksand-Medium.ttf") format("truetype"); font-weight:500 600; font-display:swap}
@font-face{font-family:"Quicksand"; src:url("fonts/Quicksand-Bold.ttf") format("truetype"); font-weight:700 900; font-display:swap}

:root{
  --navy:#0a2650; --gold:#e9a836; --gold2:#f59e0b; --ink:#0f172a; --soft:#5b6b82; --line:#e2e8f0; --panel:#ffffff;
  --sky:#dbeafe; --sky2:#eff6ff; --mint:#ecfdf5; --sun:#fef3c7;
  --go:#2563eb; --go-d:#1d4ed8; --ok:#16a34a; --no:#e11d48;
  --r:26px; --shadow:0 12px 36px rgba(15,23,42,.10); --shadow2:0 4px 14px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%}
body{margin:0; font-family:"Quicksand","Nunito","Ubuntu",system-ui,Arial,sans-serif; font-weight:500;
  color:var(--ink); background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 38%,var(--mint) 100%);
  -webkit-text-size-adjust:100%}
a{color:var(--go-d)}
.wrap{max-width:1040px; margin:0 auto; padding:20px 18px 48px}
body.wide .wrap{max-width:1600px}

/* ---- the top bar (child pages) */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.top .brand-home{margin-right:auto; padding:8px 16px; font-size:17px}      /* brand_back: Home beside the ‹ SelectiveCoach back link */
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:-.01em; color:var(--navy); text-decoration:none}
.brand .bt > span{color:var(--gold)}
.brand .mark{width:38px; height:38px; flex:none; border-radius:10px; background:#fff; object-fit:contain; box-shadow:0 2px 8px rgba(10,38,80,.18)}
.brand small{font-size:14px; color:var(--soft); font-weight:700}
.nav{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.who:empty{display:none}
.who{font-size:15px; color:var(--navy); font-weight:800; background:#fff; padding:8px 14px; border-radius:99px; box-shadow:var(--shadow2)}

h1{font-size:32px; margin:0 0 4px; letter-spacing:-.02em; color:var(--navy)}
.lead{color:var(--soft); margin:0 0 20px; font-size:16px}

/* ---- cards (a set, an activity) */
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
a.card, div.card{display:block; position:relative; text-decoration:none; color:inherit; background:var(--panel);
  border-radius:var(--r); padding:18px 18px 16px; box-shadow:var(--shadow); border:2px solid transparent; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease}
a.card::before, div.card::before{content:""; position:absolute; left:0; right:0; top:0; height:7px; background:currentColor; opacity:.9}
a.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.14)}
.card .em{font-size:30px; line-height:1; width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:#f1f5f9; background:color-mix(in srgb, currentColor 14%, white); margin-top:4px}
.card h2{margin:12px 0 3px; font-size:19px; color:var(--ink)}
.card p{margin:0; color:var(--soft); font-size:14px; min-height:38px}
.bar{height:10px; border-radius:99px; background:#eef2f8; margin-top:14px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:currentColor}
.card .meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--soft); margin-top:7px; font-weight:700}
.pill{display:inline-block; font-size:12px; font-weight:800; padding:4px 11px; border-radius:99px; background:var(--sun); color:#8a5a00; margin-left:6px; vertical-align:middle}
.card .pill{margin:0 0 0 8px}
.card.locked{opacity:.6; cursor:default; box-shadow:var(--shadow2)}
.card.locked::before{background:#cbd5e1}

/* ---- panels, sections, folders */
.panel{background:var(--panel); border-radius:var(--r); box-shadow:var(--shadow); padding:22px}
.section{margin:26px 0 12px; display:flex; align-items:center; gap:10px}
.section h2{margin:0; font-size:21px; color:var(--navy)}
.section .dot{width:14px; height:14px; border-radius:50%; background:var(--c, var(--gold)); box-shadow:0 0 0 5px color-mix(in srgb, var(--c, var(--gold)) 22%, transparent)}
.section .count{font-size:13px; font-weight:800; color:var(--soft); background:#fff; padding:3px 10px; border-radius:99px}
h2.grp{grid-column:1 / -1; margin:18px 0 2px; font-size:18px; color:var(--navy)}
/* All the work as a list (switch all_work_v2, 4 Oct 2026): a row of years, a row of terms, then one line a week */
.wl-pick{display:grid; gap:10px; margin:6px 0 14px}
.wl-tabs{display:flex; flex-wrap:wrap; gap:8px}
.wl-tab{display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border-radius:999px; border:2px solid #cbd5e1; background:#fff;
  color:var(--ink); font-weight:800; text-decoration:none}
.wl-tab.on{background:var(--navy); border-color:var(--navy); color:#fff}
.wl-terms .wl-tab{border-width:1px; font-weight:700; color:var(--navy)}
.wl-terms .wl-tab.on{background:#e0ecff; border:2px solid var(--navy); color:var(--navy)}
.wl-body{display:block}
.wl-list{background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow2); overflow:hidden}
.wl-row{display:grid; grid-template-columns:minmax(170px, 250px) 1fr; gap:8px 16px; align-items:center; padding:10px 16px; border-top:1px solid #eef2f7}
.wl-row:first-child{border-top:0}
.wl-name b{display:block; color:var(--navy)} .wl-name span{display:block; color:var(--soft); font-size:15px; line-height:1.3}
.wl-acts{display:flex; flex-wrap:wrap; gap:8px}
.wl-btn{display:inline-flex; align-items:center; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid #cbd5e1; background:#f8fafc;
  color:#1e40af; font-weight:700; text-decoration:none}
.wl-btn:hover, .wl-btn:focus-visible{border-color:#1e40af; background:#eef4ff}
.wl-book{color:#0f766e}
@media (max-width:640px){ .wl-row{grid-template-columns:1fr; padding:12px} .wl-tab{padding:0 14px} }
/* work_tabs_all (6 Oct 2026): flat joined buttons, like the Lessons page's print bar; no work yet = grey */
.wl-flat .wl-tabs{display:inline-flex; flex-wrap:wrap; gap:0; justify-self:start; max-width:100%; border:1px solid #cbd5e1; border-radius:10px; overflow:hidden; background:#fff}
.wl-flat .wl-tab, .wl-flat .wl-terms .wl-tab{min-height:48px; padding:0 16px; border:0; border-radius:0; background:#fff; color:var(--navy); font-weight:700;
  box-shadow:-1px 0 0 #e2e8f0, 0 -1px 0 #e2e8f0}
.wl-flat .wl-tab.soon{color:#94a3b8; font-weight:600}
.wl-flat .wl-tab.on, .wl-flat .wl-terms .wl-tab.on{background:var(--navy); color:#fff; border:0}
.wl-flat .wl-tab.soon.on{background:#64748b; color:#fff}
@media (hover:hover){ .wl-flat .wl-tab:not(.on):hover{background:#eff6ff} }
.folders{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:6px 0 8px}
button.folder{font:inherit; text-align:left; cursor:pointer; border:3px solid transparent; background:#fff; border-radius:24px; padding:16px 18px;
  box-shadow:var(--shadow); display:flex; gap:14px; align-items:center; color:var(--ink); transition:transform .12s ease}
button.folder:hover{transform:translateY(-2px)}
button.folder .ic{flex:none; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:28px;
  background:color-mix(in srgb, var(--c) 18%, white); box-shadow:inset 0 -4px 0 color-mix(in srgb, var(--c) 30%, white)}
button.folder b{display:block; font-size:17px; color:var(--navy)}
button.folder small{display:block; font-size:13px; color:var(--soft); font-weight:700; margin-top:2px}
button.folder.on{border-color:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), var(--shadow)}
.crumb{font-size:14px; font-weight:700; color:var(--soft); margin:18px 0 4px}
.crumb b{color:var(--navy)}
.weekhead{grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; margin:14px 0 0}
.weekhead b{font-size:16px; color:var(--navy)} .weekhead span{font-size:13px; color:var(--soft); font-weight:700}

/* ---- rounds and questions (the child's screens) */
.rounds{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); margin-top:6px}
a.round{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  border:2px solid var(--line); border-radius:16px; padding:12px 14px; font-weight:700; background:#fff}
a.round .n{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#eef4ff; color:var(--go-d); font-size:14px}
a.round.done{border-color:#bbf7d0; background:#f2fdf6}
a.round.test{border-color:#fde68a; background:#fffbeb}
a.round.rl .rk{display:flex; flex-direction:column; gap:2px; min-width:0}
a.round.rl .rk small{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soft)}
a.round.rl .rk b{font-weight:700; line-height:1.25}
a.round.rl .rdone{margin-left:auto; background:#dcfce7; color:#166534}
a.round.rl .rgo{margin-left:auto; flex:none; font-size:26px; line-height:1; color:#94a3b8}
a.round.rl .rdone + .rgo{margin-left:0}
.stars{display:flex; gap:7px; align-items:center}
.star{width:28px; height:28px; border-radius:50%; background:#e2e8f0; color:#cbd5e1;
  display:grid; place-items:center; font-size:15px}
.star.on{background:#fde68a; color:var(--gold2); box-shadow:0 3px 0 var(--gold2)}
.q{font-size:clamp(40px,10vw,64px); font-weight:800; display:flex; gap:16px; align-items:center;
  justify-content:center; margin:14px 0 6px; letter-spacing:-.02em}
.q .qw{font-size:.42em; font-weight:800; line-height:1.15; max-width:7.5em; text-align:center}     /* a word in a Stage 3 fact */
.q.qx{flex-wrap:wrap; justify-content:center; row-gap:6px}
.q .box{min-width:96px; height:78px; border:4px solid var(--go); border-radius:18px;
  background:#eff6ff; display:grid; place-items:center; font-size:44px}
.frames{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:6px 0 14px}
.frame{display:grid; grid-template-columns:repeat(5,44px); grid-template-rows:repeat(2,44px);
  border:3px solid var(--ink); border-radius:10px; overflow:hidden; background:#fff}
.cell{border:1px solid #dbe3ee; display:grid; place-items:center}
.dot{width:30px; height:30px; border-radius:50%; box-shadow:inset -5px -5px 0 rgba(0,0,0,.12)}
.opts{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px}
button.opt{font-weight:800; font-size:30px; font-family:inherit; padding:16px 0; border-radius:18px; border:3px solid #bfdbfe;
  background:#fff; color:var(--go-d); box-shadow:0 6px 0 #bfdbfe; cursor:pointer}
button.opt:active{transform:translateY(3px); box-shadow:0 2px 0 #bfdbfe}
button.opt.right{border-color:#86efac; box-shadow:0 6px 0 #86efac; background:#f0fdf4; color:#15803d}
button.opt.wrong{border-color:#fda4af; box-shadow:0 6px 0 #fda4af; background:#fff1f2; color:#be123c}
button.opt[disabled]{opacity:.55}
.row{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:14px}

/* ---- how the child answers (2026-09-28): a number pad on the screen, or a big box to write in with an Apple Pencil */
.qa{display:grid; gap:6px; align-items:center}
@media (min-width:900px){ .qa{grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:24px} }
/* facts_pad_side: the writing pad is a column on the right (workbook.js place()); the question takes the whole card, the pad says what to do */
body.wb-pad-side-on .qa{grid-template-columns:minmax(0,1fr)}
body.wb-pad-side-on #inkhint{display:none}
body.wb-pad-side-on .wrap, body.kid.wb-pad-side-on .wrap{max-width:760px}          /* the question card no wider than it needs: the pad sits close beside the question */
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:360px; margin:4px auto 0}
button.key{font-weight:800; font-size:32px; font-family:inherit; min-height:64px; padding:0; border-radius:18px; border:3px solid #bfdbfe;
  background:#fff; color:var(--go-d); box-shadow:0 5px 0 #bfdbfe; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none}
button.key:active{transform:translateY(3px); box-shadow:0 2px 0 #bfdbfe}
button.key.del{font-size:26px; color:var(--soft)}
button.key.ok{background:var(--go); border-color:var(--go); color:#fff; box-shadow:0 5px 0 var(--go-d); font-size:26px}
button.key[disabled]{opacity:.45; cursor:default}
.pencil{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:6px}
input.pen{width:100%; max-width:340px; height:150px; font-family:inherit; font-size:84px; font-weight:800; text-align:center; color:var(--navy);
  border:4px dashed #93c5fd; border-radius:24px; background:#fff; padding:0 10px}
input.pen:focus{outline:none; border-style:solid; border-color:var(--go)}
input.pen::placeholder{font-size:44px; opacity:.55}
input.pen.right{border:4px solid #86efac; background:#f0fdf4; color:#15803d}
input.pen.wrong{border:4px solid #fda4af; background:#fff1f2; color:#be123c}
.pencil button.key.ok{min-width:110px; min-height:84px}
.q .box.right{border-color:#86efac; background:#f0fdf4; color:#15803d}

/* ---- buttons */
.btn{font-weight:800; font-size:16px; font-family:inherit; padding:11px 18px; border-radius:16px; border:none; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; line-height:1.2}
.btn:active{transform:translateY(3px)}
.btn.go{background:var(--go); color:#fff; box-shadow:0 5px 0 var(--go-d)}
.btn.gold{background:var(--gold); color:#3b2400; box-shadow:0 5px 0 #b7791f}
.btn.ghost{background:#fff; color:var(--go-d); border:3px solid #bfdbfe; box-shadow:0 5px 0 #bfdbfe}
.btn.navy{background:var(--navy); color:#fff; box-shadow:0 5px 0 #061a38}

.say{min-height:30px; font-weight:800; font-size:19px; text-align:center; margin-top:10px}
.say.ok{color:var(--ok)} .say.no{color:var(--no)}
.done{text-align:center; padding:18px 6px}
.done .big{font-size:58px}
.done h2{font-size:26px; margin:6px 0}
.tick{font-size:15px; color:var(--soft)}

/* ---- today */
.today{margin:0 0 18px; position:relative; overflow:hidden}
.today::before{content:""; position:absolute; left:0; right:0; top:0; height:7px; background:var(--gold)}
.today h2{margin:4px 0 10px; font-size:21px; color:var(--navy)}
a.task, div.task{display:flex; gap:12px; align-items:center; padding:12px 14px; border:2px solid var(--line); border-radius:16px;
  margin-bottom:8px; text-decoration:none; color:inherit; font-weight:700; background:#fff}
a.task:hover{border-color:#bfdbfe}
.task.done{background:#f2fdf6; border-color:#bbf7d0}
.task .tk{font-size:20px}

/* ---- the tutor's preview banner */
.preview{background:var(--navy); color:#fff; padding:11px 16px; font-weight:700; text-align:center; font-size:15px}
.preview a{color:#fde68a}

/* ---- More practice (2026-09-28): the list of stored sets, on the parent page and the teacher's child page */
.prow{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow .pr-main{min-width:0; flex:1 1 260px}
.prow .pr-main b{display:block; font-size:16px; color:var(--navy)}
.prow .pr-main small{display:block; font-size:13.5px; color:var(--soft); margin-top:2px; overflow-wrap:anywhere}
.prow .pr-state{font-weight:700; color:#92400e}
.prow.pdone .pr-state{color:#166534}
.prow .pr-acts{display:flex; gap:8px; flex-wrap:wrap}
.more{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 18px; position:relative; overflow:hidden}
.more::before{content:""; position:absolute; left:0; right:0; top:0; height:7px; background:#f59e0b}
.more .em{font-size:30px; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:#fef3c7; flex:none}
.more .tx{flex:1 1 220px; min-width:0}
.more h2{margin:0 0 2px; font-size:21px; color:var(--navy)}
.more p{margin:0; color:var(--soft); font-size:15px}
#more-go-wrap{display:flex; gap:12px; flex-wrap:wrap}
.more .msg{flex:1 1 100%; font-weight:800; font-size:17px; color:#92400e; margin:0}
.more .msg:empty{display:none}

details.later summary{cursor:pointer; font-weight:800; color:var(--soft); margin:22px 0 10px; font-size:16px}

@media (max-width:560px){
  .opts{grid-template-columns:repeat(3,1fr)}
  button.key{min-height:58px; font-size:28px}
  input.pen{height:120px; font-size:72px}
  .frame{grid-template-columns:repeat(5,34px); grid-template-rows:repeat(2,34px)}
  .dot{width:23px;height:23px}
  h1{font-size:27px}
  .brand{font-size:19px}
}

/* ---- the teacher's side bar (dashboard, resources), after JobMatcha's: navy, gold, the page you are on in a
   white pill. Below 900 px it is a drawer, opened by the menu button in a slim top bar. */
  .sbar{position:fixed; left:0; top:0; bottom:0; width:260px; z-index:30; overflow-y:auto; box-sizing:border-box; padding:16px 12px 14px;
       background:linear-gradient(185deg,#0a2650 0%,#1e3a8a 100%); color:#dbe7ff; display:flex; flex-direction:column; gap:2px;
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
  .sbar[hidden]{display:none !important}
  .sb-logo{display:flex; align-items:center; gap:10px; padding:4px 8px 14px; text-decoration:none; color:#fff; font-family:"Quicksand",system-ui,sans-serif;
       font-weight:800; font-size:17px; white-space:nowrap}
  .sb-logo .lg{width:34px; height:34px; flex:none; border-radius:9px; background:#fff}
  .sb-logo em{font-style:normal; color:#fbbf24}
  .sb-lbl{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9fb4e0; padding:14px 10px 6px; list-style:none; cursor:default}
  .sb-done summary{cursor:pointer} .sb-done summary::-webkit-details-marker{display:none}
  .sbar .sl, .sbar .step{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; color:#dbe7ff; text-decoration:none; font:inherit;
       font-size:15px; font-weight:600; background:none; border:none; cursor:pointer; text-align:left; width:100%; box-sizing:border-box}
  .sbar .sl svg{width:20px; height:20px; flex:none}
  .sbar .sl:hover, .sbar .step:hover{background:rgba(255,255,255,.10); color:#fff}
  .sbar .sl.on{background:#fff; color:#0a2650; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.18)}
  .sbar .sl.small{font-size:13.5px; padding:7px 10px}
  .sbar .step .n{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:800; background:#fbbf24; color:#0a2650}
  .sbar .step.done{color:#9fb4e0} .sbar .step.done .n{background:#22c55e; color:#fff}
  .sb-foot{margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.14)}
  .sb-user{display:flex; gap:10px; align-items:center; padding:6px 8px 10px; min-width:0}
  .sb-user .av{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; background:#fbbf24; color:#0a2650; font-weight:800}
  .sb-user b{display:block; color:#fff; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .sb-user small{display:block; color:#9fb4e0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .sb-user > span:last-child{min-width:0}
  body.signed .wrap{margin-left:260px}
  .topbar{display:none}
  .scrim[hidden]{display:none !important}
  @media (max-width:899px){
    body.signed .wrap{margin-left:0}
    .topbar{display:flex; position:sticky; top:0; z-index:20; align-items:center; gap:10px; padding:8px 12px; background:#fff; border-bottom:1px solid #e3eaf3}
    .topbar[hidden]{display:none !important}
    .topbar .logo{display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:800; font-size:18px; color:var(--navy); font-family:"Quicksand",system-ui,sans-serif}
    .topbar .logo img{width:30px; height:30px; border-radius:7px; flex:none}
    .topbar .logo em{font-style:normal; color:#2563eb}
    #menubtn{width:42px; height:42px; border-radius:10px; border:1px solid #e3eaf3; background:#fff; display:grid; place-items:center; cursor:pointer; flex:none}
    #menubtn svg{width:22px; height:22px}
    .sbar{transform:translateX(-100%); transition:transform .2s ease; box-shadow:none; visibility:hidden}
    .sbar.open{transform:none; box-shadow:0 0 40px rgba(0,0,0,.35); visibility:visible}
    .scrim{position:fixed; inset:0; background:rgba(10,38,80,.35); z-index:25}
  }
  @media print{ .sbar, .topbar, .scrim{display:none !important} body.signed .wrap{margin-left:0} }

/* ---- Same tab + Back (29 Sep 2026, switch back_buttons; back.js). The dashboard: "‹ Back" at the top left, over the
   page's header (desk and iPad across), or next to the menu button in the top bar (a phone, an iPad upright). */
.bk-row{margin:0 0 10px}
.bk-btn, .bk-top{display:inline-block; min-height:44px; padding:8px 16px 8px 12px; border-radius:12px; border:1px solid #cfdcec; background:#fff;
  color:#1d4ed8; font:inherit; font-weight:800; font-size:16px; line-height:26px; cursor:pointer; white-space:nowrap; box-shadow:0 1px 2px rgba(15,23,42,.06)}
.bk-btn:hover, .bk-top:hover{background:#f5f9ff; border-color:#93c5fd}
.bk-ch{font-size:26px; line-height:0; vertical-align:-2px}
.topbar .bk-top{display:none}
@media (max-width:899px){
  .bk-row{display:none}
  .topbar .bk-top{display:inline-block; flex:none}
  .topbar .logo{min-width:0} .topbar .logo span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .topbar:has(.bk-top:not([hidden])) .logo{font-size:16px; gap:6px}          /* room for "‹ Back" on a phone */
}
/* the other pages: "‹ Back to Term 4 · Week 1 lesson", large, at the top left (in the teacher's preview bar, or a bar of its own) */
.bk-bar{background:var(--navy); padding:8px 16px}
a.bk-to{display:inline-flex; align-items:center; min-height:48px; max-width:100%; box-sizing:border-box; padding:8px 18px; border-radius:14px;
  background:#fff; color:var(--navy); font-weight:800; font-size:18px; line-height:1.2; text-decoration:none; box-shadow:0 4px 0 #061a38;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.bk-to:active{transform:translateY(2px); box-shadow:0 2px 0 #061a38}
.preview.bk-in{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; text-align:left; padding:8px 16px}
.preview.bk-in .bk-txt{flex:1 1 300px; min-width:0}
@media print{ .bk-row, .bk-bar, a.bk-to{display:none !important} }

/* ---- Show me, over the question (the child's round), with "‹ Back to the question" */
body.sm-open{overflow:hidden}
.sm-over{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; overflow:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 38%,var(--mint) 100%)}
.sm-bar{flex:none; padding:10px 16px 12px; background:#fff; border-bottom:1px solid var(--line)}
.sm-back{min-height:52px; font-size:19px}
.sm-frame{flex:1 1 auto; width:100%; min-height:420px; border:0; background:transparent}

/* A Watch or Remember step: the banner, and nothing in the picture looks pressable (30 Sep 2026); with live examples on
   (body.lv-on, switch live_examples) the picture is a board to move by hand */
.watchnote{display:flex; gap:10px; align-items:center; background:#fef3c7; border:2px solid #fbbf24; color:#78350f; border-radius:16px;
  padding:10px 14px; margin:2px 0 12px; font-size:17px; font-weight:600; line-height:1.35}
.watchnote span{font-size:22px}
body:not(.lv-on) #panel:has(.watchnote) > :not(.row):not(.watchnote){pointer-events:none; cursor:default}
.row .btn.sm-top{margin-left:0; margin-right:auto; padding:6px 14px; min-height:40px}     /* Show me above the pencil's pad, on the left beside the round's name (owner, 8 Oct 2026) */

/* test_card (9 Oct 2026): the card before the set test, and "Are you still there?" in a practice round */
.tstart{text-align:center; padding:18px 8px} .tstart .big{font-size:64px} .tstart .lead{font-size:22px; line-height:1.5}
.tpause{position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.45); display:grid; place-items:center; padding:16px}
.tpause > div{background:#fff; border-radius:22px; padding:26px 30px; text-align:center; max-width:420px; box-shadow:0 18px 40px rgba(15,23,42,.25)}
.tpause h2{margin:0 0 6px} .tpause p{font-size:20px; margin:0 0 16px}
/* fact_page (9 Oct 2026): a whole round on one page, as on paper */
.fpage{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 22px; margin:6px 0 14px}
@media (max-width:700px){ .fpage{grid-template-columns:1fr} }
.fp-i{display:flex; align-items:center; gap:10px; border-bottom:1px solid #e2e8f0; padding:4px 0}
.fpage .fp-i:has(.fp-flagrow){flex-wrap:wrap}
/* two-box remainders (10 Oct 2026): one box drawn as two, the r printed between; the writing left of the middle is the whole number */
.fpage.finl .q.pq .box.pinl.ptwo{width:262px !important; min-width:262px !important; border:0 !important; background:transparent !important; box-shadow:none !important}
.ptwo .tw{position:absolute; top:0; bottom:0; width:42%; border:3px solid #2563eb; border-radius:12px; background:#fff; pointer-events:none}
.ptwo .tw1{left:0} .ptwo .tw2{right:0}
.ptwo .twr{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:30px; font-weight:800; color:#475569; pointer-events:none}
.ptwo.cur .tw{border-color:#f59e0b; box-shadow:0 0 0 3px #fde68a}
.ptwo.right .tw{border-color:#86efac; background:#ecfdf3} .ptwo.wrong .tw{border-color:#fca5a5; background:#fef2f2}
.fpage .pbox.ptwo:not(.pinl){min-width:150px}
.fp-flagrow{flex-basis:100%; padding:0 0 4px 34px}
.fp-flag{font:800 13px/1.2 "Quicksand",Ubuntu,Arial,sans-serif; color:#b45309; background:#fef3c7; border:2px solid #fcd34d; border-radius:10px;
  padding:6px 10px; margin-left:8px; cursor:pointer; min-height:36px}
.fp-flag.done{color:#15803d; background:#dcfce7; border-color:#86efac; cursor:default; display:inline-flex; align-items:center}
.rounds a.rsee{margin:-6px 0 4px; font-size:14px; font-weight:800; color:var(--go-d); text-decoration:none; padding:4px 2px}
.rounds .rcell{display:flex; flex-direction:column; min-width:0}                 /* see_in_cell: a page and its See my answers */
.rounds .rcell > a.round{flex:1 1 auto} .rounds .rcell > a.rsee{margin:4px 0 0 4px; align-self:flex-start}
.fpage.see .pbox{min-width:56px; display:inline-grid; place-items:center; font-size:26px; font-weight:800}
.fp-done{background:#ecfdf3; border:3px solid #22c55e; border-radius:18px; padding:12px 16px; margin:6px 0 12px}
.fp-done p{margin:0 0 10px; font-size:20px} .fp-done .row{gap:10px; flex-wrap:wrap; margin:0; justify-content:flex-start}
.fp-n{flex:none; width:24px; font-size:14px; font-weight:700; color:var(--soft); text-align:right}
/* fact_num_badge (owner, 10 Oct 2026: "3 half of 20" read as one sum): the question's number in a small light grey circle, apart from the fact */
.fpage.fnum .fp-n{width:26px; height:26px; border-radius:50%; background:#eef2f7; color:#94a3b8; font-size:12px; line-height:26px; text-align:center; margin-right:12px; align-self:center}
.fpage .q.pq{font-size:30px !important; margin:0 !important; gap:8px; justify-content:flex-start; flex-wrap:wrap; background:none !important;
  border:0 !important; padding:0 !important; box-shadow:none !important; min-height:0 !important; width:auto !important}   /* over the child design's big question */
.fpage .q.pq .box{min-width:62px !important; width:auto !important; height:50px !important; border:3px solid var(--go) !important; border-radius:12px !important;
  font:inherit; font-size:28px !important; color:inherit; background:#fff !important; cursor:pointer; padding:0 8px}
.fpage .q.pq .box.cur{border-color:#f59e0b !important; box-shadow:0 0 0 4px #fde68a}
.fpage .q.pq .box.right{border-color:#86efac !important; background:#f0fdf4 !important; color:#15803d}
.fpage .q.pq .box.wrong{border-color:#fca5a5 !important; background:#fef2f2 !important; color:#b91c1c}
.fpage .fp-fix{font-size:20px; font-weight:800; color:#15803d}
.fp-how{margin:0 0 4px}
.fp-pad{max-width:300px}
/* ink_inline (9 Oct 2026): write in the box itself; ten facts a screen */
.fpage.finl{gap:14px 26px}
.fpage.finl .fp-i{padding:10px 0}
.fpage.finl .q.pq{font-size:36px !important}
.fpage.finl .q.pq .box.pinl{width:160px !important; min-width:160px !important; height:84px !important; padding:0; position:relative; overflow:visible; display:inline-block}
.fpage.finl .pread{position:absolute !important; top:calc(100% + 2px) !important; left:50% !important; transform:translateX(-50%); font-size:14px !important;
  font-weight:800; line-height:1.2 !important; color:#475569 !important; white-space:nowrap; z-index:2; background:none !important; border:0 !important;
  padding:0 4px !important; margin:0 !important; min-width:0 !important; min-height:0 !important; width:auto !important; height:auto !important; box-shadow:none !important}
.fpage.finl .pread.q{color:#b45309 !important; background:#fef3c7 !important; border-radius:6px !important}   /* small: the box itself shows the writing */
.fpage.finl .pinl.right .pread, .fpage.finl .pinl.wrong .pread{display:none}
#say.fp-miss{margin:10px auto 0; max-width:640px; padding:12px 16px; border-radius:14px; background:#fff7ed; border:3px solid #f59e0b; color:#9a3412; font-size:20px; text-align:center}
.fp-one{margin:2px 0 8px; font-size:22px; font-weight:800; color:var(--navy); line-height:1.3}   /* page_words: the one-sitting line */
.fp-one span{color:#0369a1}
.fpage.finl .pread .pguess{font:800 15px/1 "Quicksand",Ubuntu,Arial,sans-serif; color:#fff; background:#0284c7; border:0; border-radius:10px; padding:7px 10px;
  cursor:pointer; pointer-events:auto; box-shadow:0 2px 0 #075985}       /* guess_button: "Is it 7?" */