/* The report card page: a test paper on a school desk, then the report. Phone first.
   Colours match render.js (paper, school green, biro blue, red pen). */
@font-face { font-family: "Book Print"; src: url("/vendor/fonts/archivo-narrow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Book Print"; src: url("/vendor/fonts/archivo-narrow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Book Hand Kalam"; src: url("/vendor/fonts/kalam-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --desk: #d9d4c8;
  --paper: #fbfaf4;
  --ink: #24282c;
  --faint: #6f747a;
  --rule: #c3c8c6;
  --green: #2d5a3d;
  --pen: #1d2c66;
  --red: #c1352b;
  --focus: #1f3a93;
  --print: "Book Print", "Arial Narrow", Arial, sans-serif;
  --hand: "Book Hand Kalam", "Comic Sans MS", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--desk);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .35), transparent 60%);
  background-attachment: scroll, fixed;
  min-height: 100vh;
}
.desk { display: grid; justify-items: center; padding: 16px 12px 24px; }
.sheet {
  width: 100%; max-width: 640px; background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: 22px 20px 26px;
  box-shadow: 1px 2px 2px rgba(40, 32, 16, .25), 6px 10px 22px rgba(40, 32, 16, .22);
}
@media (min-width: 700px) { .desk { padding-top: 48px; } .sheet { padding: 36px 44px 40px; } }

/* letterhead */
.lh { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 4px double var(--green); }
.crest { width: 42px; height: 50px; flex: none; }
.school { margin: 0; font: 700 clamp(17px, 4.6vw, 22px)/1.1 var(--print); letter-spacing: .04em; color: var(--green); text-transform: uppercase; }
.motto { margin: 2px 0 0; font: 600 12px/1.3 var(--print); letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }
.lh.small .crest { width: 30px; height: 36px; }
.lh.small .school { font-size: 16px; }

h1 { font: 700 clamp(26px, 7vw, 36px)/1.1 var(--print); margin: 22px 0 10px; text-wrap: balance; }
.intro { margin: 0 0 22px; max-width: 34em; }
.start { display: grid; gap: 8px; }
.start label { font: 600 13px/1.3 var(--print); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.start input {
  font: 400 22px/1.3 var(--hand); color: var(--pen); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--rule); padding: 4px 2px; border-radius: 0;
}
.start input:focus { outline: none; border-bottom-color: var(--pen); }
.start .btn { justify-self: start; margin-top: 14px; }

.btn {
  font: 700 15px/1 var(--print); letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 3px; padding: 12px 16px; cursor: pointer; min-height: 44px;
  -webkit-user-select: none; user-select: none;
}
.btn.primary { background: var(--green); border-color: var(--green); color: var(--paper); }
.btn.quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible, .opt:focus-visible, .qtext:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.qtext:focus:not(:focus-visible) { outline: none; }

/* the question */
.progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 6px; }
.qnum { margin: 0; font: 600 13px/1.3 var(--print); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.dots { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
.dots li { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--faint); }
.dots li.done { background: var(--pen); border-color: var(--pen); }
.dots li.now { border-color: var(--pen); box-shadow: 0 0 0 2px rgba(29, 44, 102, .2); }
.qtext { font: 700 clamp(22px, 5.6vw, 28px)/1.2 var(--print); margin: 6px 0 18px; text-wrap: balance; min-height: 2.4em; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opt {
  width: 100%; display: flex; gap: 14px; align-items: center; text-align: left;
  font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px; min-height: 56px;
}
.opt:hover { border-color: var(--pen); }
.bubble {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--faint);
  display: grid; place-items: center; font: 700 14px/1 var(--print); color: var(--faint); position: relative;
}
.opt[aria-pressed="true"] { border-color: var(--pen); }
/* filled in with a biro: a dark blob slightly off-centre */
.opt[aria-pressed="true"] .bubble { border-color: var(--pen); color: transparent; }
.opt[aria-pressed="true"] .bubble::after {
  content: ""; position: absolute; inset: 3px 2px 2px 3px; border-radius: 48% 52% 45% 55%;
  background: var(--pen); opacity: .9;
}
.keys { margin: 16px 0 0; font-size: 13px; color: var(--faint); }
@media (hover: none) { .keys { display: none; } }
#back { margin-top: 8px; }

/* the report */
.report { width: 100%; max-width: 700px; display: grid; gap: 14px; justify-items: center; }
.card-wrap {
  width: 100%; aspect-ratio: 210 / 297; background: var(--paper); border-radius: 2px;
  box-shadow: 1px 2px 2px rgba(40, 32, 16, .3), 6px 10px 18px rgba(40, 32, 16, .28), 14px 22px 40px rgba(40, 32, 16, .16);
}
.card-wrap canvas { display: block; width: 100%; height: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.actions .btn:not(.primary):not(.quiet) { background: var(--paper); }
.status { margin: 0; min-height: 1.5em; text-align: center; font-weight: 600; }
.link-field { width: 100%; max-width: 640px; font: 14px/1.3 ui-monospace, monospace; padding: 8px; border: 1px solid var(--rule); background: var(--paper); }
.transcript { padding: 14px 20px; }
.transcript summary { cursor: pointer; font: 700 15px/1.3 var(--print); letter-spacing: .06em; text-transform: uppercase; }
.transcript h2 { font: 700 18px/1.3 var(--print); margin: 16px 0 4px; }
.transcript dl { margin: 0; }
.transcript dt { font-weight: 700; margin-top: 12px; }
.transcript dd { margin: 2px 0 0; }

.foot { text-align: center; font-size: 13px; color: #5b5648; padding: 0 16px 24px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- in the room (S6h, D-45): /report-card/?embed=room. The room shows through, blurred by its overlay; the first
   sheet grows from the 3D tray's top sheet (embed.js). The iframe already stops above the room's hint bar. ---- */
html[data-embed="room"], html[data-embed="room"] body { background: transparent; background-image: none; min-height: 0; }
html[data-embed="room"] .foot { display: none; }
html[data-embed="room"] .desk { padding-top: 16px; padding-bottom: 16px; }
/* the report's card is a tall A4: on a wide, short window keep it and its actions inside the frame */
@media (min-width: 700px) { html[data-embed="room"] .card-wrap { width: min(100%, calc((100vh - 130px) * 210 / 297)); } }
/* the cover is a sheet of A4 in the room, the shape of the tray's top sheet it grows out of (S6h) */
html[data-embed="room"] #cover { aspect-ratio: 210 / 297; width: min(640px, 100%, calc((100vh - 32px) * 210 / 297)); max-width: none; }
/* the quiet button ("Take it again") sits on the blurred room, not the desk: give it paper so it reads (S6h) */
html[data-embed="room"] .actions .btn.quiet { background: var(--paper); border-color: var(--paper); padding-inline: 12px; }