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

/* shared: words printed on a handwriting line (.wl) to copy from, and spaced-out letters to go over */
.wl .w2-ink { position: relative; color: #111; padding: 0 .3em 0 .25em; }
.wl .w2-sp { word-spacing: .5em; }
/* SVG line art: picture tiles, the dashed line to go over (Trace Grey), pale guide lines, the start dot */
.w2-tile { fill: #fff; stroke: #111; stroke-width: 3; }
.w2-pe { font-family: var(--emoji); text-anchor: middle; dominant-baseline: central; }
.w2-pg { fill: none; stroke: #8F8F8F; stroke-linecap: round; stroke-linejoin: round; }
.w2-gl { fill: none; stroke: #BDBDBD; stroke-width: 3; }
.w2-dot { fill: #111; }

/* pencil patterns: rows that share the body, each a card with its sentence and the pattern from picture to picture */
.w2-rows { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; }
.q.w2-pat { display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; justify-content: stretch; gap: .1em; padding: .3em .5em .3em .85em; min-height: 0; }
.w2-cap { margin: 0; font-size: .62em; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-pw { position: relative; min-height: 0; }
.w2-psvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sheet.bw .w2-psvg { filter: contrast(1.35) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000); }

/* a picture in a square frame, its size the font size */
.w2-pic { width: 1em; height: 1em; border: 2px solid #111; border-radius: .17em; display: grid; place-items: center; background: #fff; overflow: hidden; flex: none; }
.w2-pic .em { font-size: .64em; line-height: 1; }

/* look, cover, write: a table; the word in a pale frame to copy from, a dotted fold line, writing lines, a dark tick box */
.w2-lcw { flex: 1 1 0; min-height: 0; display: grid; gap: .35em; align-items: stretch; }
.w2-th { font: 700 .62em/1.2 var(--ui); align-self: end; padding: 0 0 .1em .2em; white-space: nowrap; }
.w2-tkh { justify-self: center; padding: 0 0 .1em; }
.w2-fold { grid-column: 2; grid-row: 1 / -1; justify-self: center; width: 0; border-left: 2.5px dotted #555; position: relative; }
.w2-fold b { position: absolute; top: 0; left: 50%; translate: -50% 0; font: 700 .5em/1 var(--ui); color: #555; background: #fff; padding: .2em 0; writing-mode: vertical-rl; }
.w2-lk { position: relative; border: 2px solid #BDBDBD; border-radius: 14px; padding: .25em .45em .25em .85em; display: flex; align-items: center; gap: .35em; min-width: 0; min-height: 0; }
.w2-lk.w2-st { flex-direction: column; justify-content: center; gap: .15em; }
.w2-lw { white-space: nowrap; line-height: 1.25; }
.w2-wc { display: flex; align-items: center; min-width: 0; padding: 0 .1em; }
.w2-wc > .wl { flex: 1; min-width: 0; }
.w2-wb { border: 2.5px solid #111; border-radius: .3em; align-self: center; padding: .05em .25em .2em; }
.w2-tk { width: 1.35em; height: 1.35em; border: 2.5px solid #111; border-radius: .25em; align-self: center; justify-self: center; background: #fff; }

/* shared: a word as a card (to circle, or to copy from a word bank) and a bank of them in a pale frame */
.w2-ch { display: inline-flex; align-items: center; justify-content: center; gap: .3em; border: 2px solid #111; border-radius: 999px;
  padding: .1em .7em .1em .45em; font-size: .8em; line-height: 1.2; min-height: 1.9em; white-space: nowrap; background: #fff; }
.w2-ch .em { font-size: 1.35em; line-height: 1; }
.w2-ch.w2-bk { border-color: #BDBDBD; }
.w2-chs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .45em; min-width: 0; }
.w2-bank { display: flex; align-items: center; gap: .55em; border: 2px solid #111; border-radius: 12px; padding: .3em .6em; min-width: 0; }
.w2-bank-k { font: 700 .62em/1.2 var(--ui); white-space: nowrap; }
.w2-bank-w { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .32em; min-width: 0; }

/* label the picture: one of the topic's drawings over its lines, or a grid of pictures each with a line */
.w2-lbw { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; }
.w2-art { margin: 0; min-height: 0; display: flex; justify-content: center; }
.w2-art img { display: block; height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; border: 2px solid #BDBDBD; border-radius: 14px;
  filter: grayscale(1) contrast(1.3); background: #fff; }
.w2-lns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35em; }
.q.w2-ln { justify-content: flex-start; gap: .5em; padding: .25em .6em .25em .85em; }
.q.w2-ln > .w2-wc { flex: 1; }
.w2-lbs { flex: 1 1 0; min-height: 0; display: grid; gap: .5em; }
.q.w2-lb { flex-direction: column; justify-content: space-evenly; align-items: center; gap: .3em; padding: .4em .6em .4em .85em; min-height: 0; }
.q.w2-lb > .w2-wc { align-self: stretch; }
.q.w2-lb.w2-lbh { flex-direction: row; justify-content: flex-start; gap: .6em; }
.q.w2-lb.w2-lbh > .w2-wc, .q.w2-lb.w2-lbh > .w2-chs { flex: 1; align-self: center; }
.q.w2-pick { justify-content: center; padding: .45em .6em; }

/* make a list: list paper in a pale frame, the topic as its heading, a numbered line with a picture beside it for each thing */
.w2-lst { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border: 2px solid #BDBDBD; border-radius: 14px; padding: .35em .7em .45em; }
.w2-lhd { display: flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 700; line-height: 1.25; padding-bottom: .25em;
  border-bottom: 2px solid #BDBDBD; margin-bottom: .4em; }
.w2-lhd .em { font-size: 1.2em; line-height: 1; }
.w2-lr { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3em; }
.w2-lrow { display: flex; align-items: center; gap: .45em; min-width: 0; min-height: 0; }
.w2-lrow > .w2-wc { flex: 1; }
.w2-no { font: 700 .52em/1 var(--ui); width: 2em; height: 2em; border-radius: 50%; background: var(--line); color: var(--line-ink); display: grid; place-items: center; flex: none; }
.w2-cw { border: 2px solid #BDBDBD; border-radius: .3em; padding: 0 .25em; white-space: nowrap; line-height: 1.4; flex: none; }
.w2-draw { width: 1em; height: 1em; border: 2px dashed #8F8F8F; border-radius: .17em; flex: none; background: #fff; }
/* name poem: the word's letters down the side in pale boxes, each with its line; the words to use sorted by letter, in a bank or beside each letter */
.w2-ab { display: grid; gap: .3em .8em; border: 2px solid #111; border-radius: 12px; padding: .3em .6em; flex: none; }
.w2-ag { display: flex; align-items: center; gap: .3em; min-width: 0; white-space: nowrap; }
.w2-ag > b { font: 700 1em/1.2 var(--ui); width: 1.1em; text-align: center; flex: none; }
.w2-ac { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3em; }
.w2-arow { display: flex; align-items: center; gap: .5em; min-width: 0; min-height: 0; padding-left: .1em; }
.w2-al { width: 1em; height: 1em; border: 2px solid #BDBDBD; border-radius: .17em; display: grid; place-items: center; flex: none; background: #fff; }
.w2-al b { font-size: .68em; line-height: 1; }
.w2-ast { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .15em; }
.w2-ast > .w2-wc { align-self: stretch; }
.w2-ast.w2-side { flex-direction: row; align-items: center; gap: .5em; }
.w2-ast.w2-side > .w2-wc { flex: 1; align-self: center; }
.w2-chs.w2-achs { justify-content: flex-start; flex-wrap: nowrap; flex: none; }
.w2-wc.w2-wcm { flex-direction: column; align-items: stretch; gap: .15em; }
.w2-wcm > .wl { flex: none; }

/* build a sentence: boxes (or one long box) to put the word cards in, the capital letter and full stop pointed out, lines to copy it on; the cards to cut out at the bottom */
.w2-sbs { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .45em; }
.q.w2-sb { flex: 1 1 auto; flex-direction: column; justify-content: space-evenly; align-items: stretch; gap: .3em; padding: .45em .6em .45em .85em; }
.q.w2-sb > .w2-wc { align-self: stretch; }
.w2-sbm { display: flex; align-items: center; justify-content: center; gap: .45em; min-width: 0; }
.w2-mw { display: grid; width: max-content; max-width: 100%; min-width: 0; }
.w2-mat { display: flex; gap: .25em; }
.w2-slot, .w2-strip { display: block; border: 2.5px solid #111; border-radius: .25em; background: #fff; flex: none; }
.w2-slot { display: grid; place-items: center; }
.w2-slot .em { font-size: 1.5em; line-height: 1; opacity: .22; }
.w2-hint { display: flex; justify-content: space-between; gap: 1em; margin-top: .15em; font: 700 .55em/1.2 var(--ui); color: #555; white-space: nowrap; }
.w2-cut { flex: none; display: flex; flex-direction: column; align-items: center; gap: .45em; padding-top: .35em; }
.w2-crow { position: relative; display: flex; align-items: stretch; max-width: 100%; }
.w2-crow:first-child::before { content: "\2702"; position: absolute; top: -.6em; left: .5em; z-index: 1; font: 400 .7em/1 "Segoe UI Symbol", var(--ui);
  background: #fff; padding: 0 .15em; color: #444; }
.w2-cd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; border: 2px dashed #666;
  padding: .15em .45em; line-height: 1.25; white-space: nowrap; background: #fff; }
.w2-cd + .w2-cd { margin-left: -2px; }
.w2-cd.w2-cs { flex-direction: row; gap: .3em; }
.w2-cd.w2-nb { padding-right: .7em; }
.w2-cd .em { font-size: 1.5em; line-height: 1; }
.w2-cd.w2-cs .em { font-size: 1.15em; }
.w2-fs { font-size: 1.3em; line-height: 0; }
.w2-cn { position: absolute; top: .2em; right: .3em; font: 700 .5em/1 var(--ui); font-style: normal; color: #666; }

/* write a postcard: the front (one of the topic's drawings, or its pictures and its name) over the back, where “Dear”, the sentences
   and “From” sit beside a stamp and the lines for the address */
.w2-pc { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .45em; }
.w2-pcf { margin: 0; flex: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: .15em;
  border: 2px solid #111; border-radius: 14px; padding: .3em .6em .4em; min-height: 0; }
.w2-pct { justify-self: start; font: 700 .62em/1.2 var(--ui); color: #555; }
.w2-pcf img { display: block; height: 100%; max-width: 100%; aspect-ratio: 1; object-fit: contain; filter: grayscale(1) contrast(1.3); }
.w2-pcg { min-height: 0; display: flex; align-items: center; justify-content: center; gap: .6em; }
.w2-pcc { font-size: 1.1em; line-height: 1.25; }
.w2-pcb { flex: 1 1 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); column-gap: .5em; row-gap: .2em;
  border: 2px solid #111; border-radius: 14px; padding: .3em .6em .45em; min-height: 0; }
.w2-pcb > .w2-pct { grid-column: 1 / -1; }
.w2-pcm { display: flex; flex-direction: column; justify-content: space-evenly; gap: .3em; min-width: 0; }
.w2-pcr { display: flex; align-items: center; gap: .4em; min-width: 0; }
.w2-pcr > .w2-wc { flex: 1; }
.w2-pcm > .w2-wc { align-self: stretch; }
.w2-pcfr { padding-left: .25em; }
.w2-pcx { white-space: nowrap; line-height: 1.25; }
.w2-pcd { background: #BDBDBD; }
.w2-pca { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.w2-stamp { align-self: flex-end; width: 2.6em; height: 2.6em; border: 2.5px dotted #111; display: grid; place-items: center; flex: none; }
.w2-stamp .em { font-size: 1.6em; line-height: 1; }
.w2-adl { display: block; height: 1.5em; border-bottom: 2px solid #8F8F8F; flex: none; }

/* comic strip: boxes in two columns (the first across both when there is an odd number), each a frame to draw in with its name
   in a tab in the corner and its words under it; the first frame has the child, a speech bubble pointing at them and the topic's picture */
.w2-cm { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .45em; }
.w2-cp { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.w2-cp.w2-cpw { grid-column: 1 / -1; }
.w2-cf { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0;
  border: 2.5px solid #111; border-radius: .3em; padding: 1.45em .45em .35em; background: #fff; }
.w2-cl { position: absolute; top: 0; left: 0; font: 700 .72em/1.2 var(--ui); padding: .3em .75em; white-space: nowrap;
  border-right: 2.5px solid #111; border-bottom: 2.5px solid #111; border-radius: .2em 0 .55em 0; background: var(--line); color: var(--line-ink); }
.w2-csc { display: flex; align-items: center; justify-content: center; gap: .45em; min-width: 0; max-width: 100%; }
.w2-kid { flex: none; }
.w2-kid .em { display: block; font-size: 1em; line-height: 1; }
.w2-bub { position: relative; flex: 0 1 auto; min-width: 0; margin-left: .35em; border: 2px solid #111; border-radius: .8em;
  padding: .2em .6em; line-height: 1.25; text-align: center; background: #fff; }
.w2-bub::before { content: ""; position: absolute; left: -.38em; top: 50%; width: .62em; height: .62em; margin-top: -.31em; background: #fff;
  border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); }
.w2-csc img { display: block; flex: none; object-fit: contain; filter: grayscale(1) contrast(1.3); }
.w2-cq { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; min-width: 0; padding-left: .1em; }
/* comic: the words under a box as wide as the box; in a narrow first box the bubble sits above the child, its tail pointing down */
.w2-cp > .w2-wc { align-self: stretch; }
.w2-csc.w2-cst { flex-direction: column; gap: .45em; }
.w2-csr { display: flex; align-items: center; justify-content: center; gap: .6em; }
.w2-cst .w2-bub { margin-left: 0; max-width: 100%; }
.w2-cst .w2-bub::before { left: var(--t, 1em); top: auto; bottom: -.38em; margin-top: 0; border-left: 0; border-right: 2px solid #111; }

/* story map: four stops down a dashed path, each a numbered marker beside a card with the stop's name, pictures for ideas and its lines */
.w2-sms { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .45em; }
.w2-smr { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; gap: .45em; min-height: 0; }
.w2-smr::before { content: ""; position: absolute; left: .95em; top: 0; bottom: -.45em; margin-left: -1.5px; border-left: 3px dashed #8F8F8F; }
.w2-smr:first-child::before { top: 1.15em; }
.w2-smr:last-child::before { bottom: auto; height: 1.15em; }
.w2-smk { position: relative; z-index: 1; flex: none; align-self: flex-start; width: 2.1em; height: 2.1em; margin-top: .25em; border-radius: 50%;
  background: var(--line); color: var(--line-ink); display: grid; place-items: center; font: 700 .9em/1 var(--ui); }
.w2-smc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3em; border: 2px solid #BDBDBD; border-radius: 12px;
  padding: .35em .5em; background: #fff; }
.w2-smh { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; min-width: 0; }
.w2-smh > b { font: 700 .8em/1.25 var(--ui); white-space: nowrap; }
.w2-smi { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; min-width: 0; }
.w2-smi .w2-ch { font-size: .72em; }
.w2-smc > .w2-wc, .w2-smc > .w2-pcr, .w2-smc > .w2-cq { margin-block: auto; }
.w2-smc > .w2-wc { align-self: stretch; }