/* Session-complete candidates — A6, behind `?end=a|b` (L4). Scoped under `[data-end-variant]`, which js/10a-end-variants.js sets on only when the flag is present. Nothing here can reach the shipping end screen: with no flag the attribute is absent and every selector below fails to match. NO `opacity` ON TEXT ANYWHERE IN THIS FILE, and that is a rule this project earned tonight rather than a preference. The 2026-08-15 a11y run found four rules muting text with opacity and every one of them was under AA — the worst, `.result-sub`, was the line printing the correct answer, at 3.27:1. Muted here is a chosen colour with a measured ratio; --bs-ink-3 on --bs-sheet is 6.24:1 and is the lightest thing used for type in this file. */ [data-end-variant] .ev { width: 100%; display: flex; flex-direction: column; gap: 18px; margin: 0 0 22px; text-align: left; } /* ── shared ─────────────────────────────────────────────────────────────── */ [data-end-variant] .ev-muted { color: var(--bs-ink-3); } /* ── ?end=a — the scorecard ─────────────────────────────────────────────── */ /* The lead is the whole point of this candidate: one area, named, at a size nothing else on the screen competes with. The shipping screen's four equal tiles are what "gives the student nothing" means — nothing is emphasised, so nothing is read. */ [data-end-variant="a"] .ev-lead { border-left: 3px solid var(--bs-camel); padding: 2px 0 2px 16px; } [data-end-variant="a"] .ev-lead-kicker { font-family: var(--bs-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink-3); } [data-end-variant="a"] .ev-lead-name { font-family: var(--bs-ed); font-variation-settings: 'WONK' 1; font-weight: 900; font-size: clamp(28px, 6vw, 44px); line-height: 1.02; letter-spacing: -.02em; color: var(--bs-ink); margin-top: 2px; } [data-end-variant="a"] .ev-lead-fig { font-family: var(--bs-ui); font-size: 13px; color: var(--bs-ink-2); margin-top: 5px; } /* Twelve questions, left to right. The rail already draws this shape during a session; repeating it here is deliberate — it is the one image of the set the student has been looking at for ten minutes. */ [data-end-variant] .ev-strip { display: flex; gap: 4px; flex-wrap: wrap; } [data-end-variant] .ev-cell { flex: 1 1 0; min-width: 22px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bs-ink); font-family: var(--bs-mono); font-size: 10px; font-weight: 600; } /* Correct/incorrect is carried by FILL, not by hue alone — the numeral stays legible in greyscale and for a red-green colourblind reader, which is the same reasoning `.dx-c-day.is-today` already uses for the week strip. */ [data-end-variant] .ev-cell.is-ok { background: var(--bs-ink); color: var(--bs-sheet); } [data-end-variant] .ev-cell.is-miss { background: transparent; color: var(--bs-ink); border-style: dashed; } [data-end-variant] .ev-areas { display: flex; flex-direction: column; gap: 9px; } [data-end-variant] .ev-area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } [data-end-variant] .ev-area-name { font-family: var(--bs-ui); font-size: 12.5px; font-weight: 600; color: var(--bs-ink); } [data-end-variant] .ev-area-fig { font-family: var(--bs-mono); font-size: 11px; color: var(--bs-ink-2); } [data-end-variant] .ev-area-track { height: 6px; background: var(--bs-stock-2); margin-top: 4px; } [data-end-variant] .ev-area-fill { height: 100%; background: var(--bs-ink-3); } [data-end-variant] .ev-area.is-lead .ev-area-fill { background: var(--bs-camel); } [data-end-variant] .ev-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--bs-rule); padding-top: 11px; } [data-end-variant] .ev-move { display: flex; align-items: baseline; gap: 7px; font-family: var(--bs-mono); font-size: 15px; font-weight: 600; color: var(--bs-ink); } [data-end-variant] .ev-move-n.is-now { font-size: 19px; } [data-end-variant] .ev-move-arrow { color: var(--bs-ink-3); } [data-end-variant] .ev-move-d { font-size: 12px; padding: 1px 6px; border: 1px solid currentColor; } [data-end-variant] .ev-move-d.is-up { color: var(--bs-ok); } [data-end-variant] .ev-move-d.is-down { color: var(--bs-miss); } [data-end-variant] .ev-time { font-family: var(--bs-mono); font-size: 12px; color: var(--bs-ink-2); } /* ── ?end=b — one decision ──────────────────────────────────────────────── */ /* Inverted on ink so the single next action is the only thing on the screen with weight. Everything the scorecard spreads over four blocks is one line below it. */ [data-end-variant="b"] .ev-next { background: var(--bs-ink); color: var(--bs-sheet); padding: 22px 20px 18px; } [data-end-variant="b"] .ev-next-kicker { font-family: var(--bs-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; /* --bs-camel-on-ink exists for exactly this pairing and is 4.77:1 on ink. No fade — see the file header. */ color: var(--bs-camel-on-ink); } [data-end-variant="b"] .ev-next-name { font-family: var(--bs-ed); font-variation-settings: 'WONK' 1; font-weight: 900; font-size: clamp(30px, 6.4vw, 48px); line-height: 1.02; letter-spacing: -.02em; margin-top: 3px; } [data-end-variant="b"] .ev-next-why { font-family: var(--bs-ui); font-size: 13px; color: var(--bs-stock); margin-top: 8px; max-width: 46ch; } [data-end-variant="b"] .ev-next-btn { margin-top: 16px; font-family: var(--bs-ui); font-size: 13.5px; font-weight: 700; padding: 11px 20px; background: var(--bs-sheet); color: var(--bs-ink); border: 0; cursor: not-allowed; } /* Disabled, and it has to still read as text rather than fade to noise — the same call `.tool-tab:disabled` makes, minus the opacity that made that one fail. --bs-ink-2 on --bs-sheet is 8.32:1. */ [data-end-variant="b"] .ev-next-btn:disabled { background: var(--bs-stock-2); color: var(--bs-ink-2); } [data-end-variant="b"] .ev-next-note { font-family: var(--bs-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-stock); margin-top: 7px; } [data-end-variant="b"] .ev-unlocked-kicker { font-family: var(--bs-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ink-3); } [data-end-variant="b"] .ev-unlocked-line { font-family: var(--bs-mono); font-size: 12.5px; color: var(--bs-ink); margin-top: 4px; } @media (max-width: 520px) { [data-end-variant] .ev-cell { min-width: 0; height: 28px; font-size: 9px; } [data-end-variant] .ev-foot { flex-direction: column; align-items: flex-start; gap: 7px; } }