/* aitism learn: Feelings activities. Classes start fl-. Sizes in em of the sheet base; Print Black on white;
   the line colour only on route furniture (stops, rails, start discs, coping boxes, the reward pill). */

/* the faces: one pen for the whole set */
.fl-fc { display: block; fill: none; stroke: #111; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fl-fc .h { fill: #fff; stroke-width: 4; }
.fl-fc .d { fill: #111; stroke: none; }
.fl-fc .w { fill: #fff; }
.fl-fc .t { stroke-width: 3.2; }
.fl-fc .z { stroke-width: 3.4; }
.fl-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12em; padding: .4em .3em .3em;
  border: 2px solid #BDBDBD; border-radius: 14px; min-width: 0; }
.fl-face .fl-fc { width: var(--fs, 3em); height: var(--fs, 3em); }
.fl-fw { font-weight: 700; font-size: 1em; line-height: 1.15; text-align: center; }

/* shared bits */
.fl-h { font-weight: 700; font-size: .8em; line-height: 1.2; }
.fl-ln { display: inline-block; flex: 1 1 auto; min-width: 3em; height: 1.1em; border-bottom: 2px solid #111; }
.fl-bl { display: inline-block; flex: none; width: 5em; height: 1.1em; border-bottom: 2px solid #111; }

/* check-in: the faces share out the room, a sentence and a speech bubble under them, then what can help */
.fl-faces { flex: 1 0 auto; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .55em .6em; align-content: space-evenly; }
/* faces as big as the room allows: .more when a second question shares the page */
.fl-faces.n4 { --cols: 2; --fs: 6.2em; }
.fl-faces.n6 { --cols: 3; --fs: 4.9em; }
.fl-faces.n8 { --cols: 4; --fs: 4.4em; }
.fl-faces.n4.more { --fs: 5.6em; }
.fl-faces.n6.more { --fs: 4.6em; }
.fl-faces.n8.more { --fs: 4.1em; }
.sheet.big .fl-faces.n4 { --fs: 5.4em; }
.sheet.big .fl-faces.n6 { --fs: 4.3em; }
.sheet.big .fl-faces.n8 { --fs: 3.6em; }
.sheet.big .fl-faces.n4.more { --fs: 3.9em; }
.sheet.big .fl-faces.n6.more { --fs: 3.6em; }
.sheet.big .fl-faces.n8.more { --fs: 2.6em; }
.fl-faces.n4 .fl-fw { font-size: 1.2em; }
.fl-faces.n8 .fl-fw { font-size: .9em; }
.fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45em .9em; }
.fl-frame { flex: 1 1 8em; display: grid; gap: .3em; font-size: .9em; line-height: 1.3; }
.fl-frame.wide { flex-basis: 100%; }
.fl-frame p { display: flex; align-items: flex-end; white-space: nowrap; }
.fl-frame .fl-bl { margin: 0 .3em; }
.fl-frame .fl-bl + .fl-ln, .fl-frame p > .fl-ln:not(:first-child) { margin-left: .3em; }
.fl-say { flex: 1 1 11em; display: flex; align-items: center; gap: .65em; }
.fl-bub { position: relative; border: 2px solid #111; border-radius: .8em; padding: .3em .75em; font-size: .78em; line-height: 1.3; text-wrap: pretty; }
.fl-bub::before { content: ""; position: absolute; left: -.42em; top: 50%; width: .7em; height: .7em; margin-top: -.35em; background: #fff;
  border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); }
.fl-helps { display: grid; gap: .3em; }
.fl-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.fl-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; border: 2px solid #BDBDBD; border-radius: 14px;
  padding: .3em .5em .35em; font-size: .78em; line-height: 1.2; text-align: center; text-wrap: balance; min-width: 0; }
.fl-opt .pbox { font-size: 1.2em; }
.fl-opt .tick { position: absolute; top: .35em; right: .35em; width: 1.1em; height: 1.1em; }

/* scale: a tall column of numbered steps on the line's rail, with what each can look like and what helps */
.fl-sc { flex: 1 0 auto; display: flex; flex-direction: column; }
.fl-st { display: grid; grid-template-columns: 6.8em minmax(0, 1fr) minmax(0, 1fr); gap: 0 .7em; align-items: center; }
.fl-sc-hd { padding-bottom: .2em; }
.fl-sc-hd span { font-weight: 700; font-size: .62em; color: #333; }
.fl-sc-rows { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-auto-rows: 1fr; position: relative; }
.fl-sc-rows::before { content: ""; position: absolute; left: .7em; top: 1.4em; bottom: 1.4em; width: .2em; margin-left: -.1em; background: var(--line); border-radius: .1em; }
.fl-sc-rows .fl-st { border-top: 2px solid #BDBDBD; padding: .15em 0; }
.fl-sc-rows .fl-st:last-child { border-bottom: 2px solid #BDBDBD; }
.fl-st-k { position: relative; display: grid; grid-template-columns: 1.4em 2.3em minmax(0, 1fr); align-items: center; gap: .3em; }
.fl-st-n { width: 1.75em; height: 1.75em; border-radius: 50%; background: #fff; border: .17em solid var(--line); display: grid; place-items: center; font: 700 .8em/1 var(--ui); }
.fl-st-k .fl-fc { width: 2.3em; height: 2.3em; }
.sheet:not(.big) .fl-st-k { grid-template-columns: 1.4em 2.6em minmax(0, 1fr); }
.sheet:not(.big) .fl-st-k .fl-fc { width: 2.6em; height: 2.6em; }
.fl-st-w { font-weight: 700; font-size: .7em; line-height: 1.15; }
.fl-sc.n3 .fl-st { grid-template-columns: 7.8em minmax(0, 1fr) minmax(0, 1fr); }
.sheet .fl-sc.n3 .fl-st-k { grid-template-columns: 1.4em 3.2em minmax(0, 1fr); }
.sheet .fl-sc.n3 .fl-st-k .fl-fc { width: 3.2em; height: 3.2em; }
.fl-cell { font-size: .7em; line-height: 1.28; text-wrap: pretty; min-width: 0; }
.sheet.big .fl-sc.l3 .fl-cell { font-size: .62em; }
.sheet.big .fl-sc.n5 .fl-st-k .fl-fc { width: 2.1em; height: 2.1em; }
.sheet.big .fl-sc.n5 .fl-st-k { grid-template-columns: 1.4em 2.1em minmax(0, 1fr); }
.sheet.big .fl-sc.n5.l1 .fl-cell.l1 .pbox { font-size: 1em; }
.fl-cell.l1 { display: flex; align-items: center; gap: .45em; font-weight: 700; font-size: .78em; line-height: 1.2; }
.fl-cell.l1 .pbox { font-size: 1.1em; }
.fl-moves { display: grid; gap: .3em; margin-top: .2em; }
.fl-moves ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em .8em; }
.fl-moves ul.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-mv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .15em .5em; font-size: .78em; line-height: 1.25; }
.fl-mv > .pbox { grid-row: span 2; font-size: 1em; }
.fl-mv-l { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .45em; }
.fl-mv .cope { margin-top: 0; font-size: .85em; justify-self: start; }
.fl-mv .box { width: 1.7em; height: 1.35em; }
.fl-nums .choice { min-width: 1.5em; height: 1.5em; font-size: .85em; }
.sheet .pbox.fl-gap { border-style: dashed; }
.fl-mv-blank { flex: 0 1 6em; }

/* calm choices: level 1 big cut-out cards; then a board of choices to circle or tick; then a calm plan */
.fl-cards { flex: 1 0 auto; --cols: 2; }
.fl-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; padding: .45em .4em; text-align: center; }
.sheet .fl-card .pbox.fl-big { font-size: 2.1em; }
.fl-card-w { font-weight: 700; font-size: 1.05em; line-height: 1.15; text-wrap: balance; }
.fl-cc { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; align-content: space-evenly; }
.fl-ch { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; text-align: center;
  border: 2px solid #BDBDBD; border-radius: 14px; padding: .55em .45em; min-width: 0; }
.fl-ch .pbox { font-size: 1.55em; }
.fl-ch-t { font-size: .75em; line-height: 1.25; text-wrap: balance; }
.fl-ch .tick { position: absolute; top: .3em; right: .3em; width: 1em; height: 1em; }
.fl-cc.l3 .pbox { font-size: 1.25em; }
.fl-cc.l3 .fl-ch-t { font-size: .7em; }
.sheet:not(.big) .fl-cc.l3 .pbox { font-size: 1.5em; }
.sheet.big .fl-cc.l3 .fl-ch { padding: .35em .4em; gap: .2em; }
.sheet.big .fl-cc.l3 .pbox { font-size: 1.1em; }
.fl-cc.n6 .pbox { font-size: 2em; }
.fl-cc.n6 .fl-ch-t { font-size: .85em; }
.sheet.big .fl-cc.l3.n6 .pbox { font-size: 1.5em; }
.sheet.big .fl-cards.n6 .pbox.fl-big { font-size: 1.8em; }
.fl-plan { display: grid; gap: .45em; border: 2px solid #BDBDBD; border-radius: 14px; padding: .4em .75em .6em; }
.fl-pl { display: flex; align-items: flex-end; gap: .35em; font-size: .85em; white-space: nowrap; }
.fl-book { position: relative; }
.fl-badge { position: absolute; right: -.4em; bottom: -.35em; width: 1.15em; height: 1.15em; border-radius: 50%; background: #fff; border: 2px solid #111;
  display: grid; place-items: center; font-style: normal; font-size: .6em; }
.sheet .pbox .fl-badge .em { font-size: .78em; }

/* breathing shapes: a thick line to follow with a finger, arrows on it, words outside it, a start disc with the topic picture */
.fl-brs { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: .5em; }
.fl-br1 { display: grid; justify-items: center; gap: .25em; }
.fl-br1 .fl-shape { width: min(100%, 17.5em); }
.sheet.big .fl-br1 .fl-shape { width: min(100%, 14.6em); }
.fl-br-t { font-weight: 700; font-size: .95em; line-height: 1.2; }
.fl-br-say { font-size: .8em; line-height: 1.35; text-align: center; text-wrap: balance; }
.fl-shape { position: relative; width: 100%; }
.fl-shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-path { fill: none; stroke: #111; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-arrow { fill: #111; }
.fl-shape text { font-family: var(--kidfont); font-weight: 700; fill: #111; dominant-baseline: central; }
.fl-go { position: absolute; transform: translate(-50%, -50%); width: 1.6em; height: 1.6em; border-radius: 50%; background: #fff;
  border: .14em solid var(--line); display: grid; place-items: center; }
.fl-go .em { font-size: .95em; line-height: 1; }
.fl-br1 .fl-go { font-size: 1.3em; }
.fl-brs.n3 .fl-go { font-size: .85em; }
.fl-brs .s-star .fl-go { font-size: .72em; }
.fl-brow { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); gap: .3em 1em; align-items: center; }
.sheet.big .fl-brow { grid-template-columns: 10.5em minmax(0, 1fr); }
.fl-brs.n3 .fl-brow { grid-template-columns: 9.6em minmax(0, 1fr); }
.sheet.big .fl-brs.n3 .fl-brow { grid-template-columns: 6.2em minmax(0, 1fr); }
.fl-key { list-style: none; margin: .3em 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.1em; }
.fl-key li { display: flex; align-items: center; gap: .4em; font-weight: 700; font-size: .85em; }
.fl-br-txt { display: grid; gap: .25em; }
.fl-br-l { margin: 0; padding: 0; list-style: none; display: grid; gap: .15em; font-size: .78em; line-height: 1.3; }
.fl-after { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1em; border-top: 2px solid #BDBDBD; padding-top: .45em; }
.fl-af-l { display: grid; gap: .25em; }
.fl-af { display: flex; gap: .45em; }
.fl-af .fl-face { padding: .2em .35em .15em; }
.fl-af .fl-fc { width: 2.1em; height: 2.1em; }
.fl-af .fl-fw { font-size: .7em; }
.fl-af-r { flex: 1 1 8em; display: grid; gap: .45em; justify-items: start; }
.fl-af-r .fl-frame { font-size: .85em; }

/* talking board: groups of cells that share the page; the frame style hints at the kind of word, the word and the picture say it */
.fl-board { flex: 1 0 auto; display: flex; flex-direction: column; gap: .45em; }
.fl-tg { flex: var(--rows) 1 0; display: flex; flex-direction: column; gap: .2em; min-height: 0; }
.fl-th { font-size: .55em; font-weight: 700; color: #333; line-height: 1.2; }
.fl-tgrid { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .3em; }
.fl-tc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12em; padding: .2em .15em; border: 2px solid #111;
  border-radius: .3em; min-width: 0; text-align: center; }
.fl-tc.t-s { border-width: 3px; }
.fl-tc.t-n { border-radius: .9em; }
.fl-tc.t-ph { border-width: 3px; border-radius: .9em; }
.fl-tp { line-height: 1; }
.fl-tp .em { line-height: 1; }
.fl-tw { font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; text-wrap: balance; }
.fl-board.l1 .fl-tp { font-size: 2.6em; }
.fl-board.l1 .fl-tw { font-size: 1.1em; }
.fl-board.l2 .fl-tp { font-size: 1.7em; }
.fl-board.l2 .fl-tw { font-size: .78em; }
.fl-board.l3 .fl-tp { font-size: 1.3em; }
.fl-board.l3 .fl-tw { font-size: .62em; }
.fl-board.l2.few .fl-tp { font-size: 2.3em; }
.fl-board.l2.few .fl-tw { font-size: .95em; }
.fl-board.l3.few .fl-tp { font-size: 2.2em; }
.fl-board.l3.few .fl-tw { font-size: .78em; }

/* all about me: a profile page; the photo space grows to take what is left */
.fl-me-top { flex: 1 0 auto; display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: .8em; align-items: stretch; }
.fl-photo { min-height: 5.6em; border: 3px solid #111; border-radius: .4em; display: grid; place-items: end center; padding: .45em .35em; }
.fl-photo span { font-size: .55em; color: #333; text-align: center; line-height: 1.25; text-wrap: balance; }
.fl-me-id { display: flex; flex-direction: column; justify-content: center; gap: .35em; min-width: 0; }
.fl-me-name { display: flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.3em; line-height: 1.15; }
.fl-me-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.fl-me-b { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--line); color: var(--line-ink); display: grid; place-items: center; font: 700 .85em/1 var(--ui); }
.fl-me-age { font-size: .9em; }
.fl-me-love { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; }
.fl-loves { display: flex; flex-wrap: wrap; gap: .3em .8em; }
.fl-love { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: .85em; }
.fl-me-x { flex-basis: 100%; font-size: .7em; color: #333; }
.fl-me-card { border: 2px solid #BDBDBD; border-radius: 14px; padding: .35em .65em .45em; display: grid; gap: .3em; }
.fl-me-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3em .9em; }
.fl-me-l li { display: flex; align-items: center; gap: .45em; font-size: .72em; line-height: 1.25; min-width: 0; }
.fl-me-h li { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: .3em .7em; align-items: center; font-size: .74em; }
.fl-me-h { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.fl-hw { display: flex; align-items: center; gap: .45em; font-weight: 700; line-height: 1.2; }
.fl-me-h .cope { margin-top: 0; justify-self: start; font-size: .95em; }
.fl-me-then { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; font-weight: 700; font-size: .9em; }
.fl-pill { display: inline-flex; align-items: center; gap: .4em; background: var(--line); color: var(--line-ink); border-radius: 999px; padding: .2em 1em .2em .25em; }
.fl-pill .em { width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.2em; line-height: 1; }

/* last fits for Bigger text */
.sheet.big .fl-mv { font-size: .72em; }
.sheet.big .fl-sc.l3 .fl-cell { font-size: .6em; }
.sheet.big .fl-sc.n5.l1 .fl-cell.l1 { font-size: .72em; }
.sheet.big .fl-photo { min-height: 4.4em; }
.sheet.big .fl-me-top { grid-template-columns: 5.6em minmax(0, 1fr); }
.sheet.big .fl-me-name { font-size: 1.15em; }
.sheet.big .fl-me-id { gap: .25em; }
.sheet.big .fl-me-age, .sheet.big .fl-love { font-size: .8em; }
.sheet.big .fl-me-l li { font-size: .68em; }
.sheet.big .fl-me-h li { font-size: .7em; }
.sheet.big .fl-me-x { font-size: .64em; }
.sheet.big .fl-me-then { font-size: .82em; }
.sheet.big .fl-brow { grid-template-columns: 9.8em minmax(0, 1fr); }
.sheet.big .fl-faces.n4.more { --fs: 3.6em; }
.sheet.big .fl-faces.n6.more { --fs: 3.4em; }
.fl-bl + .fl-dot { margin-left: -.3em; }