@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;text-wrap:balance}
.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 ("First 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}

/* pictureSort crayon modes (Book 1: no scissors, no glue, nothing dashed).
   The mm sizes match PSC and the *Layout() functions in templates.js. */
.ps-choose{flex:0 0 auto;flex-direction:row;align-items:flex-start;justify-content:center;gap:4mm}
.ps-cgrid{display:grid;gap:3mm;flex:0 0 auto}
.ps-ccard,.ps-ocard{border:0.6mm solid #000;border-radius:3mm;padding:1.5mm;display:flex;flex-direction:column;align-items:center}
.ps-cpic{line-height:0;margin-bottom:1mm;position:relative}
.ps-with{position:absolute;left:50%;top:0;transform:translateX(-50%);line-height:0}
.ps-with .pic{background:#fff;border-radius:50%}
.ps-ccard .pic-label{font-size:11pt;line-height:5mm}
.ps-crow{display:grid;gap:1.5mm;width:100%;margin-top:auto;padding-top:1.5mm}
.ps-chip{border:0.5mm solid #000;border-radius:3mm;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:700;line-height:1.05;text-align:center}
.ps-chip .pic{flex:0 0 auto;margin-bottom:0.4mm}
.ps-order{flex:0 0 auto}
.ps-orow{display:flex;justify-content:center;gap:4mm}
.ps-numrow{display:flex;align-items:center;gap:1.5mm;margin-top:2mm}
.ps-leadrow{display:flex;align-items:center;justify-content:center;gap:4mm}
.ps-lead{line-height:0}
.ps-leadtext{font:700 16pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.ps-numbox{border:0.6mm solid #000;border-radius:2mm}
.ps-share{flex:0 0 auto;align-items:center;gap:6mm}
.ps-items{display:flex;gap:3mm;justify-content:center}
.ps-shareitem{display:flex;align-items:center;justify-content:center;line-height:0}
.ps-plates{display:flex;gap:6mm;justify-content:center}
.ps-platewrap{display:flex;flex-direction:column;align-items:center;gap:1mm}
.ps-plate{position:relative;border:0.7mm solid #000;border-radius:50%}
.ps-plate::after{content:"";position:absolute;inset:13%;border:0.3mm solid #000;border-radius:50%}
.ps-platename{font:700 14pt/1.3 "Lexend","Noto Sans Symbols 2",sans-serif;display:flex;align-items:center;gap:1.5mm}

/* "Like this:" example: a hatched (coloured-in) star, beside a task's rule
   line (colourBy) or its card grid (pictureSort choose). */
.like-this{flex:0 0 auto;border:0.4mm solid #000;border-radius:3mm;padding:1.2mm 1mm;display:flex;flex-direction:column;align-items:center;gap:0.6mm;font:700 9.5pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif;text-align:center}
.like-this .lt-star,.like-this .lt-chips{display:block}
.cb-head{display:flex;align-items:center;gap:4mm;margin:0 0 1.5mm 0}
.cb-head .cb-rule{flex:1;margin:0}

/* 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:#999}
.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-next{display:flex;flex-direction:column;align-items:center;gap:2mm;margin-left:3mm;margin-bottom:14mm}
.ct-next-label{font:700 15pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.ct-next-box{border:0.6mm solid #000;border-radius:2mm;box-sizing:border-box}
.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:43mm;gap:1mm;position:relative;padding:2mm 3mm 2mm 8mm}
.ct-tag-shape{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.ct-tag-hole{position:absolute;left:3.2mm;top:50%;width:2.6mm;height:2.6mm;margin-top:-1.3mm;border:0.45mm solid #000;border-radius:50%;box-sizing:border-box}
.ct-tag .coin{position:relative}
.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}

/* caseStudy and debate (Book 3). Section labels share .sec-label. */
.sec-label{display:block;font:600 9.5pt/1.3 "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#444;margin-bottom:0.8mm}
.case-study{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"case qs" "dec qs";gap:3mm 5mm}
.cs-scenario{grid-area:case;border:0.8pt solid #333;border-radius:1.5mm;padding:2mm 3mm 2.5mm 3mm}
.cs-scenario p{margin:0;font-size:11pt;line-height:1.42}
.cs-questions{grid-area:qs;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.cs-q{margin:0}
.cs-qt{margin:0;font-weight:700;line-height:1.3;display:flex;gap:2mm}
.cs-no{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;flex:0 0 auto;min-width:4mm}
.cs-decision{grid-area:dec;border:0.8pt solid #333;border-radius:1.5mm;padding:2mm 3mm 1mm 3mm;align-self:end}
.cs-dq{margin:0;font-weight:700;line-height:1.3}
.debate{gap:2.5mm}
.db-motion{border-top:1.2pt solid #222;border-bottom:1.2pt solid #222;padding:1.5mm 0 2mm 0}
.db-motion p{margin:0;font:700 17pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.db-coin{display:flex;align-items:flex-end;gap:2mm;font-weight:700}
.db-line{flex:1;border-bottom:0.8pt solid #888;height:7mm}
.db-table{width:100%;border-collapse:collapse;table-layout:fixed;flex:1}
.db-table th{border:0.8pt solid #333;padding:1.5mm 2.5mm;text-align:left;vertical-align:top;background:#f2f2f2}
.db-side{display:block;font:700 12pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif;letter-spacing:.06em}
.db-prompts{display:block;font-weight:400;font-size:9.5pt;color:#444}
.db-table td{border:0.8pt solid #333;height:11mm}
.db-after{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
/* logicGrid with a second category (cols2): clues under the grid. */
.logic-wrap.two-cat{flex-direction:column;align-items:stretch;gap:3mm}
.two-cat .logic-table{align-self:center}
.two-cat .logic-table th,.two-cat .logic-table td{width:12mm;height:12mm}
.two-cat .logic-table .lg-corner,.two-cat .logic-table .lg-row{width:auto;min-width:22mm;padding:0 2mm;text-align:left}
.two-cat .logic-table .lg-cats th{height:7mm}
.two-cat .logic-table .cat2-start{border-left:2pt solid #222}
.two-cat .clue-list{padding-left:0}
.two-cat .clue-list ol{margin:0;padding-left:5mm;columns:2;column-gap:6mm}

/* Book 3 ("Founder Thinkers", ages 13-17): a denser journal/workbook
   look. Smaller body type, thin rules, section labels in small caps, and
   a plain ruled "Talk it over" corner instead of the grey Grown-up box.
   No Pip on activity pages: the header keeps the companion-app QR. */
.book-3 .page{font-size:12.5pt;line-height:1.4}
.book-3 h1{font-size:22pt}
.book-3 .hd{padding:5mm 8mm 2.5mm 8mm;border-bottom-width:1pt}
.book-3 .bd{padding:3mm 8mm 2.5mm 8mm}
.book-3 .intro{margin:0 0 1.5mm 0}
.book-3 .steps{margin:0 0 2.5mm 0}
.book-3 .steps li{margin-bottom:0.3mm}
.book-3 .wl{border-bottom:0.5pt solid #999}
.book-3 .sec-label,.book-3 .grown > strong{font-variant:small-caps;font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:600;text-transform:lowercase;letter-spacing:.05em;font-size:11.5pt;color:#222}
.book-3 .grown{background:none;border:0;border-top:0.6pt solid #555;border-bottom:0.6pt solid #555;border-radius:0;padding:1.5mm 0 1.5mm 0;font-size:10.5pt;line-height:1.35}
.book-3 .grown p,.book-3 .gu-ask{margin:0.6mm 0}
.book-3 .ft{font-size:9.5pt}
.book-3 .ft-learned{flex:1;text-align:right}
/* Book 3 labelled write-in lines (tracker/chain before/after, class
   "after wide") run full width, with room before a grid; row lists
   stretch to fill the page. */
.after.wide .after-row{flex-basis:100%}
.book-3 .after.wide + .task-area{margin-top:2mm}
.book-3 .list-tables{flex:1;align-items:stretch}
.book-3 .list-table{height:100%}
/* Book 3 final-review fixes: uncut cards, ruled story beats, reasoning
   lines under a logic grid, figure-only estimate parts, and room under
   the last writing line of case-study and debate boxes. */
.card.solid{border-style:solid;justify-content:flex-start}
.spine-list.ruled{justify-content:space-between}
.sp.ruled{border-bottom:none;padding:0}
.sp-body{flex:1;display:flex;flex-direction:column}
.sp-first{height:10mm;display:flex;align-items:flex-end;border-bottom:0.5pt solid #999}
.sp-q{line-height:1.3;padding-bottom:0.8mm}
.sp.ruled .sp-no{padding-top:2.4mm}
.lg-notes{margin-top:3mm}
.part.inline{flex-direction:row;align-items:flex-end;gap:2mm}
.part-fill{flex:1;border-bottom:0.5pt solid #999;height:7mm}
.book-3 .cs-decision{padding-top:1mm;padding-bottom:2mm}
.book-3 .db-table td{height:10mm}
.book-3 .db-after{margin-bottom:2.5mm}
/* Keep the last ruled line clear of the Talk it over rule. */
.book-3 .spine-list.ruled,.book-3 .lg-notes,.book-3 .card-grid + .after{margin-bottom:2.5mm}

/* ---------- Book 1 clarity audit (Task 3a) ---------- */
/* No dashed lines anywhere in Book 1 (they read as cut lines): the how-to
   divider, the chapter warm-up box, the skills-map box, the pattern "?"
   boxes, the missing-piece options divider and the feelings rows. */
.book-1 .howto-foot{border-top-style:solid}
.book-1 .warmup-box{border-style:solid}
.book-1 .skill-reflect{border-style:solid}
.book-1 .pl-q{border-style:solid}
.book-1 .pl-options{border-left-style:solid}
.book-1 .ff-row{border-bottom-style:solid}
/* "You need:" strip (youNeed() in templates.js) */
.you-need{display:flex;align-items:center;gap:3mm;align-self:flex-start;border:0.4mm solid #000;border-radius:3mm;padding:1mm 3mm;margin:0 0 2mm 0;font:700 12pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif}
.yn-item{display:flex;align-items:center;gap:1.5mm;line-height:0}
.yn-text{line-height:1.1;font-weight:600}
.yn-or{font-weight:600}
/* tracker bars: columns of squares to color from the bottom up */
.tkb{align-items:center;justify-content:flex-start}
.tkb-chart{display:flex;align-items:flex-end;gap:9mm}
.tkb-scale{display:flex;flex-direction:column;width:6mm}
.tkb-scale span{display:flex;align-items:center;justify-content:flex-end;font:600 11pt/1 "Lexend","Noto Sans Symbols 2",sans-serif}
.tkb-scale .tkb-foot{height:8mm}
.tkb-col{display:flex;flex-direction:column;align-items:center}
.tkb-stack{display:flex;flex-direction:column;border-top:0.53mm solid #000}
.tkb-sq{border:0.53mm solid #000;border-top:0}
.tkb-head{height:8mm;display:flex;align-items:flex-end;gap:1mm;font:600 11pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;white-space:nowrap}
.tkb-head b{font-size:16pt}
/* sketch boxes with choices to color, feeling faces, a starter scene and a
   worked example */
.sk-in{position:absolute;inset:9mm 2mm 2mm 2mm;display:flex;align-items:stretch;justify-content:center;gap:3mm}
.sk-lead{display:flex;align-items:center;justify-content:center;line-height:0}
.sk-choice,.sk-face{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:1mm 0.5mm;line-height:0;text-align:center}
.sk-choice{border:0.4mm solid #000;border-radius:2.5mm}
.sk-face{justify-content:center}
.sk-cpics{flex:1;display:flex;align-items:center;justify-content:center;gap:0.5mm}
.sk-choice .pic-label,.sk-face .pic-label{line-height:1.1;font-size:10.5pt;margin-top:0.5mm}
.sk-face .face{display:block}
.sk-pics.sk-edges{inset:9mm 3mm 2mm 3mm;justify-content:space-between;align-items:flex-end}
.sk-expics{position:absolute;inset:9mm 2mm 10mm 2mm;display:flex;align-items:center;justify-content:center;gap:2mm;line-height:0}
.sk-exlabel{position:absolute;left:1mm;right:1mm;bottom:2mm;text-align:center;font:700 12pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif}
.sketch-row > .like-this{align-self:center}
/* countTally: the "Circle one:" row under the question */
.ct-pick{display:flex;align-items:center;gap:5mm;margin:-1mm 0 1.5mm 0;font:700 13pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif;line-height:0}
.ct-pick-label{line-height:1.1}
/* match: a second picture over the first (a child under the rain) */
.m-art{position:relative;display:inline-block;line-height:0}
.m-with{position:absolute;left:50%;bottom:0;transform:translateX(-50%);line-height:0}
.m-with .pic{display:block}
.book-1 .sk.sk-example{border-width:0.4mm;border-radius:3mm}
/* Task 3b: printed words to color (hello in 6 languages), labels under
   starter pictures, pictures lined up at the left, signs in a worked
   example (robot + dog = robot-dog), choices in a tracker's drawing box,
   and the robot grid's "= 1 square" key */
.sk-word{display:flex;align-items:center;justify-content:center;border:0.4mm solid #000;border-radius:2.5mm;font:700 13pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif;text-align:center;padding:0 0.5mm}
.sk-pl{display:flex;flex-direction:column;align-items:center;line-height:0}
.sk-pl .pic-label{line-height:1.1;font-size:10.5pt;margin-top:0.5mm}
.sk-pics.sk-left{justify-content:flex-start;padding-left:2mm}
.sk-op{font:700 18pt/1 "Lexend","Noto Sans Symbols 2",sans-serif;width:7mm;text-align:center;flex:0 0 auto}
.sk-expic{display:flex;flex-direction:column;align-items:center;line-height:0;margin:0 1mm}
.sk-expic .pic-label{line-height:1.1;font-size:10.5pt;margin-top:0.5mm}
.sk-expics.sk-nolabel{bottom:2mm}
.tk-choices{display:flex;align-items:center;justify-content:center;gap:2mm;margin-top:2mm}
.tk-choices .like-this{margin-left:2mm}
.tk-choices .sk-choice{flex:0 0 auto}
.sk-op.sk-arrow{line-height:0}
.td-key{align-items:center;flex-wrap:wrap;justify-content:center;row-gap:0.5mm;max-width:46mm}
.td-key-note{flex:0 0 100%;text-align:center;font:700 11pt/1.1 "Lexend","Noto Sans Symbols 2",sans-serif;white-space:nowrap}

/* opening and closing pages (Task 6): welcome, celebrate, keep going, about */
.bm{flex:1;display:flex;flex-direction:column;min-height:0}
.bm-h1{margin-bottom:4mm}
.bm-lead{font-size:13pt;line-height:1.5;margin:0 0 4mm 0;max-width:165mm}
.bm-h2{font:700 14pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 3mm 0}
.bm-inside{border:0.9pt solid #333;border-radius:3mm;padding:4mm 6mm;margin-top:4mm}
.bm-chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.5mm}
.bm-chapters li{display:flex;align-items:center;gap:4mm;font-size:12.5pt;border-bottom:0.6pt solid #999;padding-bottom:2mm}
.bm-chapters li:last-child{border-bottom:0;padding-bottom:0}
.bm-ch-no{font:700 12pt "Lexend","Noto Sans Symbols 2",sans-serif;width:8mm;height:8mm;border:0.9pt solid #333;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.bm-ch-name{flex:1;font-weight:700}
.bm-ch-count{color:#333}
.bm-foot-pip{margin-top:auto;align-self:center;line-height:0;padding-top:4mm}
.bm-bigpip{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;line-height:0;margin:2mm 0}
.bm-bigpip .pip{width:150mm;height:150mm;max-height:100%}
.bm-welcome .bm-step{margin-bottom:6mm}
.bm-start{flex:0 0 auto;margin-top:8mm}
.bm-step,.bm-step-label{font:700 13pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:2mm 0 3mm 0}
.bm-step{text-align:center}
.bm-say{display:flex;align-items:center;gap:4mm;margin-bottom:2mm}
.bm-say .pip{flex:0 0 auto}
.bm-say .read-aloud{margin:0}
.bm-stars{display:flex;justify-content:space-between;gap:2mm;margin-bottom:4mm}
.bm-star{flex:1;display:flex;flex-direction:column;align-items:center;gap:1mm;font:600 11pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif;text-align:center}
.bm-draw{position:relative;flex:1;min-height:60mm;border:0.6mm solid #000;border-radius:3mm;margin-bottom:3mm}
.bm-draw-pip{position:absolute;right:6mm;bottom:4mm;line-height:0}
.bm-draw-pip .pip{width:40mm;height:40mm}
.bm-prompt{margin-bottom:3mm}
.bm-q{font:700 12.5pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 1mm 0}
.bm-talk{border:0.9pt solid #333;border-radius:3mm;padding:3mm 5mm;margin-top:2mm}
.bm-talk-tag{font:700 10pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:1mm}
.bm-talk p{margin:0;font-size:12.5pt}
.bm-series{margin:2mm 0 5mm 0}
.bm-series-name{font:600 10pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#444;margin:0 0 2mm 0}
.bm-books{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.bm-book{border:0.9pt solid #333;border-radius:3mm;padding:3mm 4mm;display:flex;flex-direction:column;gap:1mm}
.bm-book.bm-this{border-width:1.8pt}
.bm-book-no{font:600 9.5pt "Lexend","Noto Sans Symbols 2",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#444}
.bm-book-title{font:700 13pt/1.2 "Lexend","Noto Sans Symbols 2",sans-serif}
.bm-book-ages{font-size:11pt}
.bm-book-here{font:700 9.5pt "Lexend","Noto Sans Symbols 2",sans-serif;margin-top:1mm}
.bm-note{border:0.9pt solid #333;border-radius:3mm;padding:3mm 5mm;margin-bottom:4mm}
.bm-note-title{font:700 12pt "Lexend","Noto Sans Symbols 2",sans-serif;margin:0 0 1mm 0}
.bm-note p:last-child{margin:0;font-size:12pt;line-height:1.45}
.bm-app{display:flex;align-items:center;gap:4mm;margin-bottom:3mm}
.bm-app p{margin:0;font-size:12pt}
.bm-qr{flex:0 0 auto}
.bm-site{font-size:12pt;margin:0 0 3mm 0}
.bm-url{font-family:"Lexend","Noto Sans Symbols 2",sans-serif;font-weight:600}
.bm-review{margin-top:auto;font-size:12pt;border-top:0.8pt solid #999;padding-top:3mm}
.bm-imprint{margin-top:6mm}
.bm-about-main{margin:auto 0;padding:0 6mm}
.bm-about-pip{line-height:0;margin-top:6mm;text-align:center}
.bm-about .bm-imprint{margin-top:0}
.bm-welcome-pip{margin:auto 0;padding:0}