@page { size: auto; margin: 0 }

* { box-sizing: border-box; }

body { margin: 0; background: #fff; }

.page{ width:196mm; height:259mm; margin:10mm auto; position:relative; display:flex; flex-direction:column;
  font:13.5pt/1.5 "Atkinson Hyperlegible","Noto Sans Symbols 2",sans-serif; color:#222; page-break-after:always; break-after:page; overflow:hidden; box-sizing:border-box; padding:0; background:#fff }

@media print{ body{margin:0;background:#fff} .page{ margin:0 auto; } .noprint{display:none} }
/* Screen-only tint outside the page so the page edges are visible; print
   stays pure white edge to edge (no grey wash on the printed sheet). */
@media screen{ body{background:#f6f6f4} .page{ box-shadow:0 2px 12px rgba(0,0,0,.15); background:#fff } }
/* I4: phone/tablet fit-to-width (screen only). The worksheet keeps its exact
   196 x 259 mm print layout and is scaled down as a whole with CSS zoom, so
   it fits the viewport width with no horizontal scroll (zoom, unlike a
   transform, also shrinks the layout box, so page spacing stays right).
   Each step's zoom fits the narrowest width in its 30 px band, leaving
   room for a 15 px desktop scrollbar. The first step starts below 780 px so
   the headless overflow/spatial checks (800 px default window) and every
   print/PDF render are unaffected; catalogue thumbnails (iframes, .in-frame)
   keep their own scaling. Pinch-zoom stays available on phones. */
@media screen and (max-width:779.98px){ html:not(.in-frame) .page{zoom:0.99} }
@media screen and (max-width:749.98px){ html:not(.in-frame) .page{zoom:0.95} }
@media screen and (max-width:719.98px){ html:not(.in-frame) .page{zoom:0.9} }
@media screen and (max-width:689.98px){ html:not(.in-frame) .page{zoom:0.86} }
@media screen and (max-width:659.98px){ html:not(.in-frame) .page{zoom:0.82} }
@media screen and (max-width:629.98px){ html:not(.in-frame) .page{zoom:0.78} }
@media screen and (max-width:599.98px){ html:not(.in-frame) .page{zoom:0.74} }
@media screen and (max-width:569.98px){ html:not(.in-frame) .page{zoom:0.7} }
@media screen and (max-width:539.98px){ html:not(.in-frame) .page{zoom:0.66} }
@media screen and (max-width:509.98px){ html:not(.in-frame) .page{zoom:0.62} }
@media screen and (max-width:479.98px){ html:not(.in-frame) .page{zoom:0.58} }
@media screen and (max-width:449.98px){ html:not(.in-frame) .page{zoom:0.54} }
@media screen and (max-width:419.98px){ html:not(.in-frame) .page{zoom:0.5} }
@media screen and (max-width:389.98px){ html:not(.in-frame) .page{zoom:0.46} }
@media screen and (max-width:359.98px){ html:not(.in-frame) .page{zoom:0.42} }
@media screen and (max-width:329.98px){ html:not(.in-frame) .page{zoom:0.38} }
@media screen and (max-width:299.98px){ html:not(.in-frame) .page{zoom:0.34} }
@media screen and (max-width:779.98px){ .page-toolbar{flex-wrap:wrap;row-gap:6px} }

.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:4mm;border-bottom:1.2pt solid #222;padding:6mm 8mm 3mm 8mm}
.hd h1{font:700 22pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif;margin:2mm 0 0 0}
.hd-left{display:flex;flex-direction:column;flex:1;min-width:0}
/* Badge on the left, time, materials and stars on the right of the same row,
   so the title gets the full width beside the QR. */
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:4mm}
.hd-top .badge{flex:none;white-space:nowrap}
.hd-info{display:flex;align-items:center;gap:2.5mm;margin-left:auto;line-height:1;min-width:0}
/* Companion-app QR: 17 mm square (its 4-module white quiet zone included),
   pure black on white, with a tiny caption. Replaces Pip in the header. */
.hd-qr{display:flex;flex-direction:column;align-items:center;line-height:0;flex:none}
.hd-qr .qr{display:block;width:17mm;height:17mm;background:#fff}
.hd-qr-cap{font:600 6pt/1 "Lexend",sans-serif;color:#000;white-space:nowrap;margin-top:0.3mm}
.hd-meta{font-size:10pt;color:#444;text-align:right;text-wrap:balance} /* M15: a long list wraps to two even lines, never an orphaned last word */
.hd-stars{font-size:13pt;letter-spacing:1px;color:#222}
.badge{display:inline-block;border:1pt solid #555;border-radius:999px;padding:0.5mm 3mm;font:600 9pt/1.4 "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.03em;align-self:flex-start}
.badge-thinking{border-color:#3b6ea5;color:#3b6ea5}
.badge-self{border-color:#7a4fa0;color:#7a4fa0}
.badge-people{border-color:#b5651d;color:#b5651d}
.badge-doing{border-color:#2e8b57;color:#2e8b57}
.badge-models{border-color:#1f6f6a;color:#1f6f6a}

.bd{flex:1;padding:4mm 8mm;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.grown{border:1pt solid #999;background:#f2f2f2;border-radius:3mm;padding:3mm 4mm;font-size:11.5pt;margin:0 8mm}
.grown strong{font-family:"Lexend","Noto Sans Symbols 2",sans-serif}
.gu-ask{margin:1mm 0;padding-left:5mm}
.ft{display:flex;justify-content:space-between;align-items:center;font-size:10pt;padding:1.5mm 8mm 0 8mm;gap:4mm}
.ft-feel .chk{letter-spacing:0}
.ft-license{font-size:7.5pt;line-height:1.3;color:#555;text-align:center;padding:0.5mm 8mm 2mm 8mm}
.wl{border-bottom:0.8pt solid #888}
em,i{font-style:normal}

/* Body content helpers shared by templates */
.intro{margin:0 0 2mm 0}
.steps{margin:0 0 2mm 0;padding-left:5mm}
.steps li{margin-bottom:1mm}
.example{border:0.8pt dashed #777;border-radius:2mm;padding:2mm 3mm;margin:1mm 0 2mm 0;background:#fafafa;font-size:11.5pt}
.task-area{flex:1;min-height:0;display:flex;flex-direction:column}

/* boxes */
.box-grid{display:grid;gap:3mm;flex:1}
.bx{border:0.9pt solid #333;border-radius:2mm;position:relative;padding:1mm 2mm;display:flex;align-items:flex-start}
.bx .bx-no{font:600 9pt "Lexend","Noto Sans Symbols 2",sans-serif;color:#666;margin-right:1mm}

/* chain */
.chain{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:2mm;flex:1}
.chain.vert{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0.8mm}
.chain.vert .chain-node{min-height:16mm}
.chain.vert .chain-arrow-wrap{align-self:center;line-height:0}
.chain.vert .chain-arrow-wrap svg{height:2.6mm;width:4mm}
.chain.horiz{flex-direction:row;flex-wrap:wrap}
.chain:not(.vert) .chain-arrow-wrap{align-self:center}
.chain-top{margin:0 0 2mm 0}
.chain-node{border:0.9pt solid #333;border-radius:2mm;padding:1mm 3mm 1.5mm 3mm;min-height:18mm;flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left}
.chain-node.given{justify-content:center;align-items:center;text-align:center;font-weight:700}
.chain-label{font:600 9pt/1.3 "Lexend","Noto Sans Symbols 2",sans-serif;color:#555}
.chain-write{flex:1;min-height:10mm;border-bottom:0.8pt solid #888}
.chain-arrow-wrap{flex-shrink:0}

/* table */
.tbl-wrap{display:flex}
table.tbl{width:100%;height:100%;flex:1;border-collapse:collapse}
table.tbl th, table.tbl td{border:0.8pt solid #333;padding:2mm;text-align:left;vertical-align:top}
table.tbl th{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:600;background:#f2f2f2}

/* venn */
.venn-wrap{display:flex;justify-content:center;padding:1mm 0}
.venn-wrap svg{width:112mm;height:72mm}

/* journal */
.journal-prompt{margin-bottom:3mm}
.journal-q{font-weight:700;margin-bottom:1mm}
.thermo{display:block}
.say-bubble{position:relative;border:0.9pt solid #333;border-radius:6mm;padding:0 5mm 3mm 5mm;margin:1mm 0 4mm 0}
.say-bubble::after{content:"";position:absolute;left:10mm;bottom:-3.2mm;width:5mm;height:5mm;background:#fff;border-right:0.9pt solid #333;border-bottom:0.9pt solid #333;transform:rotate(45deg) skew(10deg,10deg)}
.list-tables{display:flex;flex-direction:row;gap:3mm;align-items:flex-start}
.list-table{flex:1;border-collapse:collapse;table-layout:fixed}
.list-table th,.list-table td{border:0.8pt solid #333;padding:0 1.5mm;font-size:11pt}
.list-table th{font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif;background:#f2f2f2;height:8mm}
.list-table td{height:10.5mm}
.list-table td:first-child,.list-table th:first-child{width:11mm;text-align:center}

/* tracker */
.day-grid{display:grid;gap:2mm;flex:1}
.day{border:0.9pt solid #333;border-radius:2mm;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:14mm}
.ladder{display:flex;flex-direction:column-reverse;gap:3mm;flex:1}
.ladder .rung{flex:1;display:flex;align-items:center}
.rung{border:0.9pt solid #333;border-radius:2mm;padding:2mm 3mm;justify-content:space-between;gap:3mm}
.tick-box{width:7mm;height:7mm;min-width:7mm;border:0.9pt solid #333;border-radius:1mm;display:inline-block}

/* cards */
.board{margin-bottom:3mm}
.card-grid{display:grid;gap:3mm;flex:1}
.card{border:0.8pt dashed #333;border-radius:2mm;padding:2mm;display:flex;flex-direction:column;justify-content:space-between;min-height:22mm}
.card-cut-row{display:flex;justify-content:space-between;align-items:center;margin-top:1mm}
.rank-ladder{display:flex;flex-direction:column}
.rank-row{display:flex;align-items:flex-end;gap:2mm;height:10mm}
.rank-no{font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif;color:#555;padding-bottom:0.5mm}
.rank-row .rank-line{flex:1;border-bottom:0.7pt solid #888;height:100%}
.rank-tag{font:700 10pt "Lexend","Noto Sans Symbols 2",sans-serif;padding-bottom:0.5mm;min-width:12mm;text-align:right}
.board.sort{flex:1;display:flex;flex-direction:column;min-height:0}
.sort-cols{display:flex;gap:3mm;flex:1}
.sort-col{flex:1;border:0.8pt solid #333;border-radius:2mm;padding:2mm;min-height:20mm;display:flex;flex-direction:column}
.sort-hint{font-size:9pt;color:#666}
.card-grid.natural{flex:0 0 auto}
.card-letter{display:inline-block;font:700 10pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;border:0.8pt solid #333;border-radius:50%;width:5.5mm;height:5.5mm;text-align:center;line-height:5.5mm;margin-right:1.5mm}
.board.line{margin:1mm 0 3mm 0}
.line-write{height:10mm}
.line-svg{display:block}
.line-labels{display:flex;justify-content:space-between;font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif}

/* tally */
.tally-wrap{flex-direction:column}
.tally-tables{display:flex;gap:3mm;align-items:flex-start}
.tally-tables .tally-table{flex:1;min-width:0;width:auto;table-layout:fixed}
.tally-tables .tally-table th{font-size:11pt;padding:1.5mm 0.5mm}
.tally-table{width:100%;border-collapse:collapse}
.tally-table th,.tally-table td{border:0.8pt solid #333;padding:1.5mm;text-align:center}
.meter-list{display:flex;flex-direction:column;justify-content:space-evenly}
.meter-row{display:grid;grid-template-columns:52% 1fr;gap:3mm;align-items:center}
.meter-label{font-weight:700}
.meter{display:block;height:11mm}
.dd{display:flex;justify-content:space-between;border-bottom:0.6pt solid #999;padding:1mm 0}
.dd-grid{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;column-gap:8mm}
.dd-grid .dd{align-items:flex-end}

/* loop */
.loop-wrap{display:flex;justify-content:center;align-items:center;flex:1}
.loop-wrap svg{width:100%;max-width:180mm;height:auto}
.node{font-size:9pt}

/* comic */
.comic-grid{display:grid;gap:3mm;flex:1;grid-auto-rows:1fr}
.panel{border:0.9pt solid #333;border-radius:2mm;padding:2mm;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;min-height:0}
.panel-art{flex:1;display:flex;align-items:flex-start;justify-content:center;gap:2mm;min-height:0}
.panel-art .prop{align-self:flex-end}
.bubble{border:0.8pt solid #333;border-radius:4mm;padding:1mm 3mm 1.5mm 3mm;font-size:11pt;margin-top:1mm;width:100%;text-align:left}
.bubble-prefix{font-weight:700;line-height:1.3}
.bubble .wl{border-bottom-color:#999}

/* story */
.spine-list{list-style:none;margin:0;padding:0;justify-content:space-evenly}
.sp{border-bottom:0.6pt solid #999;padding:2mm 0;display:flex;gap:2mm}
.spine-list.branch{justify-content:flex-start}
.sp.given{border-bottom:none;padding:1mm 0}
.sp.ending-b{border-bottom:none;flex:1}
.ending-b-body{flex:1}
.sp .sp-no{font:700 13.5pt/1.5 "Lexend","Noto Sans Symbols 2",sans-serif;color:#222;min-width:7mm} /* M16: body-size numbers */

/* logicGrid */
.logic-wrap{display:flex;flex-direction:row;align-items:flex-start;gap:4mm;flex:1}
.logic-table{border-collapse:collapse}
.logic-table th,.logic-table td{border:0.8pt solid #333;width:14mm;height:14mm;text-align:center;font-size:9pt}
.logic-table th{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;background:#f2f2f2}
.cell{border:0.8pt solid #333}
.clue-list{flex:1;padding-left:5mm}
.hint{border:0.8pt dashed #777;border-radius:2mm;padding:2mm;margin-top:3mm;position:relative;overflow:hidden}
.hint-fold{border-top:0.8pt dashed #999;margin-bottom:1mm;padding-top:1mm;font-size:9pt;color:#777;text-align:center}
/* Hint text is printed upside-down below the fold line: a child must
   physically fold the box under and flip it to read it right-side up,
   instead of just reading it straight off the page. */
.hint-text{transform:rotate(180deg);display:block;margin-top:1mm}

/* sketch */
.sketch-row{display:flex;flex-direction:row;align-content:flex-start;gap:4mm;flex-wrap:wrap;justify-content:center}
.sketch-box,.sk{border:0.9pt solid #333;border-radius:2mm;position:relative}
.fold-strip{display:flex;flex-direction:column;justify-content:space-between;width:34mm}
.fold-step{display:flex;flex-direction:column;align-items:center;font-size:9.5pt;text-align:center;line-height:1.2}
.sk .folds{position:absolute;inset:0;width:100%;height:100%}
.sk-col{display:flex;flex-direction:column;gap:2mm}
.sk-col .sk-foot{flex:0 0 auto}
.sb-label{position:absolute;top:1mm;left:2mm;font-size:9pt;color:#666}
.stamp{border:1.2pt solid #333;border-radius:50%;width:24mm;height:24mm;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);font:700 10pt "Lexend","Noto Sans Symbols 2",sans-serif;color:#555;text-align:center}

/* instructions */
.tbl-wrap .instr-table{flex:1;height:100%}
.instr-table{width:100%;border-collapse:collapse}
.instr-table th,.instr-table td{border:0.8pt solid #333;padding:2mm;font-size:10.5pt}

/* estimate */
.part-list{display:flex;flex-direction:column;gap:2mm;flex:1;min-height:0}
.part{border:0.8pt solid #333;border-radius:2mm;padding:2mm 3mm;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.part-label{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:600;margin-bottom:1mm;display:block}

/* spot */
.spot-wrap{display:flex;gap:3mm;flex:1;align-items:flex-start;min-height:0}
.spot-scene{flex:1;border:0.9pt solid #333;border-radius:2mm;width:100%;height:auto;aspect-ratio:4/3;display:block;min-width:0}
.spot-single{flex:3.6;display:flex;min-height:0;min-width:0}
/* diff-mode: the two scenes fill the whole task area height so every edit
   is large enough for an 8-year-old to see (was ~84x63mm, now as big as
   the page allows). */
.spot-wrap.diff-mode{flex-direction:column;align-items:stretch;gap:4mm}
.spot-wrap.diff-mode .spot-scene{flex:1;width:100%;height:0;min-height:0;aspect-ratio:auto}
.bug-list{padding-left:6mm;list-style:decimal;flex:1;margin:0}
.bug-item{height:10mm;display:list-item}
.bug-line{display:block;height:9mm;border-bottom:0.8pt solid #888}

/* front matter / catalogue */
.cover-title{font:700 36pt "Lexend","Noto Sans Symbols 2",sans-serif}
.toc-row{display:flex;justify-content:space-between;border-bottom:0.6pt solid #999;padding:1mm 0}

.fm-page .bd{padding:6mm 12mm}
.fm-ft{display:flex;justify-content:space-between;align-items:center;font-size:10pt;padding:2mm 8mm 5mm 8mm}
.fm-ft .ft-page{flex:1;text-align:center}
.fm-h1{font:700 22pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 3mm 0}
.fm-sub{margin:0 0 4mm 0;color:#333}

/* cover */
.cover-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5mm}
.cover-pip{line-height:0}
.cover-subtitle{font-size:14pt;color:#444;margin:0;max-width:140mm}
.cover-kicker{font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#666}
.cover-belongs{margin-top:10mm;font:600 13pt "Lexend","Noto Sans Symbols 2",sans-serif;display:flex;align-items:baseline;gap:3mm}
.cover-belongs .line{display:inline-block;width:95mm;border-bottom:1pt solid #333;height:1pt}

/* how-to */
.howto{flex:1;display:flex;flex-direction:column}
.howto-list{padding-left:6mm;margin:0 0 4mm 0}
.howto-list li{margin-bottom:3.5mm}
.howto-foot{display:flex;align-items:center;gap:4mm;margin-top:8mm;border-top:0.8pt dashed #999;padding-top:3mm}
.howto-foot p{margin:0;font-size:11.5pt;color:#333}
.howto-h2{font:700 15pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:2mm 0 3mm 0}
.page-guide{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
.pg-item{border:0.8pt solid #333;border-radius:2.5mm;padding:4mm 5mm}
.pg-tag{font:700 10.5pt "Lexend","Noto Sans Symbols 2",sans-serif;display:block;margin-bottom:1mm}
.pg-item p{margin:0;font-size:12pt;line-height:1.45}
.imprint{margin-top:auto;border:0.8pt solid #999;border-radius:3mm;padding:4mm 5mm;background:#fafafa}
.imprint-title{font:700 11pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 1.5mm 0}
.imprint p{margin:0 0 1.5mm 0;font-size:10.5pt;color:#333}
.imprint p:last-child{margin-bottom:0}
.imprint-url{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:600}

/* skills map */
.skillsmap{flex:1;display:flex;flex-direction:column;min-height:0}
.skills-map{display:grid;grid-template-columns:1fr 1fr;gap:5mm;align-items:start}
.skill-group-col{border:0.9pt solid #333;border-radius:3mm;padding:3mm 4.5mm 4mm 4.5mm;display:flex;flex-direction:column;gap:2.4mm;min-height:0}
/* M2: a 2 × 2 grid of groups that hug their content; the space below holds a short reflection */
.skill-reflect .after-row{flex:0 0 auto}
.skill-reflect{border:0.9pt dashed #777;border-radius:3mm;margin-top:5mm;padding:3mm 5mm 4mm 5mm;display:flex;flex-direction:column;gap:2.5mm}
.skill-reflect-title{font:700 12.5pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0}
.skill-group-col h3{font:700 13.5pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 1mm 0;padding-bottom:1.5mm;border-bottom:1pt solid #222}
.skill-bubble{display:flex;align-items:center;gap:3mm;font-size:12pt;line-height:1.2}
.skill-bubble .dot{width:7mm;height:7mm;min-width:7mm;border-radius:50%;border:0.9pt solid #333;display:inline-block}

/* chapter title pages */
.chapter-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4mm}
.chapter-no{font:600 11pt "Lexend","Noto Sans Symbols 2",sans-serif;color:#666;text-transform:uppercase;letter-spacing:.08em}
.chapter-title{font:700 30pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0}
.chapter-blurb{max-width:140mm;font-size:13pt}
.chapter-count{font-size:11pt;color:#555}
.warmup-box{border:0.9pt dashed #777;border-radius:3mm;padding:4mm 6mm;margin-top:6mm;max-width:150mm;text-align:left;background:#fafafa}
.warmup-box strong{font-family:"Lexend","Noto Sans Symbols 2",sans-serif}

/* certificate */
.certificate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1.4pt solid #333;border-radius:4mm;padding:8mm 10mm;position:relative}
.certificate::before{content:"";position:absolute;inset:4mm;border:0.6pt solid #999;border-radius:2mm;pointer-events:none}
.cert-pip{line-height:0;margin-bottom:2mm}
.cert-kicker{font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#666}
.cert-title{font:700 24pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:2mm 0}
.cert-line{margin:1mm 0;font-size:12.5pt}
.cert-name-line{width:120mm;border-bottom:1pt solid #333;height:10mm}
.cert-sign-row{display:flex;justify-content:space-between;width:150mm;margin-top:14mm;gap:6mm}
.cert-sign{flex:1;border-top:0.9pt solid #333;padding-top:1.5mm;font-size:10pt;text-align:center}

/* answer keys */
.answers{flex:1;display:flex;flex-direction:column;min-height:0}
.answer-group-heading{font:700 13pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:3mm 0 1mm 0;border-bottom:1pt solid #222;padding-bottom:1mm}
.answer-group-heading:first-child{margin-top:0}
.answer-item{border-bottom:0.6pt solid #999;padding:2mm 0}
.answer-item .a-title{font:600 10.5pt "Lexend","Noto Sans Symbols 2",sans-serif;display:block;margin-bottom:0.5mm}
.answer-item .a-text{font-size:10.5pt}

/* catalogue (screen only, served at activities/index.html) */
.cat-icon{display:inline-block;line-height:0}

/* tally answer lines */
.after{display:flex;flex-wrap:wrap;gap:2mm 6mm;margin-top:2mm}
.after-row{display:flex;align-items:flex-end;gap:2mm;flex:1 1 80mm;height:10mm}
.after-label{font-weight:700;white-space:nowrap}
.after-line{flex:1;border-bottom:0.8pt solid #888;height:100%}

/* Book 1 ("Little Thinkers", ages 5-7): bigger type, bigger writing lines,
   thicker outlines so little hands and eyes have an easier time, plus the
   read-aloud box and faces footer that only this book uses. */
.book-1 .page{font-size:17pt}
.book-1 h1{font-size:28pt}
/* writingLines() (layout.js) always writes an inline height, which would
   otherwise beat this rule's specificity; !important forces every Book 1
   writing line to at least the 15mm minimum regardless of the gap the
   calling template passed in. layout.js's output must stay untouched so
   Book 2's *.html stays byte-identical (shared by both books). */
.book-1 .wl{height:15mm !important}
.book-1 .sk,.book-1 .pic,.book-1 .bx{border-width:0.6mm}
/* Sketch-box labels ("1. First", "Now I can…") at a size a 5-year-old can
   follow with a grown-up pointing. */
.book-1 .sb-label{top:1.5mm;left:2.5mm;font:600 13pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif;color:#000}
/* Grown-up corner: tighter paragraph spacing so the big Book 1 picture
   tasks (glue bins plus a cut strip) still fit on one page. */
.book-1 .grown p,.book-1 .gu-ask{margin:1.2mm 0}
/* The answer key keeps Book 2's small type: under the big Book 1 page font
   each answer line's strut was 17pt x 1.5 tall, so the key overflowed. */
.book-1 .answers{font-size:11pt}
/* Front matter (how-to, skills map) keeps a smaller body size than the
   activity pages: at 17pt the how-to imprint and the skills-map reflection
   lines were pushed off the page. */
.book-1 .fm-bd{font-size:13pt}
.book-1 .skill-reflect{margin-top:3mm}
.book-1 .skill-reflect .after-row{height:15mm}
.book-1 .skillsmap .fm-h1{font-size:21pt}
.book-1 .answer-item.has-pic{display:flex;align-items:center;gap:3mm}
.book-1 .answer-item.has-pic .pic{flex:0 0 auto}
.read-aloud{border:0.8pt solid #999;border-radius:2mm;padding:3mm 4mm;margin:0 0 3mm 0;font:12pt/1.4 "Atkinson Hyperlegible","Noto Sans Symbols 2",sans-serif;background:#fafafa}
.ra-tag{font:700 10pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#555;margin-right:2mm}
.ft-feel.faces{display:flex;align-items:center;gap:2mm}
.ft-feel.faces .face{margin:0 1mm}

/* Book 1 picture templates: pictureSort, match, colourBy. Lines are 1.5pt
   (0.53mm) or thicker so they print bold for little hands. */
.pic-label{display:block;font:600 12pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif;text-align:center}

/* pictureSort: glue bins (with card-sized "glue here" slots) on top, cut
   strip at the bottom. The mm sizes here match PS in templates.js, which
   uses them to check the page fits. */
.ps{gap:4mm}
.ps-bins{display:grid;gap:4mm;flex:0 0 auto}
.ps-bin{border:0.7mm solid #000;border-radius:4mm;display:flex;flex-direction:column;padding:2mm}
.ps-head{display:flex;align-items:center;gap:2mm;height:12mm;margin-bottom:2mm;font:700 18pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif}
.ps-head .pic{flex:0 0 auto}
.ps-no{display:inline-flex;align-items:center;justify-content:center;width:10mm;height:10mm;border:0.6mm solid #000;border-radius:50%;font:700 16pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;flex:0 0 auto}
.ps-slots{flex:1;display:grid;gap:2mm;justify-content:center;align-content:center}
.ps-slot{border:0.4mm dashed #000;border-radius:2mm;display:flex;align-items:center;justify-content:center}
.ps-slot span{font:600 9pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;color:#555}
.ps-strip{position:relative;flex:0 0 auto;align-self:center;line-height:0;margin:auto 0 2mm 0}
.ps-cut{position:absolute;left:-1mm;top:0;transform:translate(-50%,-50%);line-height:0;background:#fff}
.ps-cut .scissor{width:7mm;height:7mm}
.ps-cards{display:grid;border-top:0.5mm dashed #000;border-left:0.5mm dashed #000}
.ps-card{border-right:0.5mm dashed #000;border-bottom:0.5mm dashed #000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ps-card .pic-label{font-size:10pt}

/* match: picture + dot, a wide gap for the line, dot + picture */
.match{justify-content:space-evenly}
.m-row{display:flex;align-items:center}
.m-side{display:flex;align-items:center;gap:4mm;flex:0 0 auto}
.m-gap{flex:1}
.m-item{display:flex;flex-direction:column;align-items:center;min-width:34mm}
.m-dot{display:inline-block;border-radius:50%;background:#000;flex:0 0 auto}

/* colourBy: big rule, grid of picture tiles, optional draw-your-own box */
.cb-rule{font:700 20pt/1.15 "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 1.5mm 0;text-align:center}
.cb{flex:0 0 auto;flex-direction:row;justify-content:center;align-items:stretch;gap:2mm}
.cb-grid{display:grid;gap:2mm;flex:0 0 auto}
.cb-tile{border:0.6mm solid #000;border-radius:3mm;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cb-art{position:relative;line-height:0}
.cb-with{position:absolute;left:50%;top:0;transform:translate(-50%,-8%);line-height:0}
.cb-with .pic{background:#fff;border-radius:50%}
.cb-also{flex:1;border:0.6mm solid #000;border-radius:3mm;padding:2mm 3mm}
.cb-also-label{display:block;font:600 13pt/1.25 "Lexend","Noto Sans Symbols 2",sans-serif}

/* Book 1 picture templates: traceDraw, pictureLogic, countTally,
   feelingsFaces. The mm sizes are written inline by templates.js. */
/* traceDraw */
.td{flex:0 0 auto;gap:3mm}
.td-paths{flex:1;justify-content:space-evenly}
.td-lane{display:flex;align-items:center;justify-content:space-between;gap:2mm}
.td-lane .pic,.td-path{flex:0 0 auto}
.td-cut{position:relative}
.td-cut-pic{position:absolute;left:0;top:50%;transform:translateY(-50%);background:#fff;line-height:0;padding-right:1mm}
.td-shape-row{display:flex;gap:4mm}
.td-shape{border:0.6mm solid #000;border-radius:4mm;display:flex;align-items:center;justify-content:center}
.td-draw{border:0.6mm solid #000;border-radius:4mm;padding:2mm 3mm}
.td-draw-label{display:block;font:600 13pt/1.25 "Lexend","Noto Sans Symbols 2",sans-serif}
.td-gridwrap{flex-direction:row;align-items:flex-start;justify-content:center;gap:8mm}
.td-grid{display:grid;border:0.6mm solid #000}
.td-cell{border:0.53mm solid #000;display:flex;align-items:center;justify-content:center}
.td-block{background:#d9d9d9}
.td-moves{display:flex;flex-direction:column;align-items:center;gap:3mm}
.td-key{display:flex;gap:1mm;border:0.4mm solid #000;border-radius:2mm;padding:1mm}
.td-arrows{display:grid;gap:3mm}
.td-arrow-box{border:0.6mm solid #000;border-radius:2mm;position:relative}
.td-arrow-no{position:absolute;left:1mm;top:0.8mm;font:700 12pt/1 "Lexend","Noto Sans Symbols 2",sans-serif}

/* pictureLogic */
.pl{flex:0 0 auto;gap:5mm}
.pl-odd,.pl-pattern{flex:1;justify-content:space-evenly}
.pl-row{display:flex;align-items:center;gap:4mm}
.pl-no{display:inline-flex;align-items:center;justify-content:center;width:10mm;height:10mm;border:0.6mm solid #000;border-radius:50%;font:700 15pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;flex:0 0 auto}
.pl-cell,.pl-opt{border:0.6mm solid #000;border-radius:3mm;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pl-odd .pl-cell{border-color:transparent}
.pl-odd .pl-row{justify-content:space-between}
.pl-q{border:0.6mm dashed #000}
.pl-qmark{font:700 26pt/1 "Lexend","Noto Sans Symbols 2",sans-serif}
.pl-missing{flex-direction:row;align-items:center;justify-content:center;gap:8mm}
.pl-grid{display:grid;gap:2mm}
.pl-options{display:flex;flex-direction:column;align-items:center;gap:2mm;border-left:0.4mm dashed #000;padding-left:6mm}
.pl-options-label{font:700 15pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.pl-opt-grid{display:grid;gap:3mm}

/* countTally */
.ct-q{font:700 17pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 2mm 0}
.ct{flex:0 0 auto}
.ct-bars{flex-direction:row;justify-content:space-between;align-items:flex-start}
.ct-scene{position:relative;border:0.6mm solid #000;border-radius:4mm;box-sizing:content-box;flex:0 0 auto}
.ct-item{position:absolute;line-height:0}
.ct-chart{display:flex;align-items:flex-end;gap:2mm}
.ct-scale{display:flex;flex-direction:column;margin-bottom:14mm;width:5mm}
.ct-scale span{display:flex;align-items:center;justify-content:flex-end;font:600 11pt/1 "Lexend","Noto Sans Symbols 2",sans-serif}
.ct-col{display:flex;flex-direction:column;align-items:center;gap:0}
.ct-sq{border:0.53mm solid #000;margin-top:-0.53mm}
.ct-sq:first-child{margin-top:0}
.ct-col .pic{margin-top:2mm}
.ct-nobars{gap:4mm}
.ct-boxes{display:flex;justify-content:center;gap:10mm}
.ct-count{display:flex;align-items:center;gap:2mm}
.ct-box{width:20mm;height:16mm;border:0.6mm solid #000;border-radius:2mm}
.ct-coins{flex:1;justify-content:space-evenly}
.ct-shop{display:flex;justify-content:space-around}
.ct-shop-item{display:flex;flex-direction:column;align-items:center;gap:2mm}
.ct-tag{display:flex;flex-wrap:wrap;justify-content:center;max-width:39mm;gap:1mm;border:0.5mm solid #000;border-radius:2mm 5mm 5mm 2mm;padding:1.5mm 3mm}
.ct-purse{border:0.6mm solid #000;border-radius:6mm;padding:3mm 5mm;display:flex;flex-direction:column;gap:2mm}
.ct-purse-label{text-align:center;font:700 15pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.ct-purse-coins{display:flex;flex-wrap:wrap;justify-content:center;gap:3mm}

/* tracker picture rows (Book 1): a picture per row and big day cells */
.tk{flex:1;gap:3mm}
.tk-row{display:grid;gap:2mm;align-items:center}
.tk-day{text-align:center;font:600 11pt/1 "Lexend","Noto Sans Symbols 2",sans-serif}
.tk-pic{display:flex;flex-direction:column;align-items:center;line-height:0}
.tk-pic .pic-label{line-height:1.15;margin-top:1mm;font-size:11pt}
.tk-cell{border:0.6mm solid #000;border-radius:3mm;display:flex;align-items:center;justify-content:center;line-height:0}
.tk-draw{flex:1;min-height:60mm;border:0.6mm solid #000;border-radius:4mm;padding:2mm 3mm}
.tk-draw-label{display:block;font:600 13pt/1.25 "Lexend","Noto Sans Symbols 2",sans-serif}
/* sketch boxes with a story picture already in them */
.sk-pics{position:absolute;inset:9mm 2mm 2mm 2mm;display:flex;align-items:center;justify-content:center;gap:4mm;line-height:0}

/* feelingsFaces */
.ff{flex:1;gap:3mm;justify-content:space-evenly}
.ff-row{display:flex;align-items:center;gap:4mm;border-bottom:0.3mm dashed #000;padding-bottom:1mm}
.ff-row:last-child{border-bottom:0}
.ff-row > .pic{flex:0 0 auto}
.ff-text{flex:1;margin:0;font:600 16pt/1.25 "Lexend","Noto Sans Symbols 2",sans-serif}
.ff-draw{border:0.6mm solid #000;border-radius:50%;flex:0 0 auto}
.ff-pick{display:flex;gap:2mm;flex:0 0 auto}