/* aitism learn: more Numbers activities. Every class starts .n2-; sizes in em so --k and Bigger text scale them. */

/* shared: the topic's pictures are emoji; small labels over or beside an answer; the arrow between things */
.n2-pin, .n2-tf > span, .n2-card i, .n2-dots, .n2-scat, .n2-ke, .n2-lead, .n2-mpic, .n2-g, .n2-pairs, .n2-cpic, .n2-num i, .n2-arr { font-family: var(--emoji); font-style: normal; }
.n2-dots i, .n2-scat i, .n2-g i, .n2-pr i, .n2-arr i { font-style: normal; text-align: center; }
.sheet.bw :is(.n2-pin, .n2-tfs, .n2-card i, .n2-dots, .n2-scat, .n2-ke, .n2-lead, .n2-mpic, .n2-g, .n2-pairs, .n2-cpic, .n2-num i, .n2-arr) {
  filter: contrast(1.35) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000); }
.n2-k { font: 700 .6em/1.15 var(--ui); white-space: nowrap; }
.n2-ea { display: inline-flex; align-items: center; gap: .35em; flex: none; }
.n2-arrow { display: block; width: 1.1em; height: .65em; flex: none; overflow: visible; }
.n2-arrow path { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.n2-qm { font-weight: 700; }
.eq .n2-qm { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.4em; border: 3px dashed #111; border-radius: 8px; }
.n2-say { font-size: .8em; line-height: 1.3; text-wrap: pretty; }

/* numberline: the topic's picture over the start, the line with its numbers, and where it lands */
.q.n2-nlq { padding-top: .4em; padding-bottom: .4em; }
.q.n2-nlq.col { align-items: stretch; gap: .2em; }
.n2-row { display: flex; align-items: flex-end; gap: .7em; min-width: 0; }
.n2-nlq:not(.col) > .n2-row { flex: 1; }
.n2-nl { position: relative; display: block; flex: 1; min-width: 0; padding-top: 1.25em; }
.n2-nl.tall { padding-top: 1em; }
.n2-nl svg { display: block; width: 100%; height: 1.9em; overflow: visible; }
.n2-nl.tall svg { height: 1.75em; }
.n2-nl path { fill: none; stroke: #111; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.n2-nl path.n2-hop { stroke-width: 2.5px; }
.n2-pin { position: absolute; top: 0; translate: -50% 0; font-size: 1.05em; line-height: 1.15; }
.n2-nl.tall .n2-pin { font-size: .85em; }
.n2-lbl { display: flex; margin-top: .15em; font: 700 .62em/1.1 var(--ui); }
.n2-lbl > span { flex: 1 1 0; min-width: 0; text-align: center; }
.n2-nls.l2 .n2-lbl { font-size: .5em; }
.n2-land { flex: none; display: flex; flex-direction: column; align-items: center; gap: .2em; }
/* to 20 with bigger text and choices: the line takes the whole width and the choices go under it */
.sheet.big .n2-nls.n2-circ.l2 .n2-row { flex-wrap: wrap; justify-content: flex-end; row-gap: .3em; }
.sheet.big .n2-nls.n2-circ.l2 .n2-nl { flex: 1 0 100%; }
.sheet.big .n2-nls.n2-circ.l2 .n2-land { flex-direction: row; gap: .4em; }

/* tenframe: line-drawn frames of ten, filled with the topic's pictures */
.q.n2-tq { justify-content: center; gap: .7em; }
.q.n2-tq.col { align-items: center; gap: .45em; }
.n2-tfs { display: flex; gap: .35em; flex: none; }
.n2-tf { --c: 1.55em; display: grid; grid-template-columns: repeat(5, var(--c)); grid-auto-rows: var(--c); border: 3px solid #111; border-radius: 6px; flex: none; }
.n2-tf > span { display: grid; place-items: center; border-right: 2px solid #111; border-bottom: 2px solid #111; font-size: calc(var(--c) * .6); line-height: 1; }
.n2-tf > span:nth-child(5n) { border-right: 0; }
.n2-tf > span:nth-child(n+6) { border-bottom: 0; }
.n2-tfq:is(.l2, .l3) .n2-tf { --c: 1.2em; }
.sheet.big .n2-tfq .n2-tf { --c: 1.4em; }
.sheet.big .n2-tfq:is(.l2, .l3) .n2-tf { --c: 1em; }
.n2-tfa { display: flex; align-items: center; gap: .3em; flex: none; }
.n2-circ .n2-tfa:has(> .eq) { flex-direction: column; gap: .35em; }

/* order: number cards with the topic's pictures, an arrow, and the boxes or lists in order */
.q.n2-oq { justify-content: center; gap: .5em; }
.q.n2-oq.col { align-items: center; gap: .35em; }
.n2-cards { display: flex; align-items: stretch; gap: .3em; flex: none; }
.n2-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .1em; min-width: 2.1em;
  padding: .15em .25em .1em; border: 2px solid #111; border-radius: 10px; }
.n2-card i { font-size: .85em; line-height: 1.1; }
.n2-card b { font-size: 1.05em; line-height: 1.1; }
.n2-dots { display: flex; flex-wrap: wrap; justify-content: center; font-size: .62em; line-height: 1.12; }
.n2-dots i { width: 1.12em; }
.n2-to { display: flex; flex-direction: column; align-items: center; gap: .15em; flex: none; min-width: 0; }
.n2-dir { display: flex; align-items: center; gap: .3em; font: 700 .55em/1.2 var(--ui); white-space: nowrap; }
.n2-dir .n2-arrow { width: 1.6em; height: .9em; }
.n2-boxes { display: flex; gap: .25em; }
.n2-boxes .lineans { width: 1.9em; }
.n2-boxes.n2-wide :is(.box, .lineans) { width: 2.3em; }
.choices.n2-seqs { flex-wrap: wrap; justify-content: center; gap: .3em .4em; }
.n2-seqs .choice { font-size: .72em; height: auto; min-height: 1.75em; padding: .1em .6em; white-space: nowrap; }
.sheet.big .n2-ord:not(.n2-stack) .n2-cards { font-size: .85em; }
.sheet.big .n2-ord.l0 .n2-dots { font-size: .5em; }
.sheet.big .n2-ord:not(.n2-stack) .q.n2-oq { gap: .4em; }
.sheet.big .n2-ord .n2-boxes { gap: .2em; }

/* estimate: a scatter of the topic's pictures, then a guess and a count. The cards share out the page's spare height
   and each scene grows into it, as wide as its card; every picture sits somewhere in its own cell, placed in %. */
.qs.n2-est { align-content: stretch; }
.q.n2-esq { align-items: center; gap: .5em; padding-top: .6em; padding-bottom: .6em; }
.n2-scat { position: relative; display: block; flex: 1 0 auto; align-self: stretch; line-height: 1.15; }
.n2-scat i { position: absolute; width: 1.2em; height: 1.15em; }
.n2-eans { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4em 1.1em; align-self: stretch; }
.n2-ke { font-size: .95em; line-height: 1; }

/* dice: line-drawn dice, then the sum; the last question is a story */
.q.n2-dq { justify-content: flex-start; gap: .7em; }
.q.n2-dq.col { align-items: stretch; gap: .35em; }
.n2-lead { font-size: 1.2em; line-height: 1; flex: none; }
.n2-drow { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45em; min-width: 0; }
.n2-dice { display: inline-flex; align-items: center; gap: .3em; flex: none; }
.n2-die { display: block; width: 1.9em; height: 1.9em; flex: none; }
.n2-die rect { fill: #fff; stroke: #111; stroke-width: 2.2; }
.n2-die circle { fill: #111; }
.n2-draw { width: 2.4em; height: 2.4em; border: 3px dashed #111; border-radius: 10px; flex: none; }
.n2-dd { display: flex; align-items: center; justify-content: center; gap: .6em; }
.n2-circ .n2-dd { flex-direction: column; align-items: flex-end; gap: .3em; }
.sheet.big .n2-dce .n2-die { width: 1.75em; height: 1.75em; }

/* machine: a line-drawn machine with its rule, and a table of what goes in and comes out */
.q.n2-mq { justify-content: center; gap: .9em; }
.n2-mc { display: flex; flex-direction: column; align-items: center; gap: .1em; flex: none; width: 4.2em; }
.n2-mach { position: relative; display: block; width: 3.2em; height: 3.5em; }
.n2-mach svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.n2-mach svg :is(path, rect) { fill: #fff; stroke: #111; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.n2-mach svg path:last-child { fill: none; }
.n2-mpic { position: absolute; left: 50%; top: 2%; translate: -50% 0; font-size: .62em; line-height: 1; }
.n2-mrule { position: absolute; left: 6%; right: 6%; top: 31%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1.05; white-space: nowrap; }
.n2-mach.two .n2-mrule { font-size: .78em; }
.n2-mrule .n2-qm { font-size: 1.3em; }
.n2-cap { font: 700 .5em/1.15 var(--ui); text-align: center; }
.n2-io { display: inline-grid; flex: none; border: 2.5px solid #111; border-radius: 8px; }
.n2-io.c4 { grid-template-columns: auto repeat(4, 2.35em); }
.n2-io.c5 { grid-template-columns: auto repeat(5, 2.35em); }
.n2-io > span { display: grid; place-items: center; min-height: 1.75em; padding: .12em .1em; border-left: 2px solid #111; font-weight: 700; }
.n2-io.c4 > :nth-child(-n+5), .n2-io.c5 > :nth-child(-n+6) { border-bottom: 2px solid #111; }
.n2-io > .n2-h { border-left: 0; padding: 0 .45em; font: 700 .62em/1 var(--ui); }
.n2-io .box { width: 1.9em; height: 1.45em; }
.n2-io .lineans { width: 1.9em; height: 1.1em; }
.choices.n2-stk { flex-direction: column; align-items: center; gap: .12em; }
.n2-stk .choice { font-size: .72em; }
.n2-side { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; flex: none; }
.n2-ruleis .n2-wide .box { width: 3.2em; }
.n2-ruleis .n2-wide .lineans { width: 3.6em; }
.n2-rules .choice { padding: 0 .4em; white-space: nowrap; }

/* skip: tracks counting in steps, with a group of the topic's pictures for each step */
.q.n2-skq { justify-content: space-evenly; gap: .55em; }
.n2-skt { display: flex; align-items: flex-end; gap: .2em; flex: none; }
.n2-sc { display: flex; flex-direction: column; align-items: center; gap: .12em; }
.n2-sc > .car { align-self: stretch; }
.n2-g { display: flex; flex-wrap: wrap; justify-content: center; line-height: 1.1; }
.n2-g i { width: 1.12em; }
.n2-g.s2 { font-size: .7em; width: 2.24em; }
.n2-skip.l0 .n2-g.s2 { font-size: .8em; }
.n2-g.s3 { font-size: .58em; width: 3.36em; }
.n2-g.s4 { font-size: .58em; width: 2.24em; }
.n2-g.s5, .n2-g.s10 { font-size: .55em; width: 5.6em; }
.n2-rule { display: flex; flex-direction: column; align-items: center; gap: .15em; flex: none; }
.n2-rw { display: flex; align-items: center; gap: .2em; }
.n2-rw svg { width: .9em; height: .9em; flex: none; overflow: visible; }
.n2-rw path { fill: none; stroke: #111; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.n2-rw > span { display: flex; flex-direction: column; font: 700 .58em/1.1 var(--ui); white-space: nowrap; }
.n2-rw > span > span { font-weight: 400; }
.n2-trk { flex: none; }
.n2-trk .car { font-size: .88em; }
.sheet.big .n2-skip.n2-circ .n2-trk .car { font-size: .8em; }

/* oddeven: two rows of pictures to pair up; then sorting numbers by their last digit */
.q.n2-oeq { gap: .6em; }
.n2-pairs { display: flex; flex-direction: column; gap: .8em; flex: none; font-size: .9em; line-height: 1.15; }
.n2-pr { display: flex; gap: .25em; }
.n2-pr i { width: 1.25em; }
.n2-oa { display: flex; flex-direction: column; align-items: flex-end; gap: .35em; flex: none; }
.n2-oes.n2-circ .n2-oa .n2-ea { flex-direction: column; gap: .12em; }
.n2-ticks { display: flex; gap: .9em; }
.n2-ticks .n2-k { font-size: .72em; }
.n2-tb { display: block; width: 1.25em; height: 1.25em; border: 3px solid #111; border-radius: 6px; flex: none; }
.sheet.big .n2-oes:is(.l0, .l1) .n2-pairs { font-size: .8em; }
.n2-key { border: 2px solid #111; border-radius: 12px; padding: .3em .7em; font-size: .72em; line-height: 1.3; text-wrap: pretty; }
.q.n2-oset { align-items: stretch; gap: .4em; }
.n2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .25em; }
.n2-cpic { font-size: 1em; line-height: 1; margin-right: .2em; }
.n2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.n2-col { display: flex; flex-direction: column; align-items: center; gap: .25em; border: 2px solid #111; border-radius: 10px; padding: .25em .35em .4em; min-width: 0; }
.n2-col > .n2-k { font: 700 .8em/1.1 var(--kidfont); }
.n2-cb { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .25em; }
.n2-cb .lineans { width: 2em; }
.q.n2-onum { gap: .4em; }
.n2-num { display: inline-flex; align-items: center; gap: .2em; flex: none; }
.n2-num i { font-size: .8em; line-height: 1; }
.n2-num b { font-size: 1.1em; }
.sheet.big .n2-onum .choices.words .choice { padding: .1em .45em; }

/* arrays: rows of one picture, and the sums they make */
.q.n2-aq { gap: .7em; }
.n2-arr { display: grid; gap: .12em .04em; line-height: 1.12; flex: none; }
.n2-alines { display: flex; flex-direction: column; align-items: flex-end; gap: .45em; min-width: 0; }
.n2-alines .eq { justify-content: flex-end; }
.n2-w { font-size: .8em; font-weight: 400; white-space: nowrap; }
.sheet.big .n2-ars.n2-circ .eq { font-size: .95em; }