/* Test Simulator: the look shared by index.html (the exam) and bank.html (the question maker).
   Everything here is taken from the answer sheet itself. */
:root{
  --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --wide:"Arial Black","Helvetica Neue",Arial,sans-serif;
  --serif:"PT Serif","Times New Roman",Times,serif;
  --hand:"Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
  --pencil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M2.5 23.5l2-6.5L17.5 4l4.5 4.5L9 21.5z' fill='%23f2c230' stroke='%231b1b1b' stroke-width='1.1' stroke-linejoin='round'/><path d='M2.5 23.5l2-6.5 4.5 4.5z' fill='%23ead8b8' stroke='%231b1b1b' stroke-width='1.1' stroke-linejoin='round'/><path d='M2.5 23.5l.9-2.9 2 2z' fill='%231b1b1b'/><path d='M15.3 6.2l4.5 4.5' stroke='%231b1b1b' stroke-width='1.1'/></svg>") 3 23, pointer;
}
/* The questionnaire pages and the answer sheet are paper: they keep these light colours in either mode. */
:root,[data-theme="light"],.pg,.sheetpaper{
  --blue:#1046ac; --bluetext:#1046ac; --onblue:#fff; --bluehover:#0c3a92;
  --line:#3d6fd3; --soft:#9db8ec; --tint:#edf3ff;
  --ink:#15171c; --ink2:#4a505c; --bg:#f2f0e9; --desk:#d8d2c4; --desk2:#c8c1b1; --red:#c62b21;
  --card:#fff; --field:#fff; --paper:#fff; --paperink:#111; --handink:#33353c; --dim:#8b96ad; --dimbg:#f4f5f8;
  --mark:linear-gradient(98deg,#3a3a41,#1d1d22 48%,#34343a);
}
/* dark is the default for everything around the paper; the switch on the cover and in the maker goes back to light */
[data-theme="dark"]{
  color-scheme:dark;
  --blue:#2a63d6; --bluetext:#9dbdff; --onblue:#fff; --bluehover:#3b74e6;
  --line:#7ea4f2; --soft:#3a4f7c; --tint:#18233c;
  --ink:#e8e6e0; --ink2:#a9adb8; --bg:#111215; --desk:#17181c; --desk2:#1d1f24; --red:#ff7468;
  --card:#1b1d22; --field:#14161a; --paper:#24262b; --paperink:#ebe9e3; --handink:#ecebe6; --dim:#6f7890; --dimbg:#15171b;
  --mark:linear-gradient(98deg,#f4f4f7,#dcdce3 48%,#eeeef2);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

.box{background:var(--card);border:1.5px solid var(--blue)}
.hbar{background:var(--blue);color:var(--onblue);font:700 12.5px/1.15 var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:8px 10px;text-align:center}
.btn{display:inline-block;background:var(--card);border:1.5px solid var(--blue);color:var(--bluetext);font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.06em;padding:7px 12px;cursor:pointer;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--tint)}
.btn.flat{border-color:transparent;background:transparent}
.btn.flat:hover{background:var(--tint)}
.btn.solid{background:var(--blue);color:var(--onblue)}
.btn.solid:hover{background:var(--bluehover)}
.btn.warn{border-color:var(--red);color:var(--red)}
.btn[disabled]{opacity:.45;cursor:default}
.seg{display:inline-flex;border:1.5px solid var(--blue);background:var(--card)}
.seg button{position:relative;border:0;background:var(--card);color:var(--bluetext);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1.5px solid var(--blue)}
.seg button.on{background:var(--blue);color:var(--onblue)}
.lbl{font-weight:700;font-size:11.5px;letter-spacing:.08em;color:var(--bluetext);text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px}
.chips span{border:1.5px solid var(--soft);background:var(--card);padding:5px 9px}
.chips span.bad{border-color:var(--red);color:var(--red)}

/* ---------- a bracket box you shade ---------- */
.bxs{--px:26px;--py:34px;--bw:15px;--bh:27px;--mw:15px;--mh:27px}
.cell{position:relative;display:flex;align-items:center;justify-content:center;width:var(--px);height:var(--py);cursor:var(--pencil);font-style:normal;user-select:none;-webkit-user-select:none}
.bx{position:relative;display:flex;align-items:center;justify-content:center;width:var(--bw);height:var(--bh);font:400 calc(var(--bh)*.5)/1 var(--sans);color:var(--line);font-style:normal}
/* the letter or digit is centred by its own height, capital top to baseline, so it sits mid-box in any browser */
.bx b{display:block;font-weight:400;line-height:1;text-box:trim-both cap alphabetic}
.bx::before,.bx::after{content:"";position:absolute;left:0;right:0;height:24%;border:1px solid var(--line)}
.bx::before{top:0;border-bottom:0}
.bx::after{bottom:0;border-top:0}
.mk{position:absolute;left:50%;top:50%;width:var(--mw);height:var(--mh);margin:calc(var(--mh)/-2) 0 0 calc(var(--mw)/-2);background:var(--mark);border-radius:1.5px;opacity:0;transform:rotate(var(--r,0deg)) scale(.7);transition:opacity .09s,transform .11s;pointer-events:none;text-decoration:none}
.cell:hover .mk,.shade:hover .mk{opacity:.16;transform:rotate(var(--r,0deg))}
.cell.sm .mk{opacity:.12;filter:blur(.6px);transform:rotate(var(--r,0deg)) scale(1.06)}
.cell.on .mk{opacity:.94;filter:none;transform:rotate(var(--r,0deg))}
/* after handing in: the keyed box, where you did not shade it alone, is shaded in red */
.cell.fix::after{content:"";position:absolute;left:50%;top:50%;width:var(--mw);height:var(--mh);margin:calc(var(--mh)/-2) 0 0 calc(var(--mw)/-2);background:linear-gradient(98deg,#d2372c,#b8241a 48%,#cf3328);border-radius:1.5px;opacity:.9;transform:rotate(var(--r,0deg));pointer-events:none}
/* a whole button that carries one bracket box, shaded when the button is on */
.shade{cursor:var(--pencil)}
.shade[disabled]{cursor:default}
.shade[disabled]:hover .cell:not(.on) .mk{opacity:0}

/* ---------- questionnaire: white paper pages ---------- */
.bk{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0 36px}
.pg{position:relative;flex:none;background:var(--paper);color:var(--paperink);font-family:var(--serif);line-height:1.32;box-shadow:0 1px 0 rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.2)}
.pg-in{position:absolute;left:var(--mx);right:var(--mx);top:calc(var(--mx)*.95);bottom:calc(var(--mx)*1.08);overflow:hidden}
.pg-ft{position:absolute;left:var(--mx);right:var(--mx);bottom:calc(var(--mx)*.44);display:flex;justify-content:space-between;gap:1em;font-size:.74em;letter-spacing:.03em;text-transform:uppercase}
.pg-ft span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pg-ft span{white-space:nowrap}
.hd{text-align:center;border-bottom:3px double var(--paperink);padding-bottom:.55em;margin-bottom:.8em}
.hd-t{font-weight:700;font-size:1.22em;letter-spacing:.08em}
.hd-s{font-weight:700;font-size:1.05em;margin-top:.1em;text-transform:uppercase}
.hd-r{display:flex;justify-content:space-between;font-weight:700;font-size:.9em;margin:.5em 0 .45em}
.hd-i{text-align:justify;font-size:.92em}
.part{font-weight:700;text-transform:uppercase;margin:.9em 0 .45em;letter-spacing:.02em}
.part + .dir{margin-top:-.3em}
.dir{font-style:italic;margin:0 0 .6em}
.dir b{font-style:normal}
.sit{border:1px solid var(--paperink);padding:.45em .65em;margin:0 0 .7em;text-align:justify}
.q{position:relative;display:flex;gap:.4em;margin:0 0 .62em}
.qn{flex:0 0 1.75em;text-align:right;white-space:nowrap}
.qb{flex:1;min-width:0}
.stem{margin:0 0 .15em;text-align:justify}
.opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:1em}
.opts.long{grid-template-columns:1fr}
.opts li{display:flex;gap:.4em}
.pts{list-style:none;margin:.1em 0 .25em;padding:0 0 0 .2em}
.pts li{display:flex;gap:.5em}
.pts li > span:first-child{flex:0 0 1.6em;text-align:right}
.match{display:grid;grid-template-columns:1.35fr 1fr;gap:1.2em;margin:0 0 .7em}
.match h5{margin:0 0 .3em;font-size:1em;text-align:center;text-decoration:underline}
.match .q{margin-bottom:.35em}
.match ol{list-style:none;margin:0;padding:0}
.match ol li{display:flex;gap:.4em;margin-bottom:.1em}
/* the key, written in red: only the question maker's proof shows it */
.why{margin:.15em 0 0;color:var(--red);font-style:italic;font-size:.9em;text-align:left}

/* ---------- answer sheet, redrawn ---------- */
.sheetpaper{background:var(--paper);padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.26)}
.vs{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans)}
.vs-blk{background:var(--paper);border:1.5px solid var(--soft);padding:7px 8px}
.vs-code{background:var(--paper);border:1.5px solid var(--blue)}
.vs-side{display:flex;flex-direction:column;gap:10px}
.vs-h{background:var(--blue);color:var(--onblue);font:700 max(11.5px,calc(var(--px)*.5))/1.12 var(--sans);text-align:center;padding:.5em 0}
.vs-wr{display:flex;border-bottom:1.5px solid var(--blue)}
.vs-wi{width:var(--px);height:calc(var(--py)*1.2);border-left:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;font:700 max(15px,calc(var(--px)*.78))/1 var(--hand);color:var(--handink)}
.vs-wi:first-child{border-left:0}
.vs-cg{padding:4px 0}
.vs-row{display:flex;align-items:center;height:var(--py)}
.vs-num{width:var(--nw);text-align:right;padding-right:calc(var(--px)*.3);font:700 calc(var(--bh)*.64)/1 var(--sans);color:var(--bluetext)}

/* wherever the key is shown (the proof, and the review after handing in): under each item, the answer in bold
   and then the reason in italics, in the paper's own typeface */
.proof .ans,.proof .why{font-family:inherit;font-size:.9em;line-height:inherit;color:var(--red);text-align:left;text-indent:0;padding:0}
.proof .ans{margin:.4em 0 0;font-weight:700;font-style:normal}
.proof .why{margin:.05em 0 0;font-weight:400;font-style:italic}

/* a picture with an item or a situation */
.fig{margin:.15em 0 .55em}.fig img{display:block;height:auto;max-width:100%}
.sit .fig{margin:.6em 0 .2em;text-align:left}

/* a picture inside a question or a choice */
.ipic{display:inline-block;vertical-align:middle;height:auto;margin:.15em 0}
.opts li .ipic{display:block}