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

/* ---------- shared: the body, rows, slots, frames ---------- */
/* each body has one part that takes the spare height (a picture, or the list spreading its rows out), never a blank bottom half */
.sh-body:is(.r2-pt, .r2-rcb, .r2-qa, .r2-gp, .r2-op, .r2-ry, .r2-syb, .r2-cvb, .r2-abb) { gap: .45em; }
.sh-body:is(.r2-pt, .r2-rcb, .r2-qa, .r2-gp, .r2-op, .r2-ry, .r2-syb, .r2-cvb, .r2-abb) > * { flex: none; }
.r2-qa > .r2-qs, .r2-gp > .r2-qs, .r2-abb > .r2-qs, .r2-op > :is(.r2-mt, .r2-qs, .r2-wg), .r2-ry > :is(.r2-mt, .r2-qs),
  .r2-syb > .r2-sy, .r2-cvb > .r2-cvs, .r2-rcb > .r2-grid { flex: 1 0 auto; }
.r2-pt > :is(.r2-art, .r2-panel), .r2-rcb > :is(.r2-art, .r2-band) { flex: 1 1 0; min-height: 7em; }
.sheet.big .r2-pt > :is(.r2-art, .r2-panel) { min-height: 5.6em; }

.r2-qs, .r2-wg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5em; align-content: space-evenly; }
.q.r2-q { justify-content: flex-start; gap: .5em; padding: .4em .6em .4em .9em; }
.r2-t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .9em; line-height: 1.28; text-wrap: pretty; }
.r2-q > :is(.r2-tick, .pchoices, .choices, .lineans, .box, .r2-yn) { margin-left: auto; }
.r2-tick { display: inline-block; flex: none; }
.r2-q > .pchoices { gap: .4em; }
/* rows whose answer may need a line of its own: a long line, two lines, or answers to pick that do not fit beside the question */
.r2-col { flex-wrap: wrap; row-gap: .3em; }
.r2-col > .r2-t { flex: 1 1 8em; }
.r2-col > :is(.longline, .r2-lines, .r2-opts) { flex: 1 0 100%; }
.r2-col > .choices { justify-content: flex-end; }
.r2-lines { display: grid; gap: .5em; }
.r2-col > .longline, .r2-lines > .longline { height: 1.2em; }

.r2-frame { border: 2px solid #111; border-radius: .4em; background: #fff; }
.r2-art { position: relative; }
.r2-art > img { position: absolute; inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); object-fit: contain; filter: grayscale(1) contrast(1.3); }

/* the text to read: a pale frame, so it stands apart from the questions */
:is(.r2-qa, .r2-gp) > :is(.r2-story, .r2-facts, .r2-pass) { margin: 0; padding: .4em .7em; border: 2px solid #BDBDBD; border-radius: 14px; }
.r2-story { display: grid; gap: .2em; }
.r2-sl { margin: 0; }
.r2-facts { gap: .25em; }
.r2-facts li { font-size: .88em; }
.r2-qa > .r2-pass { font-size: .82em; line-height: 1.5; }

.r2-bank { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .45em; padding: .3em .6em;
  border: 2px solid #BDBDBD; border-radius: .45em; }
.r2-bk { font-size: .8em; font-weight: 700; margin-right: .35em; }
.r2-bw { border: 2px solid #111; border-radius: 999px; padding: .02em .55em; font-size: .85em; font-weight: 700; white-space: nowrap; }

/* a word with a picture, to circle or to copy (gaps at level 0, rhyme at level 2) */
.r2-pp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3em .4em; }
.choice.r2-pw { display: inline-flex; align-items: center; gap: .25em; height: auto; min-height: 1.75em; padding: .05em .6em .05em .35em; font-size: .8em; font-weight: 400; }
.r2-pw .em { font-size: 1.2em; line-height: 1; }
.r2-pw b { font-weight: 700; }

.r2-key { margin: 0; font: 400 .55em/1.35 var(--ui); color: #444; }
.r2-gone { margin: 0; font-size: .6em; line-height: 1.3; }

/* ---------- 1. talk about the picture ---------- */
.r2-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: center;
  padding: .2em; border: 2px solid #111; border-radius: .4em; background: #fff; container-type: size; }
.r2-panel.r2-p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r2-pc { min-width: 0; min-height: 0; }
.r2-pc .em { display: block; line-height: 1; font-size: 2.6em; font-size: min(34cqh, 20cqw); }
.r2-p4 .r2-pc .em { font-size: min(34cqh, 28cqw); }
.r2-cap { margin: 0; font-size: .85em; line-height: 1.3; text-align: center; text-wrap: balance; }

/* ---------- 2. read and colour: each colour is an outline with its name in it, to read and to colour ---------- */
.r2-sw { display: inline-block; padding: 0 .45em; border: 2px solid #111; border-radius: 999px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.r2-rc.l3 .q.r2-q { padding: .3em .55em .3em .85em; }
.r2-rc.l3 .r2-t { font-size: .85em; }
.r2-band { display: flex; flex-direction: column; padding: .6em; border: 3px solid #111; border-radius: .7em; }
.r2-band > .r2-art { flex: 1 1 0; min-height: 0; }
.r2-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .45em; }
.r2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(3.6em, 1fr); gap: .5em; }
.r2-cb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; min-width: 0; padding: .35em .25em .3em;
  border: 2.5px solid #111; border-radius: .45em; }
.r2-cb .em { font-size: 1.7em; line-height: 1; }
.r2-cb > span:not(.em) { max-width: 100%; font-size: .62em; font-weight: 700; line-height: 1.15; text-align: center; }
.r2-grid .r2-cb .em { font-size: 2.4em; }
.r2-grid .r2-cb > span:not(.em) { font-size: .72em; }

/* ---------- 3. read and answer ---------- */
.r2-yn { flex: none; display: inline-flex; align-items: center; gap: .3em; }
.choice.r2-c { display: inline-flex; align-items: center; gap: .22em; height: auto; min-height: 1.85em; padding: .08em .6em .08em .38em; font-size: .78em; }
.r2-c .em { font-size: 1.05em; line-height: 1; }
.r2-c b { font-weight: 700; }
.r2-trc { display: inline-flex; align-items: center; gap: .22em; }
.r2-trc .em { font-size: .85em; line-height: 1; }
.r2-trc .trace { font-size: 1em; padding: 0 .25em; }
.box.r2-ynbox { width: 2.9em; }
.lineans.r2-ynline { width: 3.2em; }
.r2-qa .r2-qs.l2 .r2-col > .lineans.wide { width: 7em; }
.r2-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .9em; padding-left: .1em; }
.r2-opt { display: inline-flex; align-items: center; gap: .3em; font-size: .85em; line-height: 1.2; }

/* ---------- 4. fill the gap: the words to pick follow the sentence, like the end of a line of text ---------- */
.q.r2-gq { display: block; padding: .3em .7em .35em .95em; }
.r2-gs { display: inline; margin: 0; font-size: .9em; line-height: 1.4; }
.r2-gq > :is(.r2-pp, .choices) { display: inline-flex; vertical-align: middle; margin: 0 0 0 .5em; }
.sheet.big .r2-gp > .r2-facts { padding: .3em .7em; }
.sheet.big .r2-gp > .r2-facts li { font-size: .82em; }
.sheet.big .r2-gq > .choices .choice { min-height: 1.6em; padding: .05em .6em; }
.r2-gp > .r2-qs { gap: .4em; }
.blank.r2-blank { max-width: 100%; }
.r2-first { font-weight: 700; }

/* ---------- 5 and 6. match up: two columns, a dot at each inner end, room between to draw the lines ---------- */
.r2-mt { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; column-gap: 2.6em; row-gap: .7em;
  align-content: space-evenly; align-items: center; padding: 0 .35em; }
.r2-mi { position: relative; display: flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.5em; padding: .3em .9em;
  border: 2px solid #BDBDBD; border-radius: 14px; }
.r2-ml { padding-left: 1.05em; }
.r2-dot { position: absolute; top: 50%; width: .52em; height: .52em; margin-top: -.26em; border-radius: 50%; background: #111; }
.r2-ml .r2-dot { right: -.28em; }
.r2-mr .r2-dot { left: -.28em; }
.r2-ow { font-weight: 700; font-size: 1.05em; line-height: 1.15; white-space: nowrap; }
.r2-mt:is(.n2, .n3) .r2-ow { font-size: 1.2em; }

/* the little line drawings: a box 36 by 26, the topic's picture placed in it */
.r2-od { position: relative; display: inline-block; flex: none; width: 3.6em; height: 2.6em; }
.r2-od > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r2-od path { fill: none; stroke: currentColor; stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.r2-oe { position: absolute; translate: -50% -50%; line-height: 1; }
.r2-oe .em { display: block; line-height: 1; }
.r2-op .r2-mt.l0 .r2-mi { flex-direction: column; gap: .15em; padding: .35em .9em; }
.r2-op .r2-mt.l0 .r2-od { font-size: 1.35em; }
.r2-op .r2-mt.l0.n2 .r2-od { font-size: 1.6em; }
.r2-op .r2-mt.l1 .r2-od { font-size: 1.3em; }
.r2-ob > .lineans, .r2-wq > .lineans { width: 4.8em; }
.r2-oq { flex-wrap: wrap; justify-content: space-between; row-gap: .3em; }
.r2-oh { display: inline-flex; align-items: center; gap: .45em; min-width: 0; }
.r2-oh.r2-ob { margin-left: auto; }
.r2-oq .r2-od { font-size: .85em; }
.r2-ci .r2-od { font-size: .72em; }
.r2-ci .choices.words .choice { font-size: .68em; padding: .1em .45em; }
.r2-wq .r2-t b { font-weight: 700; }

/* ---------- 6. rhyme ---------- */
.r2-ry .r2-mi { flex-direction: column; gap: .1em; }
.r2-ry .r2-mi > .r2-pb { font-size: 1.25em; }
.r2-ry .r2-mt:is(.n2, .n3) .r2-mi > .r2-pb { font-size: 1.5em; }
.r2-rq { flex-wrap: wrap; row-gap: .35em; }
.r2-rq > .r2-t { flex: none; font-size: .8em; }
.r2-rs { flex: 1 1 auto; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; }
.r2-rs > .lineans.wide { flex: 1 0 4.5em; width: auto; }
.r2-rs > .choices { margin-left: auto; }
/* level 2: the line follows “rhymes with”, the words to choose from go under it */
.r2-rh.l2 .r2-rs { display: contents; }
.r2-rh.l2 .r2-rs > .r2-pp { order: 1; flex: 1 0 100%; justify-content: flex-end; }
.r2-rh .r2-pw { font-size: .74em; }

/* ---------- 7. clap the syllables ---------- */
.r2-cards { display: grid; gap: .5em; }
/* --pf sizes the picture and --cw the word; Bigger text keeps them smaller, as its cards are no bigger */
.r2-sy { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; --pf: 2.2em; --cw: 1.4em; }
.sheet.big .r2-sy { --pf: 1.8em; --cw: 1.25em; }
.r2-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em; min-width: 0;
  padding: .45em .55em; border: 2px solid #BDBDBD; border-radius: 14px; }
.r2-sy .r2-card > .r2-pb { font-size: var(--pf); }
.r2-cw { font-weight: 700; font-size: calc(var(--cw, 1.25em) * var(--lw, 1)); line-height: 1.15; text-align: center; overflow-wrap: normal; }
/* a long word is set smaller rather than broken, as a break would look like a clap */
.r2-card.r2-lw { --lw: .84; }
.r2-card.r2-xw { --lw: .74; }
.r2-sd { display: inline-flex; gap: .35em; }
.r2-sd i { display: block; width: .85em; height: .85em; border: 3px solid #111; border-radius: 50%; background: #fff; }
/* many cards, or three: the picture on the left, the word over its answer on the right */
.r2-sy:is(.n3, .n5, .n6, .n7, .n8) .r2-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  column-gap: .6em; row-gap: 0; justify-items: start; align-items: center; padding: .4em .6em .4em .9em; }
.r2-sy:is(.n3, .n5, .n6, .n7, .n8) .r2-card > .r2-pb { grid-area: 1 / 1 / 5 / 2; }
.r2-sy:is(.n3, .n5, .n6, .n7, .n8) .r2-card > .r2-cw { grid-area: 2 / 2; text-align: left; }
.r2-sy:is(.n3, .n5, .n6, .n7, .n8) .r2-card > :not(.q-n, .r2-pb, .r2-cw) { grid-area: 3 / 2; margin-top: .25em; }
.r2-sy.n3 { grid-template-columns: minmax(0, 1fr); --pf: 2.1em; --cw: 1.4em; }
.sheet.big .r2-sy.n3 { --pf: 1.6em; --cw: 1.25em; }
.r2-sy:is(.n5, .n6, .n7) { --pf: 1.75em; --cw: 1.2em; }
.sheet.big .r2-sy:is(.n5, .n6, .n7) { --pf: 1.3em; --cw: 1.05em; }
.r2-sy.n8 { --pf: 1.45em; --cw: 1.05em; }
.sheet.big .r2-sy.n8 { --pf: 1.1em; --cw: .92em; }

/* ---------- 8. sound it out: a dot under each sound, a line under two letters that make one sound ---------- */
.r2-cvs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.r2-card.r2-cv { flex-direction: row; justify-content: flex-start; gap: .7em; padding: .35em .8em .35em 1em; }
.r2-sb { display: inline-flex; align-items: flex-end; gap: .12em; font-size: 1.45em; font-weight: 700; line-height: 1.1; }
.r2-cvs:is(.n2, .n3, .n4) .r2-sb { font-size: 1.8em; }
.r2-g, .r2-dg { position: relative; display: inline-block; padding-bottom: .38em; text-align: center; }
.r2-g::after { content: ""; position: absolute; left: 50%; bottom: 0; width: .24em; height: .24em; margin-left: -.12em; border-radius: 50%; background: #111; }
.r2-dg::after { content: ""; position: absolute; left: .06em; right: .06em; bottom: .07em; height: 3px; border-radius: 2px; background: #111; }
.r2-cv .r2-pb { font-size: 1.15em; }
.r2-cvs:is(.n2, .n3, .n4) .r2-cv .r2-pb { font-size: 1.35em; }
.r2-cv > :is(.r2-cpp, .r2-lbs, .lineans) { margin-left: auto; }
.r2-cpp .pchoice { font-size: 1.15em; }
.r2-lbs { display: inline-flex; gap: .2em; }
.r2-lb { display: inline-grid; place-items: center; width: 1.3em; height: 1.55em; border: 2.5px solid #111; border-radius: .25em; background: #fff; }
.r2-lb.w2 { width: 1.9em; }
.r2-lb .trace { border: 0; padding: 0; line-height: 1; }
.r2-cv > .lineans { width: 4.5em; }

/* ---------- 9. ABC order ---------- */
.r2-abc { display: grid; gap: .3em; padding: .4em .5em; border: 2px solid #BDBDBD; border-radius: 14px; }
.r2-row { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: .18em; }
.r2-lt { position: relative; display: grid; place-items: center; min-width: 0; height: 1.35em; border: 2px solid #BDBDBD; border-radius: .3em;
  font-weight: 700; line-height: 1; }
.r2-abc.l0 .r2-lt { height: 1.6em; }
.r2-lt.r2-gap { border: 3px solid #111; background: #fff; }
.r2-lt.r2-gl { border-width: 0 0 3px; border-radius: 0; }
.r2-gn { position: absolute; top: .12em; left: .15em; font: 700 .52em/1 var(--ui); font-style: normal; }
.r2-aw { font-size: 1.1em; font-weight: 700; }
.r2-f { display: inline-block; padding: 0 .12em; margin-right: .05em; border: 2px solid #111; border-radius: .2em; line-height: 1.1; }
.r2-al .choice { font-size: .95em; font-weight: 700; min-width: 1.75em; }