/* Math Worksheet Generator (RT-EDU-016). * * Contrast rule (docs/contrast-conventions.md): the sheet-code strip is the * only navy --rt-result-bg surface here, so it uses --rt-result-ink for values * and --rt-result-muted for labels, and neither token appears anywhere else. * THE WORKSHEET ITSELF IS PAPER — a light surface with light-surface ink, * because it is going through a printer, where navy is a waste of toner and * white-on-navy is unreadable in the two colour modes most home printers are * actually set to. * * CLS rule (docs/cls-conventions.md): the first sheet is drawn by script, not * by the server, so the sheet area and the code strip both reserve their height * before anything is drawn. Nothing above the fold moves after first paint. * * Print: everything except a cloned copy of the sheet is hidden. See the * printSheet() comment in app.js for why it is a clone appended to * rather than a visibility rule on the live node. */ /* ---------- controls ---------- */ .mwg-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; padding: 14px; margin-bottom: 16px; background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px; } .mwg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mwg-field > span, .mwg-field > label:first-child, .mwg-legend { font-family: var(--rt-font-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rt-ink-muted); } .mwg-field select, .mwg-field input[type="text"] { width: 100%; padding: 9px 10px; font-size: 15px; border-radius: 6px; border: 1px solid var(--rt-hairline); background: var(--rt-surface); color: var(--rt-ink); } .mwg-ops { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; } .mwg-op { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--rt-hairline); border-radius: 999px; background: var(--rt-surface); color: var(--rt-ink); font-size: 14px; cursor: pointer; user-select: none; } .mwg-op input { accent-color: var(--rt-accent); margin: 0; } .mwg-op-sym { font-family: var(--rt-font-mono); font-weight: 700; } .mwg-note { font-size: 13px; line-height: 1.5; color: var(--rt-ink-soft); margin: 0; } .mwg-note--warn { color: var(--rt-ink-soft); font-weight: 600; } .mwg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .mwg-btn { padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid var(--rt-hairline); background: var(--rt-surface); color: var(--rt-ink); } .mwg-btn:hover { border-color: var(--rt-accent); color: var(--rt-accent); } .mwg-btn--primary { background: var(--rt-accent); border-color: var(--rt-accent); color: #fff; } .mwg-btn--primary:hover { color: #fff; filter: brightness(1.06); } /* ---------- the sheet-code strip (the one navy surface) ---------- */ .mwg-code-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 18px; margin-bottom: 18px; background: var(--rt-result-bg); border-radius: 10px; min-height: 86px; /* reserved before the first draw */ } .mwg-code-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mwg-code-label { font-family: var(--rt-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rt-result-muted); } .mwg-code-value { font-family: var(--rt-font-mono); font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--rt-result-ink); } .mwg-code-detail { font-size: 14px; line-height: 1.5; color: var(--rt-result-ink); } .mwg-code-hint { font-size: 12.5px; line-height: 1.5; color: var(--rt-result-muted); flex-basis: 100%; margin: 0; } /* ---------- the worksheet (paper) ---------- */ .mwg-paper-wrap { overflow-x: auto; max-width: 100%; min-width: 0; } .mwg-paper { background: #ffffff; border: 1px solid var(--rt-hairline); border-radius: 8px; padding: 26px 26px 30px; min-width: 0; min-height: 560px; /* reserved before the first draw */ color: #14202e; } .mwg-paper-head { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid #14202e; } .mwg-paper-title { font-size: 19px; font-weight: 700; margin: 0; color: #14202e; } .mwg-paper-meta { font-size: 12.5px; color: #4a5a6b; font-family: var(--rt-font-mono); } .mwg-paper-lines { margin-left: auto; font-size: 13px; color: #14202e; white-space: nowrap; } .mwg-grid { display: grid; gap: 14px 22px; } .mwg-grid--inline { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .mwg-grid--column { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .mwg-q { display: flex; gap: 9px; align-items: flex-start; min-width: 0; } .mwg-q-num { flex: 0 0 auto; font-family: var(--rt-font-mono); font-size: 12px; font-weight: 700; color: #4a5a6b; padding-top: 3px; min-width: 22px; } .mwg-q-body { min-width: 0; } .mwg-q-inline { font-family: var(--rt-font-mono); font-size: 17px; white-space: nowrap; color: #14202e; } .mwg-q-blank { display: inline-block; width: 62px; border-bottom: 1.5px solid #4a5a6b; margin-left: 6px; } /* Column form. The operands are right-aligned under one another because that is the method being taught — a left-aligned column sum teaches the wrong thing, so the alignment comes from the kernel's padded strings and a monospace face rather than from eyeballing. */ .mwg-q-col { display: inline-block; font-family: var(--rt-font-mono); font-size: 17px; line-height: 1.45; white-space: pre; color: #14202e; } .mwg-q-col-rule { border-bottom: 1.5px solid #14202e; padding-bottom: 2px; } .mwg-q-col-space { display: block; height: 46px; } /* Long division: the divisor sits outside a bracket drawn from two borders, with the dividend inside it and the working space beneath — the notation every textbook uses, rather than an addition-shaped stack. */ .mwg-q-div { display: inline-flex; align-items: flex-start; font-family: var(--rt-font-mono); font-size: 17px; line-height: 1.45; color: #14202e; } .mwg-q-div-divisor { padding: 3px 2px 0 0; } .mwg-q-div-bracket { border-top: 1.5px solid #14202e; border-left: 1.5px solid #14202e; border-top-left-radius: 10px; padding: 3px 4px 46px 7px; } /* ---------- answer key ---------- */ .mwg-key { margin-top: 26px; padding-top: 18px; border-top: 2px dashed #9aa8b6; } .mwg-key h3 { font-size: 16px; margin: 0 0 12px; color: #14202e; } .mwg-key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px 14px; font-family: var(--rt-font-mono); font-size: 14px; color: #14202e; } .mwg-key-n { color: #4a5a6b; } /* ---------- print ---------- */ /* Hidden in the normal flow; only a print clone ever uses it. */ .mwg-print-root { display: none; } @media print { body.mwg-printing > *:not(.mwg-print-root) { display: none !important; } body.mwg-printing .mwg-print-root { display: block !important; } body.mwg-printing { background: #fff; margin: 0; padding: 0; } .mwg-print-root .mwg-paper { border: 0; border-radius: 0; padding: 0; min-height: 0; box-shadow: none; } .mwg-print-root .mwg-key { break-before: page; page-break-before: always; } .mwg-print-root .mwg-q { break-inside: avoid; page-break-inside: avoid; } } /* ---------- narrow screens ---------- */ @media (max-width: 560px) { .mwg-paper { padding: 18px 16px 22px; } .mwg-paper-lines { margin-left: 0; flex-basis: 100%; white-space: normal; } .mwg-grid--inline { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); } .mwg-q-inline, .mwg-q-col { font-size: 15px; } .mwg-q-blank { width: 44px; } .mwg-code-value { font-size: 22px; } }