/* aitism learn: more What will happen and Day plan activities. Every class starts .l2-; sizes in em so --k and Bigger text scale them.
   The pictures in tiles, the board panels and the cards are the wave-1 .lf- parts (acts-life.css), reused as they are. */

/* ---------- shared parts ---------- */
/* the reward at the foot of a sheet: its picture and "Then: …" in a ring of the line colour, like the end of a route */
.l2-end { flex: none; display: flex; align-items: center; gap: .4em; padding: .2em .4em; border: .12em solid var(--line); border-radius: .45em; min-width: 0; }
.l2-te { --T: var(--Te); }
.l2-et { flex: 1; min-width: 0; font-size: var(--fe); line-height: 1.22; }
.l2-tick { flex: none; }
/* lines to write on */
.l2-ln { display: block; height: var(--LH, 1.8em); border-bottom: 2px solid #111; }
.l2-arr { align-self: center; justify-self: center; width: 1.5em; height: 1.5em; fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* a face when the feelings faces are not loaded */
.l2-nf { display: inline-grid; place-items: center; width: var(--F, 1.4em); height: var(--F, 1.4em); }
.l2-nf .em { font-size: calc(var(--F, 1.4em) * .8); line-height: 1; }
/* a coping line set across its whole box, with plain wrapping, so its height can be worked out before it is drawn */
.l2-xr > .cope, .l2-q .cope, .l2-wr > .cope, .l2-wt .cope, .l2-kr > .cope { justify-self: start; display: flex; width: fit-content; max-width: 100%; margin-top: .22em;
  padding: .05em .45em; gap: .3em; font-size: var(--fc); line-height: 1.25; text-wrap: wrap; }
.l2-xr > .cope > span:last-child, .l2-q .cope > span:last-child, .l2-wr > .cope > span:last-child, .l2-wt .cope > span:last-child, .l2-kr > .cope > span:last-child { min-width: 0; }

/* ---------- what to expect: a row for each step, with a pill for see, hear, feel or do, and a tick box ---------- */
.l2-xw { flex: 1 0 auto; display: flex; flex-direction: column; gap: .2em; }
.l2-x { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.l2-xr { display: grid; grid-template-columns: var(--T) 2.3em minmax(0, 1fr) 1.25em; column-gap: .4em; align-items: center; align-content: center;
  padding: .2em .4em; border: 2px solid #BDBDBD; border-radius: .4em; min-width: 0; }
.l2-xr > .lf-pic { grid-row: 1; }
.l2-xr > .cope { grid-column: 1 / -1; }
.l2-cue { justify-self: start; font: 700 .62em/1 var(--ui); padding: .22em .5em; border: 2px solid #111; border-radius: 1em; white-space: nowrap; }
.l2-xt { font-size: var(--f); line-height: 1.22; min-width: 0; }
.l2-xt.w { font-weight: 700; }
.l2-main { display: block; }
.l2-sub { display: block; margin-top: .12em; font-size: .86em; color: #333; }

/* ---------- questions to ask: each question in a pale frame, with lines for the answer ---------- */
.l2-qw { flex: 1 0 auto; display: flex; flex-direction: column; gap: .3em; }
.l2-qs { flex: 1 0 auto; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: .5em; row-gap: .3em; }
.l2-q { display: grid; grid-template-columns: var(--T) minmax(0, 1fr); column-gap: .4em; align-items: start; padding: .3em .4em; border: 2px solid #BDBDBD; border-radius: .4em; min-width: 0; }
.l2-qc { align-self: stretch; display: flex; flex-direction: column; min-width: 0; }
.l2-qt { font-size: var(--f); line-height: 1.22; }
/* the lines share any height the frame has to spare */
.l2-qc .l2-ln { flex: 1 0 var(--LH); height: auto; }

/* ---------- mini book: eight pages on one sheet; dashed lines are cut, dotted lines are folded ---------- */
.l2-mb { flex: 1 0 auto; display: flex; flex-direction: column; }
.l2-mbg { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(var(--rh), 1fr));
  margin-top: .3em; border: 3px dashed #111; }
.l2-mbg::before, .l2-pg.up.c1::after { content: "\2702"; position: absolute; font: 400 .7em/1 "Segoe UI Symbol", var(--ui); background: #fff; padding: 0 .15em; color: #444; z-index: 1; }
.l2-mbg::before { top: -.62em; left: .5em; }
/* the short cut in the middle, along the two middle pages of the top row */
.l2-pg.up.c1::after { left: .2em; bottom: -.6em; }
.l2-pg { position: relative; display: flex; flex-direction: column; padding: .3em; min-width: 0; min-height: 0; }
.l2-pg.c0, .l2-pg.c1, .l2-pg.c2 { border-right: 2px dotted #111; }
.l2-pg.up { border-bottom: 3px dotted #111; }
.l2-pg.up.c1, .l2-pg.up.c2 { border-bottom-style: dashed; }
/* the top row is printed upside down, so it reads the right way up once folded */
.l2-pi { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: .3em; text-align: center; min-width: 0; min-height: 0; }
.l2-pg.up .l2-pi { transform: rotate(180deg); }
.l2-pt { font-size: var(--f); line-height: 1.22; max-width: 100%; text-wrap: wrap; }
.l2-pt.w { font-weight: 700; }
.l2-pt.l2-bth { font-size: calc(var(--f) * .9); }
.l2-pi > .cope { display: flex; flex-direction: column; align-items: center; gap: .15em; margin-top: 0; padding: .05em .3em; max-width: 100%;
  font-size: var(--fc); line-height: 1.25; text-wrap: wrap; }
.l2-pi > .cope .em { line-height: 1.25; }
.l2-pn { margin-top: auto; font: 400 .6em/1.2 var(--ui); color: #333; }
.l2-draw { flex: 1 1 auto; align-self: stretch; min-height: 2.5em; border: 3px dashed #111; border-radius: .3em; }
.l2-pg.cover .l2-pi { justify-content: center; }
.l2-ctl { line-height: 1.22; max-width: 100%; text-wrap: balance; }
.l2-cv { --T: var(--Tc); }
.l2-bk { --T: var(--Tb); }
.l2-bw { display: flex; flex-direction: column; align-items: center; gap: .3em; max-width: 100%; }
.l2-bh { align-self: stretch; display: flex; flex-direction: column; gap: .15em; text-align: left; min-width: 0; }
.l2-bhk { font-size: var(--fs); line-height: 1.22; }
.l2-bhr { display: flex; align-items: flex-start; gap: .25em; font-size: var(--fs); line-height: 1.22; min-width: 0; }
.l2-bhr .em { flex: none; line-height: 1.22; }
.l2-bhr > span:last-child { min-width: 0; }
/* line-height 0 here, so the small print sets its own line height */
.l2-mbk { margin-top: .35em; text-align: center; line-height: 0; }

/* ---------- how it went: a row for each step, with a tick box and faces to circle ---------- */
.l2-aw { flex: 1 0 auto; display: flex; flex-direction: column; gap: .3em; }
.l2-ah, .l2-ar { display: grid; grid-template-columns: var(--T) minmax(0, 1fr) var(--TK) var(--FW); column-gap: .4em; min-width: 0; }
/* the labels line up with the columns of the rows under them: the same padding and a clear border */
.l2-ah { padding: 0 .4em; border: 2px solid transparent; border-block-width: 0; margin-bottom: -.15em; }
.l2-ahk { font: 700 .62em/1.25 var(--ui); white-space: nowrap; }
.l2-ahk.a { grid-column: 1 / 4; justify-self: end; }
.l2-ahk.b { grid-column: 4; justify-self: center; }
.l2-a { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rg); }
.l2-ar { align-items: center; padding: var(--rp) .4em; border: 2px solid #BDBDBD; border-radius: .4em; }
/* when the steps are many, the rows, the reward's row and the tick boxes close up a little (sizes worked out in acts2-life.js) */
.l2-aw .tick { width: var(--TK); height: var(--TK); }
.l2-aw > .l2-end { padding-top: var(--rp); padding-bottom: var(--rp); }
.l2-fs { display: flex; justify-content: center; gap: .35em; }
.l2-f { display: block; }
.l2-fs .fl-fc { width: var(--F); height: var(--F); }
/* the reward's tick box sits in the same column as the tick boxes above it */
.l2-aw > .l2-end > .l2-tick { margin-right: calc(var(--FW) + .4em); }
.l2-hp { flex: none; display: flex; flex-direction: column; gap: .2em; padding: .3em .4em; border: 2px solid #BDBDBD; border-radius: .4em; }
.l2-hpt { font-size: var(--f); line-height: 1.22; }
.l2-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5em; row-gap: .2em; }
.l2-hi { display: flex; align-items: center; gap: .3em; min-width: 0; }
.l2-hi > .tick { flex: none; }
.l2-hi > .em { flex: none; font-size: calc(var(--f) * 1.15); line-height: 1.22; }
.l2-hit { min-width: 0; font-size: var(--f); line-height: 1.22; }
.l2-nx { flex: none; display: flex; flex-direction: column; }

/* the small print over a cut-out grid; line-height 0 here, so the small print sets its own line height */
.l2-ck { flex: none; margin-top: .45em; text-align: center; line-height: 0; }

/* ---------- token board: the first and then board, a circle for each token, the tokens to cut out ---------- */
.l2-tk .lf-fl, .l2-ch .lf-fl { min-height: calc(var(--ln) * 1.22em); text-align: center; text-wrap: balance; }
.l2-tk .l2-arr { align-self: center; }
.l2-tkc { flex: 1 0 auto; margin-top: .45em; display: flex; flex-direction: column; align-items: center; gap: .2em;
  padding: .35em .5em .45em; border: 3px solid #111; border-radius: .5em; min-width: 0; }
.l2-tkl { font-size: 1em; line-height: 1.22; }
.l2-cs { flex: 1 0 auto; display: grid; grid-template-columns: repeat(var(--pr), var(--D)); grid-auto-rows: var(--D); gap: .45em;
  align-content: center; justify-content: center; }
.l2-c { display: grid; place-items: center; border: 3px dashed #111; border-radius: 50%; }
.l2-c b { font: 700 var(--fn)/1 var(--ui); color: #555; }
.l2-tkt { flex: none; grid-template-columns: repeat(var(--cols), var(--D)); grid-auto-rows: var(--D); width: fit-content; margin: .35em auto 0; }
.l2-tc { display: grid; place-items: center; }
.l2-tok { display: grid; place-items: center; width: 84%; height: 84%; border: 2px solid #111; border-radius: 50%; }
.l2-tok .em { font-size: calc(var(--D) * .44); line-height: 1; }

/* ---------- choice board: first the task, then a box for the choice; the choices to cut out under it ---------- */
.l2-ch { flex: 1 0 auto; display: flex; flex-direction: column; }
.l2-ch .lf-ftb .lf-tw, .l2-chs.w .lf-tw { font-weight: 700; }
.l2-chh { flex: none; margin-top: .45em; text-align: center; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.l2-cka { margin-top: auto; padding-top: .45em; }
.l2-chs { flex: none; grid-template-columns: repeat(var(--cols), var(--qw)); grid-auto-rows: var(--qh); width: fit-content; margin: .35em auto 0; }

/* ---------- waiting card: what I am waiting for, five boxes to cross off, things to do while I wait, a small card to cut out ---------- */
.l2-wa { flex: 1 0 auto; display: flex; flex-direction: column; }
.l2-wt { flex: none; display: flex; align-items: center; gap: .45em; padding: .3em .4em; border: 3px solid #111; border-radius: .5em; min-width: 0; }
.l2-wtt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l2-wtx { font-size: var(--f1); line-height: 1.22; }
.l2-wb { flex: none; margin-top: .45em; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .3em .4em;
  border: 2px solid #BDBDBD; border-radius: .4em; min-width: 0; }
.l2-bxs { display: flex; justify-content: center; gap: .6em; }
.l2-bxs > i { display: block; width: var(--X); height: var(--X); border: 3px solid #111; border-radius: .2em; background: #fff; }
.l2-wd { margin: 0; font-size: var(--f); line-height: 1.22; text-align: center; text-wrap: balance; }
/* the list takes the height to spare, shared by its rows */
.l2-wl { flex: 1 0 auto; margin-top: .45em; display: flex; flex-direction: column; gap: .2em; padding: .3em .4em; border: 2px solid #BDBDBD; border-radius: .4em; min-width: 0; }
.l2-wlk { font-size: var(--f); line-height: 1.22; }
.l2-wis { flex: 1 0 auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.l2-wi { flex: 1 0 auto; display: flex; align-items: center; gap: .4em; min-width: 0; }
.l2-wti { --T: var(--Ti); }
.l2-wit { flex: 1; min-width: 0; font-size: var(--f); line-height: 1.22; }
/* the small card keeps one size on paper, whatever the size of the sheet's text */
.l2-wc { flex: none; grid-template-columns: var(--cdw); grid-auto-rows: auto; width: fit-content; margin: .35em auto 0; }
.l2-wcc { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .25em .35em; }
.l2-wcr { align-self: stretch; display: flex; align-items: center; gap: .3em; }
.l2-wct { --T: var(--Tc); }
.l2-wcr > b { flex: 1; min-width: 0; font-size: var(--fs); line-height: 1.22; }
.l2-bxs.s { --X: var(--Xc); gap: .3em; }
.l2-bxs.s > i { border-width: 2px; }
.l2-wce { font-size: var(--fs); line-height: 1.4; text-align: center; }

/* ---------- week plan: a row for each step, a column for each day, the reward's row at the end ---------- */
.l2-kw { flex: 1 0 auto; display: flex; flex-direction: column; gap: .2em; }
.l2-kh, .l2-kr { display: grid; grid-template-columns: var(--T) minmax(0, 1fr) repeat(7, var(--dw)); align-items: center; min-width: 0; }
/* the days line up with the columns under them: the same padding and a clear border */
.l2-kh { padding: 0 .4em; border: 2px solid transparent; border-block-width: 0; }
.l2-day { font: 700 .62em/1.25 var(--ui); text-align: center; white-space: nowrap; }
.l2-k { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.l2-kr { align-content: center; padding: .2em .4em; border: 2px solid #BDBDBD; border-radius: .4em; }
.l2-kr > .lf-pic { grid-row: 1; }
.l2-kr > .cope { grid-column: 1 / -1; }
.l2-kt { padding: 0 .35em; font-size: var(--f); line-height: 1.22; min-width: 0; }
.l2-kt.w, .l2-kr.rw > .l2-kt { font-weight: 700; }
.l2-kd { display: grid; place-items: center; }
.l2-kd > .tick { width: var(--tk); height: var(--tk); }
.l2-kr.rw { border: .12em solid var(--line); border-radius: .45em; }
.l2-dot { display: block; width: var(--tk); height: var(--tk); border: 2px dashed #111; border-radius: 50%; }