/* ExamStudyAid — the answer marker, the AI's side of a topic question
   (owner, 2026-10-08: "also the answer box revamp for the ai system", then
   "https://reactbits.dev/micro/thought-line i want you to use this for
   thinking").

   The box the student writes in stays as the owner's mock-up of 2026-10-07
   draws it (tq-desk.css). What changes is what the marker does with it, in
   the dashboard tutor's own voice (dashboard-shelf.css §18):

   - while it marks, the Thought Line stands at the head of the grade card in
     place of the grey skeleton bars: the tutor's blue tile breathing,
     "Marking…" with its clock, and the marker's stages under it (reading the
     answer, checking it against the scheme's points, writing the feedback),
     settling into "Marked in 3.4s" over the result (pages/js/thought-line.js);
   - the score is the headline in the display face, a size up;
   - the scheme's rows rise one after another as the verdict lands;
   - the examiner's feedback is signed with the same tile, its words written
     down the page as they arrive.

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

.nb-qg-practice {
  --tqm-mark: 28px;
  --tqm-i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 3c.7 4.6 3.4 7.3 8 8-4.6.7-7.3 3.4-8 8-.7-4.6-3.4-7.3-8-8 4.6-.7 7.3-3.4 8-8z' fill='black'/%3E%3Cpath d='M16 1c.25 1.7 1.3 2.75 3 3-1.7.25-2.75 1.3-3 3-.25-1.7-1.3-2.75-3-3 1.7-.25 2.75-1.3 3-3z' fill='black'/%3E%3C/svg%3E");
}

/* ── While it marks: the line, not the skeleton ─────────────────────────── */
.nb-qg-practice .nb-tq-card .tq-grade-card.is-loading:has(> .esa-tl) > :is(.tq-grade-head, .tq-grade-skeleton) { display: none; }
.nb-qg-practice .nb-tq-card .tq-grade-card > .esa-tl--marker {
  margin: 0 0 var(--nb-s5);
  --esa-tl-ink: var(--nb-ink);
  --esa-tl-indent: calc(var(--tqm-mark) + 10px);
  font-size: var(--nb-text-sm);
}
.nb-qg-practice .nb-tq-card .tq-grade-card.is-loading > .esa-tl--marker { margin-bottom: var(--nb-s3); }
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker :is(.esa-tl-head, .esa-tl-head *) { font-family: var(--nb-display); font-weight: 600; }
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker .esa-tl-head { gap: 0.35em; min-height: var(--tqm-mark); }
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker .esa-tl-glyph {
  width: var(--tqm-mark);
  height: var(--tqm-mark);
  margin-right: 5px;
  border-radius: var(--nb-r-md);
  background: var(--nb-m-blue);
  -webkit-mask: var(--tqm-i-spark) center / 16px 16px no-repeat, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: var(--tqm-i-spark) center / 16px 16px no-repeat exclude, linear-gradient(black 0 0);
}
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker[data-working] .esa-tl-glyph {
  animation: esa-tl-breath 1.6s var(--esa-tl-ease-in-out) infinite, tqm-twinkle 1.6s var(--nb-ease) infinite;
}
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker:not([data-working]) .esa-tl-glyph { opacity: 1; }
.nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker .esa-tl-steps { font-weight: 400; line-height: 1.35; }
@keyframes tqm-twinkle {
  50% { -webkit-mask-size: 10px 10px, auto; mask-size: 10px 10px, auto; scale: 0.92; }
}

/* ── The verdict: the score is the headline ─────────────────────────────── */
.nb-qg-practice .qg .nb-tq-card .tq-grade-card .tq-grade-head .tq-q-marks--score {
  font-family: var(--nb-display);
  font-size: var(--nb-text-2xl);
  letter-spacing: -0.02em;
}
.nb-qg-practice .qg .nb-tq-card .tq-grade-card[data-graded="true"] .tq-grade-head { animation: tqm-rise 420ms var(--nb-ease) backwards; }

/* the scheme's rows rise one after another as the verdict lands */
.nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp { animation: tqm-rise 420ms var(--nb-ease) 120ms backwards; }
.nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp:nth-child(2) { animation-delay: 200ms; }
.nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp:nth-child(3) { animation-delay: 280ms; }
.nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp:nth-child(4) { animation-delay: 360ms; }
.nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp:nth-child(n+5) { animation-delay: 440ms; }
@keyframes tqm-rise { from { opacity: 0; translate: 0 8px; } }

/* ── The examiner's feedback, signed with the tutor's tile ──────────────── */
.nb-qg-practice .nb-tq-card .tq-feedback-band .tq-block-title { gap: 10px; }
.nb-qg-practice .nb-tq-card .tq-feedback-band .tq-block-title svg { display: none; }
.nb-qg-practice .nb-tq-card .tq-feedback-band .tq-block-title::before {
  content: "";
  flex: none;
  width: var(--tqm-mark);
  height: var(--tqm-mark);
  border-radius: var(--nb-r-md);
  background: var(--nb-m-blue);
  -webkit-mask: var(--tqm-i-spark) center / 16px 16px no-repeat, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: var(--tqm-i-spark) center / 16px 16px no-repeat exclude, linear-gradient(black 0 0);
}
.nb-qg-practice .nb-tq-card .tq-feedback-band .qg-feedback-text {
  padding-left: calc(var(--tqm-mark) + 10px);
  font-size: var(--nb-text-md);
  line-height: 1.7;
  -webkit-mask: linear-gradient(to bottom, black 0 33.4%, transparent 66.6%) 0 0 / 100% 300% no-repeat;
  mask: linear-gradient(to bottom, black 0 33.4%, transparent 66.6%) 0 0 / 100% 300% no-repeat;
}
.nb-qg-practice .nb-tq-card .tq-feedback-band:not([hidden]) .qg-feedback-text { animation: tqm-write 900ms var(--nb-ease) 240ms backwards; }
@keyframes tqm-write { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@media (max-width: 500px) {
  .nb-qg-practice .nb-tq-card .tq-feedback-band .qg-feedback-text { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-qg-practice .nb-tq-card .tq-grade-card .esa-tl--marker[data-working] .esa-tl-glyph,
  .nb-qg-practice .qg .nb-tq-card .tq-grade-card[data-graded="true"] .tq-grade-head,
  .nb-qg-practice .nb-tq-card .tq-grade-card[data-graded="true"] .tq-kp,
  .nb-qg-practice .nb-tq-card .tq-feedback-band:not([hidden]) .qg-feedback-text { animation: none !important; }
}