/* aitism learn: more Time, money, shapes activities. Every class starts .m2-; sizes in em so --k and Bigger text scale them.
   Print Black on white, line art in SVG; dashed only for a gap to fill or an edge at the back of a 3D shape. */

/* shared */
/* pictures keep their size on paper with Bigger text, so the words get the room */
.sheet.big .m2-pap { font-size: .82em; }
.m2-ask { font-weight: 700; font-size: .8em; line-height: 1.25; text-wrap: pretty; }
.m2-note { font-size: .66em; line-height: 1.35; text-wrap: pretty; }
.m2-bank { font-size: .62em; line-height: 1.35; text-wrap: pretty; }
.m2-pcs { flex-wrap: wrap; gap: .3em .45em; flex: none; }
.m2-pcs .pchoice { font-size: .9em; }
.m2-amt { display: inline-flex; align-items: center; gap: .15em; font-weight: 700; flex: none; }
.m2-span { grid-column: 1 / -1; }
.m2-chip { font-weight: 700; }
.m2-chip .em { font-size: 1.1em; line-height: 1; }
.box.m2-wb { width: 5.6em; }
.lineans.m2-wl { width: 6em; }
/* a question and its answer share a line when they fit; a long answer goes under the question, on the right */
:is(.q.m2-cq, .q.m2-wq, .q.m2-tq, .q.m2-sq:not(.col), .q.m2-gq, .q.m2-vq) { flex-wrap: wrap; row-gap: .3em; padding-top: .4em; padding-bottom: .4em; }
:is(.q.m2-cq, .q.m2-wq, .q.m2-tq, .q.m2-sq:not(.col), .q.m2-gq, .q.m2-vq) > .m2-ask { flex: 1 1 12em; min-width: 0; }
:is(.q.m2-cq, .q.m2-wq, .q.m2-tq, .q.m2-sq:not(.col), .q.m2-gq, .q.m2-vq) > .m2-ask + * { margin-left: auto; }
/* day, time and place words to circle */
:is(.choices.words.m2-dw, .choices.words.m2-tw, .choices.words.m2-gcw, .choices.words.m2-pw, .choices.words.m2-hw) { gap: .3em; }
:is(.choices.words.m2-dw, .choices.words.m2-tw, .choices.words.m2-gcw, .choices.words.m2-pw, .choices.words.m2-hw) .choice { font-size: .7em; padding: .05em .5em; min-height: 1.65em; white-space: nowrap; }

/* calendar: a month, Monday first */
.m2-cal { flex: none; }
.m2-cm { font-weight: 700; font-size: .8em; line-height: 1.2; text-align: center; margin-bottom: .2em; }
.m2-cg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.m2-ch { font: 700 .5em/1.2 var(--ui); text-align: center; padding-bottom: .25em; overflow-wrap: normal; }
.m2-cd, .m2-cx { height: 1.68em; }
.m2-cd { position: relative; display: grid; place-items: center; border: 2px solid #111; border-radius: .2em; background: #fff; line-height: 1; }
.m2-cd > b { font-size: .8em; }
.m2-cp > b { position: absolute; top: .18em; left: .25em; font-size: .55em; }
.m2-cp .em { font-size: 1.12em; line-height: 1; }
.qs.m2-cqs { gap: .5em; }

/* days of the week: two rows of tiles, Monday to Thursday, then Friday to Sunday */
.q.m2-wk { gap: .35em; }
.m2-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em; align-self: stretch; }
.m2-day { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .25em; min-width: 0;
  border: 2px solid #111; border-radius: .3em; padding: .3em .2em .25em; text-align: center; }
.m2-day > b { font-size: .66em; line-height: 1.3; }
.m2-dp { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.m2-dp .em { font-size: 1.2em; }
.m2-dn { font-size: .5em; line-height: 1.15; margin-top: .2em; }
.choices.words.m2-two { flex-direction: column; flex-wrap: nowrap; align-self: stretch; gap: .2em; }
.choices.words.m2-two .choice { font-size: .62em; padding: .05em .3em; min-height: 1.6em; }
.box.m2-dbox, .lineans.m2-dline { width: 4.6em; max-width: 100%; }
.lineans.m2-dline { height: 1.5em; }

/* my day timeline: 7 in the morning to 7 in the evening */
.m2-tlw { flex: none; padding: 0 1.1em; }
.m2-tl { position: relative; height: 8em; }
.m2-tl > * { position: absolute; }
.m2-ax { left: 0; right: 0; top: 72.5%; height: 3px; margin-top: -1px; background: #111; }
.m2-tk { top: 72.5%; width: 2px; height: .5em; margin-left: -1px; background: #111; }
.m2-tk.m2-hf { height: .3em; }
.m2-hl { top: 80%; translate: -50% 0; font: 700 .55em/1 var(--ui); }
.m2-br { top: 88%; height: .3em; border: 2px solid #111; border-top: 0; border-radius: 0 0 .15em .15em; }
.m2-bl { top: 92.5%; translate: -50% 0; font: 700 .52em/1 var(--ui); white-space: nowrap; }
.m2-bl.m2-end { translate: none; }
.m2-ev { display: flex; flex-direction: column; align-items: center; translate: -50% 0; max-width: 3.4em; line-height: 1; text-align: center; }
.m2-ev.t0 { bottom: 2.65em; }
.m2-ev.t1 { bottom: 5.3em; }
.m2-ev::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; margin-left: -1px; height: .45em; background: #111; }
.m2-ev.t1::after { height: 3.1em; }
.m2-ev .em { font-size: 1.3em; }
.m2-ew { font-size: .5em; line-height: 1.1; margin-top: .15em; }
.qs.m2-tqs { gap: .5em; }
/* shop: stickers with price tags, UK coins as line art */
.m2-shelf { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .4em .6em; flex: none;
  border: 2px solid #BDBDBD; border-radius: 14px; padding: .4em .6em; }
.m2-good { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .35em; align-items: center; min-width: 0; }
.m2-good .pbox { grid-row: span 2; }
.m2-gw { font-size: .6em; line-height: 1.15; align-self: end; }
.m2-tag { display: block; flex: none; overflow: visible; align-self: start; margin-top: .1em; }
.m2-tag path, .m2-tag circle { fill: #fff; stroke: #111; stroke-width: 3; stroke-linejoin: round; }
.m2-tag text, .m2-n5 text { font-family: var(--kidfont); font-weight: 700; fill: #111; text-anchor: middle; dominant-baseline: central; }
.m2-coins { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .42em; min-width: 0; }
.m2-coin, .m2-n5 { display: block; flex: none; overflow: visible; }
.m2-co > * { fill: #fff; stroke: #111; stroke-linejoin: round; }
.m2-rim, .m2-rim > *, .m2-ring { fill: none; stroke: #111; }
.m2-cv { font-family: var(--kidfont); font-weight: 700; fill: #111; text-anchor: middle; dominant-baseline: central; }
.m2-n5 rect { fill: #fff; stroke: #111; stroke-width: 3; }
.m2-n5 .m2-ni { stroke-width: 1.5; }
.m2-pay { display: inline-flex; align-items: center; gap: .5em; flex: none; }
.q.m2-sc { gap: .35em; }
.qs.m2-sqs { gap: .5em; }

/* where is it: a little scene for each sentence */
.qs.m2-pqs { gap: .5em; }
.q.m2-pq { justify-content: flex-start; gap: .7em; padding-top: .35em; padding-bottom: .35em; }
.m2-scene { position: relative; display: block; width: 5em; height: 3em; flex: none; line-height: 1; }
.m2-sv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m2-sv path { fill: #fff; stroke: #111; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.m2-it { position: absolute; translate: -50% -50%; font-size: 1em; }
.m2-it.m2-sm { font-size: .8em; }
.m2-ps { display: flex; flex-direction: column; align-items: flex-start; gap: .3em; flex: 1; min-width: 0; }
.m2-sen { font-size: .8em; font-weight: 700; line-height: 1.45; text-wrap: pretty; }
.blank.m2-pbl { width: 3.2em; }
.blank.m2-pbl.m2-bw { width: 6.6em; }
/* level 3: a 3 by 3 grid with the rows and columns named */
.m2-g3w { display: flex; justify-content: center; flex: none; }
.m2-g3 { display: grid; grid-template-columns: auto repeat(3, 3.7em); align-items: center; justify-items: center; }
.m2-gh { font: 700 .6em/1.2 var(--ui); padding: .2em .4em; }
.m2-gh.m2-gr { justify-self: end; }
.m2-gc { width: 3.7em; height: 3.1em; margin: -1px; border: 2px solid #111; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.m2-gc .em { font-size: 1.5em; }
.m2-gn { font-size: .5em; line-height: 1.1; margin-top: .2em; text-align: center; max-width: 7em; }
.qs.m2-gqs { gap: .5em; }

/* 3D shapes: solid lines at the front, dashed at the back */
.m2-sol { display: block; overflow: visible; }
.m2-sol path { fill: none; stroke: #111; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.m2-sol .m2-hid { stroke-dasharray: 6 5; stroke-linecap: butt; }
.m2-obank { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .75em; flex: none; border: 2px solid #111; border-radius: 14px; padding: .3em .6em; }
.m2-obank > b { font-size: .62em; }
.m2-oi { display: inline-flex; align-items: center; gap: .25em; }
.m2-oi > span { font-size: .62em; font-weight: 700; }
.m2-om { width: 1.5em; height: 1.5em; flex: none; }
.m2-sol.m2-om path { stroke-width: 5; }
.m2-sw { display: block; flex: none; padding-top: 1.1em; }
.m2-sb { position: relative; display: block; width: 3.2em; height: 3.2em; }
.m2-sb .m2-sol { width: 100%; height: 100%; }
.m2-se { position: absolute; translate: -50% -88%; font-size: 1.2em; line-height: 1; }
.m2-sw.m2-os { padding-top: .85em; }
.m2-os .m2-sb { width: 2.4em; height: 2.4em; }
.m2-os .m2-se { font-size: 1em; }
.m2-os .m2-sol path { stroke-width: 3.5; }
.q.m2-oc { justify-content: flex-start; gap: .5em; padding-left: .7em; }
.m2-ot { display: flex; flex-direction: column; align-items: flex-start; gap: .3em; flex: 1; min-width: 0; }
.choices.words.m2-names { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .2em; max-width: 100%; }
.choices.words.m2-names .choice { font-size: .64em; padding: .05em .55em; min-height: 1.6em; text-align: center; text-wrap: balance; }
.m2-or .choices.words.m2-names { flex-direction: row; flex-wrap: wrap; }
.q.m2-or { display: grid; grid-template-columns: auto minmax(0, 1fr) 6.2em; align-items: center; gap: .3em .6em; padding-top: .3em; padding-bottom: .35em; }
.q.m2-or3 { grid-template-columns: 4.6em repeat(3, minmax(0, 1fr)); }
.m2-oq { display: flex; flex-direction: column; align-items: center; gap: .2em; min-width: 0; }
.m2-oq > b { font-size: .62em; }
.m2-oq .choices:not(.words) .choice { font-size: .82em; }
.m2-oname { display: flex; flex-direction: column; align-items: center; gap: .1em; min-width: 0; }
.m2-oname > b { font-size: .58em; line-height: 1.15; text-align: center; text-wrap: balance; }
.qs.m2-ors { gap: .5em; }
.m2-on { display: flex; align-items: center; min-width: 0; }

/* heavier or lighter: balance scales, then a kitchen scale with a dial */
.qs.m2-wrs { gap: .5em; }
.q.m2-wr { justify-content: flex-start; gap: .7em; padding-top: .35em; padding-bottom: .35em; }
.m2-bals { display: flex; align-items: center; gap: .4em; flex: none; }
.m2-bal { position: relative; display: block; width: 5.4em; flex: none; line-height: 1; }
.sh-body.m2-wtb:is(.l0, .l1) .m2-bal { width: 6.4em; }
.m2-bal svg { display: block; width: 100%; height: auto; overflow: visible; }
.m2-bal svg :is(path, rect, circle) { fill: #fff; stroke: #111; stroke-width: 3; stroke-linejoin: round; }
.m2-bal svg .m2-str { fill: none; stroke-width: 2; }
.m2-bi { position: absolute; translate: -50% -96%; font-size: 1.35em; }
.m2-wa { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; flex: 1; min-width: 0; }
.qs.m2-wds { gap: .5em .6em; }
.q.m2-wd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; justify-items: start; gap: .4em .5em; padding-left: .7em; }
.m2-wd .m2-dial { grid-row: 1 / 3; }
.m2-dlab { font-size: .7em; font-weight: 700; line-height: 1.2; align-self: end; text-wrap: balance; }
.m2-wd > :last-child { align-self: start; }
.m2-dial { position: relative; display: block; width: 5.4em; flex: none; line-height: 1; }
.m2-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.m2-dial svg :is(path, rect, circle) { fill: #fff; stroke: #111; stroke-width: 2.5; stroke-linejoin: round; }
.m2-dial svg .m2-tick { fill: none; stroke-width: 2; }
.m2-dial svg .m2-ptr { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.m2-dial svg .m2-hub { fill: #111; stroke: none; }
.m2-dv { font: 700 10px var(--kidfont); fill: #111; stroke: #fff; stroke-width: 3; paint-order: stroke; text-anchor: middle; dominant-baseline: central; }
.m2-di { position: absolute; left: 50%; top: 26.15%; translate: -50% -96%; font-size: 1.3em; }
.choices.words.m2-kg { flex-direction: column; flex-wrap: nowrap; gap: .2em; }
.choices.words.m2-kg .choice { font-size: .7em; padding: .05em .55em; min-height: 1.65em; white-space: nowrap; }
.q.m2-wcmp:not(.m2-span) { flex-direction: column; align-items: flex-start; justify-content: center; }

/* full or empty: glasses, bottles and jugs */
.m2-vw { position: relative; display: block; width: 5em; aspect-ratio: 1; flex: none; line-height: 1; }
.m2-vw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m2-ves { fill: none; stroke: #111; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.m2-wat { fill: #D6E4F0; stroke: none; }
.m2-wline { fill: none; stroke: #111; stroke-width: 2.5; }
.m2-mk { fill: none; stroke: #111; stroke-width: 2; }
.m2-ml { font: 700 10px var(--kidfont); fill: #111; stroke: #fff; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; text-anchor: start; dominant-baseline: central; }
.m2-ml.m2-mu { text-anchor: middle; }
.m2-vs { position: absolute; translate: -50% -50%; font-size: .9em; }
.q.col.m2-vc { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-evenly; gap: .3em .5em; }
.m2-vc .choices.words.m2-fw { flex-direction: column; flex-wrap: nowrap; gap: .2em; }
.choices.words.m2-fw .choice { font-size: .7em; padding: .05em .55em; min-height: 1.65em; white-space: nowrap; }
.m2-vc .choices.words.m2-fw .choice { font-size: .66em; }
.qs.m2-vrs { gap: .5em; }
.q.m2-vr { justify-content: space-around; padding-top: .4em; padding-bottom: .4em; }
.m2-vo { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.m2-vr .m2-vw { width: 4.6em; }
.q.col.m2-vm { align-items: center; gap: .35em; }
.m2-vw.m2-vbig { width: 5.4em; }
.qs.m2-v2 .m2-vw.m2-vbig { width: 7em; }
.m2-vls { display: flex; flex-direction: column; gap: .3em; align-self: stretch; }
.m2-vl { display: flex; align-items: center; gap: .35em; min-width: 0; }
.m2-vl > b { font-size: .62em; line-height: 1.2; }
.m2-vq .m2-vl > b { font-size: .7em; }
.choices.words.m2-ml3 .choice { font-size: .7em; padding: .05em .4em; min-height: 1.65em; }
.qs.m2-vms { gap: .5em .6em; }

/* tally charts: a field of pictures to count, a table, then a bar chart */
.sh-body.m2-tlyb { justify-content: space-evenly; }
.m2-scat { position: relative; flex: none; border: 2px solid #BDBDBD; border-radius: 14px; line-height: 1; }
.m2-scat .em { position: absolute; translate: -50% -50%; font-size: var(--pe); }
.m2-key { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .8em; font-size: .64em; line-height: 1.3; padding: 0 .3em; }
.m2-kk { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.m2-kk svg { display: block; flex: none; height: 1.5em; overflow: visible; }
.m2-kk .m2-t1 { width: .5em; }
.m2-kk .m2-t5 { width: 2em; }
.m2-kk path { fill: none; stroke: #111; stroke-width: 3; stroke-linecap: round; }
.q.m2-tab { flex: none; padding-top: .4em; padding-bottom: .45em; }
.m2-trs { flex: 1; display: grid; grid-template-columns: auto auto minmax(var(--tw), 1fr) auto; align-items: center; gap: .3em .5em; }
.m2-trs.m2-t0 { grid-template-columns: auto auto 1fr auto; }
.m2-th { font: 700 .55em/1.2 var(--ui); text-align: center; }
.m2-tp .em { font-size: 1.2em; line-height: 1; }
.m2-yw { font-size: .7em; font-weight: 700; line-height: 1.15; }
.m2-tbx { display: flex; gap: .15em; }
.m2-tbx i { display: block; width: 1.1em; height: 1.1em; border: 2px solid #111; border-radius: .15em; }
.m2-tc { display: block; height: 1.6em; border: 2px solid #111; border-radius: .3em; }
.m2-tt { display: flex; justify-content: center; }
.m2-yqs { display: flex; gap: .6em; align-items: stretch; flex: none; }
.m2-yqs > .q { flex: 1 1 0; min-width: 0; }
.q.m2-yq { justify-content: center; gap: .35em; }
.m2-yqs.m2-ycol { flex-direction: column; flex: 1; min-width: 0; }
.m2-yqs.m2-ycol > .q { flex: 1 1 auto; }
.m2-trow { display: flex; gap: .6em; align-items: stretch; flex: none; }
.q.m2-bq { flex: none; align-items: center; justify-content: center; padding: .5em .7em .4em .9em; }
.m2-bar { display: flex; align-items: flex-end; gap: .3em; }
.m2-bax { display: flex; flex-direction: column; align-items: flex-end; padding-top: 2px; }
.m2-bax > span { display: flex; align-items: center; height: .6em; }
.m2-bax > .m2-bft { height: 1.4em; }
.m2-bax b { font: 700 .5em/1 var(--ui); }
.m2-bcol { display: flex; flex-direction: column; align-items: center; }
.m2-bbs { display: flex; flex-direction: column; width: 1.6em; border: 2px solid #111; border-bottom: 0; }
.m2-bbs i { display: block; height: .6em; border-bottom: 2px solid #111; }
.m2-bft { display: grid; place-items: center; height: 1.4em; line-height: 1; }
.m2-bft .em { font-size: 1.1em; }