/* aitism learn: more Art and making activities. Every class starts .a2-; sizes in em so --k and Bigger text scale them.
   Each activity's drawing is one SVG that fills the space left on the page; making sheets cap it at life size (1 unit = 1 px). */

/* ---------- layout ---------- */
.sh-body.a2-body { gap: .45em; }
.a2-fill { position: relative; flex: 1 1 0; min-height: 6em; }
.a2-fill > svg, .a2-fill > img, .a2-row > svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; display: block; }
.a2-fill > img { object-fit: contain; }
.a2-frame { border: 3px solid #111; border-radius: .3em; background: #fff; }
.a2-frame > img { inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); }
/* trace: the topic's line art, printed paler at each level */
.a2-art { filter: grayscale(1) contrast(1.3); }
.a2-o0 { opacity: .55; }
.a2-o1 { opacity: .45; }
.a2-o2 { opacity: .38; }
.a2-o3 { opacity: .3; }
.a2-row { position: relative; flex: .42 1 0; min-height: 4em; }

/* ---------- words and pictures in the drawings ---------- */
svg.a2-s { overflow: visible; }
svg.a2-s text { text-anchor: middle; dominant-baseline: central; }
svg.a2-s text.a2-st { text-anchor: start; }
.a2-t { font-family: var(--kidfont); font-weight: 700; fill: #111; }
.a2-t.a2-tg { fill: #B3B3B3; }
.a2-t.a2-f { fill: #333; }
.a2-t.a2-fact { font-weight: 400; fill: #222; }
.a2-t.a2-nm { fill: #444; }
.a2-t.a2-pw { fill: #fff; }
.a2-e { font-family: var(--emoji); }
.a2-sc { font-family: "Segoe UI Symbol", var(--ui); fill: #444; }
.a2-gl { font-family: var(--ui); font-weight: 700; fill: #444; }
/* a letter in a pattern ring, kept readable over the line it sits on */
.a2-ml { paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }

/* ---------- lines ---------- */
.a2-wb, .a2-wf { fill: #fff; }
.a2-cut { fill: none; stroke: #555; stroke-width: 3; stroke-dasharray: 9 6; }
.a2-fold { fill: none; stroke: #444; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.a2-ht { fill: none; stroke: #777; stroke-width: 1.5; }
.a2-ln { fill: none; stroke: #AAA; stroke-width: 2; }
.a2-col { fill: none; stroke: #111; stroke-width: 3; }
.a2-stk { fill: none; stroke: #9A9A9A; stroke-width: 2.5; }
.a2-ms, .a2-ol { fill: none; stroke: #111; stroke-width: 4; stroke-linejoin: round; }
.a2-ol { stroke-width: 3; }
.a2-ms.a2-wf { fill: #fff; }
.a2-nc { fill: #fff; stroke: #111; stroke-width: 2.5; }
.a2-pb { fill: none; stroke: #111; stroke-width: 2; }
.a2-pip { fill: #111; }
/* trace: dots to follow, a big start dot, arrows; or a faint grey line */
.a2-dot { fill: none; stroke: #555; stroke-width: 4.5; stroke-dasharray: .1 11; stroke-linecap: round; stroke-linejoin: round; }
.a2-sd { fill: #111; }
.a2-ar { fill: #555; }
.a2-tl { fill: none; stroke: #BDBDBD; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- squared grids (half, pixel): one square is 100 units, so the lines keep their width ---------- */
.a2-gd { fill: none; stroke: #8F8F8F; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.a2-fr { fill: none; stroke: #111; stroke-width: 2.6px; vector-effect: non-scaling-stroke; }
.a2-mir { fill: none; stroke: #111; stroke-width: 5px; vector-effect: non-scaling-stroke; }
.a2-k { fill: #111; }
.a2-g { fill: #9A9A9A; }

/* ---------- words above and beside the drawings ---------- */
.sheet .pbox.a2-dp { font-size: .9em; }
.a2-cap, .a2-lab { margin: 0; flex: none; font-weight: 700; line-height: 1.25; }
.a2-cap { display: flex; align-items: center; gap: .4em; }
.a2-lab { font-size: .85em; }
/* pixel: the picture with its key beside it, then the empty grid */
.a2-pxtop { display: flex; gap: .6em; flex: .62 1 0; min-height: 6em; }
.a2-pxtop > .a2-fill { flex: 1 1 0; min-height: 0; }
.a2-key { list-style: none; margin: 0; padding: 0; flex: none; display: flex; flex-direction: column; justify-content: center; gap: .3em; max-width: 40%; }
.a2-key li { display: flex; align-items: center; gap: .35em; font-size: .85em; font-weight: 700; line-height: 1.2; }
.a2-key li.a2-kcap { margin-bottom: .2em; }
.a2-sq { flex: none; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border: 2px solid #111; background: #fff; color: #111;
  font: 700 .8em/1 var(--kidfont); }
.a2-sq.a2-sqk { background: #111; }
.a2-sq.a2-sqg { background: #9A9A9A; }
.a2-sw { flex: none; display: inline-block; width: .95em; height: .95em; border-radius: 50%; border: 2px solid #111; vertical-align: -.12em; }
/* mandala: the colours to use, in one row */
.a2-keyrow { margin: 0; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25em .9em; font-size: .9em; line-height: 1.25; }
.a2-kl { font-weight: 700; }
.a2-kc { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; }
/* boxes to draw in, each with its picture and word on top */
.a2-drow { display: flex; gap: .6em; flex: .5 1 0; min-height: 5em; }
.a2-dr { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.a2-dcap { margin: 0; display: flex; align-items: center; gap: .3em; font-size: .85em; font-weight: 700; line-height: 1.15; min-width: 0; }
.a2-dcap > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.a2-box { flex: 1 1 0; min-height: 2.5em; border: 3px solid #111; border-radius: .3em; background: #fff; }