/* Het werkblad zelf (A4) — wordt zowel op het scherm als in print gebruikt */
.sheet {
  --s-ink: #14130f; --s-ans: #c2410c; --s-line: #9a978f;
  width: 210mm; height: 297mm; flex: none;
  background: #fff; color: var(--s-ink);
  padding: 13mm 15mm 10mm; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.35; letter-spacing: 0;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }

.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 4mm; border-bottom: 1.6px solid var(--s-ink); }
.sheet-brand { font-family: 'DM Serif Display', serif; font-size: 20px; line-height: 1; }
.sheet-brand b { font-weight: 400; font-style: italic; color: #e0522b; }
.sheet-fields { display: flex; gap: 8mm; font-size: 12.5px; color: #666; }
.sheet-fields span { display: inline-block; width: 46mm; border-bottom: 1px solid var(--s-line); padding-bottom: 1px; }
.sheet-titlebar { display: flex; justify-content: space-between; align-items: baseline; gap: 8mm; margin-top: 8mm; }
.sheet-title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 31px; line-height: 1.1; letter-spacing: -0.2px; }
.sheet-meta { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a877f; white-space: nowrap; }
.ans-tag { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--s-ans); color: #fff; padding: 3px 10px; border-radius: 99px; white-space: nowrap; font-weight: 500; }
.sheet-instr { font-size: 16px; color: #5a5750; margin: 2mm 0 6mm; }
.sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-foot { display: flex; justify-content: space-between; font-size: 11px; color: #8a877f; border-top: 1px solid #dedbd4; padding-top: 3mm; margin-top: 4mm; }

/* antwoorden: altijd aanwezig, zichtbaar bij .show-ans */
.sheet .ans { visibility: hidden; }
.sheet.show-ans .ans { visibility: visible; color: var(--s-ans); font-weight: 600; }

/* vragen in een raster */
.q-grid { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 0 8mm; align-content: space-evenly; font-size: 20px; }
.q-grid.big { font-size: 22px; }
.q { display: flex; align-items: baseline; gap: .5em; min-width: 0; padding: 1.2mm 0; }
.q .n { font-size: 11px; color: #a09d95; min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.q .qt { min-width: 0; white-space: nowrap; }
.blank { display: inline-block; min-width: 3em; height: 1.3em; border-bottom: 1.6px solid var(--s-ink); text-align: center; line-height: 1.2; vertical-align: baseline; }
.blank.wide { min-width: 5em; }
.blank.full { display: block; width: 100%; min-width: 0; text-align: left; padding-left: .3em; }

/* onder elkaar */
.q-grid.cols-sum { gap: 6mm 6mm; }
.q-grid.cols-sum.tall { gap: 8mm 8mm; }
.cols-sum .q { align-items: flex-start; justify-content: center; }
.cols-sum .q .n { padding-top: .35em; }
.col-sum { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 22px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.col-sum .r { position: relative; padding-left: 1.1em; white-space: nowrap; min-height: 1.35em; }
.col-sum .op { position: absolute; left: 0; }
.col-sum .rule { align-self: stretch; border-top: 1.6px solid var(--s-ink); margin: 1px 0 2px; }
.col-sum.mul .r { min-width: 3.4em; text-align: right; }

/* staartdeling */
.sd { display: flex; flex-direction: column; width: 100%; font-size: 22px; padding-right: 2mm; }
.sd-top { display: flex; align-items: baseline; white-space: nowrap; }
.sd-d::after { content: '/'; margin: 0 .3em; color: #888; }
.sd-n::after { content: '\\'; margin: 0 .3em; color: #888; }
.sd-q { min-width: 3.4em; border-bottom: 1.6px solid var(--s-ink); }
.sd-work { height: 21mm; }

/* breuken */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.15; margin: 0 .2em; font-size: .95em; }
.frac > span:first-child { border-bottom: 1.6px solid currentColor; padding: 0 .3em .06em; }
.frac > span:last-child { padding: .06em .3em 0; }
.frac .blank { min-width: 1.5em; height: 1.25em; border: 1.4px solid var(--s-line); border-radius: 3px; }
.frac-blank { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .2em; }
.frac-blank > span { display: block; width: 1.9em; height: 1.3em; text-align: center; line-height: 1.3; border: 1.4px solid var(--s-line); border-radius: 3px; }
.frac-blank > span:first-child { margin-bottom: .25em; }
.frac-row .qt, .frac-fig .qt { display: flex; align-items: center; gap: .35em; font-size: 22px; }
.frac-row .blank { min-width: 4.5em; }
.fig { width: 30mm; height: 30mm; }
.fig.bar { width: 40mm; height: 13mm; }
.eq { font-size: 22px; margin: 0 .15em; }
.conv { width: 100%; border-collapse: collapse; font-size: 22px; margin-top: 2mm; }
.conv th { text-align: left; font: 500 11.5px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a877f; padding: 0 4mm 3mm; border-bottom: 1.6px solid var(--s-ink); }
.conv td { padding: 4.2mm 4mm; border-bottom: 1px solid #e3e0d9; }
.conv .blank { min-width: 4.2em; }

/* klokken */
.clocks .q { flex-direction: column; align-items: center; gap: 1mm; }
.clocks .q .n { align-self: flex-start; }
.clock-q { display: flex; flex-direction: column; align-items: center; gap: 2.5mm; width: 100%; }
.clock { width: 100%; max-width: 38mm; height: auto; }
.clock-line { font-size: 19px; }
.clock-time { font-size: 24px; font-weight: 500; text-align: center; line-height: 1.2; }
.clock-time small { display: block; font-size: 14px; font-weight: 400; color: #7a776f; }
.clocks .qt { white-space: normal; width: 100%; }

/* getallenrijen */
.rijen { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.rij { display: flex; gap: 2.5mm; }
.box { flex: 1; height: 13mm; display: flex; align-items: center; justify-content: center; border: 1.6px solid var(--s-ink); border-radius: 2mm; font-size: 21px; font-variant-numeric: tabular-nums; min-width: 0; }
.box.given { background: #f1efe9; border-color: #cfccc4; }

/* taal */
.q-grid.sent { font-size: 19px; align-content: space-evenly; }
.sent .qt { white-space: normal; line-height: 1.55; }
.sent small, .spell small { color: #85827a; font-size: .78em; }
.sent .blank { min-width: 6.5em; }
.tijd-tag { display: inline-block; min-width: 2.3em; margin-right: .55em; padding: 0 .3em; border: 1.5px solid var(--s-ink); border-radius: 1.2mm; font-size: .7em; font-weight: 700; line-height: 1.45; letter-spacing: .04em; text-align: center; vertical-align: .12em; }
.q-grid.spell { font-size: 19px; }
.spell .choice { margin-left: .5em; white-space: nowrap; }
.spell .word { letter-spacing: .02em; }
.q-grid.dictee { font-size: 20px; }
.q-grid.dictee .blank.full { height: 1.7em; }

.ws { --w: 166mm; width: var(--w); height: var(--w); margin: 1mm auto 7mm; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); border: 1.6px solid var(--s-ink); font-weight: 500; font-size: calc(var(--w) / var(--n) * .5); }
.ws .c { display: flex; align-items: center; justify-content: center; }
.sheet.show-ans .ws .hl { background: #fde6da; color: var(--s-ans); font-weight: 700; }
.wordlist { list-style: none; columns: 4; column-gap: 6mm; font-size: 16.5px; padding: 0 2mm; }
.wordlist li { break-inside: avoid; padding: 1mm 0; display: flex; align-items: center; }
.wordlist i { display: inline-block; width: 3.4mm; height: 3.4mm; border: 1.4px solid var(--s-ink); border-radius: 50%; margin-right: 2.4mm; flex: none; }

.wr-wrap { display: grid; grid-auto-rows: 22mm; align-content: start; margin-top: 2mm; }
.wr { display: flex; align-items: flex-end; gap: 7mm; height: 22mm; overflow: hidden; padding-bottom: 16px; white-space: nowrap;
  font-family: 'Playwrite NL', 'Segoe Script', 'Bradley Hand', cursive; font-size: 42px; line-height: 1;
  background:
    linear-gradient(#9a978f, #9a978f) 0 18%/100% 1px no-repeat,
    repeating-linear-gradient(90deg, #9a978f 0 5px, transparent 5px 10px) 0 49%/100% 1px no-repeat,
    linear-gradient(#14130f, #14130f) 0 80%/100% 1.4px no-repeat; }
.wr-m { color: var(--s-ink); }
.wr-t { color: #b9b6ae; overflow: hidden; }

/* ===== Print ===== */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .no-print { display: none !important; }
  .gen-layout { display: block !important; padding: 0 !important; max-width: none !important; }
  .stage { display: block !important; padding: 0 !important; background: none !important; overflow: visible !important; }
  .sheet-scale { transform: none !important; width: auto !important; height: auto !important; margin: 0 !important; position: static !important; }
  .sheet-scale .sheet { position: static !important; transform: none !important; }
  .toast { display: none !important; }
  .stage .sheet { box-shadow: none !important; margin: 0 !important; height: 296.4mm; page-break-after: always; break-after: page; }
  .sheet-scale:last-child .sheet { page-break-after: auto; break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.trees .q { justify-content: center; }
.trees .qt { width: 100%; display: flex; justify-content: center; }
.tree { width: 100%; max-width: 46mm; height: auto; }
.trees .q .n { align-self: flex-start; }

.ana { display: flex; flex-direction: column; gap: 1px; }
.ana-base { font-size: 15px; color: #8a877f; }

/* topografie */
.topo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4mm; }
.topo-map { height: var(--mh); width: auto; max-width: 100%; aspect-ratio: var(--ratio); flex: none; }
.topo-hulp { width: 100%; font-size: 14px; color: #55524b; border: 1px solid #dedbd4; border-radius: 6px; padding: 2mm 3mm; line-height: 1.6; flex: none; }
.q-grid.topo-list { flex: none; width: 100%; font-size: 17px; gap: 1.5mm 8mm; align-content: start; }
.topo-list .q { padding: 1mm 0; }
.topo-list .qt { white-space: normal; min-width: 0; flex: 1; }
.topo-list .blank.full { height: auto; min-height: 1.5em; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }

/* geld, meten, verhalen */
.q-grid.geld-list { font-size: 20px; align-content: space-evenly; }
.geld-list .qt { white-space: normal; width: 100%; }
.geld-q { display: flex; align-items: center; gap: 6mm; }
.geld { width: calc(var(--w) * 0.344mm); height: 11mm; flex: none; }
.geld-a { margin-left: auto; }
.geld-t { line-height: 1.8; }
.q-grid.verhalen { font-size: 19px; align-content: space-evenly; }
.verhalen .qt { white-space: normal; width: 100%; }
.vt { line-height: 1.45; margin-bottom: 2.5mm; }
.vrek { display: flex; gap: 10mm; font-size: 17px; }
/* taal 2 */
.q-grid.zinnen { font-size: 22px; align-content: space-evenly; }
.zinnen .qt { white-space: normal; line-height: 1.5; }
.tag-doel { display: block; font-size: 12px; color: #8a877f; letter-spacing: .04em; }
.sheet.show-ans .zin .hit { border-bottom: 2.5px solid var(--s-ans); color: var(--s-ans); font-weight: 600; }
.opts { display: inline-flex; gap: 4mm; margin-left: 3mm; font-size: .92em; }
.opt { padding: 0 8px; border: 2px solid transparent; border-radius: 99px; }
.sheet.show-ans .opt.hit { border-color: var(--s-ans); color: var(--s-ans); font-weight: 600; }
.meer .qt { white-space: normal; }
.meer small { color: #8a877f; font-size: .62em; }
/* wereldoriëntatie */
.tv-hulp { display: flex; flex-wrap: wrap; gap: 2mm 5mm; border: 1px solid #dedbd4; border-radius: 6px; padding: 2.5mm 3.5mm; margin-bottom: 4mm; font-size: 14px; color: #55524b; }
.tv-hulp span { white-space: nowrap; }
.q-grid.tv { font-size: 19px; align-content: space-evenly; }
.tv .qt { white-space: normal; line-height: 1.55; }
.tv small { color: #8a877f; }
.vgl div { margin: 1.2mm 0; }

/* rekenen 2 */
.q-grid.pct .qt { white-space: normal; }
.q-grid.vtabs { align-content: space-evenly; }
.vtabs .qt { width: 100%; white-space: normal; }
.vt-tab { border-collapse: collapse; width: 100%; font-size: 19px; }
.vt-tab th { text-align: left; font-weight: 500; font-size: 13px; color: #6b6860; padding: 3mm 3mm 3mm 0; width: 34mm; }
.vt-tab td { border: 1.4px solid #14130f; text-align: center; height: 11mm; min-width: 15mm; }
.vt-tab td.gat .blank { border-bottom: none; min-width: 0; display: block; height: 100%; }
.vt-tab td.gat .ans { line-height: 11mm; }
.q-grid.opps { align-content: space-evenly; }
.opps .qt { width: 100%; white-space: normal; }
.opp { display: flex; flex-direction: column; align-items: flex-start; gap: 1mm; }
.rect { width: 50mm; flex: none; }
.opp-r { font-size: 18px; line-height: 2; }

/* leesbegrip */
.lb-tekst { font-size: 18px; line-height: 1.7; border-left: 3px solid #14130f; padding: 2mm 0 2mm 5mm; margin-bottom: 7mm; background: #faf9f6; }
.lb-vragen { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 8mm; font-size: 16px; }
.lb-v b { display: block; margin-bottom: 1.5mm; font-weight: 600; }
.lb-o { display: flex; gap: 2.2mm; padding: 1px 2mm; margin: 1mm 0; border: 2px solid transparent; border-radius: 99px; width: fit-content; }
.lb-o span { color: #8a877f; font-weight: 600; }
.sheet.show-ans .lb-o.hit { border-color: var(--s-ans); color: var(--s-ans); font-weight: 600; }
@media print { .print-only { display: block !important; } }