/* One stylesheet. No framework, no CDN (CLAUDE.md, Conventions). */ :root { /* ⚠⚠ `light`, NOT `light dark`, AND THAT IS A STATEMENT OF FACT RATHER THAN A PREFERENCE. Declaring `light dark` told the UA to paint a dark canvas and near-white default text in OS dark mode — but `body` sets neither `color` nor `background`, and five page-local stylesheets hard-code ~30 light backgrounds (`background:#fff`, `#eef1f6`, `#f5f6f8`) with no paired `color`. The result, measured in Chrome on 2026-09-17: `.notgrade` on result.html rendered rgb(255,255,255) on rgb(238,241,246) — WHITE ON NEAR-WHITE. ⚠ The block that disappeared is "This is feedback, not a grade … not usable for progression", which exists BECAUSE a reader must not mistake this output for a mark. Its own comment says "A statement in a document protects nobody who is reading a screen" — and on a dark-mode iPad nobody was reading it. Dark mode is ordinary on tablets; the bench machine is light, which is why this survived to here. ⚠⚠ OWNER RULING 2026-09-18: NO DARK MODE. Verbatim: "Sperate item...no dark mode." So this line is a DECISION and no longer the temporary mitigation it was written as. The app is light-only by intent, not merely in fact. ⚠ DO NOT "fix" this by restoring `light dark`, and do not pair the ~27 hard-coded backgrounds in the page-local stylesheets on its account — that task was measured as unnecessary (I-84) and is now permanently out of scope. Read I-84 before touching either. ⚠⚠ CORRECTION, 2026-09-17, MEASURED — THE SENTENCE THAT STOOD HERE IS NO LONGER TRUE. It read: "Restoring `light dark` requires pairing every hard-coded background with an explicit colour, file by file — until then, changing this back re-breaks the student result screen." That was true of the code it was written against and was falsified by the fix three declarations below it, in this same file, in the same sitting. Re-measured in Chrome under dark-scheme emulation with `color-scheme: light dark` forced back on, on /static/result.html: `.notgrade` renders rgb(22,24,29) on rgb(238,241,246) — DARK ON NEAR-WHITE, legible. So do `.item`, `.warn` and `.stop`. The white-on-near-white does not reproduce, because `body` below now declares `color` explicitly and the ~30 unpaired backgrounds inherit that ink no matter what scheme the UA picks. The unpaired backgrounds were never the cause; BODY DECLARING NO INK WAS, and that is fixed. ⚠ So DO NOT spend a session pairing those ~30 backgrounds on the strength of this comment. The count is 27 across admin/assign/result/review/validate and it buys nothing today. (Probed with class-only selectors; the table-context rules `table.f th`, `tr.credited td` were not individually measured, but they inherit the same body ink.) ⚠ WHAT RESTORING `light dark` ACTUALLY STILL COSTS, measured the same way — none of it a legibility failure today, all of it invisible while this says `light`: · `html` declares no background, so the canvas behind body's 3rem margin and max-width gutter inverts: a dark frame around a white sheet. · UA-painted text inputs and textareas compute rgb(59,59,59) — a dark box on a white page. Self-consistent and readable, but wrong, and this app has an ASSESSED form. · An unstyled checkbox computes border rgb(255,255,255) against a white body. · index.html does not load this stylesheet, still declares `light dark`, and is CORRECT on its own terms — so the landing page and every other page disagree in OS dark mode. Restoring it is a dark-palette decision about CONTROLS and CANVAS, not a background-pairing chore. Filed as I-84. */ color-scheme: light; --line: color-mix(in srgb, currentColor 18%, transparent); /* ⚠⚠ A SECOND LINE COLOUR, FOR CONTROLS ONLY, AND THE SPLIT IS THE POINT. `--line` composites to 1.46:1 against white — measured, not estimated. WCAG 1.4.11 asks for 3:1 on the boundary of anything you can operate, so every button and select on every screen was below it. MVP-SPEC §12 makes "keyboard operable, visible focus, labelled controls" a written requirement; a control whose edge you cannot see fails the spirit of it. ⚠ NOT applied to `.card` or `.log li`. 1.4.11 governs CONTROLS, not decorative separators, and darkening every card border to match would make the page heavier for no accessibility gain — a change that looks like compliance and is only noise. 46% composites to ~3.0:1. */ --control-line: color-mix(in srgb, currentColor 46%, transparent); --warn: #b26a00; --error: #b3261e; --ok: #1b6b3a; } body { font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; max-width: 46rem; margin: 3rem auto; padding: 0 1.25rem; /* ⚠⚠ EXPLICIT, BOTH OF THEM. `color-scheme: light` alone was NOT enough and I shipped it believing it was — html and body both computed to rgba(0,0,0,0), so the page never painted its own canvas and simply inherited whatever was behind it. In dark mode that left BLACK TEXT ON A DARK BACKGROUND: strictly worse than the white-on-white it replaced, because the white-on-white at least only hit the cards while this hit every heading and every word of body copy. ⚠ Caught by LOOKING AT THE RENDER after the change, not by reasoning about the change. A page that declares a text colour and no background is making a bet on its container. */ background: #fff; color: #16181d; } /* ⚠ `
` is the fold used for developer output that must stay reachable but must not compete with the page's real content — currently the player's self-check block, which sits under the Submit button. `cursor: pointer` because a summary that does not look clickable is not discovered; the heading goes inline so the fold reads as one line when shut. Native `` is already keyboard-operable and exposes its own expanded state, so nothing here adds ARIA — adding `role`/`aria-expanded` by hand would override correct behaviour with a copy that has to be kept in sync. */ summary { cursor: pointer; } summary > h2 { display: inline; margin: 0; } /* ⚠⚠ `.options` WAS APPLIED IN FOUR PLACES AND DEFINED IN NONE. `rubric-form.js` sets it on the wrapper built by `radioGroup`, `checkboxGroup`, `numberWithEscapes` and `scale`; `grep -n options static/app.css` returned nothing. So every option group rendered as bare inline `