/* The trainee's exam page. Everything on it is built so that what a screenshot would show is traceable to one person. */
body.exam { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.exam input, body.exam textarea { -webkit-user-select: text; user-select: text; }
#wm { position: fixed; inset: 0; z-index: 30; pointer-events: none; background-repeat: repeat; }
.exam-top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.exam-top .wrap { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 22px; padding: 4px 12px; border-radius: 10px; background: #f1f3f6; }
.timer.low { background: #fff1d6; color: var(--warn); }
.timer.vlow { background: #fde8e6; color: var(--bad); }
.progressbar { height: 6px; background: #e8ebef; }
.progressbar i { display: block; height: 100%; background: var(--primary); }
.q-area { max-width: 820px; margin: 0 auto; padding: 22px 16px 120px; }
.q-stem { font-size: 22px; line-height: 1.4; font-weight: 600; margin: 8px 0 22px; white-space: pre-wrap; }
.opt { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 12px; font: inherit; font-size: 19px; line-height: 1.35; cursor: pointer; min-height: 64px; color: var(--ink); }
.opt .k { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #f1f3f6; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.opt[aria-pressed=true] { border-color: var(--primary); background: #fdecef; }
.opt[aria-pressed=true] .k { background: var(--primary); color: #fff; }
.q-actions { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px; z-index: 6; }
.q-actions .inner { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.grid-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.grid-nav button { width: 48px; height: 48px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); font: inherit; font-weight: 700; cursor: pointer; }
.grid-nav button.done { background: #e5f4ec; border-color: #9bd0b4; }
/* when the page loses focus the question is hidden completely (not blurred: cheaper on older iPads, and nothing to recover) */
body.guard .q-area, body.guard .q-actions, body.guard .exam-top { visibility: hidden; }
#guardmsg { position: fixed; inset: 0; z-index: 35; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 22px; font-weight: 700; background: rgba(246, 247, 249, .6); }
body.guard #guardmsg { display: flex; }
.result-big { font-size: 56px; font-weight: 800; margin: 6px 0; }
@media print { body.exam * { display: none !important; } }