/* Marked paper: the shared look for the builder and the slides.
   A green desk, sheets of paper, a typewriter, three highlighters, a blue biro, a red pen and a
   rubber stamp. Everything here is hand-written CSS with no framework. */

/* ---------------------------------------------------------------- fonts (all open licence, see fonts/LICENCES.txt) */
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* ---------------------------------------------------------------- the pencil case */
:root {
  --desk: #22403a;
  --desk-deep: #1b332e;
  --desk-line: rgba(255, 255, 255, 0.05);
  --desk-ink: #f1ede1;
  --desk-dim: #b7c8c0;

  --paper: #faf7ef;
  --paper-shade: #efeadc;
  --card: #fffdf5;
  --ink: #1c1b19;
  --pencil: #5c584f;
  --rule: #7b8a97;
  --faint: #6b675e; /* the lightest text allowed on paper: still easy to read */
  --margin-line: #e3a09b;

  --pen: #c1271b; /* red pen */
  --pen-deep: #9d1c12;
  --biro: #1f3fa8; /* blue biro */
  --stamp: #2a3690; /* stamp-pad blue */

  --hl-scene: #ffe94a; /* yellow highlighter */
  --hl-ask: #ffabcf; /* pink highlighter */
  --hl-steer: #a8ee9c; /* green highlighter */
  --sticky: #fff382;

  --print: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --typed: "Courier Prime", "Courier New", Courier, monospace;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --stamped: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* rotated cards and stamps can poke past the edge of a narrow screen; don't scroll sideways for them */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--print);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  /* the desk: a cutting mat, with a fine grid and a heavier line every fifth square */
  background-color: var(--desk);
  background-image:
    linear-gradient(var(--desk-line) 1px, transparent 1px), linear-gradient(90deg, var(--desk-line) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size:
    28px 28px,
    28px 28px,
    140px 140px,
    140px 140px;
  background-attachment: fixed;
}

img,
svg {
  max-width: 100%;
}
/* Pen strokes are the exception: a ring or an underline may be a little wider than its words. */
svg.drawn {
  max-width: none;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

:focus-visible {
  outline: 3px solid var(--biro);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- paper */
.sheet {
  position: relative;
  background: var(--paper) url("paper.png");
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 28px 48px -18px rgba(0, 0, 0, 0.4);
}

/* an index card: a little whiter than the paper, and it sits on top of things */
.card {
  position: relative;
  background: var(--card) url("paper.png");
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.3);
}

/* words on the desk itself, as if chalked on the mat */
.desk-label {
  font-family: var(--print);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--desk-ink);
}

.desk-text {
  color: var(--desk-dim);
  font-size: 15px;
}

/* small capitals as printed on an exam paper */
.printed-caps {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.typed {
  font-family: var(--typed);
}

.hand {
  font-family: var(--hand);
}

/* ---------------------------------------------------------------- highlighters
   A band of colour across most of the line, a touch uneven at the ends, like a real pen stroke. */
.hl {
  padding: 0.04em 0.18em;
  margin: 0 -0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hl-scene {
  background-image: linear-gradient(transparent 10%, var(--hl-scene) 10%, var(--hl-scene) 92%, transparent 92%);
  border-radius: 0.5em 0.2em 0.4em 0.25em / 0.3em 0.5em 0.3em 0.6em;
}
.hl-ask {
  background-image: linear-gradient(transparent 12%, var(--hl-ask) 12%, var(--hl-ask) 94%, transparent 94%);
  border-radius: 0.25em 0.5em 0.2em 0.45em / 0.6em 0.3em 0.5em 0.3em;
}
.hl-steer {
  background-image: linear-gradient(transparent 8%, var(--hl-steer) 8%, var(--hl-steer) 90%, transparent 90%);
  border-radius: 0.4em 0.25em 0.5em 0.2em / 0.3em 0.6em 0.3em 0.5em;
}

/* the same three pens used as a swatch behind a heading */
.swipe {
  display: inline;
  padding: 0.05em 0.35em 0.02em;
  margin-left: -0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.swipe-scene {
  background: linear-gradient(-1.2deg, transparent 12%, var(--hl-scene) 13%, var(--hl-scene) 88%, transparent 89%);
  border-radius: 0.6em 0.2em 0.5em 0.3em;
}
.swipe-ask {
  background: linear-gradient(0.9deg, transparent 12%, var(--hl-ask) 13%, var(--hl-ask) 88%, transparent 89%);
  border-radius: 0.3em 0.6em 0.2em 0.5em;
}
.swipe-steer {
  background: linear-gradient(-0.8deg, transparent 12%, var(--hl-steer) 13%, var(--hl-steer) 88%, transparent 89%);
  border-radius: 0.5em 0.3em 0.6em 0.2em;
}

/* ---------------------------------------------------------------- label-maker tape (the main buttons) */
.tape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;
  padding: 10px 18px 9px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: #f6f2e7;
  font-family: var(--typed);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 6px 12px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.tape:hover {
  transform: translateY(-1px) rotate(-0.6deg);
}
.tape:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 rgba(0, 0, 0, 0.45);
}
.tape:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.sheet .tape:focus-visible,
.card .tape:focus-visible {
  outline-color: var(--biro);
}
.tape-red {
  background: var(--pen);
}
/* a small tag on a button, saying the marking is done by AI */
.chip {
  padding: 1px 5px 0;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.tape-small {
  min-height: 34px;
  padding: 6px 12px 5px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
}
.tape[disabled],
.tape[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* a quiet button that looks like something pencilled in */
.pencilled {
  padding: 2px 4px;
  border: 0;
  background: none;
  font-family: var(--typed);
  font-size: 13.5px;
  color: var(--pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pencilled:hover {
  color: var(--ink);
  text-decoration-style: solid;
}

/* ---------------------------------------------------------------- the rubber stamp */
.stamp {
  display: inline-block;
  padding: 3px 14px 1px;
  border: 3px double currentColor;
  border-radius: 7px;
  color: var(--stamp);
  font-family: var(--stamped);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-6deg);
  opacity: 0.86;
  mix-blend-mode: multiply;
  filter: url(#inked);
  user-select: none;
}
.stamp-red {
  color: var(--pen);
  transform: rotate(4deg);
}
.stamp.thunk {
  animation: thunk 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes thunk {
  0% {
    opacity: 0;
    scale: 1.9;
  }
  55% {
    opacity: 0.95;
    scale: 0.94;
  }
  100% {
    opacity: 0.86;
    scale: 1;
  }
}

/* ---------------------------------------------------------------- red pen and blue biro */
.pen {
  font-family: var(--hand);
  color: var(--pen);
}
.biro {
  font-family: var(--hand);
  color: var(--biro);
}

/* strokes that draw themselves: ticks, circles, underlines */
.drawn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drawn.draw path {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: draw 0.45s ease-out forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------------------------------------------------------------- a sticky note */
.sticky {
  position: relative;
  padding: 22px 20px 20px;
  background: linear-gradient(170deg, var(--sticky) 0%, #ffee6b 100%);
  color: #2b2714;
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.35;
  transform: rotate(1.6deg);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 12px 18px -8px rgba(0, 0, 0, 0.45);
}
.sticky::before {
  /* the gummed strip */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  background: rgba(0, 0, 0, 0.045);
}
.sticky strong {
  font-weight: 700;
}

/* ---------------------------------------------------------------- a slip of paper that pops up to say something */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  max-width: min(92vw, 520px);
  padding: 10px 16px 9px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--typed);
  font-size: 15px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 12px 26px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 140%) rotate(-1deg);
  opacity: 0;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
  pointer-events: none;
}
.toast.show {
  transform: translate(-50%, 0) rotate(-1deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}