/* aitism learn: more Puzzles activities. Every class starts .p2-; sizes in em so --k and Bigger text scale them.
   Black on white; grey only for inner grid lines and picture frames. */

/* the body: what is left over is shared out between the parts; a list of cards or a matching sheet takes it all */
.sh-body.p2-b { justify-content: space-evenly; }
.p2-b > * { flex: none; }
.p2-b > .qs, .p2-b > .p2-mt { flex: 1 0 auto; }
.p2-ghost { margin: 0; font-size: .6em; }
/* pictures sit on their own line height, so a box is as tall as its picture */
:is(.p2-cl-p, .p2-cq-p, .p2-ar-p, .p2-co-p, .p2-co-qp, .p2-pc, .p2-np-p, .p2-tg-p, .p2-mt-p, .p2-in) { font-family: var(--emoji); font-style: normal; line-height: 1; }
:is(.p2-cl-p, .p2-cq-p, .p2-ar-p, .p2-co-p, .p2-co-qp, .p2-np-p, .p2-tg-p, .p2-in) .em { display: block; line-height: 1; }
.p2-dot { width: .5em; height: .5em; border-radius: 50%; background: #111; flex: none; }
.p2-n { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: 2px solid #111; border-radius: 50%; background: #fff;
  font: 700 .7em/1 var(--ui); flex: none; }
.p2-arw { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* crossword and word fit: a square for each letter, joined edge to edge */
.p2-xw-wrap { display: flex; justify-content: center; }
.p2-xw { display: grid; grid-auto-rows: 1em; padding: 0 2px 2px 0; }
.p2-xw > i { display: block; }
.p2-xw-c { position: relative; display: grid; place-items: center; border: 2px solid #111; margin: 0 -2px -2px 0; background: #fff; }
.p2-xw-n { position: absolute; top: .07em; left: .1em; font: 700 .34em/1 var(--ui); }
.p2-xw-l { font-size: .6em; font-weight: 700; line-height: 1; }
.p2-clues { display: flex; flex-direction: column; gap: .4em; }
.p2-cg { display: flex; align-items: flex-start; gap: .5em; }
.p2-cg-k { flex: none; width: 4.7em; display: inline-flex; align-items: center; gap: .25em; font-weight: 700; padding-top: .5em; }
.p2-cg-l { display: flex; flex-wrap: wrap; gap: .35em .5em; min-width: 0; }
.p2-cl { display: inline-flex; align-items: center; gap: .25em; border: 2px solid #BDBDBD; border-radius: .4em; padding: .15em .35em .15em .2em; }
.p2-cl-p { font-size: 1.8em; }
.p2-bank { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .45em; border: 2px solid #BDBDBD;
  border-radius: .45em; padding: .3em .6em; }
.p2-bank-k { font-size: .8em; font-weight: 700; margin-right: .35em; }
.p2-bw { border: 2px solid #111; border-radius: 999px; padding: .02em .55em; font-size: .85em; font-weight: 700; white-space: nowrap; }
.p2-kl { display: flex; flex-direction: column; gap: .35em; }
.p2-kl-g { display: flex; align-items: flex-start; gap: .5em; }
.p2-kl-k { flex: none; width: 4.4em; font-size: .8em; font-weight: 700; padding-top: .5em; }
.p2-kl-l { display: flex; flex-wrap: wrap; gap: .3em .45em; min-width: 0; }
.p2-kw { display: inline-flex; align-items: center; gap: .3em; border: 2px solid #BDBDBD; border-radius: .4em; padding: .1em .45em .1em .3em;
  font-weight: 700; white-space: nowrap; }
.p2-kw .em { font-size: 1.2em; line-height: 1; }

/* secret code: the key in a frame, then each word as shapes over boxes */
.p2-key { display: flex; align-items: center; gap: .6em; border: 3px solid #111; border-radius: .45em; padding: .3em .6em; }
.p2-key-k { flex: none; font-weight: 700; }
.p2-key-l { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25em .35em; }
.p2-kc { display: inline-flex; flex-direction: column; align-items: center; width: 1.6em; border: 2px solid #BDBDBD; border-radius: .3em; padding: .12em 0 .04em; }
.p2-kc b { font-size: .8em; line-height: 1.1; }
.p2-sym { display: block; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.p2-sym .f { fill: currentColor; }
.p2-cn { display: block; font: 700 .7em/1.57 var(--ui); text-align: center; white-space: nowrap; }
.qs.p2-cqs { gap: .7em; }
.q.p2-cq { justify-content: center; gap: .9em; padding: .55em .8em; }
.q.p2-cq1 { padding: .7em .9em; }
.p2-cm { display: inline-flex; align-items: flex-end; gap: .55em; }
.p2-cm.p2-wrap { flex-wrap: wrap; justify-content: center; gap: .35em .8em; }
.p2-cw { display: inline-flex; align-items: flex-end; gap: .15em; white-space: nowrap; }
.p2-cc { display: inline-flex; flex-direction: column; align-items: center; gap: .15em; width: 1.15em; }
.p2-cb { display: block; width: 1.05em; height: 1.15em; border: 2px solid #111; border-radius: .18em; background: #fff; }
.p2-cp { font-size: 1.1em; font-weight: 700; line-height: 1; padding-bottom: .05em; }
.p2-cq-p { font-size: 2.2em; flex: none; }

/* follow the arrows: a framed grid, the steps in a column beside it */
.qs.p2-ars { gap: .6em; }
.q.p2-ar-q { justify-content: center; gap: 1.2em; padding: .5em .8em; }
.p2-ar-g { display: grid; grid-auto-rows: 1em; border: 3px solid #111; border-radius: .06em; background: #fff; flex: none; }
.p2-ar-g > i { display: grid; place-items: center; border-right: 2px solid #BDBDBD; border-bottom: 2px solid #BDBDBD; font-style: normal; }
.p2-ar-g > i.r { border-right: 0; }
.p2-ar-g > i.b { border-bottom: 0; }
.p2-ar-g > i.p2-st { box-shadow: inset 0 0 0 .08em #111; }
.p2-ar-g > i > .em, .p2-ar-p { font-size: .64em; line-height: 1; }
.p2-ar-s { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: .2em; flex: none; }
.p2-ar-s li { display: flex; align-items: center; justify-content: center; gap: .15em; height: 1.25em; font-weight: 700; white-space: nowrap; }
.p2-ar-s .p2-arw { width: 1.2em; height: 1.2em; }
.p2-ar-s2 li { height: 1.1em; }
.p2-ar-s2 .p2-arw { width: 1.05em; height: 1.05em; }
.p2-ar-s3 { gap: .25em; }
.p2-ar-s3 li { height: 1.15em; font-size: .85em; }
.p2-ar-s li.p2-ar-0 { height: 1.25em; font-size: 1em; }
.p2-ar-0 .em { font-size: 1.15em; line-height: 1; }

/* grid hunt: letters along the top, numbers down the side, then a card per question */
.p2-co-wrap { display: flex; justify-content: center; }
.p2-co { display: grid; grid-template-columns: .7em auto; grid-template-rows: .7em auto; }
.p2-co-0 { grid-column: 1; grid-row: 1; }
.p2-co-top { grid-column: 2; grid-row: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1em; padding-left: 3px; }
.p2-co-side { grid-column: 1; grid-row: 2; display: grid; grid-auto-rows: 1em; padding-top: 3px; }
.p2-co-top b, .p2-co-side b { display: grid; place-items: center; font: 700 .42em/1 var(--ui); }
.p2-co-g { grid-column: 2; grid-row: 2; display: grid; grid-auto-rows: 1em; border: 3px solid #111; border-radius: .06em; background: #fff; }
.p2-co-g > i { display: grid; place-items: center; border-right: 2px solid #BDBDBD; border-bottom: 2px solid #BDBDBD; font-style: normal; }
.p2-co-g > i.r { border-right: 0; }
.p2-co-g > i.b { border-bottom: 0; }
.p2-co-p { font-size: .62em; }
.qs.p2-co-qs { gap: .6em; }
.q.p2-co-q { gap: .5em; padding: .4em .6em .4em .95em; }
.p2-co-x { flex: 1; min-width: 0; font-size: .92em; line-height: 1.25; }
.p2-co-x b { font-family: var(--ui); }
.p2-co-qp { font-size: 1.5em; flex: none; }
.p2-pcs { display: flex; gap: .35em; flex: none; }
.p2-pc { width: 1.65em; height: 1.65em; display: grid; place-items: center; border: 2px solid #111; border-radius: 50%; }
.p2-pc .em { font-size: 1.1em; line-height: 1; }
.box.p2-co-box, .lineans.p2-co-ch { width: 3.2em; }

/* number path: a framed grid of numbers between two pictures */
.qs.p2-nps { gap: .6em; }
.q.p2-np-q { justify-content: center; padding: .55em; }
.p2-np-g { display: grid; grid-auto-rows: 1em; border: 3px solid #111; border-radius: .06em; background: #fff; }
.p2-np-g > i { display: grid; place-items: center; border-right: 2px solid #BDBDBD; border-bottom: 2px solid #BDBDBD; font-style: normal; }
.p2-np-g > i.r { border-right: 0; }
.p2-np-g > i.b { border-bottom: 0; }
.p2-np-g b { font: 700 .42em/1 var(--ui); }
.p2-np-p { font-size: .66em; }

/* tangled lines: pictures left, lines across the middle, numbered pictures right */
.p2-tg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; width: 100%; }
.p2-tg-svg { grid-column: 2; display: block; width: 100%; height: 100%; min-width: 0; align-self: stretch; overflow: visible; }
.p2-tg-svg path { fill: none; stroke: #111; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.p2-tg-l { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; gap: .35em; }
.p2-tg-r { grid-column: 3; display: flex; align-items: center; gap: .35em; }
.p2-tg-r .p2-n { font-size: .9em; }
.p2-tg-p { font-size: var(--p); }
.p2-tg-f { display: flex; flex-direction: column; align-items: center; gap: .05em; }
.p2-tg-w { max-width: 7em; font-size: .6em; font-weight: 700; line-height: 1.05; text-align: center; }

/* close-ups and halves: a column of windows, a column to join them to, a dot on each for the line */
.p2-mt { display: flex; justify-content: space-between; padding: 0 1.2em; }
.p2-mt-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: .4em; }
.p2-mt-i { display: flex; align-items: center; gap: .6em; }
.p2-mt-p { width: var(--p); height: var(--p); display: grid; place-items: center; border: 2px solid #BDBDBD; border-radius: .35em; flex: none; }
.p2-mt-p .em { font-size: calc(var(--p) * .74); line-height: 1; }
/* a window onto part of a picture: the picture is placed inside it and cut to its shape */
.p2-cu, .p2-hv { position: relative; font-size: var(--p); height: 1em; overflow: hidden; background: #fff; flex: none; }
.p2-cu { width: 1em; border: 3px solid #111; border-radius: 50%; clip-path: circle(50%); }
.p2-hv { width: .5em; border: 2px solid #BDBDBD; clip-path: inset(0); }
.p2-hv-l { border-right: 3px solid #111; border-radius: .1em 0 0 .1em; }
.p2-hv-r { border-left: 3px solid #111; border-radius: 0 .1em .1em 0; }
.p2-in { position: absolute; left: 50%; top: 50%; white-space: nowrap; }
.p2-hv-l .p2-in { left: 100%; }
.p2-hv-r .p2-in { left: 0; }