/* Final Assessment and certificate (v16). Uses the tokens in css/ui.css; adds the three grade colours. */
:root{--grade-pass-bg:#E3F7EA;--grade-pass:#157A40;--grade-merit-bg:#E4E4FB;--grade-merit:#3D3DAE;--grade-dist-bg:#FFF1CC;--grade-dist:#8F5C00;--grade-fail-bg:#FFF4D6;--grade-fail:#6B4A00}
.grade{display:inline-flex;align-items:center;border-radius:99px;padding:2px 14px;font:800 .95rem var(--f-d);white-space:nowrap}
.grade.g-pass{background:var(--grade-pass-bg);color:var(--grade-pass)}.grade.g-merit{background:var(--grade-merit-bg);color:var(--grade-merit)}
.grade.g-distinction{background:var(--grade-dist-bg);color:var(--grade-dist);box-shadow:inset 0 0 0 2px var(--turmeric)}.grade.g-fail{background:var(--grade-fail-bg);color:var(--grade-fail)}

.xhost{max-width:760px;margin:0 auto}
.xintro .xlvl{display:flex;gap:14px;align-items:center}.xintro .xlvl h2{margin:0;font-size:1.5rem}.xintro .te{font-size:2.6rem}
.xrules{margin:.4rem 0 0;padding-left:1.2rem;display:grid;gap:6px}
.xneeds,.xsecs{display:grid;gap:10px;margin:.6rem 0 1rem}
.xneed,.xsec{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.xsec{grid-template-columns:minmax(0,1fr) auto}
.xneed .xtick{grid-row:span 2;font:800 1.2rem var(--f-d);color:var(--muted);text-align:center}.xneed.ok .xtick{color:var(--grade-pass)}
.xneed .xn,.xsec .xn{display:flex;flex-direction:column;line-height:1.2}.xneed .xn small,.xsec .xn small{color:var(--muted)}
.xneed .xc,.xsec .xc{font:800 .95rem var(--f-d);color:var(--core-d)}
.xneed .bar,.xsec .bar{grid-column:2/-1}.xsec .bar{grid-column:1/-1}
.xpart{display:flex;gap:10px;align-items:center;margin-bottom:8px}.xpart small{color:var(--muted)}
.qopt.picked{border-color:var(--core-d);background:var(--core-l);box-shadow:0 5px 0 var(--core)}
.xres{text-align:center}.xres .mascot{width:120px;margin:0 auto}.xgrade{margin:.4rem 0}.xpct{font:800 3.6rem/1 var(--f-d);margin:.2rem 0;color:var(--core-d)}
.xres .xsecs{text-align:left;max-width:520px;margin-inline:auto}
.xbest{text-align:center}

/* the certificate: designed at one size and scaled with container units, so screen and paper match */
.xcert{container-type:inline-size;width:100%;max-width:900px;aspect-ratio:1.414;margin:0 auto;background:#fff;color:var(--ink);font-family:var(--f-d);padding:1.6cqw;border:1.2cqw double var(--core-d);position:relative}
.xcert .xc-frame{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;border:.25cqw solid var(--turmeric);padding:1.4cqw 3cqw}
.xcert .xc-band{width:100%;height:1.6cqw;background:radial-gradient(ellipse .55cqw .8cqw at 50% 50%,var(--turmeric) 96%,transparent) 0 0/2.4cqw 100% repeat-x,linear-gradient(var(--core),var(--core)) 0 50%/100% .25cqw no-repeat}
.xcert .xc-logo{width:8cqw;height:8cqw;border-radius:50%;margin:0}
.xcert p{margin:0}.xcert .xc-org{font:700 1.7cqw var(--f-d);color:var(--core-d)}
.xcert .xc-title{font:800 5.4cqw/1 var(--f-d);margin:0;color:var(--ink)}.xcert .xc-sub{font:700 1.5cqw var(--f-d);letter-spacing:.3em;color:var(--muted)}
.xcert .xc-line{font:500 1.6cqw/1.35 var(--f-b);color:var(--muted);max-width:88%;text-wrap:balance}
.xcert .xc-name{font:800 5.6cqw/1.1 var(--f-d);color:var(--core-d);border-bottom:.2cqw solid var(--line);padding:0 4cqw .4cqw;max-width:90%;overflow-wrap:anywhere}
.xcert .xc-lvl{font:800 2.8cqw var(--f-d)}.xcert .xc-cls{font:600 1.5cqw var(--f-b);color:var(--muted)}
.xcert .xc-result{display:flex;gap:1.6cqw;align-items:center}.xcert .xc-result b{font:800 3cqw var(--f-d);color:var(--core-d)}.xcert .xc-result .grade{font-size:2cqw;padding:.2cqw 1.6cqw}
.xcert .xc-foot{width:100%;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:2cqw;align-items:end}
.xcert .xc-foot>div{display:flex;flex-direction:column;align-items:center;gap:.3cqw}.xcert .xc-foot b{font:800 1.9cqw var(--f-d)}.xcert .xc-foot small{font:600 1.2cqw var(--f-b);color:var(--muted)}
.xcert .xc-sign i{display:block;width:100%;height:0;border-bottom:.2cqw solid var(--ink);margin-bottom:.4cqw;min-height:3.6cqw}
.xcert .xc-id{letter-spacing:.08em}.xcert .xc-verify{font:600 1.15cqw var(--f-b);color:var(--muted);overflow-wrap:anywhere}
.certmodal .xcert{margin-bottom:12px}
.modal:has(.certmodal){max-width:min(980px,96vw)}
@page xc{size:A4 landscape;margin:8mm}
@media print{
  body.printing-xcert>*:not(#xcertprint){display:none!important}
  body.printing-xcert{background:#fff!important;margin:0;min-height:0}
  body.printing-xcert,html:has(body.printing-xcert){height:auto}
  body.printing-xcert .xcert{page:xc;width:270mm;max-width:none;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){.xneed .bar i,.xsec .bar i{animation:none}}