/* The marked-up sample page only. Notes look written on the report in pen: a handwriting font, red
   ink, a slight tilt and no box. pen-markup.js draws the arrows and marks into one overlay. */

/* Caveat, SIL Open Font License (fonts/OFL.txt). Shipped with the sample, never fetched from a font
   service, so the page looks the same offline and tells no one it was opened. */
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root { --pen: #c4161c; }

/* The overlay is hidden while the script measures, which can make the scrollbar blink off and the page
   briefly wider. A fixed gutter keeps the width still, so margin notes are never placed for the
   wrong width and pushed past the edge. */
html { scrollbar-gutter: stable; }

.pen-note {
  display: block;
  /* A note-sized block, so the tilt stays a slant and never sweeps across the next part. */
  max-width: 520px;
  /* Room underneath for the pen mark on whatever comes next. */
  margin: 18px 4px 22px 22px;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--pen);
  text-align: left;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: left top;
}
.pen-note b { display: block; font-size: 27px; font-weight: 700; line-height: 1.05; margin-bottom: 3px; }
/* Two notes in a row tilt opposite ways, so give their corners room to swing. */
.pen-note + .pen-note { margin-top: 40px; }
.tnote + .pen-note { margin-top: 8px; }
.pen-note + .feed { margin-top: 26px; }

/* Room round the "7 of 9" count and the rejected line, so the pen loops round them never touch a word.
   Only this page loads this file, so the clean pages and client reports keep their spacing. */
.result .headline b { margin-right: 12px; }
.result .headline { margin-bottom: 10px; }
html:not(.pen-wide) .ladder .rejected { margin-top: 30px; }
html:not(.pen-wide) .ladder .rejected + .pen-note { margin-top: 34px; }

/* On a wide screen the script lifts the notes into the margins and narrows the card to make room.
   Without the script they stay in the flow above. */
html.pen-wide .wrap { max-width: min(860px, calc(100% - 460px)); }
html.pen-wide .pen-note { position: absolute; margin: 0; font-size: 21px; }
html.pen-wide .pen-note b { font-size: 25px; }

/* The overlay multiplies onto the page, so ink and highlighter never hide the words under them. */
.pen-ink { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: hidden; mix-blend-mode: multiply; z-index: 5; }