/* aitism learn: Art and making: picture, bynumber, dots, copy, strips, cutting, draw. Classes start ar-.
   Sizes in em of the sheet base; Print Black on white; the line colour only on number badges. */

/* the body: a picture, grid or frame takes whatever height is left, so the page is used down to the footer */
.sh-body.ar-body { gap: .45em; }
/* a box that fills the space left; what is inside is fitted to it, so nothing waits for an image to load */
.ar-box { position: relative; flex: 1 1 0; min-height: 5em; }
.ar-box > img, .ar-box > svg, .ar-box > .ar-noart { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-box > img { object-fit: contain; }
.ar-noart { display: grid; place-items: center; font-family: var(--emoji); font-size: 6em; line-height: 1; }

/* a number badge, like the stops on the route */
.ar-n { flex: none; width: 2em; height: 2em; border-radius: 50%; background: var(--line); color: var(--line-ink);
  display: grid; place-items: center; font: 700 .55em/1 var(--ui); }
/* a crayon swatch; the colour's name is always written beside it */
.ar-sw { flex: none; width: .95em; height: .95em; border-radius: 50%; border: 2px solid #111; background: #fff; }

/* 1. colouring: the picture in a frame, the things to colour under it */
.ar-frame { border: 2px solid #111; border-radius: .4em; background: #fff; }
.ar-frame > img { inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); filter: grayscale(1) contrast(1.3); }
.ar-things { list-style: none; margin: 0; padding: 0 0 .2em; flex: none; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .3em .9em; }
.ar-things li { display: flex; align-items: center; gap: .4em; min-width: 0; font-size: .8em; line-height: 1.3; }
.ar-things .pbox { font-size: .8em; }
.ar-things.l1 li { font-size: .95em; font-weight: 700; }
.ar-things.l1 .pbox { font-size: .9em; }
/* the colour word, with its swatch in front of it like a key */
.ar-cw { white-space: nowrap; font-weight: 700; }
.ar-cw .ar-sw { display: inline-block; vertical-align: -.1em; width: .85em; height: .85em; margin-right: .2em; }

/* 2. colour by number: the key over the grid */
.ar-key { list-style: none; margin: 0; padding: 0; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25em 1em; }
.ar-key li { display: flex; align-items: center; gap: .3em; font-size: .8em; font-weight: 700; }
.ar-key .ar-n { background: #fff; color: #111; border: 2px solid #111; font-family: var(--kidfont); font-size: .7em; }
.ar-key .ar-k0 { font-weight: 400; }
.ar-bn .ar-g1 { fill: none; stroke: #A3A3A3; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ar-bn .ar-g2 { fill: none; stroke: #444; stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.ar-bn .ar-g3 { fill: none; stroke: #111; stroke-width: 2.6px; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.ar-gn text { font-family: var(--kidfont); font-weight: 700; fill: #333; text-anchor: middle; dominant-baseline: central; }

/* 3. dot-to-dot: what the dots make, then the dots; no lines are drawn for the child */
.ar-make { flex: none; display: flex; align-items: center; gap: .5em; font-size: .9em; font-weight: 700; }
.ar-make .pbox { font-size: 1.05em; }
.ar-dots circle { fill: #111; }
.ar-dots .ar-d1 { fill: none; stroke: #111; stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.ar-dn text { font-family: var(--kidfont); font-weight: 700; fill: #111; text-anchor: middle; dominant-baseline: central; }
.ar-dn .ar-st { font-weight: 400; }

/* 4. copy the picture: the picture and an empty grid of the same size, side by side or one over the other */
.ar-copy { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .6em; }
.ar-pair { flex: 1 1 0; min-height: 0; display: flex; gap: .9em; }
.ar-copy.one .ar-pair { flex-direction: column; gap: .5em; }
.ar-fig { flex: 1 1 0; min-width: 0; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: .25em; }
.ar-fig figcaption { flex: none; display: flex; align-items: center; gap: .35em; font-size: .75em; font-weight: 700; }
.ar-fig .pbox { font-size: .85em; }
.ar-fig .ar-box { min-height: 3em; }
.ar-cg .ar-c2 { fill: #111; }
.ar-cg .ar-c1 { fill: #9A9A9A; }
.ar-cg .ar-cl { fill: none; stroke: #8F8F8F; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.ar-cg .ar-cf { fill: none; stroke: #111; stroke-width: 2.6px; vector-effect: non-scaling-stroke; }
.ar-cn text { font-family: var(--kidfont); font-weight: 700; fill: #333; text-anchor: middle; dominant-baseline: central; }

/* 5. picture strips: the strips to cut out, then the frame to stick them in */
.ar-strips { min-height: 6em; }
.ar-sv image { filter: grayscale(1) contrast(1.3); }
.ar-sv text { font-family: var(--kidfont); font-weight: 700; fill: #111; text-anchor: middle; dominant-baseline: central; }
.ar-sv .ar-cut, .ar-sv .ar-gd { fill: none; stroke: #666; stroke-width: 2px; stroke-dasharray: 7px 5px; vector-effect: non-scaling-stroke; }
.ar-sv .ar-scis rect { fill: #fff; }
.ar-sv .ar-scis text { font-family: "Segoe UI Symbol", var(--ui); font-weight: 400; fill: #444; }
.ar-sv .ar-sn { fill: #fff; stroke: #111; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.ar-sv .ar-frm { fill: none; stroke: #111; stroke-width: 2.6px; vector-effect: non-scaling-stroke; }
.ar-sv .ar-sg { fill: #8A8A8A; }
.ar-cap { flex: none; display: flex; align-items: center; gap: .35em; font-size: .75em; font-weight: 700; line-height: 1.3; }

/* 6. cutting practice: strips down the page, each with a thick dashed line from the scissors to a picture */
.ar-cuts { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ar-cut-row { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: .15em; padding: .25em .3em; }
.ar-cut-row + .ar-cut-row { border-top: 2px solid #9A9A9A; }
.ar-cut-row.ar-shape { flex-grow: 2; }
.ar-cr { display: flex; align-items: center; gap: .35em; }
.ar-sc { flex: none; width: 1.3em; text-align: center; font: 400 1.25em/1 "Segoe UI Symbol", var(--ui); color: #111; }
.ar-cp, .ar-cs { flex: none; overflow: visible; }
.ar-cp path, .ar-cs path { fill: none; stroke: #111; stroke-width: 14; stroke-dasharray: 44 26; stroke-linejoin: round; }
.ar-cr .pbox.ar-end { font-size: 1.15em; }
.ar-shape .ar-cr { gap: .2em; }
.ar-shape .ar-cr > span:last-child { margin-left: auto; }

/* 7. draw and write: the idea, a big box to draw in, then handwriting lines */
.ar-idea { flex: none; font-size: .95em; font-weight: 700; }
.ar-draw { border: 3px solid #111; border-radius: .45em; min-height: 6em; }
.ar-hint { position: absolute; top: .3em; left: .3em; display: flex; gap: .25em; }
.ar-hint .pbox { font-size: .8em; }
.ar-write { flex: none; padding-bottom: .1em; }
.ar-wrow { display: flex; align-items: center; gap: .5em; }
.ar-wrow .pbox { font-size: 1.1em; }
.ar-wl { flex: 1; min-width: 0; }
.ar-write .choices { margin-top: .3em; }
.ar-talk { flex: none; display: flex; align-items: center; gap: .4em; font-size: .75em; line-height: 1.5; padding-bottom: .2em; }
.ar-talk .em { line-height: 1; }