/* Izzi Math print sheets.
   Every sheet is ONE FULL PAGE of US Letter. Two styles, chosen by the reader:

     .plain     pure black on white, hairlines only, no tints, no decoration.
                The cheapest thing a home inkjet can produce.
     .designed  the same maths, made to be picked up: the character in the
                header, a trick box in their voice, named sections, rounded
                problem cards and one accent colour from that character's own
                pack. The accent is spent on strokes, labels and section bands
                at about a tenth strength — never flooded behind the maths — so
                it stays cheap, and it degrades to grey on a mono printer.

   Both keep the site's typography so a printed page and the screen feel related.

   Three age bands cut across both styles, because a Kindergarten sheet and a
   Grade 5 sheet should not look alike:

     .little   K-1   biggest type, character speaks the trick, stars to colour
     .middle   2-3   named sections, trick box, scratch space, tick circles
     .big      4-5   compact strategy note, denser grid, a challenge, no stars
*/

.sheet {
  --ink: #111;
  --rule: #111;
  --hair: #b9b9b9;
  --soft: #6b6b6b;
  --pad: 0.42in;
  /* The character's print accent is set inline on .designed sheets. Everything
     below reads --acc, so the plain sheet and the "Just math" character simply
     inherit ink and no colour appears anywhere. */
  --acc: var(--ink);
  --acc-tint: #f4f4f4;
  --acc-line: var(--hair);
  background: #fff; color: var(--ink);
  width: 7.5in; min-height: 10in;
  margin: 0 auto; padding: var(--pad);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.45;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
.sheet * { box-sizing: border-box }
/* Two mixes of the accent: a hairline weight for borders and a very light wash
   for section bands. color-mix is only ever an enhancement here — a browser
   without it keeps the grey defaults above and the sheet still reads. */
.designed { --acc-tint: color-mix(in srgb, var(--acc) 10%, #fff); --acc-line: color-mix(in srgb, var(--acc) 38%, #fff) }
.sheet-preview { border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.55); margin: 20px auto }

/* ------------------------------------------------------------------ header */
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none }
.sh-id { display: flex; align-items: center; gap: 11px; min-width: 0 }
.sh-id svg { width: 40px; height: 40px; flex: none }
.sh-head b { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.02em; display: block; line-height: 1.15 }
.sh-head small { display: block; font-size: 9.5px; color: var(--soft); letter-spacing: .07em; text-transform: uppercase; margin-top: 3px }
.sh-name { font-size: 10px; color: var(--soft); text-align: right; line-height: 2.1; white-space: nowrap; flex: none }
.sh-name u { display: inline-block; width: 88px; border-bottom: 1px solid var(--hair); text-decoration: none }

.plain .sh-head { border-bottom: 2px solid var(--rule); padding-bottom: 9px; margin-bottom: 16px }

.designed .sh-head { padding-bottom: 10px; margin-bottom: 4px }
/* A short tapered accent, not a full-width rule — it reads as a mark rather
   than a broken underline. */
.designed .sh-rule { flex: none; height: 4px; width: 132px; margin: 0 0 15px; display: flex; gap: 3px; align-items: stretch }
.designed .sh-rule i { background: var(--acc); border-radius: 2px }
.designed .sh-head b { color: var(--acc) }
.designed .sh-rule i:nth-child(1) { flex: 6 }
.designed .sh-rule i:nth-child(2) { flex: 3 }
.designed .sh-rule i:nth-child(3) { flex: 1.4 }
.designed .sh-rule i:nth-child(4) { flex: .7 }

/* ------------------------------------------------------------------ blocks */
.sh-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0 }
.sh-block { break-inside: avoid; page-break-inside: avoid }
.sh-block + .sh-block { margin-top: 15px }
.sh-inst { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 500; margin: 0 0 11px; display: flex; align-items: baseline; gap: 7px }
.sh-inst .n { font-family: 'Space Grotesk', sans-serif; font-size: 11px; flex: none }
.plain .sh-inst .n { font-weight: 700 }
.designed .sh-inst .n {
  width: 17px; height: 17px; border-radius: 50%; background: var(--acc); color: #fff;
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; align-self: center;
}
/* "Bigger or smaller?" then the instruction, quieter, after an em dash. */
.sh-inst b { font-weight: 700 }
.designed .sh-inst b { color: var(--acc) }
.sh-inst em { font-style: normal; font-weight: 400; color: var(--soft) }
.sh-inst em::before { content: ' \2014 ' }
/* The named section sits in a light band on the two younger bands. It is the
   single biggest reason a sheet looks made rather than generated, and at a tenth
   strength over a 20px strip it costs almost nothing to print. */
.designed.little .sh-inst,
.designed.middle .sh-inst {
  background: var(--acc-tint); border-left: 3px solid var(--acc);
  border-radius: 0 5px 5px 0; padding: 5px 9px; margin-bottom: 10px;
}
.little .sh-inst { font-size: 14px }
.little .sh-inst b, .little .sh-inst em { display: block }
.little .sh-inst em::before { content: none }
.big .sh-inst { font-size: 11.5px; margin-bottom: 8px }
.sh-note { font-size: 9.5px; color: var(--soft); font-style: italic; margin-top: 5px }

/* ------------------------------------------------------------------ grids */
.sh-grid { display: grid; gap: 14px 18px }
.sh-grid.d1 { grid-template-columns: repeat(2, 1fr); font-size: 19px; gap: 22px 26px }
.sh-grid.d2 { grid-template-columns: repeat(3, 1fr); font-size: 16px; gap: 18px 20px }
.sh-grid.d3 { grid-template-columns: repeat(4, 1fr); font-size: 14.5px }
.sh-grid.d4 { grid-template-columns: repeat(5, 1fr); font-size: 13.5px }

.pr { font-family: 'Space Grotesk', sans-serif; break-inside: avoid }
/* NOT a column flexbox: that turns inline text and <strong> into separate flex
   items, so "Mark 2/5 on the line." stacked onto three lines. */
.pr > .pv, .pr > svg, .pr > .workbox, .pr > .ruled { margin-top: 5px }
.pr .lbl { font-size: .6em; color: var(--soft); margin-right: 5px }
.designed .pr { padding: 9px 11px; border: 1px solid var(--hair); border-radius: 7px }
.designed .sh-grid.d1 .pr { padding: 13px 14px }
/* The item letter. At .52em of a 14.5px grid this was a 7.5px glyph in a circle
   and read as a smudge rather than an "a)". Big enough to be a label, small
   enough to stay out of the way. */
.designed .pr .lbl {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em;
  border: 1px solid var(--soft); border-radius: 50%; font-size: .62em; color: var(--soft); margin-right: 6px;
}

/* answer boxes, not lines — sized to a child's hand, not to the type */
.pr .ansline {
  display: inline-block; border-bottom: 1.5px solid var(--ink);
  min-width: 2.4em; height: 1.1em; vertical-align: -.15em; margin-left: 6px;
}
.designed .pr .ansline {
  border: 1.4px solid var(--ink); border-radius: 5px; background: none;
  min-width: 2.5em; height: 1.5em; vertical-align: -.35em;
}
.sh-grid.d1 .pr .ansline { min-width: 2.8em; height: 1.7em }
.pr .workbox { border: 1px solid var(--hair); border-radius: 4px; height: 58px; margin-top: 5px }
.sh-grid.d1 .pr .workbox { height: 74px }

/* Primary ruling. A child still forming digits needs a midline to form them
   against, not a plain box. Heights are the measured conventions: 3/4in for K,
   5/8in for grade 1, 1/2in for grades 2-3. */
.sheet .pr .ruled {
  --rule-h: 0.5in;
  height: var(--rule-h); margin-top: 6px;
  border: 1px solid var(--hair); border-radius: 4px;
  background-image: linear-gradient(to bottom, transparent calc(50% - .5px), var(--hair) calc(50% - .5px), var(--hair) calc(50% + .5px), transparent calc(50% + .5px));
  background-repeat: no-repeat;
}
.sheet[data-grade="K"] .pr .ruled { --rule-h: 0.75in }
.sheet[data-grade="1"] .pr .ruled { --rule-h: 0.625in }
.sheet[data-grade="2"] .pr .ruled,
.sheet[data-grade="3"] .pr .ruled { --rule-h: 0.5in }

/* 89: two accessibility variants nobody in this category does well.
   Both are layout switches on the same sheet, not a separate renderer. */
.sheet.large { font-size: 1.22em }
.sheet.large .sh-grid.d3, .sheet.large .sh-grid.d4 { grid-template-columns: repeat(2, 1fr); font-size: 19px }
.sheet.large .sh-grid.d2 { grid-template-columns: repeat(2, 1fr); font-size: 20px }
.sheet.large .sh-grid.d1 { grid-template-columns: 1fr; font-size: 24px }
.sheet.large .pr .ansline { min-width: 3em; height: 1.9em }
.sheet.large .sh-head b { font-size: 23px }

/* Dyslexia-friendly: more leading, more letter spacing, wider gutters, no
   italics, and headings clearly larger than body text. */
.sheet.dyslexia { line-height: 1.85; letter-spacing: .022em; word-spacing: .12em }
.sheet.dyslexia .sh-grid { gap: 22px 26px }
.sheet.dyslexia .sh-inst { font-size: 14.5px; letter-spacing: .02em }
.sheet.dyslexia .sh-head b { font-size: 23px }
.sheet.dyslexia em, .sheet.dyslexia .sh-note { font-style: normal; font-weight: 500 }
.sheet.dyslexia .pr { line-height: 1.9 }

/* Figures are constrained by HEIGHT, not width. A viewBox that is tall and
   narrow (a 2x7 array, say) blows up to several inches if you set width:100%,
   which is what pushed sheets to three pages.

   The cap is on `.pr svg`, not on `.pv svg`. Scoping it to .pv left every figure
   that happened to be emitted outside a .pv wrapper uncapped, and one of them
   was — the number bond, at its full 150px. A sheet is only ever one page if
   NOTHING on it can grow, so the backstop goes on the container that always
   exists. */
.pr .pv { margin: 5px 0 4px }
.pr svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 0.72in }
.sh-grid.d1 .pr svg { max-height: 0.85in }
.sh-grid.d2 .pr svg { max-height: 0.72in }
.sh-grid.d3 .pr svg, .sh-grid.d4 .pr svg { max-height: 0.6in }
/* The worked example is one figure at full width, so it gets a little more. */
.sh-example .pr svg { max-height: 0.8in }
/* Full-width figures (number lines, the board) are width-driven by design, but
   still capped — a board of ten squares at 100% width is 0.4in tall, and one of
   twenty is not allowed to become an inch and a half. */
.pr.wide { padding: 5px 9px; font-size: 13.5px }
.pr.wide > svg { margin: 1px 0 0 }
.pr.wide .pv { max-width: none }
.pr.wide svg { width: 100%; max-height: 0.62in }
.pr .pv.bond { max-width: 118px; margin: 4px auto 0 }
.sh-grid.d1 .pr .pv.bond { max-width: 132px }
.pr .pv .tenframe { width: 118px }
.sh-grid.d1 .pr .pv .tenframe { width: 140px }

/* stacked vertical algorithm */
.vstack { font-family: 'Space Grotesk', sans-serif; display: inline-block; text-align: right; min-width: 3.4em }
.vstack .rule { border-top: 2px solid var(--ink); margin-top: 3px; height: 32px }

/* ---------------------------------------------------- number line + figures */
.tenframe { display: inline-grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--ink); width: 148px }
.tenframe i { aspect-ratio: 1; border: .75px solid var(--hair); display: grid; place-items: center }
.tenframe i.f::after { content: ''; width: 60%; height: 60%; border-radius: 50%; border: 1.5px solid var(--ink) }
.arr { display: inline-grid; gap: 2px }
.arr i { width: 15px; height: 15px; border: 1.2px solid var(--ink); border-radius: 2px }

/* ------------------------------------------------------------- self-check */
.sh-check { flex: none; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--soft) }
.sh-check .boxes { display: flex; gap: 5px }
.sh-check .boxes i { width: 15px; height: 15px; border: 1.2px solid var(--soft); border-radius: 3px; display: block }
.designed .sh-check .boxes i { border-radius: 50% }
.sh-check strong { font-family: 'Space Grotesk', sans-serif; color: var(--ink); font-size: 10.5px }

/* ------------------------------------------------------------------ footer */
.sh-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--hair); margin-top: 10px; padding-top: 9px; font-size: 9px; color: var(--soft) }
.sh-foot .qr { width: 50px; height: 50px; flex: none }
.sh-foot strong { color: #333 }
.designed .sh-foot { border-top: 2px solid var(--ink) }

/* ------------------------------------------------------------- answer key */
.key .pr .ansline { border: 0; border-radius: 0; min-width: 0; height: auto; background: none }
.key .ansval { font-weight: 700; color: var(--ink) }
.key .sh-head b::after { content: ' — answer key' }
.key .workbox, .key .ruled { display: none }
.key .sh-check { display: none }

@media print {
  @page { size: letter portrait; margin: 0.45in }
  html, body { background: #fff !important; color: #000 !important }
  body { display: block !important }
  .noprint, .nav, footer.foot, .grid-bg, .glow, .chpick, .sfoot, .sbar { display: none !important }
  .sheet { box-shadow: none !important; margin: 0; padding: 0; width: 100%; min-height: 9.9in; border-radius: 0 }
  .sheet-preview { box-shadow: none !important; border-radius: 0 }
  .sheet + .sheet { page-break-before: always }
  .pagebreak { page-break-before: always }
  a { text-decoration: none; color: #000 }
  a[href]::after { content: '' }
  .sh-block { page-break-inside: avoid }
}

/* self-check: the child can find their own error without an adult marking it */
.sh-selfcheck { flex: none; font-size: 10.5px; color: #333; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--hair) }
.sh-selfcheck strong { font-family: 'Space Grotesk', sans-serif }
.sh-selfcheck .bank { display: inline-block; border: 1px solid var(--hair); border-radius: 4px; padding: 0 5px; margin: 0 2px 3px 0; font-family: 'Space Grotesk', sans-serif }
.designed .sh-selfcheck .bank { border-color: #999 }

/* one line of guidance for the adult, on the key only */
.sh-adult { flex: none; font-size: 10px; color: #444; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 5px; line-height: 1.5 }
.sh-adult strong { font-family: 'Space Grotesk', sans-serif; color: #111 }

/* word-problem key: number plus the working */
.keyline { margin-top: 3px; font-size: .9em }
.keyline em { color: #555; font-style: italic; font-family: Inter, sans-serif; font-size: .92em; margin-left: 6px }

/* Worked example: the first item solved, so the method is visible.
   Kept deliberately tight. On a Kindergarten sheet at 21px type this box was
   2.2in — a fifth of the page for one solved problem — which is why the sheet
   only held three of the real ones. The figure inside it is capped harder than
   anywhere else, and the answer box is not drawn at all, because the answer is
   already printed. */
.sh-example { border: 1px dashed var(--soft); border-radius: 6px; padding: 6px 9px 5px; margin-bottom: 10px; break-inside: avoid }
.sh-example .pr { padding: 0 !important; border: 0 !important; font-size: .92em }
.sh-example .pr svg { max-height: 0.55in }
.sh-example .pr .ruled, .sh-example .pr .workbox { display: none }
.sh-example .ex-label { margin-bottom: 3px }
.designed .sh-example { border-style: solid; border-color: var(--hair); background: none }
.sh-example .ex-label { font-family: 'Space Grotesk', sans-serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 5px }
.sh-example .ex-why { font-size: 10.5px; color: #444; margin-top: 4px }
.sh-example .ex-next { font-size: 10px; color: var(--soft); font-style: italic; margin-top: 5px }
.sh-example .sh-grid { grid-template-columns: 1fr !important; gap: 0 }
.key .sh-example { display: none }

/* ---------------------------------------------------------------- trick box
   The strategy, named before the practice. Present on BOTH styles — a method
   is content, not decoration, and the cheap sheet should not be the useless
   one. What changes is the weight: an accent-bordered card with a wash on the
   designed sheet, a plain hairline box on the plain one. */
.sh-trick {
  flex: none; display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--hair); border-radius: 7px;
  padding: 7px 10px; margin: 0 0 13px;
}
.designed .sh-trick { border: 1.5px solid var(--acc-line); background: var(--acc-tint) }
.plain .sh-trick { border-style: dashed }
.sh-trick .tb-art { flex: none; display: block }
.sh-trick .tb-art svg { width: 34px; height: 34px; display: block }
.sh-trick .tb-label {
  font-family: 'Space Grotesk', sans-serif; font-size: 8.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 2px;
}
.designed .sh-trick .tb-label { color: var(--acc) }
.sh-trick .tb-body { font-size: 11.5px; line-height: 1.5; margin: 0; color: #222 }

.little .sh-trick { padding: 9px 12px; margin-bottom: 15px }
.little .sh-trick .tb-art svg { width: 44px; height: 44px }
.little .sh-trick .tb-body { font-size: 13.5px; line-height: 1.55 }
/* Grades 4-5 get the same words in a quieter frame: one rule down the left,
   no card, no wash. It reads as a note to themselves rather than a poster. */
.big .sh-trick { border: 0; border-left: 3px solid var(--hair); border-radius: 0; padding: 1px 0 1px 10px; margin-bottom: 11px }
.designed.big .sh-trick { border: 0; border-left: 3px solid var(--acc); background: none }
.big .sh-trick .tb-body { font-size: 11px }

/* ------------------------------------------------------------ scratch space
   Nowhere to write is the sheet's fault, not the child's. Sits at the bottom of
   the body with margin-top:auto, so it takes up the slack a short sheet leaves
   instead of adding height to a full one. */
.sh-scratch {
  flex: none; margin-top: auto; min-height: 0.52in;
  border: 1px dashed var(--hair); border-radius: 5px;
  padding: 3px 7px; position: relative;
}
.designed .sh-scratch { border-color: var(--acc-line) }
.sh-scratch span {
  font-family: 'Space Grotesk', sans-serif; font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft);
}
.big .sh-scratch { min-height: 0.66in }

/* -------------------------------------------------------- stars, for K and 1
   Ten outlined stars to colour in. Stroke only, so it costs a child's pencil
   rather than the printer's ink. */
.sh-check.stars { font-size: 11px; gap: 10px; flex-wrap: wrap }
.sh-check.stars .boxes { gap: 4px }
.sh-check.stars svg { width: 24px; height: 24px; display: block; color: var(--soft) }
.designed .sh-check.stars svg { color: var(--acc) }
.sh-check.stars strong { font-size: 12px }

/* ------------------------------------------------------- challenge, 4 and 5
   What replaces the stars. Re-doing the hardest one from scratch is a
   self-test, which beats re-reading the page by a wide margin. */
.sh-challenge {
  flex: none; margin-top: 12px; padding: 7px 0 0 10px;
  border-top: 1px solid var(--hair); border-left: 3px solid var(--hair);
  font-size: 10.5px; color: #333; line-height: 1.5;
}
.designed .sh-challenge { border-left-color: var(--acc) }
.sh-challenge strong { font-family: 'Space Grotesk', sans-serif; color: var(--ink) }
.designed .sh-challenge strong { color: var(--acc) }

/* --------------------------------------------------------- band type scaling
   The one thing that matters most across ages, and the easiest to get wrong:
   how big the numbers are and how much room there is to answer. */
.little .sh-head b { font-size: 21px }
.little .sh-id svg { width: 50px; height: 50px }
.little .sh-grid.d1 { font-size: 21px; gap: 20px 26px }
.little .sh-grid.d1 .pr .ansline { min-width: 3em; height: 1.9em }
.big .sh-head b { font-size: 17.5px }
.big .sh-id svg { width: 34px; height: 34px }

/* The key is for an adult. None of the child-facing furniture belongs on it. */
.key .sh-trick, .key .sh-scratch, .key .sh-challenge { display: none }

/* ------------------------------------------------------------- multi-page
   A sheet may be more than one page, but never a page and a bit. Page 1 carries
   the trick box, the last page carries the self-check and the wrap-up, and every
   page carries the header and the QR so a separated page still says what it is. */
.sh-name.pageno { line-height: 1.4; font-family: 'Space Grotesk', sans-serif; letter-spacing: .04em }
.sh-inst.cont em { color: var(--soft) }
.sh-inst.cont em::before { content: ' ' }
.sh-more {
  flex: none; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--hair);
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: var(--soft);
}
.designed .sh-more { color: var(--acc) }