/* ExamStudyAid — the marked answer as the page's one lit object (owner, 2026-10-21: the "Marked answer" mock-up in the
   lit look, "make it that theme and style but don't change the features").

   The question and the answer box stay flat paper on the desk (tq-desk.css). The grade card is the lit object: a raised
   sheet that catches the light from the top left and tilts a little toward the pointer (nb-lit.css, nb-lit.js), the same
   material as the homepage's price card. Inside it, the hero's language:
   - the head: the verdict ring, "Marked answer" over the marker's own status line, and the score as a big light figure,
     "3 / 4 marks", with a row of segments under it, one per mark, filled as far as the score (grader.js names how many,
     --tq-marks, and how far, --tq-score-frac; the fill eases in as the grade lands);
   - the mark scheme's rows numbered in the order they are marked, each number and its "1 mark" in the met green, a
     point the answer missed numbered and "Not mentioned" in the warning red, a line the tools or the student's tick
     decided in the soft ink;
   - the examiner's feedback under the scheme it explains, signed with the tutor's tile as before (tq-marker.css);
   - Reset in the card's foot.
   While it marks, the Thought Line stands in the card as before (tq-marker.css) and nothing else shows.

   Every rule hangs off .nb-qg-practice and is loaded after the sheets it restyles, before the reading sheet. Tokens
   only, both themes; with reduced motion the same card, still. */

@property --tq-fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ── The sheet ──────────────────────────────────────────────────────────── */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card {
  margin: var(--nb-s7) 0 0;
  padding: var(--nb-s6) var(--nb-s7) var(--nb-s5);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-lit-r, 24px);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-lit-edge), var(--nb-lit-shadow);
}
/* while it marks, the line alone, and nothing of a previous mark under it */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card.is-loading > :is(.tq-feedback-band, .tq-grade-foot) { display: none; }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card.is-loading > .esa-tl--marker { margin-bottom: 0; }

/* ── The head: ring | title over status | the score ─────────────────────── */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "badge text score";
  align-items: center;
  column-gap: var(--nb-s4);
  padding-bottom: var(--nb-s5);
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head-text { grid-area: text; }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-title {
  display: block;
  font: 600 var(--nb-text-md)/1.25 var(--nb-sans);
  color: var(--nb-ink);
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-grade-sub {
  display: block;
  margin-top: 3px;
  font: 400 var(--nb-text-sm)/1.35 var(--nb-sans);
  color: var(--nb-soft);
}
/* the score: the figure big and light, "/ 4 marks" a size down beside it, the segments under both */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score {
  grid-area: score;
  display: block;
  text-align: right;
  font: 300 clamp(24px, 2.2vw, 28px)/1 var(--nb-sans);
  letter-spacing: -0.01em;
  color: var(--nb-soft);
  white-space: nowrap;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score > :is(.tq-q-slash, .tq-total-value, .tq-q-marks-unit) {
  font: inherit;
  color: inherit;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score > .qg-score {
  margin-right: 2px;
  font: 300 clamp(52px, 5vw, 64px)/0.9 var(--nb-sans);
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tq-verdict, var(--nb-ink));
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score::after {
  --tq-fill: var(--tq-score-frac, 0);
  content: "";
  display: block;
  width: min(calc(var(--tq-marks, 4) * 26px), 208px);
  height: 6px;
  margin: 12px 0 0 auto;
  background: linear-gradient(to right, var(--nb-adm-tip) calc(var(--tq-fill) * 100%), color-mix(in srgb, var(--nb-ink) 12%, transparent) 0);
  -webkit-mask: repeating-linear-gradient(to right, black 0 calc(100% / var(--tq-marks, 4) - 4px), transparent 0 calc(100% / var(--tq-marks, 4)));
  mask: repeating-linear-gradient(to right, black 0 calc(100% / var(--tq-marks, 4) - 4px), transparent 0 calc(100% / var(--tq-marks, 4)));
  transition: --tq-fill 900ms var(--nb-ease) 200ms;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card:not([data-graded="true"]) .tq-grade-head .tq-q-marks--score::after { --tq-fill: 0; }

/* ── The scheme: numbered rows, the mark each earned on the right ───────── */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp-list { counter-reset: tq-kp; }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp { counter-increment: tq-kp; }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp + .tq-kp { border-top: 1px solid color-mix(in srgb, var(--nb-border) 70%, transparent); }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp .tq-kp-label::before,
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp.is-matched .tq-kp-label::before {
  content: counter(tq-kp);
  top: 0;
  width: 22px;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--nb-sans);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--nb-adm-warn);
  transform: none;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp.is-matched .tq-kp-label::before { color: var(--nb-adm-tip); }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp.is-tool .tq-kp-label::before { color: var(--nb-soft); }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp .tq-kp-label::after { content: none; }
/* the status keeps the row's line box, so it sits on the label's first line */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp .tq-kp-status {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-style: normal;
  font-weight: 600;
  line-height: inherit;
  color: var(--nb-adm-warn);
  white-space: nowrap;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp.is-matched .tq-kp-status { color: var(--nb-adm-tip); }
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp.is-tool .tq-kp-status { font-weight: 500; color: var(--nb-soft); }

/* ── The foot: Reset ────────────────────────────────────────────────────── */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--nb-s4);
}

/* ── Marked: the Mark button steps aside until the answer changes (grader.js sets data-unchanged) ── */
.nb-qg-practice .qg[data-state="graded"][data-unchanged] .tq-mark-btn { display: none; }

/* ── A phone: the score under the title, the segments under the score, each mark under its point ──── */
@media (max-width: 500px) {
  /* (the phone's corner verdict, topic-question-card.css, floated the mark beside the first line and let a long one run
     past the card: here the mark is a line of its own under the point, so the point keeps the card's whole width) */
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp::before { content: none; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-kp .tq-kp-status { position: static; width: auto; padding-left: 34px; line-height: 1.5; text-align: left; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card { padding: var(--nb-s5) var(--nb-s4) var(--nb-s4); }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "badge text" "score score";
    row-gap: var(--nb-s4);
  }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score { text-align: left; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score > .qg-score { font-size: 48px; }
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score::after { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score::after { transition: none; }
}