/* Digital test runner — modelled on ACT's delivery interface. Measurements from act-digital-reference/NOTES.md (DOM-inspected, not measured off screenshots). Deliberate divergences from the real thing are marked DIVERGENCE and are listed in the spec. */ /* The palette lives on :root, NOT on .dg. Modals, tool panels and the toast are appended to , outside the runner element, so a palette scoped to .dg is invisible to them — and a var() that cannot resolve makes the whole declaration invalid, computing background to transparent. That is exactly how "Yes, end the section" and the shortcut dialog's OK button became white buttons on a white modal. Keep every token reachable from the document root. */ :root { --dg-bg: #fff; --hdr-bg: #1c3245; --hdr-fg: #e9ecef; --body-fg: #212529; --rule: #dee2e6; --marker: #ffff7b; /* system active-item marker; never used for student ink */ --hl: #87ceeb; /* student highlighter */ --accent: #8c1e1b; /* MJ Prep maroon, replaces ACT's own accent */ --danger: #8b1a1a; } .dg { position: fixed; inset: 0; background: var(--dg-bg); color: var(--body-fg); font-family: Calibri, Arial, "Microsoft YaHei", STXihei, sans-serif; font-size: 16px; line-height: 24px; display: grid; grid-template-rows: 56px 40px 1fr 54px; } /* ---------- header ---------- */ .dg-hdr { background: var(--hdr-bg); color: var(--hdr-fg); display: flex; align-items: center; gap: 22px; padding: 0 16px; } .dg-hdr img { height: 34px; width: auto; display: block; } .dg-hdr .sp { flex: 1; } .dg-menu { position: relative; } .dg-hdr button { font: inherit; font-size: 14px; letter-spacing: .04em; background: none; border: 0; color: var(--hdr-fg); cursor: pointer; text-transform: uppercase; font-weight: 700; padding: 6px 8px; border-radius: 3px; } .dg-hdr button:hover { background: rgba(255,255,255,.12); } .dg-hdr button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .dg-stat { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .dg-stat b { font-weight: 700; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; margin-left: 6px; } .dg-end { background: var(--danger) !important; } .dg-drop { position: absolute; top: 34px; left: 0; z-index: 30; min-width: 250px; background: #fff; color: var(--body-fg); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.22); padding: 6px 0; } .dg-drop button { display: flex; width: 100%; text-align: left; color: var(--body-fg); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; padding: 7px 14px; gap: 8px; border-radius: 0; } .dg-drop button:hover { background: #eef1f4; } .dg-drop .tick { width: 14px; color: var(--accent); font-weight: 700; } /* ---------- item bar ---------- */ .dg-bar { display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--rule); font-size: 15px; } .dg-bar .sp { flex: 1; } .dg-flag { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: var(--body-fg); display: flex; align-items: center; gap: 6px; } .dg-flag.on { color: var(--danger); } /* ---------- body ---------- */ .dg-main { display: flex; min-height: 0; } .dg-panes { flex: 1; display: flex; min-width: 0; } .dg-passage { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; border-right: 1px solid rgba(0,0,0,.08); } .dg-q { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; } .dg.single .dg-passage { display: none; } /* Math is single-pane and LEFT-ALIGNED, flush to the margin and full width (act-digital-reference 01c). Centring it in a narrow column was our own invention and reads nothing like the real thing. */ .dg.single .dg-q { max-width: none; margin: 0; } /* A passage opens with its number as a small label above its title, the way the booklet sets it. */ .dg-phead { margin: 0 0 12px; } .dg-phead .lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72; } .dg-phead h3 { font-size: 17px; margin: 2px 0 0; } .dg-phead + p { margin-top: 0; } .dg-passage h3 { font-size: 16px; margin: 0 0 12px; } .dg-passage p { margin: 0 0 12px; } .dg-passage img, .dg-q img { max-width: 100%; height: auto; } /* Stimulus tables and charts sit with their own passage, not in a heap at the bottom of the section. */ .dg-passage img.pfig { display: block; margin: 4px 0 16px; } /* passage marking: every tested portion underlined, active one carries the marker */ .dg-passage u.sg { text-decoration: underline; } .dg-passage u.sg.active { background: var(--marker); } /* Student ink. Clicking one removes it, so it has to look clickable. */ mark.dg-hl { background: var(--hl); color: inherit; cursor: pointer; } /* While Edit is on, dragging over the passage creates a highlight. */ .dg-passage.hl-edit { cursor: text; } .dg-stem { margin: 0 0 22px; } .dg-choices { list-style: none; margin: 0; padding: 0; } .dg-choice { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 4px; cursor: pointer; position: relative; } .dg-choice:hover { background: #f4f6f8; } .dg-choice input { margin: 5px 0 0; accent-color: var(--accent); } .dg-choice .ltr { font-weight: 400; min-width: 18px; } .dg-choice.sel { background: #eaf2f8; } .dg-choice.gone .ltr, .dg-choice.gone .txt { color: #9aa0a6; } .dg-strike { position: absolute; inset: 0; pointer-events: none; } .dg-x, .dg-eye { font: inherit; font-size: 12px; font-weight: 700; margin-left: auto; border: 1px solid var(--body-fg); background: var(--dg-bg); color: var(--body-fg); border-radius: 3px; padding: 1px 7px; cursor: pointer; } .dg-mask { flex: 1; height: 24px; border: 1px solid var(--rule); border-radius: 3px; background: #f1f3f5; } /* ---------- index rail + panel ---------- */ .dg-rail { width: 58px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 2px; } .dg-rail button { font: inherit; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: var(--body-fg); display: flex; flex-direction: column; align-items: center; gap: 2px; } .dg-rail .ic { font-size: 18px; line-height: 18px; } /* DIVERGENCE-FREE: the real Index compresses the content area, it does not overlay */ .dg-index { width: 46%; max-width: 560px; border-left: 1px solid var(--rule); overflow-y: auto; padding: 12px; background: #fbfcfd; } .dg-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; } .dg-filter select { font: inherit; padding: 4px 6px; } .dg-card { border: 1px solid var(--rule); border-radius: 4px; margin-bottom: 8px; overflow: hidden; cursor: pointer; background: #fff; } .dg-card .hd { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #eaf1f7; font-size: 14px; } .dg-card.cur .hd { background: #efe6d2; } .dg-card.cur { background: #fbf7ee; } .dg-card .bd { padding: 6px 10px; font-size: 13px; color: #495057; } .dg-pill { margin-left: auto; background: var(--hdr-bg); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 9px; } .dg-fl { color: var(--danger); } /* ---------- footer ---------- */ .dg-foot { border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px; } .dg-foot button { font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 0; background: none; cursor: pointer; padding: 8px 14px; border-radius: 3px; color: var(--body-fg); } .dg-foot .next { background: var(--hdr-bg); color: #fff; } .dg-foot button:disabled { opacity: .4; cursor: default; } /* ---------- floating tool panels ---------- */ .dg-panel { position: fixed; z-index: 40; background: var(--dg-bg); color: var(--body-fg); font-family: Calibri, Arial, sans-serif; border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 8px 26px rgba(0,0,0,.25); min-width: 260px; } .dg-panel .ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-weight: 700; cursor: move; } .dg-panel .ph .sp { flex: 1; } .dg-panel .pb { padding: 10px 12px; display: flex; gap: 8px; } .dg-panel button { font: inherit; cursor: pointer; } .dg-panel .pb button { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--rule); background: var(--dg-bg); color: var(--body-fg); border-radius: 3px; padding: 5px 12px; } .dg-panel .pb button.on { background: var(--hdr-bg); color: #fff; border-color: var(--hdr-bg); } /* Calculator panel: floats over the question, draggable by its header and resizable from the corner grip, matching the real driver. It is sized in px because Desmos measures its own container. */ .dg-panel.calc { display: flex; flex-direction: column; padding: 0; } .dg-panel.calc .pb { flex: 1; min-height: 0; padding: 0; display: block; } .dg-panel.calc.min { height: auto !important; } .dg-panel.calc.min .pb, .dg-panel.calc.min .dg-grip { display: none; } .dg-calcmount { width: 100%; height: 100%; } .dg-calcnote { padding: 10px 12px; font-size: 13px; opacity: .8; } .dg-calcmount input { font: inherit; padding: 6px; width: calc(100% - 24px); margin: 0 12px; } .dg-calcmount #dgCalcOut { font-weight: 700; min-height: 24px; padding: 6px 12px; } .dg-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--rule) 50%); } .dg-panel .ph { touch-action: none; user-select: none; } /* ---------- modals + toast ---------- */ .dg-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: center; justify-content: center; } .dg-modal { background: var(--dg-bg); color: var(--body-fg); border-radius: 4px; padding: 20px 24px; width: 520px; font-family: Calibri, Arial, sans-serif; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.3); } .dg-modal h2 { margin: 0 0 12px; font-size: 21px; } .dg-modal .acts { display: flex; align-items: center; gap: 18px; margin-top: 18px; } .dg-modal .yes { background: var(--danger); color: #fff; border: 1px solid var(--danger); border-radius: 3px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; } .dg-modal .no { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; } .dg-modal .link { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 2px; } .dg-modal .yes:focus-visible, .dg-modal .no:focus-visible, .dg-modal .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dg-toast { position: fixed; top: 64px; right: 78px; z-index: 60; background: #212529; color: #fff; padding: 10px 14px; border-radius: 4px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 340px; } .dg-toast .bar { height: 3px; background: #ffc107; margin-top: 8px; border-radius: 2px; animation: dgdrain linear forwards; } @keyframes dgdrain { from { width: 100%; } to { width: 0; } } @media (max-width: 900px) { .dg-panes { flex-direction: column; } .dg-passage { border-right: 0; border-bottom: 1px solid var(--rule); max-height: 45%; } .dg-index { width: 100%; max-width: none; } } /* Point markers: where a question applies when it has nothing to underline. A boxed number for "At this point..." items, [A]-[D] / [1]-[4] for the ones whose choices name a point or paragraph. The active question's marker takes the same yellow the active underline does. */ .dg-pt { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; padding: 2px 4px; margin: 0 2px; border: 1px solid currentColor; border-radius: 2px; vertical-align: baseline; user-select: none; } .dg-pt.on { background: var(--marker); } /* A choice whose content is a picture: the button carries the letter, the crop carries only the notation, so the two can never disagree about lettering. */ .dg-choice img.cimg { max-width: 100%; height: auto; display: block; } /* Native MathML, the way ACT delivers it: the browser renders it, no MathJax and no KaTeX (their glyphs and baselines differ from the real thing). Being text rather than a picture is the point — it recolours with the contrast themes, reads aloud, and stays sharp at any zoom. */ .dg-stem math, .dg-choice math { font-family: math; font-size: 1em; } .dg-stem math { line-height: 1.9; } /* Matrix brackets. Chrome's MathML Core does not stretch a delimiter around an (the bracket stays at text height beside a two-row matrix), so draw them. Borders inherit currentColor, so unlike the page crop they recolour with every contrast theme and stay sharp at any zoom. */ /* The drawn bracket sits at the mtable's own left edge, so without a margin a scalar in front of it touches the bracket: "5[-4 2; 0 -5]" read as one glyph. */ mtable.mtx { padding: 2px 7px; position: relative; margin: 0 3px 0 6px; } mtable.mtx::before, mtable.mtx::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; border: 1.5px solid currentColor; } mtable.mtx::before { left: 0; border-right: none; } mtable.mtx::after { right: 0; border-left: none; } /* Full-size fractions and radicals, the way the booklet sets them. Inline MathML defaults to compact style, which shrinks a stacked fraction to about half height and makes a choice like 7,200/pi hard to read. */ .dg-stem math, .dg-choice math { math-style: normal; } /* Stimulus tables, matching ACT's own (act-digital-reference 01e/04c): thin borders on every cell, a spanning title row, centred headers, left-aligned data, and any Note inside the table's border. Borders take currentColor, so unlike the page crop these follow the contrast themes. */ .dg-tbl { margin: 10px 0 16px; overflow-x: auto; } .dg-tbl table { border-collapse: collapse; font-size: 14px; line-height: 1.35; } .dg-tbl th, .dg-tbl td { border: 1px solid currentColor; padding: 3px 7px; vertical-align: middle; } .dg-tbl th { font-weight: 400; text-align: center; } .dg-tbl td { text-align: left; } .dg-tbl th.cap { padding: 4px 10px; } .dg-tbl td.note { text-align: left; } /* A chart keeps its picture, but the caption is a line of text above it with a zoom control, the way ACT sets it. */ .dg-fig { margin: 8px 0 16px; } .dg-figcap { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .dg-zoom { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: inherit; padding: 2px 4px; border-radius: 3px; } .dg-zoom:hover { background: rgba(127,127,127,.18); } .dg-fig img { display: block; max-width: 100%; } .dg-zoomed { max-width: 92vw; max-height: 78vh; } /* The runner shares a document with the rest of the app, whose stylesheet sets `table { background: var(--surface) }` and `th { background: var(--cream) }`. Those tokens go dark under prefers-color-scheme: dark, which painted the stimulus tables as black blocks inside a light runner. State the background explicitly so nothing outside can reach in, and take it from the runner's own token so the contrast themes still work. */ .dg-tbl table, .dg-tbl th, .dg-tbl td { background: var(--dg-bg); color: var(--body-fg); }