/* ===========================================================================
   The Parsery — Marking System (shared)
   One source of truth for every red-pen mark, everywhere: articles, quizzes,
   marketing, comments. Pair with marking.js.

   Host page must define these tokens (fallbacks provided):
     --pen   red pen colour
     --hand  handwriting font stack
   Optional: --ink, --muted for surrounding text.
   =========================================================================== */

:root{
  /* a hand-drawn oval, for circling a bare score */
  --mk-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M20 15C9 26 7 44 23 52 42 61 75 57 92 44 101 33 95 15 72 6 47 -3 24 5 13 19' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- the pen strokes (tick + strike), injected by marking.js --- */
.mk-mark{position:absolute;pointer-events:none;color:var(--pen,#D8402F);}
.mk-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .42s ease-out;}
.mk-mark.mk-go path{stroke-dashoffset:0;}
.mk-strike{left:-6px;top:50%;width:calc(100% + 12px);height:20px;
  transform:translateY(-50%) rotate(var(--mk-rot,0deg));}
.mk-tick{right:9px;top:50%;width:30px;height:30px;
  transform:translateY(-50%) rotate(var(--mk-rot,0deg));}

/* --- paper-natural rule: a wrong answer's text only drops to a lighter shade.
       fade via COLOUR (not opacity) so a strike drawn inside it stays full-pen --- */
.mk-fade{color:var(--muted,#5c616b);}
@supports (color:color-mix(in srgb, red, transparent)){
  .mk-fade{color:color-mix(in srgb, currentColor 45%, transparent);}
}

/* --- inline correction: a struck word with the fix written ABOVE it by hand.
       line-height:1 makes the box hug the text so the note sits just above the
       word (not above a tall line box). --- */
.mk-fix{position:relative;display:inline-block;line-height:1;}
.mk-word{position:relative;display:inline-block;color:var(--muted,#5c616b);line-height:1;}
/* on a short inline word the strike wants a small overhang, not the wide one */
.mk-word .mk-strike{left:-3px;width:calc(100% + 6px);}
.mk-corr{position:absolute;left:50%;bottom:calc(100% + 1px);
  transform:translateX(-50%) rotate(var(--mk-rot,-6deg));
  font-family:var(--hand,cursive);color:var(--pen,#D8402F);font-size:.9em;line-height:1;
  white-space:nowrap;font-style:normal;font-weight:400;}

/* --- a bare score, circled by hand (a result) --- */
.mk-score{position:relative;display:inline-block;font-family:var(--hand,cursive);
  color:var(--pen,#D8402F);line-height:1;padding:.18em .5em .12em;
  transform:rotate(var(--mk-rot,-5deg));}
.mk-score u{position:absolute;inset:-2px -4px;background:var(--pen,#D8402F);opacity:.78;
  text-decoration:none;-webkit-mask:var(--mk-ring) center/100% 100% no-repeat;
  mask:var(--mk-ring) center/100% 100% no-repeat;}

/* --- a handwritten comment (a note — NO circle) --- */
.mk-comment{font-family:var(--hand,cursive);color:var(--pen,#D8402F);line-height:1.12;
  transform:rotate(var(--mk-rot,-1.6deg));transform-origin:left center;display:inline-block;}

@media (prefers-reduced-motion:reduce){
  .mk-mark path{transition:none;}
}