/* aitism learn: Numbers activities. Classes start nm-. Sizes in em of the sheet base; Print Black on white.
   The answer slot is always the darkest line in its card; dashed only where something is still to fill in. */

/* the topic's pictures in centred rows, like a ten frame */
.nm-pics { display: inline-flex; flex-wrap: wrap; justify-content: center; align-content: center; flex: none;
  font-family: var(--emoji); font-style: normal; line-height: 1.12; }
.nm-pics i { font-style: normal; width: 1.12em; text-align: center; }
.sheet.bw :is(.nm-pics, .nm-lead, .nm-cue) { filter: contrast(1.35) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000); }
.q .q-em.nm-corner { position: absolute; top: .3em; right: .4em; font-size: .8em; }

/* doubles: the pictures either side of a mirror line, the sum beside them */
.q.nm-dbl { gap: .6em; }
.nm-mirror { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45em; }
.nm-mirror .pics { font-size: 1.3em; }
.sheet.big .nm-mirror .pics { font-size: 1.05em; }
.nm-line { align-self: stretch; width: 0; border-left: 3px solid #111; margin: -.15em 0; }
.nm-ask1 { flex-wrap: nowrap; white-space: nowrap; }
/* two or three doubles: the pictures over the sum, both bigger */
.nm-few .q.nm-dbl { flex-direction: column; justify-content: center; gap: .5em; padding: .7em .8em; }
.nm-few .nm-mirror { align-self: stretch; gap: .6em; }
.nm-few .nm-mirror .pics, .sheet.big .nm-few .nm-mirror .pics { font-size: 2.3em; }
.nm-few.l1 .nm-mirror .pics, .sheet.big .nm-few.l1 .nm-mirror .pics { font-size: 1.45em; }
.nm-few .nm-dbl .eq { font-size: 1.35em; }
.nm-stack .q.nm-dbl { flex-direction: column; justify-content: center; gap: .3em; padding-top: .4em; padding-bottom: .4em; }
.nm-stack .nm-mirror { align-self: stretch; }
/* Years 3 to 6: one question to a row; an answer in the thousands, or a decimal, gets a wider box. With bigger text,
   four-digit choices beside “Double 4,950 =” give up a little size so the row still fits. */
.nm-dbls:is(.l4, .l5) .box { width: 2.7em; }
.sheet.big .nm-dbls.nm-circ.l5 :is(.eq, .choices) { font-size: .95em; }

/* number bonds: the whole on top, the two parts below, joined by lines */
.q.nm-bq { justify-content: center; padding: .6em .7em; }
.q.nm-bq.col { align-items: center; gap: .45em; }
.nm-cherry { position: relative; display: block; flex: none; }
.nm-cherry > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nm-cherry path { fill: none; stroke: #111; stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nm-cir { position: absolute; border: 2px solid #111; border-radius: 50%; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1em; }
.nm-cir.nm-open { border: 3px dashed #111; }
.nm-cn { font-weight: 700; font-size: 1.05em; line-height: 1; }
.nm-qm { font-weight: 700; font-size: 1.25em; line-height: 1; }
.nm-cir .lineans { width: 64%; height: 1.1em; }
.nm-bonds.l0 .nm-cir .nm-pics { font-size: .86em; }
.nm-bonds.l1 .nm-whole .nm-pics { font-size: .62em; }
.nm-bonds.l1 .nm-part .nm-pics { font-size: .62em; }
.nm-bonds.l2 .nm-cn, .nm-bonds.l3 .nm-cn { font-size: 1.15em; }
/* numbers only: bigger bonds where the page has room, smaller with bigger text so three rows still fit */
.sheet:not(.big) .nm-bonds:is(.l2, .l3) .nm-cherry { font-size: 1.12em; }
.sheet.big .nm-bonds:is(.l2, .l3) .nm-cherry { font-size: .87em; }
.sheet.big .nm-bonds:is(.l2, .l3, .l4, .l5) .q.nm-bq { padding: .45em .6em; }
/* circling numbers: the three choices stand in a column beside the bond */
.nm-bonds:is(.l2, .l3, .l4, .l5) .q.nm-bq.col { flex-direction: row; justify-content: center; gap: .6em; }
.nm-bonds:is(.l2, .l3, .l4, .l5) .nm-bq > .choices { flex-direction: column; }
.sheet:not(.big) .nm-bonds.nm-circ:is(.l2, .l3) .nm-cherry { font-size: 1em; }
.sheet.big .nm-bonds.nm-circ:is(.l2, .l3) .nm-cherry { font-size: .8em; }
/* Years 3 to 6: wider circles, so 1,000 and 0.35 fit inside them at the size of the text; a box in a circle takes four figures.
   With bigger text the bonds leave about 1.5em spare, for a long name over two lines or the Finished pill. */
.nm-bonds:is(.l4, .l5) .nm-cn { font-size: 1em; }
.nm-bonds:is(.l4, .l5) .nm-cir .box { width: 2.5em; }
.sheet.big .nm-bonds:is(.l4, .l5) .nm-cherry { font-size: .7em; }
.nm-bonds.nm-circ:is(.l4, .l5) .q.nm-bq.col { gap: .5em; }
.sheet:not(.big) .nm-bonds.nm-circ:is(.l4, .l5) .nm-cherry { font-size: .88em; }
.sheet.big .nm-bonds.nm-circ:is(.l4, .l5) .nm-cherry { font-size: .62em; }
/* circling under pictures, with bigger text: the bonds give up a little room to the choices under them */
.sheet.big .nm-bonds.nm-circ:not(.nm-few):is(.l0, .l1) .nm-cherry { font-size: .82em; }
/* with bigger text, four picture bonds give up a little room, so a long name over two lines still fits */
.sheet.big .nm-bonds:not(.nm-circ):not(.nm-few):is(.l0, .l1) .nm-cherry { font-size: .92em; }
.sheet:not(.big) .nm-few .nm-cherry { font-size: 1.25em; }
.nm-few .q.nm-bq.col { flex-direction: row; justify-content: center; gap: 1.6em; }
.nm-few .nm-bq .choices { font-size: 1.3em; }

/* more or less */
.nm-ask { font-size: .8em; line-height: 1.25; text-wrap: pretty; }
.q.nm-cq { gap: .3em; }
.nm-pair { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .7em; }
.nm-pair > .nm-line { margin: 0; }
.nm-grp { display: flex; align-items: center; justify-content: center; gap: .55em; min-width: 0; }
.nm-cmp.l0 .nm-grp .nm-pics { font-size: 1.15em; }
.sheet:not(.big) .nm-cmp.l0 .nm-grp .nm-pics { font-size: 1.4em; }
.sheet .nm-few.nm-cmp.l0 .nm-grp .nm-pics { font-size: 2.3em; }
.sheet.big .nm-few.nm-cmp.l0:not(.nm-circ) .nm-grp .nm-pics { font-size: 1.8em; }
.nm-cmp.l1 .nm-grp .nm-pics { font-size: 1.1em; }
.sheet:not(.big) .nm-cmp.l1 .nm-grp .nm-pics { font-size: 1.25em; }
.sheet .nm-few.nm-cmp.l1 .nm-grp .nm-pics { font-size: 1.45em; }
.sheet.big .nm-few.nm-cmp.l1:not(.nm-circ) .nm-grp .nm-pics { font-size: 1.1em; }
.nm-few.nm-cmp .nm-ask { font-size: .95em; }
/* a write-on line beside a group is as wide as a box, so either fits beside five pictures */
.nm-grp .lineans { width: 1.9em; }
/* bigger or smaller: a picture cue, the question, the two numbers and the answer */
.q.nm-c2 { justify-content: flex-start; gap: .6em; }
.nm-c2 .nm-ask { flex: 1; min-width: 0; }
.nm-cue { flex: none; display: inline-grid; grid-template-columns: repeat(2, 1.12em); justify-content: center; align-content: center; justify-items: center;
  width: 2.6em; height: 2.45em; font-size: .9em; line-height: 1.1; font-family: var(--emoji); border: 2px solid #111; border-radius: .4em; }
.nm-cue i { font-style: normal; }
.nm-cue i:first-child { grid-column: 1 / -1; }
.nm-cue.one { grid-template-columns: 1.12em; }
.sheet.big .nm-cue { font-size: .76em; }
.nm-or { font-size: .75em; color: #333; }
.nm-two { display: inline-flex; align-items: center; gap: .55em; flex: none; }
.nm-two > b { font-size: 1.2em; min-width: 1.5em; text-align: center; }
.choices.nm-two .choice { font-size: 1.1em; min-width: 1.9em; height: 1.9em; }
/* <, > and =: what the signs mean, once, then the questions */
.nm-key { display: flex; flex-wrap: wrap; justify-content: space-around; gap: .2em 1em; font-size: .8em; padding: .35em .7em;
  border: 2px solid #BDBDBD; border-radius: 12px; }
.nm-key b { font: 700 1.3em/1 var(--ui); margin-right: .2em; }
.q.nm-c3 { justify-content: center; }
.nm-c3 .eq { flex-wrap: nowrap; gap: .4em; }
.sheet:not(.big) .nm-cmp.l3:not(.nm-circ) .nm-c3 .eq { font-size: 1.3em; }
.nm-signs .choice { font-family: var(--ui); }
.lineans.nm-sl { width: 1.9em; }

/* missing numbers: a picture leads each track; above level one, an arrow and a word say which way it counts */
.q.nm-mq { justify-content: flex-start; gap: .8em; }
.q.nm-mq.nm-wrap { flex-wrap: wrap; row-gap: .45em; }
.nm-mq.nm-wrap > .choices { margin-left: auto; }
.nm-trk { display: inline-flex; align-items: center; gap: .35em; flex: none; }
.nm-lead { font-family: var(--emoji); font-size: 1.4em; line-height: 1; }
.nm-mis .track { font-size: 1.3em; gap: .18em; }
.nm-mis.l0 .track { font-size: 1.75em; }
.nm-mis.l0 .nm-lead { font-size: 1.9em; }
.nm-mis.l3 .car { min-width: 2.15em; }
.nm-mis.l3 .track { font-size: 1.15em; }
.sheet:not(.big) .nm-mis.l3 .track { font-size: 1.28em; }
.nm-few.nm-mis .track { font-size: 1.45em; }
.nm-few.nm-mis .nm-lead { font-size: 1.6em; }
.nm-few.nm-mis.l0 .track { font-size: 1.9em; }
.nm-few.nm-mis.l0 .nm-lead { font-size: 2em; }
/* only a few tracks and circling: the track over its choices, both centred and bigger */
.nm-few .q.nm-mq.nm-wrap { flex-direction: column; justify-content: center; }
.nm-few .nm-mq.nm-wrap > .choices { margin-left: 0; font-size: 1.3em; }
/* circling, more tracks: the arrow and word on a line of their own, the choices beside the track */
.q.nm-mq.nm-head { flex-wrap: wrap; row-gap: .2em; padding-top: .4em; padding-bottom: .4em; }
.nm-mq.nm-head > .nm-rule { flex-basis: 100%; }
.nm-mq:is(.nm-head, .nm-wrap) > .nm-rule :is(b, span span) { display: inline; }
.nm-mq.nm-head > .choices { margin-left: auto; }
.nm-circ.l0:not(.nm-few) .track { font-size: 1.45em; }
.sheet.big .nm-circ.l0:not(.nm-few) .track { font-size: 1.25em; }
.nm-circ.l0:not(.nm-few) .nm-mq > .choices { margin-left: auto; }
.sheet.big .nm-mis.nm-circ.l3:not(.nm-few) .track { font-size: 1em; }
.sheet.big .nm-few.nm-mis:not(.l0) .track { font-size: 1.35em; }
.nm-rule { display: inline-flex; align-items: center; gap: .3em; flex: none; font-size: .7em; line-height: 1.2; white-space: nowrap; }
.nm-rule svg { width: 1.6em; height: 1.6em; flex: none; fill: none; stroke: #111; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nm-rule b { display: block; font-size: 1.15em; }
.nm-rule span span { display: block; }
/* Years 3 to 6: a number sentence with one number missing, in the dashed car of the tracks, wide enough to write 3,550 in.
   Circling, the sentence is a little smaller so five-figure choices fit beside it; with bigger text they go under it. */
.nm-sum { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; font-size: 1.2em; white-space: nowrap; }
.nm-sum .car.gap { min-width: 3.2em; }
.nm-circ .nm-sum { font-size: 1.05em; }
.nm-circ .nm-sum .car.gap { min-width: 1.75em; }
.nm-ms > .choices { margin-left: auto; }
.sheet.big .q.nm-ms.nm-wrap { row-gap: .3em; padding-top: .4em; padding-bottom: .4em; }

/* sharing: what to share, an arrow, empty circles to share it into, then the question and its answer */
.q.nm-sq { gap: .35em; }
.nm-say { font-size: .8em; line-height: 1.3; text-wrap: pretty; }
.nm-say .q-em.nm-in { font-size: 1.1em; vertical-align: -.1em; }
.nm-srow { align-self: stretch; display: flex; align-items: center; gap: .55em; }
.nm-pics.nm-share { font-size: 1em; }
.nm-to { width: 1.15em; height: .75em; flex: none; fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-rings { display: flex; flex-wrap: nowrap; gap: .35em; flex: none; }
.nm-ring { width: 2.6em; height: 2.6em; border: 2px dashed #444; border-radius: 50%; flex: none; }
.nm-rings.g4 .nm-ring { width: 2.3em; height: 2.3em; }
.sheet.big .nm-ring { width: 2.3em; height: 2.3em; }
.sheet.big .nm-rings.g4 .nm-ring { width: 2.1em; height: 2.1em; }
.sheet.big .q.nm-sq { gap: .2em; padding-top: .35em; padding-bottom: .35em; }
.nm-each { align-self: stretch; display: flex; align-items: center; gap: .6em; }
.nm-few.nm-shr .nm-pics.nm-share { font-size: 1.3em; }
.nm-few.nm-shr .nm-ring { width: 2.9em; height: 2.9em; }
.nm-few.nm-shr .nm-each .choices { font-size: 1.2em; }
.q.nm-sq2 { gap: .8em; }
.nm-sq2 .nm-say { flex: 1; min-width: 0; }
.nm-then { display: block; }
.nm-shr.l3 .eq { flex-wrap: nowrap; white-space: nowrap; }
.sheet:not(.big) .nm-shr.l3:not(.nm-circ) :is(.eq, .q > .box) { font-size: 1.2em; }
/* Years 3 to 6: an answer and its remainder with r between; then short division set out as a bus stop, a line over the number
   to divide and a bracket before it, its digits spaced for the small carried digits, the answer and remainder above the line */
.nm-shr.l4 .eq { flex-wrap: nowrap; white-space: nowrap; }
.nm-rem { display: inline-flex; align-items: center; gap: .25em; }
.nm-r { font-weight: 700; }
.q.nm-busq { justify-content: center; gap: .45em; }
.nm-busq > .choices { margin-left: auto; }
.nm-bus { display: inline-grid; grid-template-columns: auto auto; align-items: end; font-weight: 700; }
.nm-top { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: .25em; min-height: .9em; padding: 0 0 .25em .3em; }
.nm-top .nm-qb { width: 2.2em; }
.nm-top .nm-rb { width: 1.5em; }
.nm-dv, .nm-dd { grid-row: 2; font-size: 1.3em; line-height: 1.3; }
.nm-dv { grid-column: 1; padding-right: .12em; }
.nm-dd { grid-column: 2; letter-spacing: .45em; padding: .08em 0 0 .3em; border-top: 2.5px solid #111; border-left: 2.5px solid #111; border-top-left-radius: .35em; }
.nm-circ .nm-dd { letter-spacing: .25em; }
.sheet.big .nm-shr.nm-circ.l5 .choice { font-size: .8em; }

/* tens and ones: base-ten blocks, then a tens and ones table */
.nm-tkey { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25em 1.6em; font-size: .78em; padding: .35em .7em;
  border: 2px solid #BDBDBD; border-radius: 12px; }
.nm-tkey > span { display: inline-flex; align-items: center; gap: .45em; }
.nm-blocks { display: block; flex: none; overflow: visible; }
.nm-blocks rect { fill: #fff; stroke: #111; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.nm-blocks path { fill: none; stroke: #111; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.q.nm-tq { justify-content: space-evenly; gap: .8em; }
.nm-bk { display: flex; align-items: flex-end; }
.nm-how { display: inline-flex; flex-direction: column; align-items: center; gap: .3em; flex: none; }
.nm-tq:not(.nm-two-up) .nm-how { flex-direction: row; gap: .7em; }
.nm-how > b { font-size: .8em; }
.nm-tbl { display: inline-flex; }
.nm-tc { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: 0 .3em .1em; }
.nm-tc + .nm-tc { border-left: 2px solid #111; }
.nm-th { align-self: stretch; text-align: center; font-size: .72em; font-weight: 700; border-bottom: 2px solid #111; padding-bottom: .1em; }
.nm-tbl .box { width: 1.8em; height: 1.7em; }
.lineans.nm-tl { width: 1.8em; }
.q.nm-tq.nm-two-up { padding: .55em .55em .5em .75em; gap: .5em; }
.nm-two-up .nm-how > .choices { flex-direction: column; }
.nm-few .nm-how { font-size: 1.3em; }
.nm-mixed .nm-tq { grid-column: 1 / -1; }
.q.nm-split { justify-content: center; }
.nm-split .eq { flex-wrap: nowrap; gap: .3em; }
.nm-split.col { align-items: center; gap: .35em; }
.nm-splits .choice { font-size: .8em; padding: 0 .55em; white-space: nowrap; }
.sheet.big .nm-splits .choice { font-size: .72em; padding: 0 .42em; }
/* Years 3 to 6: hundreds as flats beside the rods and cubes, and a hundreds column in the table; short questions one to a row,
   their choices under them when circling; at Years 5 and 6 a key of what each column is worth, thousands to hundredths */
.nm-tens.l4 .nm-how { flex-direction: column; }
.sheet.big .nm-tens.l4 .nm-th { font-size: .64em; }
.nm-pv .eq { flex-wrap: nowrap; white-space: nowrap; }
.nm-val { font-weight: 400; }
.nm-val u { text-decoration-thickness: .1em; text-underline-offset: .14em; }
.nm-tens.l4 .nm-pv .box { width: 2.6em; }
.nm-tens.l5 .nm-pv .box { width: 2.8em; }
.q.nm-pv.col { align-items: center; gap: .35em; }
.sheet.big .q.nm-pv.col { gap: .25em; padding-top: .4em; padding-bottom: .4em; }
.nm-pvk > .nm-tbl { gap: 0; }
.nm-pvk .nm-tc { gap: .15em; }

/* writing numbers: that many pictures, then the number to go over on handwriting lines */
.wrs.nm-wrs { align-content: space-evenly; flex: 1 0 auto; }
.wr.nm-wr { grid-template-columns: 4.6em minmax(0, 1fr); }
.nm-wpic { display: grid; place-items: center; align-self: center; }
.nm-wrs.l0 .nm-wpic .nm-pics { font-size: 1.2em; }
.nm-wrs.l1 .nm-wpic .nm-pics { font-size: .8em; }
.nm-wrs.l2 .nm-wpic .nm-pics { font-size: .66em; }
.nm-wem { font-size: 1.8em; line-height: 1; }
/* Years 3 to 6: a number given one way, then a handwriting line to write it another way; the number words to use in a word bank
   (a Print Black box, its words in pale frames, because they are copied from), and at Years 5 and 6 a key of the Roman numerals */
.wr.nm-cv { grid-template-columns: minmax(0, 1fr); padding-top: .35em; }
.nm-cvq { font-size: .9em; line-height: 1.3; text-wrap: pretty; }
.nm-cvq .q-em { margin-right: .3em; }
.nm-bank { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .3em; font-size: .75em; padding: .3em .6em; border: 2px solid #111; border-radius: 12px; }
.nm-bank > span { padding: 0 .35em; border: 2px solid #BDBDBD; border-radius: .3em; }
.nm-bank > b { margin-right: .2em; }
.nm-rkey b { font-family: inherit; font-size: 1.1em; }