/* exam.css: the quiz face as a TEST (exam.js adds the pieces). Overrides style.css / board.css / enroll.css from here,
   never edits them. Everything sits IN the sign's light: the paper is under the face's ::after/::before light layers,
   so the sunset warms it and the shade side cools it like the rest of the board.
   Light, as everywhere: the low sun behind-right; shadows fall down-left, rims catch on the right.
   Sizes in cqw (1% of the sign's width), so the paper scales with the sign. */

@property --ex-a{syntax:'<angle>';inherits:false;initial-value:360deg}
#quiz{--ex-pen:#cf2418;--ex-lead:#34353b;--ex-rule:rgba(76,128,196,.32);--ex-margin:rgba(214,58,50,.55)}

/* ---------------- the packet: two sheets, stapled top-left, pinned by the sign's brads ---------------- */
#quiz .ex-sheet{position:absolute;z-index:-1;left:2.6cqw;right:2.3cqw;top:2.3cqw;bottom:calc(var(--tuck,0px) * .45);pointer-events:none;rotate:-.3deg;
  filter:drop-shadow(-1px 1px 0 rgba(150,118,78,.85)) drop-shadow(-4px 6px 5px rgba(60,26,6,.3))}
#quiz .ex-sheet>i{position:absolute;inset:0;border-radius:1.5px}
/* page 2 underneath, a little skew, its edge showing down-left */
#quiz .ex-under{rotate:.9deg;translate:-.35cqw .3cqw;background:var(--cb-fiber),linear-gradient(100deg,rgba(60,30,10,.12),transparent 50%),#efe5cc}
#quiz .ex-paper{
  --mx:6.4cqw;--rule:3.05cqw;--rtop:10.6cqw;
  background:
    /* the red margin line (a double one, like the good loose-leaf) */
    linear-gradient(90deg,transparent calc(var(--mx) - 1px),var(--ex-margin) calc(var(--mx) - 1px) var(--mx),transparent var(--mx) calc(var(--mx) + 2px),rgba(214,58,50,.3) calc(var(--mx) + 2px) calc(var(--mx) + 3px),transparent 0),
    /* faint blue rules under the header */
    repeating-linear-gradient(180deg,transparent 0 calc(var(--rule) - 1px),var(--ex-rule) calc(var(--rule) - 1px) var(--rule)) 0 var(--rtop)/100% 100% no-repeat,
    var(--cb-fiber),
    linear-gradient(100deg,rgba(70,40,15,.07),transparent 38%,rgba(255,244,222,.35)),
    #fbf5e5;
  box-shadow:inset -1.5px 0 0 rgba(255,250,236,.95),inset 0 1px 0 rgba(255,250,236,.7),inset 1px 0 0 rgba(120,90,50,.25)}
/* the staple through the top-left corner (both legs show as a bright bar with its shadow) */
#quiz .ex-staple{inset:auto;left:1.7cqw;top:1.6cqw;width:3.4cqw;height:.55cqw;min-height:2px;rotate:-38deg;border-radius:1px;
  background:linear-gradient(180deg,#f4f4f2,#a9abb0 45%,#6d6f75);box-shadow:-1px 1px 0 rgba(40,30,20,.45),inset -1px 0 0 rgba(255,255,255,.8)}

/* ---------------- the question face: the layout makes room for the margin ---------------- */
html:not(.cb-portrait) #quiz:not(:has(.rank)){padding:4.6cqw 6.4cqw calc(var(--tuck,0px) + 2.3%) 10.6cqw}

/* the header: printed on the paper, not glued on (the laurel strip goes; the same three spans stay in it) */
#quiz .qmeta{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:.8em;row-gap:.3em;
  background:none;outline:0;box-shadow:none;rotate:none;border-radius:0;margin:0 0 .5em;padding:0 2.6cqw .34em 0;
  color:var(--cb-print-ink);border-bottom:1.6px solid rgba(34,22,11,.8);
  font:600 clamp(11px,2.25cqw,17px)/1 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.07em}
/* two printed lines: the title + NAME, then SUBJECT / QUESTION / the tally (::before is the line break) */
#quiz .qmeta::before{content:'';position:static;order:3;flex:0 0 100%;height:0;background:none}
#quiz .qmeta::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:rgba(34,22,11,.55)}
#quiz .ex-title{order:1;flex:none;font:700 1.12em/1 'Zilla Slab','Bree Serif',Georgia,serif;letter-spacing:.025em;color:var(--cb-print-ink);
  mix-blend-mode:multiply;filter:url(#cb-print);overflow:hidden;text-overflow:ellipsis;max-width:100%}
#quiz .ex-name{order:2;flex:1 1 0;justify-content:flex-end;display:flex;align-items:flex-end;gap:.3em;min-width:0}
#quiz .ex-name .ex-k{mix-blend-mode:multiply;filter:url(#cb-print);padding-bottom:.12em}
/* the name, pencilled on the blank */
#quiz .ex-name b{display:block;flex:0 1 auto;min-width:3.5em;max-width:11em;overflow:hidden;text-overflow:ellipsis;padding:0 .5em .08em .3em;
  font:400 1.3em/1.05 'Permanent Marker','Zilla Slab',sans-serif;letter-spacing:.03em;color:var(--ex-lead);opacity:.88;
  border-bottom:1px solid rgba(34,22,11,.75);text-shadow:.4px .3px 0 rgba(120,120,130,.4)}
/* nobody enrolled: the registrar's AUDITING stamp sits on the blank instead */
#quiz .ex-name.ex-audit b{font:1em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.12em;color:#2a4a9e;opacity:1;text-shadow:none;
  border:0;outline:.13em solid currentColor;outline-offset:.08em;border-radius:.12em;padding:.2em .5em .1em;min-width:0;margin:0 .3em .15em;rotate:-3deg;
  mix-blend-mode:multiply;-webkit-mask:var(--cb-wear-lt);mask:var(--cb-wear-lt)}
#quiz .ex-name.ex-audit{position:relative}
#quiz .ex-name.ex-audit::after{content:'';position:absolute;left:3.4em;right:0;bottom:0;border-bottom:1px solid rgba(34,22,11,.75)}
/* second line: the section, the page, and the running tally the proctor keeps in red */
#quiz .qmeta #qcat{order:4;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:500;letter-spacing:.08em;opacity:1;mix-blend-mode:multiply;filter:url(#cb-print)}
#quiz .qmeta #qcat::before{content:'SUBJECT: ';font-weight:700}
#quiz .qmeta #qnum,#quiz .qmeta #qscore{background:none;box-shadow:none;-webkit-mask:none;mask:none;padding:0;margin:0;border-radius:0;font-size:1em;line-height:1;color:var(--cb-print-ink)}
#quiz .qmeta #qnum{order:5;flex:none;transform:none;font-weight:700;mix-blend-mode:multiply;filter:url(#cb-print)}
#quiz .qmeta #qscore{order:6;flex:none;transform:rotate(-3deg);font:400 1.18em/1 'Permanent Marker',sans-serif;letter-spacing:.04em;color:var(--ex-pen);
  mix-blend-mode:multiply;filter:url(#cb-ink);margin:-.2em 0 -.1em}

/* the question: printed, numbered, left-set like a test */
#quiz .qtext{text-align:left;width:100%;margin-bottom:.45em}
#quiz .qtext[data-q]::before{content:'Q' attr(data-q) '.';font-weight:700;margin-right:.4em}

/* the answer tags: same boards, same right/wrong colours and badges; the eyelet becomes a scantron oval */
#quiz .choices{background:none;box-shadow:none;padding:.7em .15em .45em;gap:.95em .7em}
#quiz .choice.cb-tag{padding-left:2.45em;background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face)}
#quiz .ex-bub{position:absolute;left:.5em;top:50%;width:1.5em;height:1.04em;translate:0 -50%;border-radius:50%;overflow:hidden;display:grid;place-items:center;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--cb-text) 62%,transparent);
  background:radial-gradient(ellipse at 42% 36%,#fffdf6,#fbf3e0 70%,#efe3c8);box-shadow:inset .5px 1px 1.5px rgba(60,30,10,.28),0 .5px 0 rgba(255,250,235,.5)}
#quiz .ex-bub i{font:700 .64em/1 'Barlow Condensed',sans-serif;font-style:normal;letter-spacing:0;color:color-mix(in srgb,var(--cb-text) 68%,transparent);padding-top:.1em}
#quiz .ex-bub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* #2 pencil: a quick back-and-forth scribble, graphite with a little shine */
#quiz .ex-bub path{fill:none;stroke:var(--ex-lead);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.93}
#quiz .ex-picked .ex-bub path{stroke-dashoffset:0;animation:ex-scrib .32s cubic-bezier(.35,.1,.45,1) both}
#quiz .ex-picked .ex-bub::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);animation:ex-show .1s .3s both}
#quiz .choice.wrong::after{inset:.25em 1em .25em 2.5em}
/* the teacher's red pen */
#quiz .ex-mk{position:absolute;z-index:2;pointer-events:none;overflow:visible}
#quiz .ex-mk path{fill:none;stroke:var(--ex-pen);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#quiz .ex-check{left:-.25em;top:-.6em;width:2.5em;height:2em;filter:drop-shadow(.6px .6px 0 rgba(255,240,220,.55))}
#quiz .ex-check path{stroke-width:3.1;animation:ex-scrib .26s .34s ease-in both}
#quiz .ex-x{left:.35em;top:50%;width:1.85em;height:1.85em;translate:0 -50%;filter:drop-shadow(.6px .6px 0 rgba(255,240,220,.6))}
#quiz .ex-x path{stroke-width:2.9;animation:ex-scrib .16s .34s ease-in both}
#quiz .ex-x path+path{animation-delay:.52s}
/* the right one, circled: a loose loop that overshoots where it closes */
#quiz .ex-circ{left:-.6em;top:-.55em;width:calc(100% + 1.2em);height:calc(100% + 1.1em);z-index:2;
  -webkit-mask:conic-gradient(from -80deg,#000 var(--ex-a),#0000 0);mask:conic-gradient(from -80deg,#000 var(--ex-a),#0000 0);animation:ex-loop .5s .62s ease-in-out both}
#quiz .ex-circ path{stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:none}
/* a pencil, not an arrow, over the bubbles you can still fill */
#quiz .choice:not(:disabled){cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='translate(2.5 29.5) rotate(-45)' stroke='%23231708' stroke-width='.9' stroke-linejoin='round'><path d='M0 0 L9 -3.4 L9 3.4 Z' fill='%23efc790'/><path d='M0 0 L3.6 -1.36 L3.6 1.36 Z' fill='%23302f35'/><rect x='9' y='-3.4' width='19' height='6.8' fill='%23f6b919'/><path d='M9 -1.1 H28' stroke='%23c98a06' stroke-width='.8'/><rect x='28' y='-3.4' width='3.4' height='6.8' fill='%23b9bcc4'/><rect x='31.4' y='-3.4' width='4.2' height='6.8' rx='1.4' fill='%23ea8c98'/></g></svg>") 2 30,pointer}

/* the foot of the paper before the pick: the test's fine print */
#quiz .qfoot:has(.fact:empty)::before{content:'USE A NO. 2 PENCIL  ★  EYES ON YOUR OWN PAPER  ★  NO TALKING';letter-spacing:.16em;color:#4a3a2a;opacity:.6}
/* sign.js fits the face with a plain "source" in the fact: the real link must be the same width, or a 3-line fact wraps a 4th line past the parapet */
#quiz .fact a{font-weight:inherit;text-decoration-thickness:1.5px}

/* ---------------- the run clock: the proctor's (TIME stays; a pencil stub left on it) ---------------- */
#runclock .rc-k{display:grid;justify-items:center;line-height:1}
#runclock .rc-k::before{content:'PROCTOR';font:700 .52em/1 'Barlow Condensed',sans-serif;letter-spacing:.22em;color:#5b4632;margin-bottom:.22em}
#runclock::after{content:'';position:absolute;right:-2.1em;top:58%;width:3.9em;height:.5em;rotate:-16deg;border-radius:0 .14em .14em 0;pointer-events:none;
  background:
    linear-gradient(90deg,#2d2c31 0 .2em,#e9c58f .2em .78em,transparent .78em),
    linear-gradient(90deg,transparent calc(100% - .95em),#8d8f96 calc(100% - .95em),#d9dbe0 calc(100% - .8em),#8d8f96 calc(100% - .7em),#d9dbe0 calc(100% - .6em),#9a9ca2 calc(100% - .5em),#e4848f calc(100% - .5em),#d06f7c),
    linear-gradient(180deg,#ffe07a,#f4b915 40%,#d79a0a 62%,#b57f06);
  clip-path:polygon(0 50%,.78em 0,100% 0,100% 100%,.78em 100%);
  filter:drop-shadow(-1px 1.5px 0 rgba(40,16,4,.45))}

/* ---------------- PENCILS DOWN ---------------- */
#quiz .ex-pd{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
#quiz .ex-pd b{font:clamp(18px,7.4cqw,64px)/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.07em;color:#c42a1b;white-space:nowrap;
  border:.11em solid currentColor;outline:.04em solid currentColor;outline-offset:-.22em;border-radius:.16em;padding:.3em .55em .18em;rotate:-7deg;
  background:rgba(251,245,229,.55);mix-blend-mode:multiply;-webkit-mask:var(--cb-wear-lt);mask:var(--cb-wear-lt);
  animation:ex-pd 1.75s cubic-bezier(.3,1.35,.5,1) both}

/* ---------------- the rank face: graded ---------------- */
/* the letter grade, circled in red marker, top-left, with the score beside it */
#quiz .ex-grade{position:absolute;z-index:2;left:10.6cqw;top:1.4cqw;width:14.2cqw;height:10.4cqw;display:grid;place-items:center;pointer-events:none;
  color:var(--ex-pen);rotate:-9deg;mix-blend-mode:multiply}
#quiz .ex-grade b{font:400 8.6cqw/1 'Permanent Marker','Homecoming Parade',sans-serif;letter-spacing:-.03em;margin-top:-.06em;filter:url(#cb-ink);animation:ex-mark .38s .75s cubic-bezier(.3,1.4,.5,1) both}
#quiz .ex-g-f b,#quiz .ex-g-b b{margin-left:-.06em}
#quiz .ex-grade small{position:absolute;left:100%;right:auto;top:40%;margin-left:.6cqw;white-space:nowrap;font:400 2.6cqw/1 'Permanent Marker',sans-serif;letter-spacing:.02em;rotate:10deg;filter:url(#cb-ink);animation:ex-show .2s 1.3s both}
#quiz .ex-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  -webkit-mask:conic-gradient(from -70deg,#000 var(--ex-a),#0000 0);mask:conic-gradient(from -70deg,#000 var(--ex-a),#0000 0);animation:ex-loop .55s 1.05s ease-in-out both}
#quiz .ex-ring path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* the comment, in red ink, in the paper beside the answer sheet (exam.js places it) */
#quiz .ex-note{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.08em;pointer-events:none;text-align:center;
  font:400 clamp(9px,2.75cqw,23px)/1.06 'Permanent Marker',sans-serif;letter-spacing:.02em;color:var(--ex-pen);rotate:-6deg;
  animation:ex-show .45s 1.5s ease-out both}
#quiz .ex-note .ex-l{display:block;mix-blend-mode:multiply;filter:url(#cb-ink)}
/* Teacher's pet: a gold foil star stuck on above it */
#quiz .ex-star{display:block;width:2.3em;height:2.3em;margin-bottom:.15em;rotate:14deg;filter:drop-shadow(-1px 1.5px 1px rgba(60,26,6,.45));animation:ex-mark .4s 1.9s cubic-bezier(.3,1.5,.5,1) both}
#quiz .ex-star i{display:block;width:100%;height:100%;
  clip-path:polygon(50% 0,61.8% 35.4%,98.6% 35.4%,68.8% 57.3%,79.4% 92.7%,50% 70.8%,20.6% 92.7%,31.2% 57.3%,1.4% 35.4%,38.2% 35.4%);
  background:linear-gradient(140deg,#fff3b4,#f2c63c 30%,#c8901c 52%,#ffe27a 66%,#b7801a 85%)}
/* the answer sheet is paper-clipped on (the clip replaces style.css's tape) */
#quiz .share::after{left:1.1em;top:-.9em;width:.95em;height:2.7em;translate:none;rotate:-7deg;opacity:1;-webkit-mask:none;mask:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 56'><defs><linearGradient id='m' x1='0' x2='1'><stop offset='0' stop-color='%23767a82'/><stop offset='.45' stop-color='%23f2f3f5'/><stop offset='1' stop-color='%238a8e96'/></linearGradient></defs><path d='M13.5 15 V45 a5 5 0 0 1 -10 0 V8 a7 7 0 0 1 14 0 V43 a3.2 3.2 0 0 1 -6.4 0 V15' fill='none' stroke='url(%23m)' stroke-width='2.6' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  filter:drop-shadow(-1.5px 1.5px .5px rgba(40,16,4,.45))}
/* your enrollment guess, pencilled in the margin (enroll.js writes it; exam.js places it) */
#quiz .en-called{right:auto;border:0;outline:0;-webkit-mask:none;mask:none;mix-blend-mode:multiply;padding:0;gap:.12em;rotate:-5deg;
  font-size:clamp(8px,1.95cqw,17px);color:var(--ex-lead);animation:ex-show .45s 1.8s ease-out both}
#quiz .en-called.hit{color:var(--ex-pen)}
#quiz .en-called-k{font:400 1em/1 'Permanent Marker',sans-serif;letter-spacing:.04em;padding:0;opacity:.85}
#quiz .en-called b{font:400 1.35em/1 'Permanent Marker',sans-serif;letter-spacing:.03em;white-space:normal;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
#quiz .en-called.hit b::after{content:' ✓'}
/* RUN IT BACK: rubbed with an eraser (a graphite smear on the board, a pink eraser left on its corner) */
#quiz #again{background:
    radial-gradient(ellipse 30% 46% at 66% 56%,rgba(58,58,66,.2),rgba(58,58,66,.07) 62%,transparent 74%),
    radial-gradient(circle at 84% 78%,rgba(214,120,132,.75) 0 1.2px,transparent 1.8px),radial-gradient(circle at 80% 86%,rgba(214,120,132,.6) 0 1px,transparent 1.6px),
    radial-gradient(circle at .75em 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em),
    radial-gradient(circle at calc(100% - .7em) 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em),
    var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face)}
#quiz #again::after{content:'';position:absolute;right:-.5em;top:-.62em;width:1.55em;height:.78em;rotate:22deg;border-radius:.2em .2em .26em .14em;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38),transparent 45%),linear-gradient(90deg,#ee909b 0 74%,#cf6f7b 74%);
  box-shadow:0 2px 0 #9b4652,-2px 3px 3px rgba(40,16,4,.35);transition:rotate .2s}
#quiz #again:hover::after{rotate:8deg}

/* ---------------- tall windows: the sign is plain board, the paper still goes on ---------------- */
.cb-portrait #quiz .ex-sheet{left:3%;right:3%;top:2%}
.cb-portrait #quiz .ex-staple,.cb-portrait #runclock::after{display:none}
.cb-portrait #quiz .qmeta{font-size:10.5px;padding-right:0}
.cb-portrait #quiz .ex-grade{left:6%;top:2.5%}

@keyframes ex-scrib{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ex-loop{from{--ex-a:0deg}to{--ex-a:360deg}}
@keyframes ex-show{from{opacity:0}to{opacity:1}}
@keyframes ex-mark{0%{opacity:0;scale:1.5}60%{opacity:1;scale:.95}100%{opacity:1;scale:1}}
@keyframes ex-pd{0%{opacity:0;scale:1.9}12%{opacity:.95;scale:.95}18%{scale:1}80%{opacity:.95}100%{opacity:0;scale:1.02}}

@media (prefers-reduced-motion:reduce){
  #quiz .ex-bub path,#quiz .ex-picked .ex-bub path,#quiz .ex-picked .ex-bub::after,#quiz .ex-check path,#quiz .ex-x path,#quiz .ex-x path+path,#quiz .ex-mk path,#quiz .ex-circ,#quiz .ex-grade b,#quiz .ex-grade small,#quiz .ex-ring,#quiz .ex-note,#quiz .ex-star,#quiz .en-called{animation:none}
  #quiz .ex-pd b{animation:ex-pd-calm 1.75s linear both}
  #quiz #again::after{transition:none}
}
@keyframes ex-pd-calm{0%{opacity:0}8%{opacity:.95}82%{opacity:.95}100%{opacity:0}}