/* Free practice paper page. Uses the site tokens from site.css. */
.paper{max-width:46em}
.q{margin:0 0 18px;padding:18px 18px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-card);min-inline-size:0}
.q legend{float:left;width:100%;padding:0;margin:0 0 12px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.q legend .n{font-family:var(--mono);color:var(--pine);margin-right:4px}
.q .opts{clear:both;display:grid;gap:8px;margin:0 0 12px}
.q .opt{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;cursor:pointer;color:var(--body);line-height:1.45;overflow-wrap:anywhere}
.q .opt:hover{border-color:var(--pine);background:var(--pine-tint)}
.q .opt input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--pine)}
.q .opt .L{flex:none;font-family:var(--mono);font-weight:600;color:var(--pine);width:1.2em}
.q .opt:has(input:focus-visible){outline:3px solid var(--spark);outline-offset:2px}
.q.right .opt.chosen{border-color:var(--pine);background:var(--pine-tint)}
.q.wrong .opt.chosen{border-color:var(--brick);background:var(--brick-tint)}
.q.wrong .opt.chosen:after{content:"your answer";margin-left:auto;font-size:13px;color:var(--brick-dark);white-space:nowrap}
.q.marked .opt.key{border-color:var(--pine);background:var(--pine-tint);font-weight:600;color:var(--ink)}
.q .ans{margin:0}
.q .ans summary{min-height:48px}
.q .ans .where{font-size:15px}
.q .ans .src{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.q .mark{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600}
.q.right .mark{background:var(--pine-tint);color:var(--pine-dark)}
.q.wrong .mark{background:var(--brick-tint);color:var(--brick-dark)}
.q.unanswered .mark{background:var(--stone-tint);color:var(--muted)}
.score{margin:28px 0 8px}
.score .btns{margin:14px 0}
.score .btn{font:inherit;font-weight:600;cursor:pointer}
.score .result{font-size:19px;font-weight:600;color:var(--ink);margin:14px 0 0}
.score .result:empty{margin:0}  /* keep it in the tree so aria-live announces the first result */
.score .result small{display:block;font-size:15px;font-weight:400;color:var(--body);margin-top:6px}
@media (min-width:600px){.q{padding:22px 22px 16px}}