/* Printed answer sheets + print preview (student and teacher) */
/* print preview + printed sheets */
#printview { display: none; }
body.printing #app, body.printing #layer, body.printing .demo-banner, body.printing .toast { display: none !important; }
body.printing #printview { display: block; background: #E5EAF0; min-height: 100vh; }
.pv-bar { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
.pv-pages { padding: 20px 12px 60px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sheet { background: #fff; width: 100%; max-width: 8.5in; padding: 0.55in 0.6in; box-shadow: 0 2px 12px rgba(0,0,0,.15); color: #111; font-size: 12.5px; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #123B5E; padding-bottom: 10px; gap: 16px; }
.sh-brand { font-size: 24px; font-weight: 700; color: #123B5E; letter-spacing: -.5px; }
.sh-brand span { color: #E8860F; }
.sh-centre { font-size: 12px; color: #536273; }
.sh-title { text-align: right; }
.sh-title b { display: block; font-size: 17px; }
.sh-title span { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #536273; }
.sh-info { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 12px; margin: 14px 0; }
.sh-info small { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #536273; }
.sh-info b { font-size: 15px; }
.sh-score { background: #123B5E; color: #fff; border-radius: 8px; padding: 8px 12px; }
.sh-score small { color: #C9D6E3; }
.sh-score b { font-size: 20px; display: block; }
.sh-score span { font-size: 12px; }
.sh-secs { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.sh-secs th, .sh-secs td { border-bottom: 1px solid #D5DDE6; padding: 5px 8px; text-align: left; }
.sh-secs th { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #536273; }
.sh-legend { font-size: 11px; color: #536273; margin: 6px 0 10px; }
.sh-ans.compact { column-count: 2; column-gap: 28px; }
.sh-sec { font-weight: 700; font-size: 13px; color: #123B5E; border-bottom: 1.5px solid #123B5E; padding: 8px 0 3px; margin-bottom: 2px; break-after: avoid; page-break-after: avoid; }
.sh-q { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: start; padding: 4px 0; border-bottom: 1px solid #EEF2F6; break-inside: avoid; page-break-inside: avoid; }
.sh-n { font-weight: 600; color: #536273; text-align: right; }
.sh-m { font-weight: 700; text-align: center; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; font-size: 12px; color: #fff; background: #8996A5; }
.st-correct .sh-m { background: #1E7A45; } .st-wrong .sh-m { background: #C0392B; } .st-bonus .sh-m { background: #5B4BC4; }
.st-pending .sh-m { background: #1A6FB0; } .st-partial .sh-m { background: #C77A00; }
.sh-b { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sh-p { flex-basis: 100%; white-space: pre-line; }
.sh-img { flex-basis: 100%; }
.sh-b img { display: block; max-width: 360px; max-height: 120px; object-fit: contain; object-position: left; }
.sh-g { font-weight: 600; }
.sh-lbl { color: #536273; font-size: 11px; }
.sh-b img + .sh-lbl { margin-left: 0; }
.st-wrong .sh-g { color: #C0392B; }
.sh-r { color: #1E7A45; font-weight: 700; }
.st-bonus .sh-r { color: #5B4BC4; }
.sh-w { flex-basis: 100%; white-space: pre-wrap; background: #F5F7FA; border-radius: 4px; padding: 4px 6px; }
.sh-pts { font-weight: 700; white-space: nowrap; }
.sh-foot { margin-top: 14px; font-size: 10px; color: #8996A5; text-align: center; }
/* black & white */
.sheet.bw, .sheet.bw * { color: #000 !important; }
.sheet.bw .sh-head { border-color: #000; }
.sheet.bw .sh-score { background: #fff; border: 2px solid #000; }
.sheet.bw .sh-sec { border-color: #000; }
.sheet.bw .sh-m { background: #fff !important; border: 1.5px solid #000; line-height: 17px; }
.sheet.bw .st-wrong .sh-m { background: #000 !important; color: #fff !important; }
.sheet.bw .st-wrong .sh-g { text-decoration: line-through; font-weight: 400; }
.sheet.bw .sh-r { text-decoration: underline; }
.sheet.bw .sh-w { background: #fff; border: 1px solid #000; }
.sheet.bw .sh-secs th, .sheet.bw .sh-secs td { border-color: #000; }
.sheet.bw .sh-q { border-color: #999; }
.sheet.bw .sh-b img { filter: grayscale(1); }
@media (max-width: 640px) { .sheet { padding: 20px 16px; } .sh-info { grid-template-columns: 1fr 1fr; } .sh-ans.compact { column-count: 1; } }
@page { size: letter; margin: 0.45in; }
@media print {
  body { background: #fff !important; }
  body.printing #printview { background: #fff; }
  .pv-bar { display: none !important; }
  .pv-pages { padding: 0; gap: 0; display: block; }
  .sheet { box-shadow: none; max-width: none; width: auto; padding: 0; font-size: 11.5px; page-break-after: always; break-after: page; }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
  .sh-info { grid-template-columns: 1.6fr 1fr 1fr 1.2fr !important; }
  .sh-ans.compact { column-count: 2 !important; }
}

.pv-help { font-size: 13px; color: #D5E0EA; }
@media print { .pv-help { display: none !important; } }

/* code slips */
.slips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; max-width: 8.5in; background: #fff; }
.slip { border: 1.5px dashed #9FB2C6; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; break-inside: avoid; page-break-inside: avoid; color: #111; background: #fff; }
.slip-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: #536273; }
.slip-top .sh-brand { font-size: 18px; }
.slip-for { font-size: 12px; color: #333; }
.slip-main { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.slip-main small { font-size: 9px; letter-spacing: 1.5px; color: #536273; }
.slip-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 30px; font-weight: 700; letter-spacing: 6px; color: #123B5E; }
.slip-main p { margin: 4px 0 0; font-size: 11px; line-height: 1.4; }
.slip-qr { width: 90px; height: 90px; flex: none; }
.slip-qr svg { width: 90px; height: 90px; display: block; }
@media (max-width: 640px) { .slips { grid-template-columns: 1fr; } }
@media print { .slips { max-width: none; } .slip { min-height: 1.9in; } }

/* time on each question (teacher copy, or when a teacher releases times) */
.sh-t { margin-left: auto; white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #EEF2F7; color: #334; align-self: center; }
.sh-t.rush { background: #FDECEC; color: #B3261E; }
.sh-t.stuck { background: #FFF1E0; color: #8A4B00; }
.sheet.bw .sh-t, .sheet.bw .sh-t.rush, .sheet.bw .sh-t.stuck { background: #fff; border: 1px solid #999; color: #000; }
.sh-tc { background: #B3261E; color: #fff; font-weight: 800; letter-spacing: 2px; font-size: 12px; text-align: center; padding: 5px; margin-bottom: 14px; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet.bw .sh-tc { background: #000; }