/* Kanji by school year: school-style fonts where the device has them */
.kj-preview, .kj-stage, .kj-sheet, .kj-test, .kj-keylist { --kj-font: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "YuKyokasho", "Klee", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kj-note { font-size: .9375rem; color: var(--ink); background: var(--chip, #F1F4FA); border-radius: .5rem; padding: .6rem .8rem; margin: 0 0 1rem; }
.kj-preview { display: flex; flex-wrap: wrap; gap: .25rem; margin: .375rem 0 .75rem; font: 400 1.5rem/1.3 var(--kj-font); color: #263049; }
.kj-preview span { width: 1.6em; text-align: center; }
.kj-stage { display: grid; gap: .75rem; width: 100%; max-width: 32rem; margin: 0 auto; text-align: center; }
.kj-ask { margin: 0; font-size: 1rem; color: #4b5563; }
.kj-big { margin: 0; font: 400 clamp(5rem, 22vw, 9rem)/1.1 var(--kj-font); color: #263049; }
.kj-big.kj-hidden { visibility: hidden; }
.kj-read { margin: 0; font: 500 1.75rem/1.4 var(--f-b), var(--cjk); }
.kj-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.kj-opt { font-size: 1.375rem; padding: .6em .5em; }
.kj-opt:disabled { opacity: 1; color: var(--ink); cursor: default; }
.kj-opt.kj-right { box-shadow: inset 0 0 0 3px var(--mint); }
.kj-all { margin: 0; font-size: 1rem; color: #4b5563; }
.kj-next { justify-self: center; }
/* Tracing sheet: model, three grey copies, two empty squares, the readings */
.kj-sheet { display: grid; gap: 3mm; align-content: start; --cell: min(22mm, calc((var(--pw, 210mm) - 30mm) / 7.5), calc((var(--ph, 297mm) - 86mm) / 7 - 3mm)); }
.kj-row { display: grid; grid-template-columns: repeat(6, var(--cell)) 1fr; align-items: center; }
.kj-cell { position: relative; height: var(--cell); border: .35mm solid #7F9AC2; margin: 0 -.35mm 0 0; display: grid; place-items: center; font: 400 calc(var(--cell) * .78)/1 var(--kj-font); color: #1D2433;
  background: linear-gradient(#B9C9E2, #B9C9E2) center / 100% .2mm no-repeat, linear-gradient(90deg, #B9C9E2, #B9C9E2) center / .2mm 100% no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kj-cell.trace { color: #BFC7D3; }
.kj-cell.model { background-color: #FFFDF3; }
.kj-rd { padding-left: 3mm; font-size: 9.5pt; line-height: 1.4; color: #374151; }
/* Reading test */
.kj-inst { margin: 0 0 4mm; font-size: 10.5pt; }
.kj-test { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm 10mm; counter-reset: q; }
.kj-test li { display: grid; grid-template-columns: 6mm 16mm 1fr; align-items: end; counter-increment: q; }
.kj-test li::before { content: counter(q) "."; font-size: 9pt; color: #6b7280; }
.kj-tk { font: 400 13mm/1 var(--kj-font); }
.kj-line { border-bottom: .3mm solid #7F9AC2; height: 9mm; }
.kj-keylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm 8mm; font-size: 10.5pt; }
.kj-keylist b { font: 400 14pt/1 var(--kj-font); margin-right: 2mm; }
.keyview .kj-keylist { font-size: 1rem; }