/* aitism learn: Puzzles: maze, wordsearch, oddone, shadow, pattern, spot, sudoku, ispy.
   Classes start pz-. Sizes in em of the sheet base; Print Black on white; dashed only for a gap to fill or a place to cut. */

/* maze: one drawing as big as the body allows, the topic picture over the way in, the reward under the way out */
.pz-mz-area { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.pz-mz { width: min(100cqw, 100cqh - 4.4em); }
.pz-mz-top, .pz-mz-bot { position: relative; height: 2.15em; }
.pz-mz-in { position: absolute; bottom: .12em; translate: -50% 0; line-height: 0; }
.pz-mz-in.pz-mz-dest { bottom: auto; top: .12em; }
.pz-mz-out { position: absolute; top: .22em; right: 0; font-size: .74em; }
.pz-mz-box svg { display: block; width: 100%; height: auto; }
.pz-mz-wall { fill: none; stroke: #111; stroke-linecap: round; stroke-linejoin: round; }

/* word search: square cells of Andika letters, the words with their pictures underneath */
.pz-ws { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .45em; }
.pz-ws-key { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .2em .9em; font-size: .72em; }
.pz-dir { display: inline-flex; align-items: center; gap: .25em; font-weight: 700; }
.pz-dir svg { width: 1.25em; height: 1.25em; fill: none; stroke: #111; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-ws-grid { display: grid; grid-auto-rows: 1em; border: 3px solid #111; border-radius: .12em; }
.pz-ws-grid span { display: grid; place-items: center; font-size: .6em; line-height: 1; border-right: 2px solid #BDBDBD; border-bottom: 2px solid #BDBDBD; }
.pz-ws-grid span.r { border-right: 0; }
.pz-ws-grid span.b { border-bottom: 0; }
.pz-ws-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), auto); justify-content: center; gap: .3em 1.3em; }
.pz-ws-w { display: flex; align-items: center; gap: .35em; min-width: 0; }
.pz-ws-pic { font-size: 1.3em; line-height: 1; }
.pz-ws-word { font-size: .9em; font-weight: 700; white-space: nowrap; }
.pz-ws-line { display: inline-block; width: 3.6em; height: 1.1em; border-bottom: 2px solid #111; }
.sheet .pz-ws-tick { width: 1.1em; height: 1.1em; }
.pz-ws-list.big { gap: .3em 2em; }
.pz-ws-list.big .pz-ws-w { flex-direction: column; gap: .2em; }
.pz-ws-list.big .pz-ws-pic { font-size: 2.2em; }
.pz-ws-list.big .pz-ws-word { font-size: 1.05em; }

/* odd one out: four things in a row, spread out so each can be circled */
.q.pz-od { padding: .3em .6em .3em .9em; gap: .6em; }
.pz-od-row { flex: 1; min-width: 0; display: flex; justify-content: space-around; align-items: center; }
.pz-od-c { display: inline-flex; flex-direction: column; align-items: center; gap: .02em; min-width: 0; padding: .12em .25em; }
.pz-od-pic { display: block; height: 1.15em; font-size: var(--pic, 2.3em); line-height: 1.15em; text-align: center; }
.pz-od-w { display: block; font-size: .78em; font-weight: 700; text-align: center; line-height: 1.15; white-space: nowrap; }
.pz-od-word { font-size: 1.05em; font-weight: 700; padding: .35em .4em; white-space: nowrap; }
.sheet.big .pz-od-word { font-size: .9em; }
.pz-od-line { width: 4.2em; }

/* shadow match: pictures left, shadows right, a dot on each to join with a line */
.pz-sh { flex: 1 0 auto; display: flex; justify-content: space-between; padding: 0 .8em; }
.pz-sh-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: .35em; }
.pz-sh-i { display: flex; align-items: center; gap: .5em; }
.pz-sh-pic { width: var(--p); height: var(--p); display: grid; place-items: center; border: 2px solid #BDBDBD; border-radius: .35em; flex: none; }
.pz-sh-pic .em { font-size: calc(var(--p) * .74); line-height: 1; }
.pz-dot { width: .46em; height: .46em; border-radius: 50%; background: #111; flex: none; }
/* a shadow stays solid black, in black and white too */
.sheet .pz-sil .em, .sheet.bw .pz-sil .em { filter: brightness(0); }

/* what comes next: a row of pictures, then a dashed box for each place to fill */
.q.pz-pat { justify-content: flex-start; gap: .4em .7em; padding: .45em .6em .45em .95em; }
.q.pz-pat.col { flex-direction: column; align-items: flex-start; }
.pz-track { display: flex; align-items: center; gap: .14em; flex-wrap: nowrap; }
.pz-pt { width: 1em; height: 1em; display: grid; place-items: center; flex: none; }
.pz-pt .em { font-size: .84em; line-height: 1; }
.pz-gap { border: 3px dashed #111; border-radius: .16em; margin-left: .1em; }
.pz-gap b { font: 700 .55em/1 var(--ui); }
.pz-chs { display: flex; gap: .45em; margin-left: auto; flex: none; }
.q.pz-pat.col .pz-chs { align-self: flex-end; }
.pz-ch { width: 2.1em; height: 2.1em; border: 2px solid #111; border-radius: 50%; display: grid; place-items: center; }
.pz-ch .em { font-size: 1.25em; line-height: 1; }

/* spot the difference: two framed grids of pictures, one over the other, and a tick box per difference */
.pz-sp { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: .5em; }
.pz-sp-grid { display: grid; border: 3px solid #111; border-radius: .45em; padding: .1em .3em; }
.pz-sp-c { display: grid; place-items: center; min-width: 0; }
.pz-sp-p { display: block; font-size: var(--p); line-height: 1; }
.pz-sp-p.pz-turn { rotate: 180deg; }
.pz-sp-ticks { display: flex; align-items: center; justify-content: center; gap: .45em; font-weight: 700; font-size: .85em; }
.pz-sp-ticks span { margin-right: .3em; }

/* picture sudoku: thick lines round each box, a dashed square where a picture goes */
.pz-sd { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .5em; }
.pz-sd-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1.1em; }
.pz-sd-key li { display: flex; flex-direction: column; align-items: center; }
.pz-sd-key .em { font-size: 1.45em; line-height: 1.1; }
.pz-sd-key span:not(.em) { font-size: .62em; font-weight: 700; }
.pz-sd-grid { display: grid; grid-template-columns: repeat(var(--n), 1em); grid-auto-rows: 1em; border: 3px solid #111; }
.pz-sd-c { display: grid; place-items: center; border-right: 2px solid #BDBDBD; border-bottom: 2px solid #BDBDBD; }
.pz-sd-c.br { border-right: 3px solid #111; }
.pz-sd-c.bb { border-bottom: 3px solid #111; }
.pz-sd-c.r { border-right: 0; }
.pz-sd-c.b { border-bottom: 0; }
.pz-sd-c .em { font-size: .64em; line-height: 1; }
.pz-sd-gap { width: 76%; height: 76%; border: 2.5px dashed #111; border-radius: .1em; }
.pz-sd-cut { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.pz-sd-strip { width: calc(var(--cols) * var(--pc)); margin-top: .45em; }
.pz-sd-piece { aspect-ratio: 1; display: grid; place-items: center; }
.pz-sd-piece .em { font-size: calc(var(--pc) * .6); line-height: 1; }

/* I spy: a calm framed box of pictures, then a card per picture to count */
.pz-spy { position: relative; flex: none; border: 2px solid #BDBDBD; border-radius: .5em; }
.pz-spy-p { position: absolute; translate: -50% -50%; line-height: 1; font-style: normal; }
.qs.pz-spy-qs { flex: 0 0 auto; align-content: start; gap: .5em .6em; }
.q.pz-spy-q { justify-content: flex-start; gap: .5em; padding: .35em .5em .35em .85em; }
.pz-spy-pic { width: 1.9em; height: 1.9em; border: 2px solid #111; border-radius: .35em; display: grid; place-items: center; flex: none; }
.pz-spy-pic .em { font-size: 1.2em; line-height: 1; }
.pz-spy-a { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; min-width: 0; }
.pz-spy-k { font-size: .62em; font-weight: 700; }
.pz-talk { display: flex; align-items: center; gap: .4em; font-size: .72em; }
.pz-talk .em { font-size: 1.3em; line-height: 1; }

/* what the avoid list took out: hidden on the page, struck through in the x-ray */
.pz-ghost { margin: 0; font-size: .6em; }