/* ══════════════════════════════════════════════════════════════════════
   Examiner report · the product's speciality, styled once
   ----------------------------------------------------------------------
   One stylesheet for the marking report wherever it appears:
   - in the app, under the written question (static/app.js,
     renderExaminerReport), loaded after every workspace layer;
   - in the worked example on the homepage and subject pages
     (templates/_mark_report.html), which uses the app's own class names.
   Because both read these rules, the example on the marketing pages is the
   app's report, not a picture of it.

   Selectors lead with :is(.student-workspace, .mark-demo) so they carry the
   same weight as student-workspace.css (a version-pinned file that stays
   untouched) and win by order. Status colours are darkened from the signal
   hues so small labels meet contrast on paper and on night.
   ══════════════════════════════════════════════════════════════════════ */

:is(.student-workspace, .mark-demo) .examiner-report {
    --mark-earned: #216443;
    --mark-earned-bg: #e5f0e8;
    --mark-partial: #805000;
    --mark-partial-bg: #fff0d5;
    --mark-missed: #a1352b;
    --mark-missed-bg: #fbe9e5;
    --mark-panel: #f5f2ea;
    --mark-panel-line: #d5d0c5;
    --mark-rule: #5035bc;
    color: var(--ds-ink);
    overflow-wrap: anywhere;
}
/* Night: the dark theme, and the always-dark bands the subject pages use. */
:is([data-dark], .ds-night) :is(.student-workspace, .mark-demo) .examiner-report {
    --mark-earned: #9ddbb5;
    --mark-earned-bg: #20372a;
    --mark-partial: #f0c779;
    --mark-partial-bg: #3b301d;
    --mark-missed: #f3aba3;
    --mark-missed-bg: #3e2625;
    --mark-panel: #222226;
    --mark-panel-line: #38383f;
    --mark-rule: #b6a6ff;
}
:is(.student-workspace, .mark-demo) .examiner-report [data-status="earned"] { --mark-status: var(--mark-earned); --mark-status-bg: var(--mark-earned-bg); }
:is(.student-workspace, .mark-demo) .examiner-report [data-status="partial"] { --mark-status: var(--mark-partial); --mark-status-bg: var(--mark-partial-bg); }
:is(.student-workspace, .mark-demo) .examiner-report [data-status="missed"] { --mark-status: var(--mark-missed); --mark-status-bg: var(--mark-missed-bg); }

/* ── The mark ──────────────────────────────────────────────────────── */
:is(.student-workspace, .mark-demo) .examiner-report .mark-report-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px;
    margin: 0;
}
:is(.student-workspace, .mark-demo) .examiner-report .mark-report-label {
    display: block; margin: 0 0 6px;
    font: 600 .8125rem/1.2 var(--ds-font-text);
    letter-spacing: 0; text-transform: none;
    color: var(--ds-ink-2);
}
:is(.student-workspace, .mark-demo) .examiner-report .mark-report-score {
    display: block;
    font: 600 2.75rem/1 var(--ds-font-display);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ds-ink);
}
:is(.student-workspace, .mark-demo) .examiner-report .mark-report-score small {
    margin-left: 4px;
    font: 500 1.125rem/1 var(--ds-font-text);
    letter-spacing: 0;
    color: var(--ds-ink-3);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-verdict {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 4px; padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--mark-status) 30%, transparent);
    border-radius: 999px;
    background: var(--mark-status-bg);
    color: var(--mark-status);
    font: 650 .8125rem/1.2 var(--ds-font-text);
    white-space: nowrap;
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-source {
    margin: 10px 0 0;
    font-size: .75rem; line-height: 1.5;
    color: var(--ds-ink-3);
}

/* ── The first correction ──────────────────────────────────────────── */
:is(.student-workspace, .mark-demo) .examiner-report .examiner-priority {
    margin: 18px 0 0;
    padding: 13px 16px 14px 14px;
    border: 1px solid var(--ds-line);
    border-left: 2px solid var(--mark-rule);
    border-radius: 4px 12px 12px 4px;
    background: var(--ds-surface);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-priority :is(h4, .examiner-priority-title) {
    margin: 0 0 4px;
    font: 650 .75rem/1.3 var(--ds-font-text);
    color: var(--ds-accent-ink);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-priority p:not(.examiner-priority-title) {
    margin: 0;
    font-size: .9375rem; line-height: 1.55;
    color: var(--ds-ink);
}

/* ── The marking points: one ledger per section ────────────────────── */
:is(.student-workspace, .mark-demo) .examiner-report .examiner-section { margin-top: 20px; }
:is(.student-workspace, .mark-demo) .examiner-report .examiner-section-title {
    margin: 0 0 8px;
    font: 650 .8125rem/1.3 var(--ds-font-text);
    letter-spacing: .015em;
    color: var(--ds-ink-2);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-criteria {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    background: var(--ds-surface);
    overflow: hidden;
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-criterion {
    margin: 0;
    padding: 12px 14px 12px 17px;
    border: 0;
    border-top: 1px solid var(--ds-line);
    box-shadow: inset 3px 0 0 var(--mark-status);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-criterion:first-child { border-top: 0; }
:is(.student-workspace, .mark-demo) .examiner-report .examiner-criterion-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px;
    font: 600 .875rem/1.45 var(--ds-font-text);
    color: var(--ds-ink);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-award {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    color: var(--mark-status);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-fraction {
    order: -1;
    font: 650 .9375rem/1.25 var(--ds-font-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-status {
    font: 600 .6875rem/1.3 var(--ds-font-text);
    white-space: nowrap;
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-criterion p {
    margin: 5px 0 0;
    font-size: .8125rem; line-height: 1.5;
    color: var(--ds-ink-2);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-evidence {
    margin: 10px 0 0;
    padding: 8px 12px 9px;
    border: 0; border-radius: 8px;
    background: var(--ds-bg-2);
    font-size: .8125rem; line-height: 1.55;
    color: var(--ds-ink-2);
    white-space: normal;
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-evidence-label {
    display: block; margin: 0 0 2px;
    font: 600 .6875rem/1.3 var(--ds-font-text);
    color: var(--ds-ink-3);
}
:is(.student-workspace, .mark-demo) .examiner-report .examiner-evidence .examiner-math::before { content: '\201C'; }
:is(.student-workspace, .mark-demo) .examiner-report .examiner-evidence .examiner-math::after { content: '\201D'; }

/* App-only parts of the report (never in the worked example). */
.student-workspace .examiner-report .examiner-improvements { margin: 0; padding: 12px 16px 12px 34px; border: 1px solid var(--ds-line); border-radius: 12px; background: var(--ds-surface); }
.student-workspace .examiner-report .examiner-improvements li { margin: 4px 0; font-size: .875rem; line-height: 1.55; color: var(--ds-ink); }
.student-workspace .examiner-report .examiner-full { margin: 16px 0 0; font-size: .875rem; color: var(--mark-earned); font-weight: 600; }
.student-workspace .examiner-report .examiner-update { border-left-color: var(--ds-accent); background: var(--ds-bg-2); border-radius: 4px 10px 10px 4px; }
.student-workspace .examiner-report .sm-compare { color: var(--ds-ink-3); }

/* The report is its own panel under the answer (beside it on wide screens,
   static/study-workspace.css). Drawn here once, for the app and the worked
   example alike, with the values the study workspace gives it. */
body.student-workspace #quizSection .grade-result.examiner-report,
.mark-demo .md-result.examiner-report {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid var(--mark-panel-line);
    border-radius: 14px;
    background: var(--mark-panel);
}
@media (max-width: 600px) {
    body.student-workspace #quizSection .grade-result.examiner-report,
    .mark-demo .md-result.examiner-report { padding: 18px 14px; }
}

@media (max-width: 480px) {
    :is(.student-workspace, .mark-demo) .examiner-report .mark-report-score { font-size: 2.25rem; }
    :is(.student-workspace, .mark-demo) .examiner-report .examiner-criterion { padding-right: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   The worked example (.mark-demo) — the written-question card above the
   report, as the app draws it, and its replay states.
   ══════════════════════════════════════════════════════════════════════ */
.md-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mark-demo { position: relative; padding: 18px 20px 20px; color: var(--ds-ink); text-align: left; }
.mark-demo .md-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mark-demo .md-qnum { font: 600 .8125rem/1.3 var(--ds-font-text); color: var(--ds-ink-2); }
.mark-demo .md-qtype {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px;
    font: 600 .75rem/1.3 var(--ds-font-text); color: var(--ds-ink-3);
}
.mark-demo .md-qtype svg { width: 10px; height: 10px; }
/* The marks badge the app puts on every written question. */
.mark-demo .md-marks {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--mark-badge-line, rgba(91, 80, 232, .18));
    border-radius: 99px;
    background: var(--mark-badge-bg, #f7f7fc);
    color: var(--mark-badge-ink, #5b50e8);
    font: 650 .75rem/1.3 var(--ds-font-text);
    white-space: nowrap;
}
:is([data-dark], .ds-night) .mark-demo .md-marks { --mark-badge-line: rgba(184, 174, 255, .16); --mark-badge-bg: #222226; --mark-badge-ink: #b4aaff; }
.mark-demo .md-q {
    margin: 12px 0 16px;
    font: 600 1.1875rem/1.4 var(--ds-font-display);
    letter-spacing: -.015em;
    color: var(--ds-ink);
    text-wrap: pretty;
}
.mark-demo .md-ans-label { display: block; margin: 0 0 12px; font: 600 .8125rem/1.3 var(--ds-font-text); color: var(--ds-ink-2); }
.mark-demo .md-ans-text {
    min-height: 3.5em; margin: 0;
    padding: 16px;
    border: 1px solid var(--ds-line-2);
    border-radius: 10px;
    background: var(--ds-surface);
    font-size: .9rem; line-height: 1.75;
    color: var(--ds-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mark-demo .md-grade {
    display: none; align-items: center; justify-content: center;
    min-height: 46px; margin-top: 12px;
    border-radius: 10px;
    background: var(--ds-violet-600);
    color: #fff;
    font: 650 .875rem/1 var(--ds-font-text);
}
.mark-demo .md-grade-busy { display: none; }

/* Replay: the finished report is the default (data-step 4 or 5). */
.mark-demo:is([data-step="0"], [data-step="1"], [data-step="2"]) .md-grade { display: flex; }
.mark-demo:is([data-step="0"], [data-step="1"], [data-step="2"]) .md-result { display: none; }
.mark-demo[data-step="1"] .md-ans-text { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.mark-demo[data-step="2"] .md-grade { opacity: .7; }
.mark-demo[data-step="2"] .md-grade-idle { display: none; }
.mark-demo[data-step="2"] .md-grade-busy { display: inline; }
.mark-demo[data-step="3"] .examiner-section { display: none; }
.mark-demo[data-step="3"] .md-result > *,
.mark-demo[data-step="4"] .examiner-criterion { animation: md-in .45s var(--ds-ease-out) both; }
.mark-demo[data-step="4"] .examiner-criterion { animation-delay: calc(var(--i) * 110ms); }
@keyframes md-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .mark-demo *, .mark-demo .md-result > * { animation: none !important; transition: none !important; }
}
@media (max-width: 480px) {
    .mark-demo { padding: 16px 14px 18px; }
    .mark-demo .md-q { font-size: 1.0625rem; }
}

/* StatusMark (React Bits): the row's ✓ / ◑ / ✕ is drawn — ring first, then
   the tick, the half or the cross — after the row itself arrives. The drawn
   state is the default, so no-JS and reduced motion see the finished glyph. */
.examiner-status .rb-mark {
    width: 1.3em; height: 1.3em; margin-right: .3em;
    vertical-align: -.33em; overflow: visible;
}
.rb-mark-ring {
    fill: currentColor; fill-opacity: .1;
    stroke: currentColor; stroke-width: 1.75; stroke-dasharray: 1 1;
    animation: rb-mark-ring .42s cubic-bezier(.23, 1, .32, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}
.rb-mark-stroke {
    fill: none; stroke: currentColor; stroke-width: 2.25;
    stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1;
    animation: rb-mark-draw .28s cubic-bezier(.23, 1, .32, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 460ms);
}
.rb-mark-half {
    fill: currentColor;
    animation: rb-mark-fill .3s ease-out both;
    animation-delay: calc(var(--i, 0) * 110ms + 460ms);
}
@keyframes rb-mark-ring { from { stroke-dashoffset: 1; fill-opacity: 0; } }
@keyframes rb-mark-draw { from { stroke-dashoffset: 1; } }
@keyframes rb-mark-fill { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .rb-mark * { animation: none !important; }
}