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

/* shared bits: the wave-1 faces (.fl-fc) sized here, lines to write on, frames, the cut lines */
.sheet .f2-fc { display: inline-block; flex: none; width: 2.2em; height: 2.2em; vertical-align: middle; }
.f2-note { margin: 0; font-size: .6em; line-height: 1.3; color: #333; text-align: center; }
.f2-h { margin: 0; font-weight: 700; font-size: .8em; line-height: 1.2; }
.f2-box { border: 2px solid #BDBDBD; border-radius: 14px; padding: .4em .55em; }
.f2-ln { display: inline-block; flex: 1 1 auto; min-width: 3em; height: 1.1em; border-bottom: 2px solid #111; }
.f2-tk { display: inline-block; flex: none; }
.f2-line { margin: 0; display: flex; align-items: flex-end; gap: .35em; font-size: .78em; line-height: 1.3; }
.f2-calm { align-items: center; font-size: .74em; text-wrap: pretty; }
.f2-calm > span:last-child { flex: 1 1 auto; min-width: 0; }
.f2-fw { display: inline-flex; align-items: center; gap: .25em; }
.f2-fw b { font-size: .8em; }
.f2-cut { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 1fr;
  border-top: 3px dashed #333; border-left: 3px dashed #333; margin-top: .35em; }
.f2-cut > * { border-right: 3px dashed #333; border-bottom: 3px dashed #333; min-width: 0; min-height: 0; }
.f2-cutbox { position: relative; border: 3px dashed #333; margin-top: .35em; }
.f2-cut::before, .f2-cutbox::before { content: "\2702"; position: absolute; top: -.62em; left: .5em; z-index: 1; padding: 0 .15em; background: #fff;
  font: 400 .7em/1 "Segoe UI Symbol", var(--ui); color: #333; }

/* where I feel it: a body to colour beside the key, then the sentences */
.f2-bm { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.4em; }
.f2-body { display: block; flex: none; width: 8em; height: 13.9em; }
.f2-body > circle, .f2-body > path { fill: #fff; stroke: #111; stroke-width: 2.6; stroke-linejoin: round; }
.sheet.big .f2-body { width: 6.4em; height: 11.1em; }
.f2-key { display: grid; gap: .4em; }
.f2-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.f2-keys li { display: flex; align-items: center; gap: .45em; }
.f2-keys b { font-size: .85em; }
.f2-sw { flex: none; width: 1.7em; height: 1.35em; border: 2px solid #111; border-radius: .25em; }
.sheet .f2-keys .f2-fc { width: 2em; height: 2em; }
.f2-bm.l3 .f2-keys { gap: .3em; }
.f2-qs { flex: 1 0 auto; display: flex; flex-direction: column; gap: .3em; }
.f2-ql { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: .35em; }
.f2-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; }
.f2-qt { flex: 1 1 7em; min-width: 0; font-size: .75em; line-height: 1.25; text-wrap: pretty; }
.f2-q > .f2-ln { flex: 1 1 4em; }
.f2-fcs { display: flex; gap: .2em; margin-left: auto; }
.sheet .f2-fcs .f2-fc { width: 1.8em; height: 1.8em; }
.f2-in { border-top: 2px solid #BDBDBD; padding-top: .35em; }

/* feelings sort: a mat of faces with room under each, then the cards to cut out */
.f2-mat { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.f2-mat.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
.f2-col { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.f2-fcard { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .1em; }
.sheet .f2-fcard .f2-fc { width: 2.6em; height: 2.6em; }
.f2-fcard b { font-size: .8em; line-height: 1.15; }
.f2-drop { flex: 1 0 4.5em; border: 2px solid #BDBDBD; border-radius: 14px; }
.f2-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; padding: .35em .3em; text-align: center; }
.f2-card .pbox { font-size: 1.05em; }
.f2-ct { font-size: .66em; line-height: 1.2; text-wrap: balance; }
.f2-cards.c2 .f2-ct { font-size: .78em; }
.f2-cards.c2 .pbox { font-size: 1.3em; }
.f2-blank { justify-content: flex-start; }
.f2-blank .f2-ct { font-weight: 700; color: #333; }

/* feelings diary: a week of rows, a face to ring for each part of the day, a box for the topic */
.f2-diary { flex: 1 0 auto; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) minmax(0, .9fr);
  grid-template-rows: auto repeat(var(--rows), minmax(2.1em, 1fr)); gap: .2em; }
.f2-diary.p2 { grid-template-columns: auto repeat(2, minmax(0, 1fr)) minmax(0, .9fr); }
.f2-dh { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .1em; padding-bottom: .1em; text-align: center; min-width: 0; }
.f2-dh > span:last-child { font-weight: 700; font-size: .58em; line-height: 1.15; text-wrap: balance; }
.f2-dh .em { font-size: 1.1em; line-height: 1; }
.f2-dt .pbox { font-size: .85em; }
.f2-dt > span:last-child { overflow-wrap: anywhere; }
.f2-dd { display: flex; align-items: center; padding: 0 .25em 0 0; font-weight: 700; font-size: .6em; }
.f2-dc { display: flex; align-items: center; justify-content: center; border: 2px solid #BDBDBD; border-radius: 10px; padding: .1em; min-width: 0; }
.f2-dfc { display: flex; gap: .12em; }
.sheet .f2-dfc .f2-fc { width: 1.4em; height: 1.4em; }
.sheet.big .f2-dfc .f2-fc { width: 1.15em; height: 1.15em; }
.sheet .f2-diary.p2 .f2-dfc .f2-fc { width: 1.7em; height: 1.7em; }
.f2-dx .pbox { font-size: .9em; }

/* energy: the meter, then three parts with what helps in each */
.f2-mw { display: flex; justify-content: center; }
.f2-meter { display: block; width: 12em; height: 6.6em; overflow: visible; }
.sheet.big .f2-meter { width: 10em; height: 5.5em; }
.f2-seg { fill: #fff; stroke: #111; stroke-width: 2.5; stroke-linejoin: round; }
.f2-hub { fill: #111; }
.f2-parts { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.f2-part { display: flex; flex-direction: column; gap: .3em; min-width: 0; padding: .35em .4em; }
.f2-ph { margin: 0; display: flex; align-items: center; gap: .3em; }
.sheet .f2-ph .f2-fc { width: 2em; height: 2em; }
.f2-ph b { font-size: .8em; line-height: 1.1; }
.f2-feel { margin: 0; font-size: .62em; line-height: 1.25; color: #333; }
.f2-ideas { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: .35em; }
.f2-ideas li { display: flex; align-items: center; gap: .3em; }
.f2-ideas .pbox { font-size: .85em; }
.f2-it { flex: 1; min-width: 0; font-size: .62em; line-height: 1.22; }
.f2-parts.l1 .f2-it { font-size: .7em; font-weight: 700; }
.f2-parts.l1 .pbox { font-size: 1.05em; }
.f2-ideas .f2-tk { width: 1em; height: 1em; border-width: 2.5px; }
.f2-my { margin: 0; display: flex; align-items: flex-end; gap: .3em; font-size: .62em; }

/* five senses: a row for each sense, two faces for each thing, then what helps */
.f2-senses { flex: 1 0 auto; display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)); gap: .3em; }
.f2-legend { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: .35em; font-size: .62em; font-weight: 700; }
.sheet .f2-legend .f2-fc { width: 2.4em; height: 2.4em; }
.f2-legend span + .f2-fc { margin-left: .8em; }
.f2-sense { display: grid; grid-template-columns: 3.6em repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .35em; }
.f2-senses.p1 .f2-sense { grid-template-columns: 3.6em minmax(0, 1fr); }
.f2-sh { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em; }
.f2-sh .em { font-size: 1.3em; line-height: 1; }
.f2-sh b { font-size: .7em; }
.f2-ex { display: flex; align-items: center; gap: .3em; border: 2px solid #BDBDBD; border-radius: 14px; padding: .2em .35em; min-width: 0; }
.f2-ex .pbox { font-size: .95em; }
.f2-et { flex: 1; min-width: 0; font-size: .64em; line-height: 1.2; }
.f2-senses.p1 .f2-et { font-size: .8em; }
.f2-senses.p1 .f2-ex .pbox { font-size: 1.15em; }
.f2-two { display: flex; gap: .25em; flex: none; }
.sheet .f2-two .f2-fc { width: 1.6em; height: 1.6em; }
.sheet .f2-senses.p1 .f2-two .f2-fc { width: 2em; height: 2em; }
.f2-ft { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.f2-ft .tick { width: .9em; height: .9em; border-width: 2.5px; }
.f2-help { display: grid; gap: .25em; }
.f2-copes { margin: 0; display: flex; flex-wrap: wrap; gap: .3em .5em; }
.f2-copes .cope { margin-top: 0; font-size: .7em; }
.f2-fin { display: grid; gap: .3em; }

/* worry box: a label to colour (level 1) or a box net to make, and slips to post */
.f2-label { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .5em .6em .55em; }
.f2-word { display: block; width: min(100%, 17em); height: auto; }
.f2-word text { font-family: var(--kidfont); font-weight: 700; font-size: 46px; fill: #fff; stroke: #111; stroke-width: 1.6; stroke-linejoin: round; }
.f2-lp { margin: 0; display: flex; justify-content: center; gap: .5em; font-size: 1.5em; line-height: 1; }
.f2-slips { flex: 1 0 auto; }
.f2-slip { display: flex; flex-direction: column; gap: .3em; padding: .4em .5em .35em; }
.f2-sp { margin: 0; display: flex; align-items: center; gap: .35em; font-weight: 700; font-size: .75em; line-height: 1.2; }
.sheet .f2-sp .f2-fc { width: 2em; height: 2em; }
.f2-draw { flex: 1 0 3em; border: 2px solid #BDBDBD; border-radius: 12px; }
.f2-wl { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: .45em; padding: .1em 0; }
.f2-wl .f2-ln { display: block; flex: none; min-width: 0; height: 1.15em; }
.f2-gw { margin: 0; font-size: .58em; line-height: 1.2; color: #333; }
.f2-wb { flex: 1 0 auto; display: flex; gap: .6em; align-items: stretch; }
.f2-net { position: relative; flex: none; width: 12em; align-self: center; }
.sheet.big .f2-net { width: 10em; }
.f2-nets { display: block; width: 100%; height: auto; overflow: visible; }
.f2-cutp { fill: #fff; stroke: #333; stroke-width: 3px; stroke-dasharray: 9 6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.f2-fold { fill: none; stroke: #111; stroke-width: 2.5px; stroke-dasharray: 0 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.f2-slot { fill: none; stroke: #333; stroke-width: 2px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.f2-nt { fill: #111; text-anchor: middle; font-family: var(--kidfont); }
.f2-nt.b { font-weight: 700; }
.f2-on { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); line-height: 1; }
.f2-oe { font-size: 1.6em; }
.sheet.big .f2-oe { font-size: 1.35em; }
.f2-scis { font: 400 .8em/1 "Segoe UI Symbol", var(--ui); background: #fff; padding: 0 .1em; color: #333; }
.f2-wb .f2-slips { flex: 1 1 auto; margin-top: 0; }

/* 5 4 3 2 1: rows of boxes, five down to one, then how I feel now */
.f2-ground { flex: 1 0 auto; display: flex; flex-direction: column; gap: .35em; }
.f2-gr { flex: 1 0 auto; display: flex; flex-direction: column; gap: .2em; }
.f2-gh { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2em .4em; }
.f2-gh > b { font-size: .8em; }
.f2-gn { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; border: 2px solid #111; display: grid; place-items: center; font: 700 .8em/1 var(--ui); }
.f2-gh > .pbox { font-size: .8em; }
.f2-gx { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; font-size: .62em; line-height: 1.2; color: #333; }
.f2-gbs { flex: 1 0 2.2em; display: flex; justify-content: center; gap: .3em; }
.f2-gb { flex: 0 1 4.6em; display: flex; align-items: flex-end; justify-content: center; padding: .15em; border: 2px solid #BDBDBD; border-radius: 12px; min-width: 0; }
.sheet.big .f2-gb { flex-basis: 3.8em; }
.f2-hint { font-size: .55em; line-height: 1.15; color: #333; text-align: center; }
.f2-end { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em; }
.f2-fws { margin: 0; display: flex; flex-wrap: wrap; gap: .3em .7em; }
.f2-end > .f2-line { flex: 1 1 10em; }

/* things I am good at: two columns of things to tick, then lines to add more */
.f2-gh1 { font-size: 1em; }
.f2-good { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, 1fr); gap: .45em .5em; }
.f2-sc { display: flex; align-items: center; gap: .45em; min-width: 0; padding: .35em .45em; }
.f2-sc .pbox { font-size: 1.1em; }
.f2-st { flex: 1; min-width: 0; font-size: .72em; line-height: 1.25; text-wrap: pretty; }
.f2-gh1 + .f2-good .pbox { font-size: 1.45em; }
.f2-gh1 + .f2-good .f2-st { font-size: .85em; font-weight: 700; }
.f2-sc .f2-tk { width: 1.1em; height: 1.1em; }
.f2-more { display: grid; gap: .45em; }

/* asking for help: cards to cut out, fitted to how the child talks */
.f2-hcards { flex: 1 0 auto; }
.f2-hc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; padding: .4em .3em; text-align: center; }
.f2-hc .em { font-size: 2.1em; line-height: 1.1; }
.f2-hc b { font-size: .9em; line-height: 1.15; text-wrap: balance; }
.f2-hcards.l1 .f2-hc .em { font-size: 2.8em; }
.f2-hcards.l1 .f2-hc b { font-size: 1.05em; }
.f2-hs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; padding: .45em .5em; text-align: center; }
.f2-hs .pbox { font-size: 1.3em; }
.sheet .f2-pf .f2-fc { width: 1.5em; height: 1.5em; }
.f2-when { font-size: .66em; line-height: 1.2; color: #333; }
.f2-say { border: 2px solid #111; border-radius: .8em; padding: .3em .6em; font-size: .78em; font-weight: 700; line-height: 1.25; text-wrap: balance; }