/* OLS Quiz: the quiz page in the site's own design (navy ink, blue actions, soft white cards, pill buttons). */
.ols-quiz {
    --q-navy: var(--ols-navy, #1C244B);
    --q-muted: #5b6478;
    --q-line: #e3e7f0;
    --q-wash: #f6f8fd;
    --q-blue: #2563eb;
    --q-blue-dark: #1d4fd8;
    --q-blue-wash: #eef3ff;
    --q-right: #1f8a4c;
    --q-right-wash: #e8f5ee;
    --q-wrong: #b42318;
    --q-wrong-wash: #fdecea;
    --q-blank: #8a5a00;
    --q-blank-wash: #fff4dc;
    --q-shadow: 0 8px 24px rgba(28, 36, 75, .07);
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 72px;
    color: var(--q-navy);
    font-size: 16px;
    line-height: 1.6;
}
.ols-quiz *, .ols-quiz *::before, .ols-quiz *::after { box-sizing: border-box; }
.ols-quiz h1, .ols-quiz h2, .ols-quiz h3 { color: var(--q-navy); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.ols-quiz p { margin: 0; }
.ols-quiz img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------- head */
.ols-quiz-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
.ols-quiz-back { font-size: 14px; font-weight: 600; color: var(--q-blue) !important; text-decoration: none !important; }
.ols-quiz-back::before { content: "\2190\00a0"; }
.ols-quiz-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #eaf3de; color: #3B6D11; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ols-quiz-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.12; }
.ols-quiz-sub { font-size: 17px; color: var(--q-muted); max-width: 40em; }

/* ------------------------------------------------------------------ cards */
.ols-quiz-card { background: #fff; border: 1px solid var(--q-line); border-radius: 22px; padding: 28px; box-shadow: var(--q-shadow); display: flex; flex-direction: column; gap: 16px; }
.ols-quiz-card h2 { font-size: 24px; font-weight: 800; }
.ols-quiz-card h2:focus { outline: none; }
.ols-quiz-loading { color: var(--q-muted); }
.ols-quiz-gate p, .ols-quiz-intro > p, .ols-quiz-check > p { color: var(--q-muted); max-width: 38em; }

.ols-quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ols-quiz-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 0; background: var(--q-blue); color: #fff !important; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background .15s; }
.ols-quiz-btn:hover { background: var(--q-blue-dark); }
.ols-quiz-btn.is-quiet { background: var(--q-blue-wash); color: var(--q-blue) !important; }
.ols-quiz-btn.is-quiet:hover { background: #dfe8ff; }
.ols-quiz-btn:disabled { opacity: .45; cursor: default; }
.ols-quiz-btn:focus-visible, .ols-quiz-option:focus-visible, .ols-quiz-dot:focus-visible, .ols-quiz-seg:focus-visible, .ols-quiz-tile:focus-visible { outline: 3px solid var(--q-blue); outline-offset: 2px; }

.ols-quiz-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ols-quiz-facts li { background: var(--q-wash); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; }
.ols-quiz-facts b { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ols-quiz-facts span { font-size: 13px; color: var(--q-muted); }
.ols-quiz-intro .ols-quiz-btn { align-self: flex-start; }

/* --------------------------------------------------------------- question */
.ols-quiz-q { display: flex; flex-direction: column; gap: 16px; }
.ols-quiz-progress { display: flex; flex-direction: column; gap: 8px; }
.ols-quiz-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ols-quiz-num { font-size: 14px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ols-quiz-num:focus { outline: none; }
.ols-quiz-saved { font-size: 13px; color: var(--q-muted); min-height: 1.2em; }
.ols-quiz-saved.is-bad { color: var(--q-wrong); font-weight: 600; }
.ols-quiz-track { height: 8px; border-radius: 999px; background: #eef0f5; overflow: hidden; }
.ols-quiz-track span { display: block; height: 100%; background: var(--q-blue); border-radius: 999px; transition: width .25s ease; }

.ols-quiz-stem { font-size: 18px; line-height: 1.6; }
.ols-quiz-stem p + p, .ols-quiz-stem p + table, .ols-quiz-stem table + p { margin-top: 10px; }
.ols-quiz-stem table, .ols-quiz-explain table, .ols-quiz-feedback table { border-collapse: collapse; margin: 6px 0; font-size: 15px; display: block; overflow-x: auto; max-width: 100%; }
.ols-quiz-stem th, .ols-quiz-stem td, .ols-quiz-explain th, .ols-quiz-explain td, .ols-quiz-feedback th, .ols-quiz-feedback td { border: 1px solid var(--q-line); padding: 6px 10px; text-align: left; }
.ols-quiz-stem th, .ols-quiz-explain th { background: var(--q-wash); }
.ols-quiz-stem ul, .ols-quiz-explain ul, .ols-quiz-feedback ul { margin: 6px 0; padding-left: 1.3em; }
.ols-quiz-mark { font-size: 13px; color: var(--q-muted); }

.ols-quiz-options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ols-quiz-options.has-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ols-quiz-option { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px 12px 12px; border: 2px solid var(--q-line); border-radius: 16px; background: #fff; color: var(--q-navy); font: inherit; font-size: 16px; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.ols-quiz-option:hover { border-color: #b9c6ea; background: #fbfcff; }
.ols-quiz-option[aria-checked="true"] { border-color: var(--q-blue); background: var(--q-blue-wash); }
.ols-quiz-letter { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--q-wash); font-weight: 800; font-size: 15px; }
.ols-quiz-option[aria-checked="true"] .ols-quiz-letter { background: var(--q-blue); color: #fff; }
.ols-quiz-option-body p { margin: 0; }
.ols-quiz-option-body img { display: block; }

.ols-quiz-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ols-quiz-nav .ols-quiz-btn:first-child { justify-self: start; }
.ols-quiz-nav .ols-quiz-btn:last-child { justify-self: end; min-width: 130px; }
.ols-quiz-submit { font-size: 15px; }
.ols-quiz-grid-q { display: flex; flex-wrap: wrap; gap: 8px; }
.ols-quiz-dot { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--q-line); background: #fff; color: var(--q-navy); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; }
.ols-quiz-dot.is-answered { background: var(--q-blue-wash); border-color: #c9d6fb; color: var(--q-blue); }
.ols-quiz-dot.is-here { border-color: var(--q-navy); }
.ols-quiz-keys { font-size: 13px; color: var(--q-muted); }
.ols-quiz-notice { background: var(--q-blank-wash); color: var(--q-blank); border-radius: 12px; padding: 12px 16px; font-size: 15px; }

.ols-quiz-marking { align-items: center; text-align: center; padding: 48px 28px; }
.ols-quiz-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--q-blue-wash); border-top-color: var(--q-blue); animation: ols-quiz-spin .8s linear infinite; }
@keyframes ols-quiz-spin { to { transform: rotate(360deg); } }
.ols-quiz-error { border-color: #f2c4bf; }

/* ----------------------------------------------------------------- review */
.ols-quiz-review { display: flex; flex-direction: column; gap: 16px; }
.ols-quiz-score { flex-direction: row; align-items: center; gap: 28px; }
.ols-quiz-ring { --p: 0; flex: 0 0 auto; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--q-blue) calc(var(--p) * 1%), #eef0f5 0); position: relative; }
.ols-quiz-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.ols-quiz-ring b { position: relative; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ols-quiz-score-words { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ols-quiz-score-words > p { color: var(--q-muted); }
.ols-quiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ols-quiz-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ols-quiz-chip.is-right { background: var(--q-right-wash); color: var(--q-right); }
.ols-quiz-chip.is-wrong { background: var(--q-wrong-wash); color: var(--q-wrong); }
.ols-quiz-chip.is-blank { background: var(--q-blank-wash); color: var(--q-blank); }
.ols-quiz-chip.is-going { background: var(--q-blue-wash); color: var(--q-blue); }
.ols-quiz-small { font-size: 14px; color: var(--q-muted); }

.ols-quiz-filter { display: inline-flex; align-self: flex-start; background: #fff; border: 1px solid var(--q-line); border-radius: 999px; padding: 4px; gap: 4px; }
.ols-quiz-seg { border: 0; background: none; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; color: var(--q-muted); cursor: pointer; }
.ols-quiz-seg[aria-pressed="true"] { background: var(--q-navy); color: #fff; }

.ols-quiz-rq { border-left: 6px solid var(--q-line); }
.ols-quiz-rq.is-right { border-left-color: var(--q-right); }
.ols-quiz-rq.is-wrong { border-left-color: var(--q-wrong); }
.ols-quiz-rq.is-blank { border-left-color: #e0a43a; }
.ols-quiz-rq-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ols-quiz-options.is-review .ols-quiz-option { cursor: default; grid-template-columns: 40px minmax(0, 1fr) auto; }
.ols-quiz-options.is-review .ols-quiz-option:hover { border-color: var(--q-line); background: #fff; }
.ols-quiz-options.is-review .ols-quiz-option.is-correct { border-color: var(--q-right); background: var(--q-right-wash); }
.ols-quiz-options.is-review .ols-quiz-option.is-correct .ols-quiz-letter { background: var(--q-right); color: #fff; }
.ols-quiz-options.is-review .ols-quiz-option.is-picked-wrong { border-color: var(--q-wrong); background: var(--q-wrong-wash); }
.ols-quiz-options.is-review .ols-quiz-option.is-picked-wrong .ols-quiz-letter { background: var(--q-wrong); color: #fff; }
.ols-quiz-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ols-quiz-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--q-wrong); white-space: nowrap; }
.ols-quiz-tag.is-correct { color: var(--q-right); }
.ols-quiz-option.is-correct .ols-quiz-tag:not(.is-correct) { color: var(--q-right); }
.ols-quiz-options.is-review.has-images .ols-quiz-option { grid-template-columns: 40px minmax(0, 1fr); }
.ols-quiz-options.is-review.has-images .ols-quiz-tags { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }

.ols-quiz-feedback, .ols-quiz-explain, .ols-quiz-revise { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ols-quiz-feedback h3, .ols-quiz-explain h3, .ols-quiz-revise h3 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ols-quiz-feedback { background: var(--q-wash); }
.ols-quiz-feedback.is-right h3 { color: var(--q-right); }
.ols-quiz-feedback.is-wrong h3 { color: var(--q-wrong); }
.ols-quiz-explain { background: #fff; border: 1px solid var(--q-line); }
.ols-quiz-explain h3 { color: var(--q-blue); }
.ols-quiz-rightanswer { font-size: 15px; }
.ols-quiz-revise { background: #eaf3de; }
.ols-quiz-revise h3 { color: #3B6D11; }
.ols-quiz-revise a { color: #2d5a0b !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ols-quiz-revise a::after { content: "\00a0\2192"; }

/* ------------------------------------------------------------------ index */
.ols-quiz-board { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.ols-quiz-board h2 { font-size: 22px; font-weight: 800; }
.ols-quiz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.ols-quiz-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid var(--q-line); border-radius: 18px; box-shadow: var(--q-shadow); color: var(--q-navy) !important; text-decoration: none !important; transition: transform .12s, border-color .12s; }
.ols-quiz-tile:hover { transform: translateY(-2px); border-color: #b9c6ea; }
.ols-quiz-tile-topic { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--q-blue); }
.ols-quiz-tile-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ols-quiz-tile .ols-quiz-chip { align-self: flex-start; margin-top: 4px; }

/* ------------------------------------------------------------------ small */
@media (max-width: 640px) {
    .ols-quiz { padding: 24px 16px 96px; }
    .ols-quiz-card { padding: 20px; border-radius: 18px; }
    .ols-quiz-stem { font-size: 17px; }
    .ols-quiz-options.has-images { grid-template-columns: 1fr; }
    .ols-quiz-facts b { font-size: 22px; }
    .ols-quiz-score { flex-direction: column; align-items: flex-start; }
    .ols-quiz-nav { position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto 1fr auto; z-index: 5; }
    .ols-quiz-nav .ols-quiz-submit { justify-self: center; }
    .ols-quiz-options.is-review .ols-quiz-option { grid-template-columns: 40px minmax(0, 1fr); }
    .ols-quiz-options.is-review .ols-quiz-tags { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .ols-quiz * { transition: none !important; animation-duration: 2s !important; }
}

/* ------------------------------------------------- holding off the theme */
/* The theme styles every button on :hover and :focus (white text, its own fill) with
   button:hover-level selectors, which outrank a single class. These keep the quiz's own colours. */
.ols-quiz [hidden] { display: none !important; }
.ols-quiz .ols-quiz-option, .ols-quiz .ols-quiz-option:hover, .ols-quiz .ols-quiz-option:focus, .ols-quiz .ols-quiz-option:active { color: var(--q-navy); background: #fff; box-shadow: none; }
.ols-quiz .ols-quiz-option:hover { background: #fbfcff; border-color: #b9c6ea; }
.ols-quiz .ols-quiz-option[aria-checked="true"], .ols-quiz .ols-quiz-option[aria-checked="true"]:hover, .ols-quiz .ols-quiz-option[aria-checked="true"]:focus { background: var(--q-blue-wash); border-color: var(--q-blue); color: var(--q-navy); }
.ols-quiz .ols-quiz-dot, .ols-quiz .ols-quiz-dot:hover, .ols-quiz .ols-quiz-dot:focus { color: var(--q-navy); background: #fff; box-shadow: none; }
.ols-quiz .ols-quiz-dot.is-answered, .ols-quiz .ols-quiz-dot.is-answered:hover, .ols-quiz .ols-quiz-dot.is-answered:focus { background: var(--q-blue-wash); color: var(--q-blue); }
.ols-quiz .ols-quiz-seg, .ols-quiz .ols-quiz-seg:hover, .ols-quiz .ols-quiz-seg:focus { color: var(--q-muted); background: none; box-shadow: none; }
.ols-quiz .ols-quiz-seg[aria-pressed="true"], .ols-quiz .ols-quiz-seg[aria-pressed="true"]:hover, .ols-quiz .ols-quiz-seg[aria-pressed="true"]:focus { background: var(--q-navy); color: #fff; }
.ols-quiz .ols-quiz-btn:focus { box-shadow: none; }
.ols-quiz .ols-quiz-btn.is-quiet:focus { background: var(--q-blue-wash); }
.ols-quiz .ols-quiz-btn:not(.is-quiet):focus { background: var(--q-blue); }
@media (max-width: 640px) {
    .ols-quiz .ols-quiz-nav .ols-quiz-btn { min-width: 0; padding: 10px 16px; font-size: 14px; min-height: 44px; }
    .ols-quiz .ols-quiz-nav { gap: 6px; }
}
@media (max-width: 640px), (hover: none) {
    .ols-quiz .ols-quiz-keys { display: none; }
}

/* ------------------------------------------------- cards on topic pages */
/* The quiz row sits inside the page's lesson-card grid (3 columns, 20px gaps): quiz cards
   over two columns, the information card in the third. Colours and type come from the
   site's own tokens so it matches the lesson cards above it. */
.ols-quiz-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 8px;
    --q-navy: var(--ols-navy, #1C244B); --q-muted: var(--ols-muted, #4b5575); --q-line: var(--ols-border, rgba(28,36,75,.12)); --q-wash: #f6f8fd;
    --q-blue: #2563eb; --q-blue-dark: #1d4fd8; --q-blue-wash: #eef3ff; --q-right: #1f8a4c; --q-right-wash: #e8f5ee; color: var(--q-navy); }
.ols-quiz-row *, .ols-quiz-row *::before, .ols-quiz-row *::after { box-sizing: border-box; }
.ols-quiz-row-main { grid-column: span 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ols-quiz-wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; border: 1px solid var(--q-line); border-radius: 22px; overflow: hidden; box-shadow: var(--ols-shadow-soft, 0 10px 28px rgba(28,36,75,.09)); }
.ols-quiz-wide-visual { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 28px 22px;
    background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.35) 0 18%, transparent 19%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.22) 0 22%, transparent 23%), linear-gradient(135deg, #8fb0ff 0%, #467ff7 55%, #2c3f9e 100%); }
.ols-quiz-wide-panel { width: 100%; max-width: 250px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; padding: 22px 18px; text-align: center; box-shadow: 0 10px 30px rgba(28,36,75,.18); }
.ols-quiz-wide-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(28,36,75,.08); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ols-quiz-wide-main { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; margin: 10px 0 8px; color: var(--q-navy); }
.ols-quiz-wide-sub { font-size: 13px; color: var(--q-muted); font-weight: 600; }
.ols-quiz-wide-status { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.92); color: var(--q-blue); }
.ols-quiz-wide-status.is-done { background: #1f8a4c; color: #fff; }
.ols-quiz-wide-status.is-going { background: #fff; color: var(--q-blue); }
.ols-quiz-wide-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ols-quiz-wide-body .ols-quiz-pill { align-self: flex-start; }
.ols-quiz-wide-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--q-navy); }
.ols-quiz-wide-desc { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--q-muted); margin: 0; }
.ols-quiz-wide-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.ols-quiz-wide-facts span { padding: 4px 10px; border-radius: 999px; background: var(--q-wash); font-size: 12px; font-weight: 600; color: var(--q-navy); }
.ols-quiz-wide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.ols-quiz-wide-link { font-size: 13px; font-weight: 600; color: var(--q-blue) !important; }
.ols-quiz-row .ols-quiz-btn, .ols-quiz-row .ols-quiz-btn:hover, .ols-quiz-row .ols-quiz-btn:focus { min-height: 44px; padding: 10px 20px; font-size: 14px; box-shadow: none; }
.ols-quiz-row .ols-quiz-btn:not(.is-quiet):hover { background: var(--q-blue-dark); }
.ols-quiz-row .ols-quiz-btn:not(.is-quiet):focus { background: var(--q-blue); }
.ols-quiz-row .ols-quiz-btn.is-quiet, .ols-quiz-row .ols-quiz-btn.is-quiet:hover, .ols-quiz-row .ols-quiz-btn.is-quiet:focus { background: var(--q-blue-wash); color: var(--q-blue) !important; }
.ols-quiz-side { background: #fff; border: 1px solid var(--q-line); border-radius: 22px; padding: 22px; box-shadow: var(--ols-shadow-soft, 0 10px 28px rgba(28,36,75,.09)); display: flex; flex-direction: column; gap: 14px; }
.ols-quiz-side-title { font-size: 15px; font-weight: 800; margin: 0; color: var(--q-navy); }
.ols-quiz-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ols-quiz-side li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--q-muted); }
.ols-quiz-side li b { display: block; font-size: 13px; font-weight: 700; color: var(--q-navy); }
.ols-quiz-side-n { width: 28px; height: 28px; border-radius: 50%; background: var(--q-navy); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ols-quiz-side-note { margin: 0; font-size: 12px; font-weight: 700; color: #3B6D11; }
.ols-quiz-topic { padding: 32px 0 24px; }
.ols-quiz-topic-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.ols-quiz-alone { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1025px) {
    .ols-quiz-side { position: sticky; top: 110px; }
}
@media (max-width: 1024px) {
    .ols-quiz-row { grid-template-columns: minmax(0, 1fr); }
    .ols-quiz-row-main { grid-column: auto; }
    .ols-quiz-alone { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ols-quiz-row { gap: 14px; }
    .ols-quiz-wide { grid-template-columns: minmax(0, 1fr); }
    .ols-quiz-wide-visual { aspect-ratio: 4 / 3; min-height: 0; }
}

/* The number squares: the theme pads every button, which pushed the digits off centre. */
.ols-quiz .ols-quiz-dot { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; text-align: center; min-width: 0; min-height: 0; letter-spacing: 0; text-indent: 0; }

/* ------------------------------------------------- the full course, under the results */
.ols-quiz .ols-quiz-offer { margin-top: 12px; background: var(--q-navy); color: #fff; border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px rgba(28, 36, 75, .22); position: relative; overflow: hidden; }
.ols-quiz .ols-quiz-offer::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 127, 247, .45), transparent 70%); pointer-events: none; }
.ols-quiz .ols-quiz-offer h2 { color: #fff; font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
.ols-quiz .ols-quiz-offer > p { color: #c9d4ff; max-width: 40em; }
.ols-quiz-offer-kicker { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ols-quiz-offer-list { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ols-quiz-offer-list li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 14px 16px 14px 44px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.ols-quiz-offer-list li::before { content: "\2713"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: #4ade80; color: #0b3b1f; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.ols-quiz-offer-list b { font-size: 15px; color: #fff; }
.ols-quiz-offer-list span { font-size: 13px; color: #c9d4ff; line-height: 1.5; }
.ols-quiz .ols-quiz-offer .ols-quiz-actions { align-items: center; gap: 12px 20px; }
.ols-quiz .ols-quiz-offer .ols-quiz-btn, .ols-quiz .ols-quiz-offer .ols-quiz-btn:hover, .ols-quiz .ols-quiz-offer .ols-quiz-btn:focus { background: #fff; color: var(--q-navy) !important; }
.ols-quiz .ols-quiz-offer .ols-quiz-btn:hover { background: #eef3ff; }
.ols-quiz-offer-more { color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: underline !important; text-underline-offset: 3px; }
.ols-quiz .ols-quiz-offer .ols-quiz-offer-note { font-size: 13px; color: #9fb0e8; }
@media (max-width: 640px) {
    .ols-quiz .ols-quiz-offer { padding: 22px; }
    .ols-quiz-offer-list { grid-template-columns: minmax(0, 1fr); }
}
.ols-quiz .ols-quiz-offer .ols-quiz-offer-name { color: #fff; font-size: 18px; font-weight: 700; margin-top: -6px; }
.ols-quiz-offer-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ------------------------------------------------- what the quiz earned */
.ols-quiz .ols-quiz-rewards { background: linear-gradient(135deg, #fff8e6, #fff); border-color: #f3d48a; gap: 12px; }
.ols-quiz .ols-quiz-rewards.is-levelup { background: linear-gradient(135deg, #e8f5ee, #fff); border-color: #9fd8b5; }
.ols-quiz-rewards-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ols-quiz-xp { font-size: 30px; font-weight: 800; color: #b26a00; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ols-quiz-rewards.is-levelup .ols-quiz-xp { color: var(--q-right); }
.ols-quiz-rewards-top span { font-weight: 700; color: var(--q-navy); }
.ols-quiz-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.ols-quiz-badge { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border: 1px solid var(--q-line); border-radius: 16px; padding: 10px 16px 10px 10px; }
.ols-quiz-badge-art svg { width: 72px; height: 72px; display: block; }
.ols-quiz-badge figcaption { display: flex; flex-direction: column; font-size: 13px; color: var(--q-muted); }
.ols-quiz-badge figcaption b { color: var(--q-navy); font-size: 15px; }

/* ------------------------------------------------- landing and board pages */
.ols-quiz.ols-quiz-wide-page { max-width: 1180px; }
.ols-quiz-pill.is-navy { background: var(--q-navy); color: #fff; }
.ols-quiz-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.ols-quiz .ols-quiz-board-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--q-line); box-shadow: var(--q-shadow); color: var(--q-navy) !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.ols-quiz .ols-quiz-board-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(28, 36, 75, .14); }
.ols-quiz-board-top { position: relative; padding: 26px 24px 22px; background: linear-gradient(135deg, #2c3f9e, #467ff7); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.ols-quiz-board-body { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c9d4ff; }
.ols-quiz-board-name { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ols-quiz-board-status { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--q-right); font-size: 12px; font-weight: 800; }
.ols-quiz-board-text { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ols-quiz-board-blurb { font-size: 15px; color: var(--q-muted); }
.ols-quiz-board-list { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.ols-quiz-board-list span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--q-blue); margin-right: 10px; vertical-align: 1px; }
.ols-quiz-board-cta { margin-top: auto; font-weight: 800; color: var(--q-blue); }

.ols-quiz-course { margin-top: 56px; display: flex; flex-direction: column; gap: 22px; }
.ols-quiz-course-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 46em; }
.ols-quiz-course-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; }
.ols-quiz-course-head p { color: var(--q-muted); font-size: 17px; }
.ols-quiz-course-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ols-quiz-shot { margin: 0; background: #fff; border: 1px solid var(--q-line); border-radius: 22px; overflow: hidden; box-shadow: var(--q-shadow); display: flex; flex-direction: column; }
.ols-quiz-shot img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--q-line); background: #f4f6fb; }
.ols-quiz-shot figcaption { padding: 16px 18px 20px; font-size: 14px; color: var(--q-muted); display: flex; flex-direction: column; gap: 4px; }
.ols-quiz-shot figcaption b { color: var(--q-navy); font-size: 16px; }
.ols-quiz-course-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ols-quiz-course-list li { background: var(--q-wash); border-radius: 16px; padding: 16px 18px; font-size: 14px; color: var(--q-muted); display: flex; flex-direction: column; gap: 4px; }
.ols-quiz-course-list b { color: var(--q-navy); font-size: 15px; }

.ols-quiz-unit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-top: 26px; }
.ols-quiz-unit-panel { background: var(--q-navy); color: #fff; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 110px; }
.ols-quiz-unit-label { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ols-quiz .ols-quiz-unit-panel h2 { color: #fff; font-size: 21px; font-weight: 800; line-height: 1.25; }
.ols-quiz-unit-meta { color: #c9d4ff; font-size: 13px; }
.ols-quiz-unit-count { color: #fff; font-size: 14px; font-weight: 700; margin-top: 6px !important; }
.ols-quiz-unit-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ols-quiz .ols-quiz-tile { gap: 8px; padding: 20px 22px; border-radius: 20px; }
.ols-quiz .ols-quiz-tile.is-done { border-color: #bfe3cc; }
.ols-quiz-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ols-quiz .ols-quiz-tile .ols-quiz-chip { margin: 0; }
.ols-quiz-tile-meta { font-size: 13px; color: var(--q-muted); }
.ols-quiz-tile-cta { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 800; color: var(--q-blue); }
.ols-quiz-more { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 22px; background: var(--q-blue-wash); }
.ols-quiz-more div { display: flex; flex-direction: column; gap: 2px; }
.ols-quiz-more span { color: var(--q-muted); font-size: 14px; }
@media (max-width: 1024px) {
    .ols-quiz-course-row { grid-template-columns: minmax(0, 1fr); }
    .ols-quiz-shot img { height: auto; max-height: 420px; }
    .ols-quiz-course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ols-quiz-unit { grid-template-columns: minmax(0, 1fr); }
    .ols-quiz-unit-panel { position: static; }
}
@media (max-width: 640px) {
    .ols-quiz-unit-tiles, .ols-quiz-course-list { grid-template-columns: minmax(0, 1fr); }
}
.ols-quiz .ols-quiz-shot figcaption, .ols-quiz .ols-quiz-shot figcaption b { font-style: normal; }

/* The full course's screenshots (Mo, 12 Oct): each one over two columns, at full size,
   with its explanation as a card in the third. */
.ols-quiz .ols-quiz-course-row { display: flex; flex-direction: column; gap: 20px; }
.ols-quiz .ols-quiz-shot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ols-quiz .ols-quiz-shot img { height: auto; max-height: none; object-fit: contain; border: 1px solid var(--q-line); border-radius: 22px; box-shadow: var(--q-shadow); background: #fff; }
.ols-quiz .ols-quiz-shot figcaption { background: #fff; border: 1px solid var(--q-line); border-radius: 22px; box-shadow: var(--q-shadow); padding: 28px; justify-content: center; gap: 10px; font-size: 16px; line-height: 1.65; }
.ols-quiz .ols-quiz-shot figcaption b { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
@media (max-width: 1024px) {
    .ols-quiz .ols-quiz-shot { grid-template-columns: minmax(0, 1fr); }
    .ols-quiz .ols-quiz-shot figcaption { padding: 22px; }
}

/* Marked answers at 3x, student view (16 Oct 2026): stacked, never wider than their 1x size. */
.ols-quiz .ols-quiz-hd { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ols-quiz .ols-quiz-hd figcaption { max-width: 820px; text-align: center; font-style: normal; font-size: 16px; line-height: 1.6; color: var(--q-muted); }
.ols-quiz .ols-quiz-hd figcaption b { display: block; color: var(--q-navy); font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 6px; }
.ols-quiz .ols-quiz-hd > img { display: block; width: 100%; max-width: 1024px; height: auto; border: 1px solid var(--q-line); border-radius: 18px; box-shadow: var(--q-shadow); background: #fff; }
.ols-quiz .ols-quiz-hd-fb { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: 14px; justify-content: center; align-items: start; width: 100%; }
.ols-quiz .ols-quiz-hd-fb img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ols-quiz .ols-quiz-course-row { gap: 44px; }
@media (max-width: 760px) { .ols-quiz .ols-quiz-hd-fb { grid-template-columns: 1fr; } }
.ols-quiz .ols-quiz-offer-shot { margin: 18px auto 6px; max-width: 1024px; }
.ols-quiz .ols-quiz-offer-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--q-line); border-radius: 16px; background: #fff; }
.ols-quiz .ols-quiz-offer-shot figcaption { margin-top: 10px; font-size: 14px; font-style: normal; color: #dfe3f1; text-align: center; }

/* The course row on a topic page (includes/course.php): the page's own cards and panels, OLS Quiz's colours. */
.ols-course-visual.is-lessons { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.42), transparent 24%), linear-gradient(135deg, #fff0f3 0%, #f38aa0 45%, #c43d63 100%); }
.ols-course-visual.is-mcq { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.42), transparent 24%), linear-gradient(135deg, #fffbea 0%, #f7d26a 45%, #c9961a 100%); }
.ols-course-visual.is-saq { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.42), transparent 24%), linear-gradient(135deg, #eefaff 0%, #6fc3e8 45%, #1f7fb0 100%); }
.ols-course-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 5px 11px; }
.ols-course-chip.is-own { background: #eaf3de; color: #3b6d11; }
.ols-course-chip.is-free { background: #ffffff; color: #1c244b; }
.ols-course-chip.is-locked { background: rgba(28, 36, 75, 0.86); color: #ffffff; }
.ols-course-lock { display: inline-flex; width: 12px; height: 12px; }
.ols-course-lock svg { width: 100%; height: 100%; }

/* The course sections on a topic page (Mo, 18 Oct 2026): each its own band, divided from the next. */
.ols-course-section { position: relative; border-top: 1px solid rgba(28, 36, 75, 0.10); }
.ols-course-section.is-lessons, .ols-course-section.is-saq { background: #f6f8fd; }
.ols-course-section.is-mcq { background: #ffffff; }
/* …but not above the synthesis map (Mo, 18 Oct 2026: no line over its title). */
.ols-course-section + section:not(.ols-course-section):not(.ols-smap) { border-top: 1px solid rgba(28, 36, 75, 0.10); }
.ols-course-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: stretch; }
.ols-course-about { display: flex; flex-direction: column; gap: 18px; background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; padding: 28px 30px; }
.ols-course-lead { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; color: #1c244b; text-wrap: pretty; }
.ols-course-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ols-course-points li { display: grid; gap: 2px; padding-left: 26px; position: relative; }
.ols-course-points li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #467ff7; box-shadow: inset 0 0 0 4px #dce7ff; }
.ols-course-section.is-lessons .ols-course-points li::before { background: #c43d63; box-shadow: inset 0 0 0 4px #fbe1e8; }
.ols-course-section.is-mcq .ols-course-points li::before { background: #c9961a; box-shadow: inset 0 0 0 4px #fbefcc; }
.ols-course-section.is-saq .ols-course-points li::before { background: #1f7fb0; box-shadow: inset 0 0 0 4px #d6eefa; }
.ols-course-points b { font-size: 15px; color: #1c244b; }
.ols-course-points span { font-size: 14px; font-weight: 300; line-height: 1.6; color: #5b6383; }
.ols-course-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ols-course-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: #1c244b; color: #ffffff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.ols-course-btn:hover { background: #467ff7; }
.ols-course-btn.is-quiet { background: #ffffff; color: #1c244b !important; box-shadow: inset 0 0 0 1.5px #1c244b; }
.ols-course-btn.is-quiet:hover { background: #eef3ff; }
.ols-course-link { font-size: 14px; font-weight: 700; color: #467ff7; text-decoration: none; }
@media (max-width: 860px) { .ols-course-feature { grid-template-columns: 1fr; } .ols-course-about { padding: 22px 20px; } .ols-course-lead { font-size: 16px; } }

/* Virtual Lessons page (includes/lessons.php): the lesson and its player, the list beside it. */
.ols-quiz .ols-lesson-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.ols-quiz .ols-lesson-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ols-quiz .ols-lesson-player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 22px; overflow: hidden; background: #0b1120; box-shadow: 0 18px 40px rgba(28, 36, 75, 0.18); }
.ols-quiz .ols-lesson-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ols-quiz .ols-lesson-play { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: #ffffff; text-align: center;
    background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.18), transparent 30%), linear-gradient(135deg, #f38aa0 0%, #c43d63 45%, #1c244b 100%); }
.ols-quiz .ols-lesson-play-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.ols-quiz .ols-lesson-play-title { font-size: clamp(20px, 3vw, 32px); font-weight: 800; line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.ols-quiz .ols-lesson-play-icon { margin-top: 8px; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); position: relative; transition: transform 0.2s ease; }
.ols-quiz .ols-lesson-play-icon::after { content: ""; position: absolute; left: 31px; top: 23px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid #1c244b; }
.ols-quiz .ols-lesson-play:hover .ols-lesson-play-icon, .ols-quiz .ols-lesson-play:focus-visible .ols-lesson-play-icon { transform: scale(1.08); }
.ols-quiz .ols-lesson-play:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }
.ols-quiz .ols-lesson-play-note { font-size: 13px; opacity: 0.9; }
.ols-quiz .ols-lesson-mark { position: absolute; z-index: 2; pointer-events: none; color: #ffffff; font-size: 13px; text-shadow: 0 1px 2px #000; white-space: nowrap; transition: left 1s ease, top 1s ease; }
.ols-quiz .ols-lesson-player.is-locked { aspect-ratio: auto; min-height: clamp(300px, 36vw, 432px); display: flex; background: linear-gradient(135deg, #fff0f3 0%, #f6f8fd 100%); box-shadow: none; border: 1px solid rgba(28, 36, 75, 0.10); }
.ols-quiz .ols-lesson-locked { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ols-quiz .ols-lesson-lock { width: 52px; height: 52px; border-radius: 50%; background: #1c244b; position: relative; }
.ols-quiz .ols-lesson-lock::before { content: ""; position: absolute; left: 18px; top: 13px; width: 12px; height: 11px; border: 3px solid #ffffff; border-bottom: 0; border-radius: 8px 8px 0 0; }
.ols-quiz .ols-lesson-lock::after { content: ""; position: absolute; left: 15px; top: 24px; width: 22px; height: 15px; border-radius: 4px; background: #ffffff; }
.ols-quiz .ols-lesson-locked-title { margin: 0; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; color: #1c244b; }
.ols-quiz .ols-lesson-locked-text { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: #5b6383; }
.ols-quiz .ols-lesson-locked .ols-course-actions { margin-top: 8px; justify-content: center; }
.ols-quiz .ols-lesson-about { background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ols-quiz .ols-lesson-about p { margin: 0; font-size: 15px; line-height: 1.75; color: #3e4666; max-width: 70ch; }
.ols-quiz .ols-lesson-about strong { color: #1c244b; }
.ols-quiz .ols-lesson-kicker { font-size: 12px !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #c43d63 !important; }
.ols-quiz .ols-lesson-title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.2; color: #1c244b; text-wrap: balance; }
.ols-quiz .ols-lesson-about .ols-lesson-summary { font-size: 17px; color: #1c244b; }
.ols-quiz .ols-lesson-about .ols-course-btn { margin-top: 6px; }
.ols-quiz .ols-lesson-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }
.ols-quiz .ols-lesson-list { background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; padding: 18px; }
.ols-quiz .ols-lesson-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 12px; font-size: 13px; color: #5b6383; }
.ols-quiz .ols-lesson-list-head b { font-size: 16px; color: #1c244b; }
.ols-quiz .ols-lesson-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ols-quiz .ols-lesson-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none; color: #1c244b; }
.ols-quiz .ols-lesson-item:hover { background: #f6f8fd; }
.ols-quiz .ols-lesson-item.is-current { background: #fff0f3; box-shadow: inset 0 0 0 1.5px #f3b6c4; }
.ols-quiz .ols-lesson-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #eef1f8; color: #1c244b; }
.ols-quiz .ols-lesson-item.is-done .ols-lesson-num { background: #3b6d11; color: transparent; position: relative; }
.ols-quiz .ols-lesson-item.is-done .ols-lesson-num::after { content: ""; position: absolute; left: 12px; top: 9px; width: 7px; height: 13px; border: solid #ffffff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ols-quiz .ols-lesson-name { font-size: 14px; font-weight: 700; line-height: 1.35; display: grid; gap: 2px; }
.ols-quiz .ols-lesson-state { font-size: 12px; font-weight: 500; color: #5b6383; }
.ols-quiz .ols-lesson-item.is-done .ols-lesson-state { color: #3b6d11; }
.ols-quiz .ols-lesson-item.is-locked .ols-lesson-state { color: #8a6d1f; }
.ols-quiz .ols-lesson-spec { background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; padding: 16px 18px; }
.ols-quiz .ols-lesson-spec summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #1c244b; }
.ols-quiz .ols-lesson-spec ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ols-quiz .ols-lesson-spec li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.55; color: #3e4666; }
.ols-quiz .ols-lesson-spec li b { color: #1c244b; }
@media (max-width: 900px) { .ols-quiz .ols-lesson-layout { grid-template-columns: minmax(0, 1fr); } .ols-quiz .ols-lesson-side { position: static; } .ols-quiz .ols-lesson-about { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .ols-quiz .ols-lesson-play-icon, .ols-quiz .ols-lesson-mark { transition: none; } }

/* A course's MCQ page (includes/course-mcq.php): the papers as rows, gold like their card on the topic page. */
.ols-quiz .ols-mcq-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 16px; font-size: 15px; color: #5b6383; }
.ols-quiz .ols-mcq-summary b { font-size: 18px; color: #1c244b; }
.ols-quiz .ols-mcq-list { display: grid; gap: 14px; }
.ols-quiz .ols-mcq-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px 22px 14px 14px; background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; box-shadow: 0 8px 22px rgba(28, 36, 75, 0.06); }
.ols-quiz .ols-mcq-visual { aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.5), transparent 30%), linear-gradient(135deg, #fffbea 0%, #f7d26a 45%, #c9961a 100%); }
.ols-quiz .ols-mcq-letter { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.82); font-size: 30px; font-weight: 800; color: #1c244b; box-shadow: 0 8px 18px rgba(28, 36, 75, 0.14); }
.ols-quiz .ols-mcq-row.is-locked .ols-mcq-visual { filter: saturate(0.35); }
.ols-quiz .ols-mcq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ols-quiz .ols-mcq-title { margin: 0; font-size: 20px; font-weight: 800; color: #1c244b; }
.ols-quiz .ols-mcq-facts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #5b6383; }
.ols-quiz .ols-mcq-facts span + span::before { content: "·"; margin-right: 14px; color: #b5bbd0; }
.ols-quiz .ols-mcq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
.ols-mcq .ols-course-chip { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ols-mcq .ols-course-chip.is-free { background: #fdf3d3; color: #7a5a06; }
.ols-quiz .ols-course-chip.is-going { background: #eef3ff; color: #2c55b8; }
.ols-quiz .ols-mcq-unlock { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 24px 28px; border-radius: 22px; background: #1c244b; color: #ffffff; }
.ols-quiz .ols-mcq-unlock h2 { margin: 0 0 6px; font-size: 20px; color: #ffffff; }
.ols-quiz .ols-mcq-unlock p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.6; color: #d7dcf0; }
.ols-quiz .ols-mcq-unlock .ols-course-btn { background: #ffffff; color: #1c244b !important; }
.ols-quiz .ols-mcq-unlock .ols-course-btn:hover { background: #f7d26a; }
.ols-quiz .ols-mcq-unlock .ols-course-btn.is-quiet { background: transparent; color: #ffffff !important; box-shadow: inset 0 0 0 1.5px #ffffff; }
.ols-quiz .ols-course-locked { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px 24px; }
.ols-quiz .ols-course-locked h2 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); color: #1c244b; }
.ols-quiz .ols-course-locked p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.65; color: #5b6383; }
.ols-quiz .ols-course-locked .ols-course-actions { justify-content: center; margin-top: 6px; }
@media (max-width: 720px) {
    .ols-quiz .ols-mcq-row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 12px 14px 14px 12px; }
    .ols-quiz .ols-mcq-letter { width: 42px; height: 42px; font-size: 22px; border-radius: 12px; }
    .ols-quiz .ols-mcq-cta { grid-column: 1 / -1; justify-content: flex-start; }
    .ols-quiz .ols-mcq-facts { gap: 2px 12px; }
    .ols-quiz .ols-mcq-facts span + span::before { display: none; }
    .ols-quiz .ols-mcq-unlock { padding: 22px 20px; }
}

/* Back links are real buttons (Mo, 18 Oct 2026), in the site's navy; never the theme's pink. */
.ols-quiz .ols-quiz-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: #ffffff; box-shadow: inset 0 0 0 1.5px #1c244b; color: #1c244b !important; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease; }
.ols-quiz .ols-quiz-back::before { content: "\2190"; }
.ols-quiz .ols-quiz-back:hover, .ols-quiz .ols-quiz-back:focus-visible { background: #1c244b; color: #ffffff !important; }
.ols-quiz .ols-course-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.ols-quiz .ols-course-crumb { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: #eef3ff; color: #2c55b8 !important; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease; }
.ols-quiz .ols-course-crumb:hover, .ols-quiz .ols-course-crumb:focus-visible { background: #467ff7; color: #ffffff !important; }

/* Exam practice papers (includes/course-saq.php): the MCQ page's rows in the papers' blue, and Moodle's screen in a frame. */
.ols-quiz.ols-saq .ols-mcq-visual { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.5), transparent 30%), linear-gradient(135deg, #eefaff 0%, #6fc3e8 45%, #1f7fb0 100%); }
.ols-mcq .ols-course-chip.is-waiting { background: #fdf3d3; color: #7a5a06; }
.ols-quiz .ols-saq-notice { margin: 0 0 18px; padding: 16px 20px; border-radius: 16px; background: #eaf3de; color: #2f5a0d; font-size: 15px; line-height: 1.6; }
.ols-quiz .ols-saq-notice b { color: #234409; }
.ols-quiz .ols-saq-frame-wrap { position: relative; margin-top: 4px; border: 1px solid rgba(28, 36, 75, 0.10); border-radius: 22px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 28px rgba(28, 36, 75, 0.08); }
.ols-quiz .ols-saq-frame { display: block; width: 100%; height: 80vh; min-height: 520px; border: 0; background: #ffffff; }
.ols-quiz .ols-saq-loading { position: absolute; top: 40px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; color: #5b6383; }
/* The theme underlines links inside page content (.page-content a); our buttons are buttons. */
.ols-quiz a.ols-course-btn, .ols-quiz a.ols-course-link, .ols-quiz a.ols-quiz-btn, .ols-quiz a.ols-quiz-back, .ols-quiz a.ols-course-crumb, .ols-quiz a.ols-lesson-item { text-decoration: none; }
.ols-quiz .ols-mcq-unlock h2 { font-weight: 800; }

/* KASP on the website (Mo, 18 Oct 2026): a panel on the exam practice pages, a button by the way back. */
.ols-quiz .ols-course-kasp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; padding: 16px 20px; border-radius: 18px; background: #eef3ff; border: 1px solid #d5e1fd; }
.ols-quiz .ols-course-kasp p { margin: 6px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.6; color: #3e4666; }
.ols-quiz .ols-course-kasp b { color: #1c244b; }
.ols-quiz .ols-course-kasp-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #1c244b; color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.ols-quiz .ols-course-crumb.is-kasp::before { content: "\25D4\00a0"; }

/* A marked paper (includes/marked.php): the answer with the marker's work on it, the mark scheme, the feedback. */
.ols-quiz .ols-mp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.ols-quiz .ols-mp-summary h2 { margin: 0 0 6px; font-size: 24px; color: #1c244b; }
.ols-quiz .ols-mp-summary p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #5b6383; }
.ols-quiz .ols-mp-summary.is-waiting { background: #fffaeb; border-color: #f3e2ad; }
.ols-quiz .ols-mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ols-quiz .ols-mp-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef1f8; color: #3e4666; }
.ols-quiz .ols-mp-chip.is-right { background: #e6f4ea; color: #1e7a3a; }
.ols-quiz .ols-mp-chip.is-partial { background: #fdf0d8; color: #8a5a00; }
.ols-quiz .ols-mp-chip.is-wrong { background: #fde8e8; color: #b42318; }
.ols-quiz .ols-mp-chip.is-awaiting { background: #fdf3d3; color: #7a5a06; }
.ols-quiz .ols-mp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ols-quiz .ols-mp-list { display: grid; gap: 18px; margin-top: 18px; }
.ols-quiz .ols-mp-list.is-missed-only .ols-mp-q.is-right { display: none; }
.ols-quiz .ols-mp-q { background: #ffffff; border: 1px solid rgba(28, 36, 75, 0.10); border-left: 5px solid #c5cbe0; border-radius: 18px; padding: 22px 24px; display: grid; gap: 16px; }
.ols-quiz .ols-mp-q.is-right { border-left-color: #2e9d55; }
.ols-quiz .ols-mp-q.is-partial { border-left-color: #e0a12a; }
.ols-quiz .ols-mp-q.is-wrong { border-left-color: #d23b3b; }
.ols-quiz .ols-mp-qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ols-quiz .ols-mp-qhead h2 { margin: 0; font-size: 17px; color: #1c244b; }
.ols-quiz .ols-mp-score { margin-left: auto; font-size: 15px; font-weight: 800; color: #1c244b; font-variant-numeric: tabular-nums; }
.ols-quiz .ols-mp-qtext { font-size: 15px; line-height: 1.7; color: #1c244b; }
.ols-quiz .ols-mp-qtext p { margin: 0 0 8px; }
.ols-quiz .ols-mp-qtext img { display: block; max-width: min(100%, 420px); max-height: 260px; width: auto; height: auto; margin: 8px 0; }
.ols-quiz .ols-mp-qtext table { width: auto; border-collapse: collapse; font-size: 14px; }
.ols-quiz .ols-mp-qtext td, .ols-quiz .ols-mp-qtext th { padding: 6px 10px; border: 1px solid #dfe3ee; }
.ols-quiz .ols-mp-h { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6383; }
.ols-quiz .ols-mp-answer { padding: 14px 16px; border-radius: 14px; background: #f6f8fd; }
.ols-quiz .ols-mp-writing { font-size: 15px; line-height: 1.9; color: #1c244b; white-space: normal; }
.ols-quiz .ols-mp-mark { padding: 1px 2px; border-radius: 4px; color: inherit; border-bottom: 3px solid; }
.ols-quiz .ols-mp-mark sup { font-size: 10px; font-weight: 800; margin-left: 2px; }
.ols-quiz .ols-mp-mark.is-green { background: #e3f3e7; border-color: #2e9d55; }
.ols-quiz .ols-mp-mark.is-orange { background: #fdf0d8; border-color: #e0a12a; }
.ols-quiz .ols-mp-mark.is-red { background: #fde8e8; border-color: #d23b3b; }
.ols-quiz .ols-mp-mark.is-muted { background: #eef1f8; border-color: #9aa3bd; }
.ols-quiz .ols-mp-figure { position: relative; margin: 0 0 10px; max-width: 760px; background: #ffffff; border: 1px solid #dfe3ee; border-radius: 10px; overflow: hidden; }
.ols-quiz .ols-mp-figure img { display: block; width: 100%; height: auto; }
.ols-quiz .ols-mp-figure .ols-mp-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ols-quiz .ols-mp-box { position: absolute; border: 2.5px solid; border-radius: 6px; }
.ols-quiz .ols-mp-box b { position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #ffffff; }
.ols-quiz .ols-mp-box.is-green { border-color: #2e9d55; background: rgba(46, 157, 85, 0.08); }
.ols-quiz .ols-mp-box.is-green b { background: #2e9d55; }
.ols-quiz .ols-mp-box.is-orange { border-color: #e0a12a; background: rgba(224, 161, 42, 0.10); }
.ols-quiz .ols-mp-box.is-orange b { background: #e0a12a; }
.ols-quiz .ols-mp-box.is-red { border-color: #d23b3b; background: rgba(210, 59, 59, 0.08); }
.ols-quiz .ols-mp-box.is-red b { background: #d23b3b; }
.ols-quiz .ols-mp-box.is-muted { border-color: #9aa3bd; }
.ols-quiz .ols-mp-box.is-muted b { background: #9aa3bd; }
.ols-quiz .ols-mp-final { margin: 6px 0 0; font-size: 15px; color: #3e4666; }
.ols-quiz .ols-mp-final b { color: #1c244b; }
.ols-quiz .ols-mp-empty { margin: 0; font-size: 14px; color: #5b6383; font-style: italic; }
.ols-quiz .ols-mp-graph { margin: 0; max-width: 640px; }
.ols-quiz .ols-mp-graph svg { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid #dfe3ee; border-radius: 10px; }
.ols-quiz .ols-mp-graph .g { stroke: #e3e7f1; stroke-width: 1; }
.ols-quiz .ols-mp-graph .a { stroke: #1c244b; stroke-width: 1.5; }
.ols-quiz .ols-mp-graph .l { stroke: #467ff7; stroke-width: 2.5; }
.ols-quiz .ols-mp-graph .p { stroke: #1c244b; stroke-width: 2; fill: none; }
.ols-quiz .ols-mp-graph .t { fill: #5b6383; font-size: 12px; }
.ols-quiz .ols-mp-graph figcaption { margin-top: 6px; font-size: 13px; color: #5b6383; }
.ols-quiz .ols-mp-scheme ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ols-quiz .ols-mp-scheme li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; background: #f6f8fd; }
.ols-quiz .ols-mp-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #ffffff; background: #9aa3bd; }
.ols-quiz .ols-mp-scheme li.is-green .ols-mp-n { background: #2e9d55; }
.ols-quiz .ols-mp-scheme li.is-orange .ols-mp-n { background: #e0a12a; }
.ols-quiz .ols-mp-scheme li.is-red .ols-mp-n { background: #d23b3b; }
.ols-quiz .ols-mp-crit { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: #1c244b; }
.ols-quiz .ols-mp-crit small { color: #5b6383; }
.ols-quiz .ols-mp-crit-note { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #5b6383; }
.ols-quiz .ols-mp-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: #eef1f8; color: #5b6383; }
.ols-quiz .ols-mp-scheme li.is-green .ols-mp-pill { background: #e6f4ea; color: #1e7a3a; }
.ols-quiz .ols-mp-feedback { padding: 14px 16px; border-radius: 14px; background: #eef3ff; font-size: 15px; line-height: 1.7; color: #1c244b; }
.ols-quiz .ols-mp-feedback p { margin: 0 0 10px; }
.ols-quiz .ols-mp-feedback p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .ols-quiz .ols-mp-q { padding: 18px 16px; }
    .ols-quiz .ols-mp-scheme li { grid-template-columns: 26px minmax(0, 1fr); }
    .ols-quiz .ols-mp-pill { grid-column: 2; justify-self: start; }
}
.ols-quiz .ols-mp-summary { justify-content: flex-start; text-align: left; }
.ols-quiz .ols-mp-summary > div:not(.ols-quiz-ring) { flex: 1 1 320px; min-width: 0; }
.ols-quiz .ols-mp-figure-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10px; }
.ols-quiz .ols-mp-figure-scroll .ols-mp-figure { margin: 0; }
@media (max-width: 640px) { .ols-quiz .ols-mp-figure-scroll .ols-mp-figure { width: 600px; max-width: none; } }

/* The reaction memory game's section on topic pages (includes/game-page.php; Mo, 18 Oct 2026): its own colour, free. */
.ols-course-visual.is-game { background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.42), transparent 24%), linear-gradient(135deg, #eafaf1 0%, #5ccb94 45%, #1f8a5b 100%); }
.ols-course-section.is-game { background: #f3fbf7; }
.ols-course-section.is-game .ols-course-points li::before { background: #1f8a5b; box-shadow: inset 0 0 0 4px #d5f2e3; }

/* Course and game sections on section pages (ols-sub, e.g. 3A Ionic Bonding, 10A Alcohols; Mo, 18 Oct 2026):
   those pages do not style the course-section classes the topic pages do, so each section brings its own
   heading, padding and buttons, matching the page's own "Synthesis map" heading. */
.ols-sub-topics.ols-course-section { padding: 32px 24px 36px; margin: 28px 0; border-radius: 24px; }
.ols-sub-topics.ols-course-section:not(.is-game) { background: #f6f8fd; border: 1px solid rgba(28, 36, 75, 0.08); }
.ols-sub-topics.ols-course-section .ols-sub-section-header { margin: 0 0 20px; }
.ols-sub-topics.ols-course-section .ols-sub-section-title { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #1c244b; }
.ols-course-section a, .ols-course-section a:hover { text-decoration: none !important; }
@media (max-width: 760px) { .ols-sub-topics.ols-course-section { padding: 24px 14px 28px; } }

/* Real marked examples on the course MCQ and exam practice pages (includes/course-examples.php; Mo, 18 Oct 2026).
   The MCQ card is the homepage's (page 3216, fh-qp), under its own names here. */
.ols-quiz .ols-course-example { margin-top: 36px; }
.ols-quiz .ols-ex-qp-wrap { max-width: 640px; margin: 0 auto; }
.ols-quiz .ols-ex-qp { background: #ffffff; border: 1px solid rgba(28,36,75,0.1); border-radius: 22px; box-shadow: 0 26px 56px rgba(28,36,75,0.14); overflow: hidden; }
.ols-quiz .ols-ex-qp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(28,36,75,0.08); }
.ols-quiz .ols-ex-qp-top b { font-size: 13px; font-weight: 700; color: #1C244B; }
.ols-quiz .ols-ex-qp-chip { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: #fdecea; color: #b42318; white-space: nowrap; }
.ols-quiz .ols-ex-qp-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.ols-quiz .ols-ex-qp-q { margin: 0; font-size: 16px; line-height: 1.55; color: #1C244B; }
.ols-quiz .ols-ex-qp-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ols-quiz .ols-ex-qp-opts li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border: 2px solid #e3e7f0; border-radius: 14px; font-size: 14.5px; color: #1C244B; }
.ols-quiz .ols-ex-qp-opts li span:first-child { width: 30px; height: 30px; border-radius: 9px; background: #f6f8fd; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.ols-quiz .ols-ex-qp-opts li em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ols-quiz .ols-ex-qp-opts li.is-right { border-color: #1f8a4c; background: #e8f5ee; }
.ols-quiz .ols-ex-qp-opts li.is-right span:first-child { background: #1f8a4c; color: #ffffff; }
.ols-quiz .ols-ex-qp-opts li.is-right em { color: #1f8a4c; }
.ols-quiz .ols-ex-qp-opts li.is-wrong { border-color: #b42318; background: #fdecea; }
.ols-quiz .ols-ex-qp-opts li.is-wrong span:first-child { background: #b42318; color: #ffffff; }
.ols-quiz .ols-ex-qp-opts li.is-wrong em { color: #b42318; }
.ols-quiz .ols-ex-qp-box { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: #374151; }
.ols-quiz .ols-ex-qp-box b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.ols-quiz .ols-ex-qp-box.is-fb { background: #f6f8fd; }
.ols-quiz .ols-ex-qp-box.is-fb b { color: #b42318; }
.ols-quiz .ols-ex-qp-box.is-ex { border: 1px solid #e3e7f0; }
.ols-quiz .ols-ex-qp-box.is-ex b { color: #2563eb; }
.ols-quiz .ols-ex-qp-box.is-rev { background: #eaf3de; }
.ols-quiz .ols-ex-qp-box.is-rev b { color: #3B6D11; }
.ols-quiz .ols-ex-qp-box.is-rev a { color: #2d5a0b; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ols-quiz .ols-ex-qp-cap { margin: 12px 4px 0; font-size: 13px; color: rgba(28,36,75,0.6); text-align: center; }
@media (max-width: 600px) { .ols-quiz .ols-ex-qp-opts li { grid-template-columns: 30px minmax(0, 1fr); } .ols-quiz .ols-ex-qp-opts li em { grid-column: 2; } }

/* The MCQ page for someone without the course (Mo, 18 Oct 2026): papers left, the marked example beside them,
   staying in view; on a phone the example comes straight after MCQ (A). */
.ols-quiz .ols-mcq-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ols-quiz .ols-mcq-ex.is-desk { position: sticky; top: 24px; }
.ols-quiz .ols-mcq-ex .ols-course-example { margin: 0; }
.ols-quiz .ols-mcq-ex .ols-ex-qp-wrap { max-width: none; }
.ols-quiz .ols-mcq-ex.is-phone { display: none; }
.ols-quiz .ols-mcq-split .ols-mcq-facts span:nth-child(n+2) { display: none; }
@media (max-width: 900px) {
    .ols-quiz .ols-mcq-split { display: block; }
    .ols-quiz .ols-mcq-ex.is-desk { display: none; }
    .ols-quiz .ols-mcq-ex.is-phone { display: block; margin: 8px 0 18px; }
    .ols-quiz .ols-mcq-split .ols-mcq-facts span:nth-child(n+2) { display: inline; }
}

/* The exam practice page beside its papers: the marked answers stacked in the side column (Mo, 18 Oct 2026). */
.ols-quiz .ols-mcq-split.is-saq { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ols-quiz .ols-mcq-ex .ols-quiz-course-row { display: flex; flex-direction: column; gap: 22px; }
.ols-quiz .ols-mcq-ex .ols-quiz-hd-fb { display: flex; flex-direction: column; gap: 10px; }
.ols-quiz .ols-mcq-ex .ols-quiz-hd figcaption { margin-bottom: 10px; }
/* ------------------------------------------- board rows and unit jump blocks (Mo, 24 Oct 2026) */
/* The landing page's boards: the Courses page's rows, each straight to its board's quizzes. */
/* Text in a board colour uses a darker shade of it (--bx-ink) so gold and orange stay readable on white. */
.ols-quiz-bl, .ols-quiz-wide-page { --bx-ink: color-mix(in srgb, var(--bx) 68%, #000); }
.ols-quiz-bls { display: grid; gap: 12px; }
.ols-quiz .ols-quiz-bl { display: flex; align-items: center; gap: 10px 18px; padding: 18px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--q-line); border-left: 8px solid var(--bx); box-shadow: var(--q-shadow); color: var(--q-navy) !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.ols-quiz .ols-quiz-bl:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .1); }
.ols-quiz .ols-quiz-bl:focus-visible { outline: 3px solid var(--bx); outline-offset: 2px; }
.ols-quiz-bl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ols-quiz-bl-name { font-size: 24px; font-weight: 900; letter-spacing: -.4px; color: #07111f; }
.ols-quiz-bl-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; line-height: 1; font-weight: 800; color: var(--bx-ink); background: color-mix(in srgb, var(--bx) 10%, #fff); border: 1px solid color-mix(in srgb, var(--bx) 22%, #fff); }
.ols-quiz-bl-count { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--bx-ink); white-space: nowrap; }
.ols-quiz-bl-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--bx); color: #fff; font-size: 18px; font-weight: 900; transition: transform .15s ease; }
.ols-quiz .ols-quiz-bl:hover .ols-quiz-bl-go { transform: translateX(3px); }
@media (max-width: 560px) {
    .ols-quiz .ols-quiz-bl { position: relative; display: block; padding: 16px 62px 16px 16px; }
    .ols-quiz-bl-name { font-size: 20px; }
    .ols-quiz-bl-count { display: block; margin-top: 10px; }
    .ols-quiz-bl-go { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; }
}

/* A board page's units as blocks at the top: click one to glide to it; the one in view is lit. */
.ols-quiz-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 6px; scroll-margin-top: 120px; }
.ols-quiz .ols-quiz-jump-block { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--q-line); border-left: 6px solid var(--bx, var(--q-navy)); box-shadow: var(--q-shadow); color: var(--q-navy) !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.ols-quiz .ols-quiz-jump-block:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .1); }
.ols-quiz .ols-quiz-jump-block:focus-visible { outline: 3px solid var(--bx, var(--q-navy)); outline-offset: 2px; }
.ols-quiz .ols-quiz-jump-block.is-active { background: var(--bx, var(--q-navy)); color: #fff !important; }
.ols-quiz-jump-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-ink, var(--q-navy)); }
.ols-quiz-jump-title { font-size: 15px; font-weight: 800; line-height: 1.3; }
.ols-quiz-jump-count { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--q-muted); }
.ols-quiz .ols-quiz-jump-block.is-active .ols-quiz-jump-label, .ols-quiz .ols-quiz-jump-block.is-active .ols-quiz-jump-count { color: rgba(255, 255, 255, .85); }
.ols-quiz-unit, .ols-quiz .ols-quiz-tile { scroll-margin-top: 120px; }
.ols-quiz-unit-panel { border-left: 8px solid var(--bx, var(--q-navy)); }
.ols-quiz .ols-quiz-unit-top { align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff !important; text-decoration: none !important; font-size: 12.5px; font-weight: 800; }
.ols-quiz .ols-quiz-unit-top:hover { background: rgba(255, 255, 255, .24); }
.ols-quiz-unit-tiles.is-empty { display: flex; align-items: center; min-height: 120px; padding: 20px 22px; border-radius: 20px; border: 1.5px dashed var(--q-line); background: var(--q-wash); }
.ols-quiz-unit-tiles.is-empty p { margin: 0; color: var(--q-muted); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .ols-quiz .ols-quiz-bl, .ols-quiz .ols-quiz-jump-block, .ols-quiz-bl-go { transition: none; } }
/* Tabs mode (JavaScript on): one unit at a time, its panel a bar above its topic cards. */
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-panel { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 18px 22px; }
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-panel h2 { flex: 1 1 auto; margin: 0; }
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-count { margin-top: 0 !important; }
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-tiles.is-empty { display: flex; }
.ols-quiz .ols-quiz-jump-block { cursor: pointer; }
@media (max-width: 1024px) { .ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ols-quiz-jump.is-tabs + .ols-quiz-units .ols-quiz-unit-tiles { grid-template-columns: minmax(0, 1fr); } .ols-quiz-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }