/* aitism learn: Writing: name, letters, finish, frame, paths. Classes start wt-. Every size in em of the sheet base;
   Print Black for what the child reads and answers on, Trace Grey for letters to go over, the line colour only on route furniture. */

/* rows that share the page: spare height goes between them, never to a blank bottom half */
.wt-rows { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; align-content: space-evenly; }

/* handwriting lines (.wl, from the writing sheet): words printed in Print Black to copy from, letters spaced out to go over */
.wl .wt-ink { position: relative; color: #111; padding: 0 .3em 0 .25em; }
.wl .wt-sp { word-spacing: .5em; }

/* my name: a picture at the start of every line, bigger at the lower levels */
.wr.wt-nm { padding: .25em .75em .35em .85em; gap: 0 .7em; }
.wr.wt-nm.wt-l1 { grid-template-columns: 2.5em minmax(0, 1fr); }
.wt-nm.wt-l1 .wr-pic { width: 2.5em; height: 2.5em; }
.wt-nm.wt-l1 .wr-pic .em { font-size: 1.55em; }
.wr.wt-nm.wt-l2 { grid-template-columns: 2.2em minmax(0, 1fr); }
.wt-nm.wt-l2 .wr-pic { width: 2.2em; height: 2.2em; }
.wt-nm.wt-l2 .wr-pic .em { font-size: 1.35em; }

/* letters: the picture and its word on the left, the letter on the lines; the first letter of the word is bold and underlined */
.wr.wt-lt { grid-template-columns: 3em minmax(0, 1fr); padding: .3em .75em .35em .85em; }
.wr.wt-lt.wt-l1 { grid-template-columns: 3.3em minmax(0, 1fr); }
.wt-lc { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; }
.wr-pic.wt-pl { width: 2.3em; height: 2.3em; }
.wr-pic.wt-pl .em { font-size: 1.45em; }
.wt-cw { line-height: 1.1; white-space: nowrap; }
.wt-cw b { font-weight: 700; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }

/* finish the sentence: a sentence with a gap, a big picture at the first level, choices or a word bank */
.wt-qs .q.wt-fs { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: .4em .7em .45em .95em; }
.wt-qs.l1 .q.wt-fs { grid-template-columns: 3.3em minmax(0, 1fr); gap: 0 .8em; padding: .55em .8em .6em 1em; }
/* a sentence beside its picture, when the avoid list leaves too few facts */
.wt-qs .q.wt-fs.wt-fp { grid-template-columns: 2.4em minmax(0, 1fr); gap: 0 .7em; }
.pbox.wt-fpic { width: 2.4em; height: 2.4em; }
.pbox.wt-fpic .em { font-size: 1.5em; }
.pbox.wt-big { width: 3.3em; height: 3.3em; }
.pbox.wt-big .em { font-size: 2.1em; }
.wt-fsr { display: grid; gap: .3em; min-width: 0; justify-items: start; }
.wt-sent { font-size: 1.05em; line-height: 1.75; text-wrap: pretty; }
.wt-qs.l1 .wt-sent { font-size: 1.2em; line-height: 1.6; }
.wt-qs.l1 .wt-ch { font-size: .72em; }
.wt-qs.l2 .wt-sent { font-size: 1.08em; }
.wt-qs.l3 .wt-sent { font-size: 1.02em; }
/* the gap: the darkest line on the card when the word is written in it; a dashed gap when a choice is circled instead */
.wt-gap { display: inline-block; height: 1.05em; border-bottom: 3px solid #111; vertical-align: baseline; margin: 0 .15em; }
.wt-gap.thin { border-bottom: 2px dashed #111; }
.wt-chs { display: flex; flex-wrap: wrap; gap: .3em .45em; }
.wt-ch { display: inline-flex; align-items: center; gap: .3em; border: 2px solid #111; border-radius: 999px; padding: .1em .75em .1em .45em;
  font-size: .8em; line-height: 1.2; min-height: 1.9em; white-space: nowrap; }
.wt-ch .em { font-size: 1.35em; line-height: 1; }
/* words to copy from are not answers: a pale frame, so the gap stays the darkest line */
.wt-ch.wt-bk { border-color: #BDBDBD; }
.wt-bank { display: flex; align-items: center; gap: .55em; border: 2px solid #111; border-radius: 12px; padding: .35em .6em; }
.wt-bank-k { font-weight: 700; font-size: .62em; white-space: nowrap; }
.wt-bank-w { display: flex; flex-wrap: wrap; gap: .3em .4em; min-width: 0; }
.wt-bank.tall .wt-bank-w { gap: .3em; }
.wt-bank.tall .wt-ch { flex-direction: column; justify-content: center; border-radius: .45em; padding: .15em .45em .1em; gap: .05em; min-width: 3.4em; }
.wt-bank.tall .wt-ch .em { font-size: 1.7em; }

/* write about it: the start of each sentence, or a question, over handwriting lines to write on */
.wr.wt-fr { grid-template-columns: minmax(0, 1fr); padding: .3em .75em .4em .95em; gap: .08em; }
.wt-pr { font-size: .78em; font-weight: 700; line-height: 1.25; }
.wt-pr.wt-ask { font-weight: 400; color: #333; }

/* words to spell (Years 3 to 6): look, say, cover, write, check. Each card is the word to look at (its picture at level 4, what it
   means at level 5), then a line to write it from memory or three spellings to circle, then a box to tick. The word column is as
   wide as the longest word (--wt-lk), so the lines start in one place. */
.wt-sws .wr.wt-sw { grid-template-columns: 2.1em var(--wt-lk) minmax(0, 1fr) 1.25em; gap: 0 .55em; padding: .35em .75em .4em .85em; }
.wt-sws.l5 .wr.wt-sw { grid-template-columns: var(--wt-lk) minmax(0, 1fr) 1.25em; }
.wt-sw .wr-pic { width: 2.1em; height: 2.1em; }
.wt-sw .wr-pic .em { font-size: 1.3em; }
.wt-lk { display: grid; gap: .1em; min-width: 0; line-height: 1.2; }
.wt-lk b { font-weight: 700; white-space: nowrap; }
.wt-lk small { font-size: .6em; line-height: 1.25; color: #333; text-wrap: pretty; }
.wt-sw .wt-ch { padding: .1em .6em; }
/* the spellings under the word, three to a row, when they do not fit beside it; what the word means stands beside it */
.wt-sws.st .wr.wt-sw { grid-template-columns: 2.1em minmax(0, 1fr) 1.25em; row-gap: .2em; }
.wt-sws.st.l5 .wr.wt-sw { grid-template-columns: minmax(0, 1fr) 1.25em; }
.wt-sws.st .wt-sw .wr-pic { grid-area: 1 / 1 / 3; }
.wt-sws.st .wt-sw .tick { grid-area: 1 / -2 / 3; }
.wt-sws.st .wt-sw .wt-lk { grid-area: 1 / -3; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 0 .4em; }
.wt-sws.st .wt-sw :is(.wt-chs, .wr-l) { grid-area: 2 / -3; }
.wt-sws.st .wt-ch { font-size: .72em; }
/* the sentence at the end: what to do over handwriting lines */
.wt-sws .wr.wt-sn { grid-template-columns: minmax(0, 1fr); gap: .08em; padding: .35em .75em .4em .85em; }

/* finish the sentence (Years 3 to 6): joining words in pale frames without pictures; the facts to use, one to a line; endings to
   circle, which wrap when they are long */
.wt-jn .wt-ch, .wt-bank.wt-jw .wt-ch { padding: .1em .6em; }
.wt-bank.wt-facts { align-items: flex-start; }
.wt-facts .wt-bank-k { padding-top: .2em; }
.wt-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .15em; min-width: 0; font-size: .72em; line-height: 1.3; }
.wt-notes li { position: relative; padding-left: .9em; text-wrap: pretty; }
.wt-notes li::before { content: ""; position: absolute; left: .2em; top: .47em; width: .36em; height: .36em; border-radius: 50%; background: #333; }
.wt-chs.wt-ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3em .45em; justify-self: stretch; }
.wt-ch.wt-end { white-space: normal; border-radius: .7em; justify-content: center; text-align: center; text-wrap: balance; }
/* a sentence with a gap that is circled, not written in, needs no room above its gap, so its lines sit closer */
.wt-qs.wt-jn.ck .wt-sent { line-height: 1.35; }

/* write about it (Years 3 to 6, wt-rp): a heading to go over, then a paragraph with each sentence started; a report's reminder sits
   quietly at its foot */
.wt-rp .wt-ch { padding: .1em .6em; }
.wt-remind { font-size: .62em; line-height: 1.3; color: #333; padding: 0 .4em; text-wrap: pretty; }

/* pencil paths: each path in a card, from the topic picture to the picture that goes with it */
.wt-paths { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: .5em; }
.q.wt-path { display: block; padding: 0; min-height: 0; }
.wt-psvg { position: absolute; top: .3em; left: .5em; width: calc(100% - 1em); height: calc(100% - .6em); overflow: visible; }
.wt-pg { fill: none; stroke: #8F8F8F; stroke-linecap: round; stroke-linejoin: round; }
.wt-pw { fill: none; stroke: #111; stroke-linecap: round; stroke-linejoin: round; }
.wt-dot, .wt-arr { fill: #111; }
.wt-tile { fill: #fff; stroke: #111; stroke-width: 3; }
.wt-pe { font-family: var(--emoji); text-anchor: middle; dominant-baseline: central; }
.sheet.bw .wt-psvg { filter: contrast(1.35) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000); }